Mastering AngularJS for .NET Developers

The use of client-side data binding is becoming more widespread as more and more developers are writing client-side applications. Most of these libraries follow the MVC or Model-View-ViewModel (MVVM) design pattern and some of these libraries directly integrate with the server framework, such as Knockout.js.

The following table illustrates the list of a few client-side data binding libraries that can be used for a client-side application development:

Nowadays, the cross-platform application development that uses the client-side binding is more popular. Most of the client-side script libraries retrieved from the server using the JavaScript Object Notation (JSON) format and dynamic binding of the HTML elements can be achieved by employing the JSON format. This is because JSON uses multiple client-side libraries and it is an advanced subset of JavaScript itself. JSON is a preferred client-side application format that parses and transmits data using a lightweight framework, making reading and writing of data easier.

AngularJS is a client-side JavaScript library, which has been developed based on the MVC design pattern. AngularJS is used for client-side data binding of client-centric applications. It is open source and used by Google Inc. and its Google community. AngularJS assists to create a client-side application that needs HTML, CSS, and JavaScript. AngularJS's JavaScript framework is an effort taken to make both development and testing of application easier.

AngularJS contains additional custom HTML tags. It submits the directives in those custom HTML tags and binds the HTML elements in client side with a model's data using standard JavaScript. The values of the JavaScript variables can be set or retrieved dynamically with JSON resources.

The way AngularJS's data binding and dependency injection works is that it helps to write very less or no code for the client-side binding. AngularJS is a structural framework for dynamic application development. It lets HTML express an application's components very clearly and concisely within the browser. AngularJS proves to be a good candidate to work with the server technology and especially with ASP.NET and Microsoft's MVC.

These days, AngularJS is popular because it extends HTML with additional elements to create a template and to enable DOM for one-way or two-way binding. In real applications, in addition to data binding between view and model, executing the business logic depends on servers. AngularJS has a very rich, built-in support to communicate with the server and it also provides a built-in wrapper for communication with RESTful services.

AngularJS proceeds by minimizing the impedance mismatch between an application's need for constructing a new HTML and document-centric HTML. Thus, as compared to other available libraries, it takes a different approach. Directives are used in AngularJS to convey to the browser how to use a new syntax. Some of the examples of the directives are:

AngularJS has been developed in the belief that it can be used to solve problems that don't require the developer to specify any extra procedures.

The following are the design goals of AngularJS:

In developing client-side applications, AngularJS is not a single piece in the overall package of the AngularJS framework. AngularJS puts the DOM and AJAX code in a well-defined structure. This makes AngularJS opinionated about how a CRUD application should be built. AngularJS has the following features and advantages:

The preceding points should provide ample explanation as to why AngularJS is so useful and powerful. Not all web apps use AngularJS. For instance, if you're writing a game or a computationally intensive mathematics program, there's no reason why AngularJS would suit your explicit downside domain. Except for generic Internet apps, it ought to function as a viable framework.

The model is where the application's data objects are stored. The model doesn't apprehend anything regarding views and controllers. Once a model changes, usually it will give its observers notice that a modification has occurred. A model contains data that represents this state during the application's lifecycle. The model doesn't have direct access to the view or controller. Any modification within the model gets transmitted to the view through the controller. This allows the model to be separated from the view and controller, which helps reusability and quantifiability of the code. We will use an identical model to transmit data to totally different views throughout an application's data request. Views show this data. Controllers manage the link between your model and your views. Models store data, which is often dynamic data from a database; otherwise, you can even get data from a static JSON file, which is the business entity on which the general application operates. Several applications use a persistent storage mechanism (such as a database) to store data. MVC doesn't specifically mention the data access layer; as a result, it's encapsulated by the model. The following is the code example of the JSON data:

    $scope.meal=  {
        'breakfast'   :   'Orange Juice',
        'Lunch'       :   'Fruit Salad',
        'Dinner'      :   'Vegetable Rice'
    }

