Introduction to AngularJS
AngularJS is a client-side JavaScript framework. It is a JavaScript library used for Single Page Applications. It uses HTML DOM elements to make it more responsive and fast. The good thing about AngularJS is that it is a free open source framework. It binds with HTML attributes by making use of simple expressions. AngularJS also supports MVC design and uses two-way data binding which provides synchronization between Model and View.
AngularJS is distributed like JavaScript. You can include AngularJS by using simple script tags.
1 |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> |
You can easily get started with AngularJS if you have the basic knowledge of HTML, CSS, JavaScript, and AJAX.

Basic Building Blocks
1- Directives
As AngularJS extends HTML with ng-directives. For AngularJS application, use ng-app directive. To bind the value of HTML controls i.e. input, select and textarea to your AngularJS application, use ng-model directive. To bind application data to HTML view, use ng-bind directive.
Understanding ng-app, ng-model, and ng-bind directives consider the following example.
ng-app
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> ... </div> </body> </html> |
ng-model
To bind an input field with the application for further use:
1 |
<input type="text" ng-model="name"> |
ng-bind
To bind text field data with the view:
1 |
<p ng-bind="name"></p> |
Complete Code
When you run this example, the paragraph will immediately display the data from the text field as the input field is bind to the paragraph.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> <p>Input your name in the input box:</p> <p>Name: <input type="text" ng-model="name"></p> <p>Your Name is: </p><p ng-bind="name"></p> </div> </body> </html> |
Output
If you want to know more about AngularJS directives and Filters, click here.
To read AngularJS API References, click here.
Custom Directives
You can also add custom directives to your application. With these directives, you can add more features to your customised application by using directive(<name> , function(){<do something>}); constructor. To understand the concept lets create a simple Hello World directive.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" hello-world-directive></div> <script> var app = angular.module("myApp", []); app.directive("helloWorldDirective", function() { return { template : "Hello World!" }; }); </script> </body> </html> |
Output
In the above example, module setter is used, and the directive returns a Hello World! message, which is then displayed in the app.
Continue reading to understand the concept of the module.
2- Expressions
AngularJS expressions are an alternate of the ng-bind directive. Expressions also bind the AngularJS data to HTML. To use AngularJS Expressions, write expressions in double braces:
{{ expression }}
The data will be displayed exactly where the expression is placed. To understand the concept of expression modify the previous example and write the expression instead of using ng-bind.
Complete Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> <p>Input your name in the input box:</p> <p>Name: <input type="text" ng-model="name"></p> <p>Your Name is: {{ name }} </p> </div> </body> </html> |
Output
Difference between ng-bind and expression
The only difference is that ng-bind is used as an attribute, but the expression is used as a value.
ng-bind
1 |
<p ng-bind="name"></p> |
expression
1 |
<p> {{ name }} </p> |
3- Modules
The AngularJS Module act as a container for all the components of the application i.e. Controllers.
To create an AngularJS module, use angular.module() method.
Setter and Getter
AngularJS module uses setter and getter.
Setter:
With the setter, you can include all other dependencies as arrays.
1 |
var app = angular.module('app', []); |
Getter:
The getter is used to create Controllers, Directives, Services and other Angular features. For the getter, we omit the dependencies array part as we only need to reference the existing module i.e. app.
1 |
var app = angular.module('app'); |
Bootstrap
To tell the AngularJS where to bootstrap you will need to bind ng-app with the module.
1 2 3 4 |
<html ng-app="app"> <head></head> <body></body> </html> |
4- Scopes
Scopes plays an important role in all the programming languages. In AngularJS, scopes provide two-way data-binding cycles to maintain application state by holding synchronised data. It acts as a bridge between JavaScript and HTML DOM. We use scopes to bind data from the controller to view so only controllers contain scope. To understand the scope, create a scope in the controller and display it using the expression.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{username}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.username = "Jhon Doe"; }); </script> |
$rootscope is another type of scope which is the top level scope. When AngularJS starts the rendering process of the application, it first creates the $rootscope object and then places all the $scope objects as the children of $rootscope.
5- Controllers
The Controller allows the user to interact with model and view. It synchronizes the user interface with the model. In AngularJS controller acts as a bridge between business logic and the presentation logic. We already used the controller in scopes example as ng-controller to display the scope data through expression. The
The controller accepts two parameters; first one is the name of the controller and the second one is the call-back method.
Creating a Controller
There are two possible ways of creating a controller.
Chaining up the Controller with Call-back Method
1 2 3 4 5 |
angular .module('app', []) .controller('MyCtrl', function () { }); |
Separating Call-back Method and Controller
1 2 3 4 5 6 7 |
function MyCtrl () { } angular .module('app', []) .controller('MyCtrl', MyCtrl); |
6- Filters
AngularJS also provides the functionality to add filters for arranging and transformation of the data.
currency
transforms the data into the currency format.date
transforms the date into specified date format.filter
Select a subset of the items from an array.json
transforms the object to a JSON string.limitTo
Limits an array or string to a specified number of elements or characters.lowercase
transforms the specified string to lowercase.uppercase
transforms a string to upper case.number
transforms a number to a string.orderBy
Orders an array by the specified expression.
Add Filter to an Expression
To add a filter to an expression | symbol is used. For better understanding take a Name and convert it to uppercase.
1 |
<p>The name is {{ Name | uppercase }}</p> |
Complete Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ Name | uppercase }}</p> </div> <script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.Name = "John Doe", }); </script> </body> </html> |
Similarly, you can also add filters to directives as well.
1 2 3 4 5 6 7 8 9 |
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div> |
Custom Filters
AngularJS also provides facility to create custom filters by using filter(‘name’, function() { <do-something> }); constructor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul ng-app="myApp" ng-controller="namesCtrl"> <li ng-repeat="x in names"> {{x | myFilter}} </li> </ul> <script> var app = angular.module('myApp', []); app.filter('myFilter', function() { return function(x) { ... } }); |
To debug AngularJS applications, use ‘ng-inspector for AngularJS’ and ‘AngularJS Batarang (Stable)’ with Google Chrome.
Hope that you like this tutorial, Stay tuned for more upcoming tutorials. Stay Blessed!
I’ll go through this for a refresher, but can we get an Angular 2 version of this?
Here > http://www.angular2.com/