What is AngularJS and How it works ?

What is AngularJS ?

                        Definition of AngularJS as put by its official documentation is as follows: “AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.” AngularJS is a JavaScript MVC Framework that integrates two-way data binding, Angular does one very specific job very well – that is, moving data around inside a single-page application, dynamically updating the view as the data changes without the need for specific listener code. If you have a website where this type of functionality is important (there’s more and more of them now) then it might fit the bill for you.

How AngularJS works ?

What is ng-app ?

                ng-app is an AngularJS directive there are many such directives are available in AngularJS. Here, ng prefix stands for Angular. the ng-app directive is a starting point of AngularJS application. Angular Framework first checks the ng-app directive within the HTML page. If its found then Angular bootstrap itself and starts to manage the section of the page that have a ng-app directive. Everything within the HTML tag section will be managed by Angular.

Features: 

The following are the most important features of AngularJS:

Data-binding: 

Automatic synchronization of data between model and view components. When the model changes it will automatically reflect on view and vice versa. DOM manipulation is easy because of data binding.

E.g.  JS Code

Source code :

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

angularApp .controller('NameController', ['$scope', function($scope) {

$scope.name =”name”

}]);

E.g. HTML Code:

<div ng-controller="NameController">

Enter Name <input ng-model="name"> equals {{name}}

</div>

Scope: 

Scope is an object that refers to the application model. Scopeact as a bond between controller and view.

Source code : 

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

myApp.controller('DemoController', ['$scope', function($scope) {

$scope.message = 'Welcome!';

}]);

Here ‘$scope’ is bound by DemoController. We can access $scope values in html views.

Controller: 

Javascript functions are bound to a particular scope and view is bound to a particular controller. Every view needs to bind to a particular controller.

Source code:

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

myApp.controller('DemoController', ['$scope', function($scope) {

$scope.message = 'Welcome!';

}]);

Here we are creating ‘DemoController’.

Source code:

<div ng-controller="DemoController">

{{ message}}

</div>

Here we are binding DemoController to above <div>

Services: AngularJS has lots of built-in services.for example $http to make a AJAX request. We can create our own services according to our need and access that service in our whole app.Service are need to inject while using it.

Filters: Filters are used to transform data.These select a subset of items from an array and returns a new array.

E.g.:

<input ng-model="name"> Uppercased: {{ name| uppercase }}

uppercase filter is used in above code. It will upper case name.

Directives: 

Directives are one of the best features of the AngularJS. We can create custom HTML tags and provide custom behavior to tags. ngModel, ngShow, ngHide are the example of angular is built in directives.

Templates: 

These are the rendered view with information from the controller and model. These can be a single file or multiple views in one page using “partials”.

Routing: 

For switching between views, routing is used. Built in services are available for routing.

Model View Whatever: MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.

Dependency Injection:

 AngularJS has support built-in dependency injection. It helps the developer to reuse components. We can create our module and inject into our app.

Advantages

·         AngularJS provides facility to develop dynamic Single Page Application by writing code in a clean and maintainable manner.

·         AngularJS provides two way data binding facilities. DOM manipulation is easy because of this feature.

·         AngularJS supports dependency injection that helps developer to reuse component.

·         AngularJS provides reusable components.

·         Developer can write minimum code and achieve more functionality.

·         AngularJS applications can run on all major browsers and platforms like  Android and iOS based phones/tablets.

·         AngularJS is maintained by Google. So there is large development community.

 Disadvantages:

·         Because its JavaScript framework, AngularJS applications are not much safer. Server side authentication and authorization is must to secure an application.

·         If users disable Javascript then AngularJS will not work.

Components:

The AngularJS framework can be divided into following three major parts:

ng-app: 

This directive is used to start an angular application.

ng-model:

 Binds the values to HTML input controls or HTML tags.

ng-bind: 

This directive is used to binds the data to html tags.

AngularJS Example

Source Code :

<!DOCTYPE html>

<html lang="en-US" ng-app="">

<script

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

<body>

<div >

<p>Name : <input type="text" ng-model="name"></p>

<h1>Hi {{name}}!</h1>

</div>

</body>

</html>

Conclusion:

• AngularJS is a complete framework for client side applications – Based on the standard MVC design pattern

• Two way data binding makes it easy to build data entry forms

• Dependency injection makes it easy to separate modules

• Build with testing in mind

You can check the AngularJS Official Website http://angularjs.org. There are a lot of working examples and excellent documentation.