In this blog, I would like to give introduction and discuss the features of angularjs. If you’re new to Angular and you really haven’t read much about it you can go to http://angularjs.org to get all the information.

Introduction:

 AngularJS is an open-source web application framework maintained by Google.  It is one core library. You can download it from their site. There are two different options. You can go with the “legacy (stable)” or the “latest (unstable)”.

Features:

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

It is a very good SPA framework and perfect for SPAs (Single Page Applications). A Single Page Application is one in which we have a UI page and we can load multiple views into that. In a SPA we can load the initial content upfront and then the different can be loaded on the fly and embedded into the UI. But it’s not just for that, if you wanted you could just use it for separation of code.

We have two-way data binding. It simplifies development and testing of applications by providing a framework for client-side model–view–controller (MVC) architecture.

For DOM manipulation jQLite is built-in which is kind of like the Mini-Me of jQuery. If you want to use more advanced stuff you can even use jQuery and they play really nice together: Angular and jQuery.

When it comes to data binding we have full support for templates. History’s built in. We can share code through factories and services. We have the concept of data-binding with View Models. Dynamically injecting different features at run time through dependency injection.

Supported browsers are Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari)

I am going to explain few of the main directives in AngularJS.

Directives

A directive is really a way to teach HTML new tricks. It extends HTML very easily by simply adding attributes, elements. Any attribute which starts with ng- that is an Angular directive. It’s a built-on directive. You can also write custom ones.

ng-app directive:

            ng-app will initialize the Angular app. we don’t have any code written but we can still do stuff just by adding ng-app.

ng-model directive:

            What ng-model does is behind the scenes it’s going to add a property up in the memory called “name” into what’s called “the scope”. If you’ve ever dealt with the concept of a View’s model called a ViewModel – then what this is really doing behind the scenes is making an empty ViewModel but then filling it with a name property. Now if I want to write out that value then we can simply add a data binding expression.

ng-init directive

            ng-init directive is going to initialize data that we want to actually bind to and display. We will see this directive in the following section.

Data binding Expression:

            Expressions are really cool because if I wanted to put “1 + 1” (Ex. {{1+1}}) and try to write out the result I could do that. The syntax looks like this {{ expression }}. The following example gets the data from num1, num2 textbox and output the product of the data using data binding expression. Using ng-init directive, we initialize the default value.

Result

ng-repeat directive

       Using ng-repeat provides a very easy way to duplicate elements. We can actually iterate through data. I have another directive here called ng-init which is going to initialize data that I want to actually bind to and display. But in real time scenario we’re going to get data from the controllers. For each color in the colors variable write out that color. 

Result

Using Filters:

              The next thing we can do with Angular is apply filters. Let’s say that as we bind to, say an employee name, and when we do that process we want to upper-case it. Now I could upper-case it in the data model, but an easy way to do this type of thing is to apply an AngularJS filter.

All this will do is this pipe [|] is a separator between the data binding statement and a filter. There are few filters built-in such as uppercase, lowercase.

In this example, we’re going to say for each employee in employees I want to filter by “nameText”. The “nameText” is the model used in the input. As they type in the input, the value they type will automatically be applied to first filter down the employees based upon what was typed.  So if you type “ga” and “gan” was in there then it’ll automatically pick me or any other people that start with “ga” or have “ga” in the name. Then we’re going to take those results and filter again – we’re going to order those results by a “name” property.

Result

   

Now we are going to change the above example which uses the MVC architecture.

Views, Controllers and Scope

• View – HTML response which works with directives, filters and data bindings.
• Controller – a special little JavaScript object which control ultimately what data gets bound into the View
• Scope – Which is really another term for ViewModel and the glue between the View and the Controller.

Creating Controller:

Here’s an example of a really simple controller called, employeesController. You’ll see that we pass $scope. This is dependency injection that’s built into AngularJS.

What this is going to do is Angular, when this controller gets used, will automatically inject a scope object in. You’ll see that from there we’ll take that object and add in a property onto it called employees which is simply an array of object literals.

What this controller can do then is serve as the source of the data for the view but the controller again shouldn’t know anything about the view, so how would we possibly communicate employees over? Well that’s why we’re injecting scope. Scope is to be that view between the controller and the view. If we come up to our view up here the scope gets injected and then that scope is going to be automatically bound into the view once the view knows about this controller.

Creating a Controller in a Module

There is a module object and I’ll show you how to create that – you literally just say angular.module. It can be used to configure the routes, create custom filters, custom directives. And also to get data from different sources using Factories, Services, Providers or Values. It is an object container which has all these different things that we see below.

It is really simple to create a module. Once you’ve referenced the Angular script you’re going to have access to an angular object.

With this object, we can get to the jqLite functionality for jQuery DOM –type manipulation. In this example you can see I called my module demoApp. You might wonder what exactly the empty array is for. The answer is this is where dependency injection comes in because your module might actually rely on other modules to get data.

Summary

    ·         AngularJS provides a robust “SPA” framework for building robust client-centric applications.

Key Features:

• Directives and filters
• Two-way data binding
• Views, Controllers, Scope
• Modules and Routes