AngularJS for Complete Beginners

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.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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.

Official Logo

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

<!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>

<!DOCTYPE html>

<html>

<body>

...

</div>

</body>

</html>

ng-model

To bind an input field with the application for further use:

<input type="text" ng-model="name">

1	<input type="text" ng-model="name">

ng-bind

To bind text field data with the view:

<p ng-bind="name"></p>

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.

<!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>

<!DOCTYPE html>

<html>

<body>

<p>Input your name in the input box:</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.

<!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>

<!DOCTYPE html>

<html>

<body>

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:

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

<!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>

<!DOCTYPE html>

<html>

<body>

<p>Input your name in the input box:</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

<p ng-bind="name"></p>

1	<p ng-bind="name"></p>

expression

<p> {{ name }} </p>

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.

var app = angular.module('app', []);

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.

var app = angular.module('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.

<html ng-app="app">
  <head></head>
  <body></body>
</html>

</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.

<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>

<h1>{{username}}</h1>

</div>

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

angular
  .module('app', [])
  .controller('MyCtrl', function () {

});

angular

.module('app', [])

.controller('MyCtrl', function () {

});

Separating Call-back Method and Controller

function MyCtrl () {

}

angular
  .module('app', [])
  .controller('MyCtrl', MyCtrl);

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.

<p>The name is {{ Name | uppercase }}</p>

1	<p>The name is {{ Name \| uppercase }}</p>

Complete Code

<!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>

<!DOCTYPE html>

<html>

<body>

<p>The name is {{ Name | uppercase }}</p>

</div>

angular.module('myApp', []).controller('personCtrl', function($scope) {

$scope.Name = "John Doe",

});

</script>

</body>

</html>

Similarly, you can also add filters to directives as well.

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<ul>

</li>

</ul>

</div>

Custom Filters

AngularJS also provides facility to create custom filters by using filter(‘name’, function() { <do-something> }); constructor.

<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) {
     
       ...

    }
});

</li>

</ul>

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!

Introduction to AngularJS

Basic Building Blocks

1- Directives

Complete Code

Custom Directives

2- Expressions

Complete Code

Difference between ng-bind and expression

3- Modules

Setter and Getter

Bootstrap

4- Scopes

5- Controllers

Creating a Controller

6- Filters

Add Filter to an Expression

Complete Code

Custom Filters

Share this: