Angular filters

Filters in AngularJS change the display of an expression, we use pipe (|) symbol for filters. Before we go in deep for filters want to tell a short description about an expression in Angular.

Expression in Angular has been just JavaScript expressions and bind data to the browser like a ng-bind, they can be used with numbers, strings, objects and arrays. We use double braces {{}} in Angular to get the use of expressions. Some of the examples are given to you to make it more clear to you.

1. {{1+1}} displays the sum of 1 and 1
2. {{Data [0]}} displays the first occurrence of an array
3. {{ firstName + ” ” + lastName }} displays full name
4. {{emp.salary}} displays the salary
We have some differences when we compare them with JavaScript expressions. Check out the list of differences: 
1. Can’t declare functions and can’t use loops or conditions in Angular expressions
2. JavaScript returns an error when something wrong with an expression, whereas Angular displays it as undefined
3. JavaScript expressions use window object but Angular use scope object


Let’s get back to the filters. Angular has built it filters to make things easier for us. Here is the list of them.
1. currency     – Format a number to display with currency formatting ex: {{343.34 | currency:”USD”}}

2. date               – Formats date to string based on the given format.
3. number        – Formats a number as text ex: {{w3easystep | number:2}}
4. lowercase    – Displays text in lowercase ex: {{w3easystep | lowercase}}
5. uppercase   – Displays text in uppercase ex: {{w3easystep | uppercase}}
6. json             – Can be used to display the json.
7. orderby      – Orders given array
8. limitTo      – Creates a new array or a string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string.

We can even create our own custom filters, we will discuss that in our next post in the series of Angular stuff

Hope you like this and bye for now :)


JavaScript libraries to highlight your code

There are many cases where we need to highlight the code, here it comes with some great JavaScript libraries. Check them out

javascript libraries to highlight your code















1. highlightJS
Download the library from https://highlightjs.org/download/ . Copy highlight.pack.js after extracting the zip to your js/ and default.css from styles/ to css/

The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:
Add these lines in <head> tag

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:

The list of supported language classes is available in the class reference. Classes can also be prefixed with either language- or lang-.

To disable highlighting altogether use the nohighlight class:


2. prismJS
Download prism.js and prism.css files from the url http://prismjs.com/download.html and include them in your document


3. rainbowJS
Download the library from https://github.com/ccampbell/rainbow .Copy the js files from js/ to your js/ and theme files from themes/ to css/
First include some markup for code you want to be highlighted:


After this all you have to do is include a css theme file in the head, get them from the url https://github.com/ccampbell/rainbow/tree/master/themes

And include rainbow js + whatever languages you want

Check the demo of all at once place and download

Demo Download

That’s all :)


Free placeholders for every case


1. Online image generator

Online image Generator,Generate images for ad spaces, banner spaces, image spaces and more. Use URLs directly or download images for free.

Have a look!

1. placehold.it

A quick and simple image placeholder service.

Have a look!


Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free!

Have a look!

1. loremflickr.com

LoremFlickr provides placeholder images for every case, web or print, on almost any subject, in any size. It’s simple and free. Just put the custom url in your code.  Images are taken from Flickr.

Have a look!


A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a placeholder.

Have a look!



Dynamic Dummy Image Generator

Have a look!


Lets get started with AngularJS

Lets get started with AngularJS

Hi Guys, lets get started with your first AngularJS program.  Learn how are create web apps with AngularJS with step by step. Going to cover the features of AngularJS in next posts. This is the beginning of AngularJS storm.

Here you will understand the how to install and run your first HelloWorld example.

Why AngularJS:

  •  It provides structure to app
  • Easy to learn
  • Reduces the coding effort and time
  • Suitable for single page apps
  • New vocabulary for HTML markups
  • MVC pattern
  • Has more than 800 modules
  • Has own template engine
  • Read more @ https://angularjs.org/

There are some frameworks likes jQuery, BackboneJS, KnockoutJS etc. ,but angularJS has many features than others.

Read the differences between all frameworks here 

How to install AngularJS:

  • Create a new web page and include Angular library(https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js) in it.
  • Create app.js and include in our web page.
  • Add ng-app and ng-controller to that document as shown below.


-> ng-app is the directive of AngularJS  and DOM reference to the app.

->  We create an app with the value of ng-app.

->ng-controller holds the control of our app.

->  Create a controller in app.js with with the value of ng-controller.

Your app.js will look something like this.

Scope($scope) is the glue between application controller and the view.  and its an object that refers to the application model.  All the scope values can explicitly used in view. Add our first key title and assign the value ‘Hello World!’ to it,

So, we can use title any where in the view with reference to $scope object.  Use {{}} brackets to display the contents of $scope object.

Look at the plunker  below

You will learn data bindings in next post and thanks for reading.







DataWeave – Intelligent Data for your Apps

DataWeave provides data in various sectors of web like data for coupons, weather updates, population, earthquakes etc..  Gives an easy access to APIs, dashboards, alerts and visualization.


  1. Telecom Data API: Provides details of recharge coupons from various telecom operators across all circles.
  2. E-commerce price intelligence; Provides prices from various stores for the selected product, useful for comparison based websites.
  3. Coupons codes API: Provides coupon codes with their details from all online retailers.
  4. For more API features visit http://dataweave.in/apis

How to use DataWeave APIs

  • Sign up  and confirm your account with http://dataweave.in/ to access to all APIs
  • signup-dataweave





  • Grab API key from next page of sign up

How to use DataWeave API with PHP

An example usage of DataWeave APIs with PHP, here you can even use PHP cURL to parse the data.

The above code prints the data in PHP array, we can use it anywhere later.

I hope this post is helpful and thanks.


PHP function to get ID from YouTube URL

Use the following function to get the id from YouTube URL.

 How to use?

That”s all for now.