A view is what's bestowed on the users and the way users interact with the application. The view is formed with HTML, CSS, JavaScript, and other templates. Views show a model's information by using double curly brackets to bind expressions to elements, as shown in the following example. A view would get information from the meal variable that holds the JSON data for breakfast. The code example for view is as follows:

<h1> {{meal.breakfast}} </h1>

The controller is the decision maker and also the glue between a model and view. The controller updates the view when the model changes. Additionally, it adds event listeners to the view and updates the model when the user manipulates the view. Controllers can be used to manage a model and data can be retrieved as well as flaunted to the end user. Wrap the model during a controller function, as shown in the following example:

var app = angular.module('myApp');
app.controller('ctrlFood', function ($scope) {
}
<div ng-controller = "ctrlFood"></div>

A div tag holds a controller directive. Note that ctrlFood in ng-controller= "ctrlFood" is same as the function name.

AngularJS looks like a traditional markup language with some new markup features that are known as templates. Once an AngularJS template starts the application, it parses and processes this new markup from the markup language (template). The markup is named as directives and we'll discuss this in detail in Chapter 2, Learning AngularJS Binding and Directives. Directives apply special behavior to markup language components. As an example, the ng-app attribute is coupled with a directive that mechanically initializes the application. AngularJS additionally defines a directive for the input components that add additional behavior to the element. As an example, the ng-model directive stores or updates the value of the input element.

Another reasonable markup utilized in HTML is the double curly braces filter. Once the page is loaded and it is encountered with this markup, it'll be replaced with the evaluated value of the markup. An expression in HTML may be a JavaScript-like code snippet that permits reading and writing of the variables. These variables don't seem to be global variables. AngularJS provides a scope, which is an object that refers to the application model. It's an execution context for expressions. Scopes are organized in gradable structures that mimic the DOM structure of the application. The markup additionally contains a filter; a filter formats the value of an expression in order to display it for the user. They will be utilized in view templates, controllers, or services, and it's a straightforward task to define your own filter. The vital issue is that AngularJS provides live bindings. Whenever the input values are modified, the values of the expressions are automatically recalculated and the DOM is updated with their values. The construct behind this is often the two-way data binding that we are going to discuss intimately in Chapter 2, Learning AngularJS Binding and Directives.

An example code for a web page that takes your name and favorite car as input and then displays it to the reader with a counter for the car is shown as follows:

<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="AngularControllers.js"></script>
</head>
<body>

<h1><u>Mastering AngularJS for .Net Developer</u></h1>
<div ng-controller="myController">

<label>Name:</label>
<inputtype="text"placeholder="Please enter name"ng-model="name">

<h4ng-show="name">Hello! <b>{{name}}</b> select your favorite car 
from dropdown</h4>

<selectng-model="selectedCar"ng-change="onCarSelectionChanged()">
<optionvalue="">Please select car</option>
<option>Audi</option>
<option>BMW</option>
<option>Mercedes-Benz</option>
<option>Porsche</option>
<option>Volkswagen</option>
</select>

<h3ng-show="selectedCar">
<span style="font-weight:normal">{{name}} your favorite car is 
<b>{{selectedCar}}</b></span>
</h3>

<spanng-show="countCarSelectionChanged> 0">You change your 
favorite car {{countCarSelectionChanged}} times.
</span>

</div>
</body>
</html>

Our logic for AngularControllers.js is as follows:

var app = angular.module('myApp', []);
app.controller("myController", function ($scope) {
    $scope.countCarSelectionChanged = 0;

    $scope.onCarSelectionChanged = function () 
{
$scope.countCarSelectionChanged++;
    };

});

Loading index.html into a browser will then produce what you see in the following screenshot:

There are a few interesting things to note here:

In the preceding code example, to select your favorite car as input in line 1, AngularJS specifies the distinctive HTML attribute, ng-app. This attribute sets the boundaries of the application and is applied on any HTML element within that boundary. The ng-app attribute within the HTML tag is the AngularJS application root element. AngularJS will parse the markup delimited by the application root element and look for any ng- prefixed elements, attributes, or CSS classes. It will match some regular HTML tags, such as input, and select them if they contain the ng- prefixed attributes or CSS classes. These entities will then be mapped to the instances of special AngularJS directives.

The directives are accustomed to adding dynamic behavior to HTML content and introducing a strong, useful, and declarative user interface definition language. All HTML components in an AngularJS application will be related to at least one instance of a scope. A scope links the view, by HTML elements to the code behind the view and during this example by directives. The scope object is initialized and owned by AngularJS components, and also, the view solely references properties and functions of the scope object. The applying root elements will be related to the initial scope of the application. This primary scope is named the root scope, and any AngularJS application can have a minimum of one scope, which is the instance of the root scope.

In the preceding example, ng-controller introduces a directive that maps an AngularJS object called controller to the HTML section delimited by the current element. The controller is defined in the AngularControllers.js script, which is a globally accessible function. We call this function the controller constructor function. Note that the $scope parameter represents the current scope instance. This parameter gets initialized automatically by AngularJS; so, when the controller constructor function is executed, the scope is available and ready to use. Declaring a parameter in a component definition and expecting AngularJS to automatically provide it is the signature of the dependency injection mechanism. The controller will be discussed in Chapter 2, Learning AngularJS Binding and Directives.

The scope passed to the controller is also attached to the view represented by the HTML element with the ng-controller attribute. The controller and view share data through the model represented by the scope instance. Any property defined on the controller scope will also be visible to the HTML view.

In the preceding example, the <input> HTML element used the ng-model="name" directive, which holds the value of the <input> element. Another directive, ng-show="name" is used in the <h4> HTML element, which will show the <h4> element as soon as the user starts typing in the <input> element. The <h4> element will show the value of the ng-model of the <input> HTML element using {{name}} in <h4>.

The controller name, myController is declared and the $scope parameter is injected in the controller, as shown in AngularControllers.js. We will explain line 1 of the code file later in this book. This example also illustrates the first property, carChangedCount of the controller. The initially assigned value to carChangedCount is zero. The onCarSelectionChanged property is used to declare a function. This function will increment the first property, carChangedCount by 1 when it is called.

The onCarSelectionChanged property will evaluate the expression value of the attribute every time the selection changes. We can see that it is called in the example in the <select> element of HTML. The <select> element also uses the ng-model="selectedCar" directive, which will hold the value of a user's selection from the drop-down list. Another directive, ng-show is also used. This directive will show the {{name}} text your favorite cars, <b>{{selectedCar}}</b>. Here, {{name}} and {{selectedCar}} are the values from the <input> element and the <select> elements of HTML.

The ng-show directive is used with a condition. It will show the value of the countCarSelectionChanged model property if it is greater than 0.

The following figure shows the data flow of the preceding code example:

The following is a description of how AngularJS interacts with browsers:

AngularJS directives enable developers to specify custom and reusable hypertext markup language tags that moderate the behavior of certain elements. Some of the directives are as follows:

Templates in AngularJS are HTML files with extra markup. This markup consists of directives that show how the model ought to be represented in the view. AngularJS manipulates the DOM and not strings (in distinction to alternative JavaScript frameworks).

In AngularJS, the sole place where an application touches the DOM is within its directives. Directives permit extending markup language; they'll be used to produce custom HTML tags or to decorate existing ones with new behavior.

Let's create a directive that adds copyright information by using a new <copyright> tag:

var app = angular.module('app', []);
app.directive('copyright', function(){
return {
restrict: "E",
replace: true,
template: "<p>Copyright 2014</p>"
}
});

In the preceding code snippet, we created a directive, copyright. Directives have different types. Templates specify the HTML content that should be displayed when it's executed. By default, directives are restricted to attributes. However, to trigger them according to attributes, class, or name, we can use the restrict directive as follows:

The following code uses the HTML tag to reference the directive:

<body ng-app="app" >

<copyright>
</copyright>

</body>

An AngularJS filter is accustomed to remodel data. A filter is added to expressions and directives that employ a pipe character. You would also use filters in controllers, services, and directives. You can also create your own filters, which will be discussed in detail in Chapter 3, AngularJS Scopes, Controllers, and Filters, as shown:

<input ng-model="value" type="text" placeholder="Try to enter a number    
with 3 or more decimal places...">
<h1>{{value | number:2}}</h1>

The filter used in the expression here, {{value | number:2}}, will only display a value of up to two decimal places. To implement a filter, the pipe symbol | is used after the variable, value.

Services are meant to share data between controllers. In other words, they supply a centralized purpose of giving access to the data. The aim of an AngularJS service is to come up with one object or function that represents the service to the remainder of the application.

In the following code example, a service is shared between two controllers. In this way, each controller will access and manipulate the data that was entered within the input managed by the other controller:

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

app.service('MessageService', function () {
this.payload = { message: 'Hello from a Service' };
});

app.controller('FirstController', function ($scope, MessageService) {
    $scope.payload = MessageService.payload;
});

app.controller('SecondController', function ($scope, MessageService) {
    $scope.payload = MessageService.payload;
});

It will be rendered in HTML, as follows:

<body ng-app="app">
<div ng-controller="FirstController>
<input type="text" ng-model="payload.message"/>
</div>

<div ng-controller="SecondController">
<input type="text" ng-model="payload.message"/>
</div>
</body>

In the preceding code and following diagram, the application contains two controllers, FirstController and SecondController. Each of these controllers requires certain user data. Thus, instead of repeating the logic to fetch data in each controller, we will create a user service, which will hide the complexity. AngularJS automatically injects the user service in both, FirstController and SecondController. Therefore, our application becomes modular and testable. The following figure depicts the user services:

The following are some examples of a few services of AngularJS Framework:

Dependency Injection is a software system pattern, which means that if an object needs another object (a dependency), this dependency will be passed to that object rather than it being made (for example, initialized) by that object. Imagine it in the following manner: you define what objects you wish for and they are able to work for you right away. It makes the application easier to develop, as shown in the following code:

functionUserController($scope) {

   $scope.currentUser = {
firstName: 'John',
lastName: 'Doe'
   };

}

In the preceding code snippet, $scope gets injected by AngularJS whenever this controller is instantiated.

After AngularJS finds the ng-app directive, it'll create a new $rootScope and then compile the child DOM components of the root node. To compile an HTML (DOM) element, we are compelled to use the $compile service. However, AngularJS has the capability to handle it, and $compile takes a markup or jQuery object and returns a linking function that is then known as the scope for it to bind to. Once the linking function is called, it returns an angular component that has the practicality of a jQuery object. However, it conjointly contains a scope and numerous different angular-specific data. Before, or once the compilation is complete, the following components are often inserted in the page:

Some directives such as ng-repeat clones DOM components once for every item in a very assortment. Having a compile and link part improves performance since the cloned guide solely has to be compiled once and then linked once for every clone instance.

The $compile perform traverses the DOM and appears for the directives. For every directive it finds, it adds that directive to a list of directives. Once the complete DOM is traversed, it will arrange that list of directives according to their priority. Then, every directive's own compile perform is dead, which gives every directive the possibility to change the DOM itself. Every compile perform returns a linking perform, which is then composed into a "combined" linking function and is returned. AngularJS executes the linking performance and ensures to pass it within the scope that we wish to bind it to within this method. This can run all the linking functions that bind the same scope or bet on the directive to produce new scopes. Once all the linking functions are dead, the combined linking perform returns a collection of DOM elements complete with data-bindings and event listeners that AngularJS can append to the parent node.

The benefits of SPAs are as follows: