Detailed Explanation of How angularJS working

Published on Author Code Father
How the angularJS working? Detailed Explanation of How the AngularJS working? how angularjs works internally? how angularjs works on browser architecture?

Explain how the angularJS working? 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 Latest Version is 1.4
 
AngularJS Stable Version is 1.3
 
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
 
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.
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.
var myApp = angular.module('angularApp',[]);
myApp.controller('DemoController', ['$scope', function($scope) {
$scope.message = 'Welcome!';
}]);
 
Here we are creating ‘DemoController’.
<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:
<!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:
 
I love AngularJS because of its excellent features. I have covered most of necessary features which help to build an AngularJS application in a maintainable way.
 
You can check the AngularJS Official Website http://angularjs.org. There are a lot of working examples and excellent documentation.

Comments

comments