AngularJS Overview Series - 2

Before reading this article, I highly recommend reading my previous part:

• AngularJS Overview Series - 1

Introduction

  

In the previous part of Hands on Agular Js-I we discussed the basics and the architecture of AngularJS and few directives. Here in this part we will check out the other important directives and how Angular interacts with Controller and how model is being done on the go. The directives we will discuss in this part of series are very important in order to start and feel the magic of Angular. Here, actually we go into the depth and controls of Angular. Let's have a look.

Angular directives

Here we start with the other important directives that would come in handy while working on the Angular.

ng-module

Angular modules are the most important directives, they define an angular application. They are the parent set for the other directives or functions of the application, like controllers. Controllers are always contained within the modules, along with other dependencies. This is the modular approach in Angular. Creating modules for separate sections segregates it and creates partition/module wise applications. The modules are defined syntactically as below:

var app = angular.module("app-Services", []);

As per the above snippet, we have created an angular module and assigned it to the variable named app. The module name is app-Services. The module is actually defined in the document function of a separate Module script file and reference is added to the file wherever required. The definition provided by the Angular Doc is that Module is required to configure the $injector and it contains the services, directives, controllers, and other dependencies. $injectors are the service used to retrieve the pre-defined object instances, invoke methods, and load the required modules.

ng-controller

This is another set of directives that defines the controller of the application, which controls the data of the application. They are simple objects defined under the scope of the module. There can be any number of controllers for a specific module. Controllers are defined syntactically as:

var app = angular.module('app-Services', []);
app.controller('myFirstController', function ($scope)
{
    $scope.firstName = "Suraj";
    $scope.lastName = "Sahoo";
});

The above snippet is a simple controller defined under the module app-Services. The name of the controller is myFirstController and under its scope, two members are initialized, that is firstName & lastName. Thus, when an object of controller is created in the html, which will we see below:

{{ctrlFirst.firstName}} {{ctrlFirst.lastName}}

Thus, as we see above, the html tag div has the scope for the Module we defined above and the controller defined for the module with the members firstName & lastName. When the controller is instantiated inside the scope of the div and Module, we have the right to access the data defined inside the controller function. $scope defined within the controller function is the context via which the model execution is implemented inside the controller. It actually acts as a watch on the model values while binding to the DOM element in the HTML. The $scope can also be used using the this object. The controller also accepts the $http to execute the http services in order to call the api's to get post and delete any data through the services. Let's see how the controller function can be separated from the declaration and defined as a function.

var app = angular.module('app-Services', []);
app.controller('myFirstController', myFirstController);

function myFirstController($http, $scope)
{
    $scope.firstProperty = 'XYZ';
    $http.get('your url').then(function ()
    {
        //do whatever.. }).catch(function (){ //do whatever.. }).finally(function (){ //do whatever.. });
    }
});

Now in the above, $http is the http module which is used to call the get and post methods or to interact with the server to fetch the records. Call the url, like in Ajax we have success and error methods, here we have, then() block, which after fetching a successful response, has the logic of what to do next. Actually, the $http returns a promise, so we catch that in the then block and attach the response to the scope. The different $hhtp methods are:

• $http.get: To retrieve information from server for a url requested by the user
• $http.head: Transfers only the header and the status line only, but is same as GET
• $http.post: As self explanatory it is, used to send the information entered by user to the server.
• $http.put: This is same as the POST but is used to create the current representation of the target resource or overwrite it for the same URL
• $http.delete: This ensures that the current resource for the requested URL is deleted by the server.

The catch finally is same as the try.. catch.. blocks, where inside the catch we can also have the 'then' block in order to perform tasks after catch and similarly the 'finally' block to ensure what finally the code block will execute.

Filters in Angular JS

These are very interesting features provided by  Angular, which can be used frequently and with ease. We will discuss below the pre-defined filters provided by the framework. We will see the use syntactically after the line-by-line explanation.

• currency:- This is used as the name suggests, to convert a simple number into the format of a currency.
• date:- This is used to format dates in different formats.
• filter:- An interesting filter which actually filters few data from a set of result set data.
• json:- Format an normal object into JSON format.
• limitTo:- Limits an set of array to specified number of elements or objects.
• lowercase:- Converts/formats an string to lower case character.
• number:- Format a simple number into a string.
• orderby:- Orders an array based on an expression.
• uppercase:- Format the string into a upper case character.

Lets see the work around using the snippets:

var app = angular.module('app-Services', []);
app.controller('myFirstController', function ($scope)
{
    $scope.firstName = "Suraj";
    $scope.lastName = "Sahoo";
});
{
    {
        ctrlFirst.firstName | uppercase
    }
}
{
    {
        ctrlFirst.lastName\ lowercase
    }
} //Displays firstName is UPPERCASE and lastName in lowercase
{
    {
        x.name + ', ' + x.age
    }
}
{
    {
        price | currency
    }
}
{
    {
        name
    }
} //Filters names based on names containing 'S'

In the above snippets, we have used another directive i.e, ng-repeat, that is used to loop through the list of records just like for each loop. Another thing here is to note that the filter used in the above snippet, if we use the object containing the data or list of records/names like:



{{ name }} 

What the above snippet does is  it loops through the names, and based on the entry in the textbox or the user input - supposethe user enters 'S' -  then the data listed are filtered on the object with the names that starts With 'S'. Thus, we see how these filters become handy and really useful.

Conclusion

Thus, here in this part we discuss most of the great features of Angular and see a few snippets to be used in progress. As I said earlier, in the succeeding modules we will gradually come across more interesting features and overall use of Angular.

What's Next?

We will next come across how to build applications using Asp.NET MVC, EF Code First, Angular JS. That I assureyou will be interesting.

References

W3 schools docs.angularjs.org.