What is AngularJS and How it works?

What is AngularJS and How it works?

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
[codesyntax lang=”xml” container=”pre” strict=”no”] var angularApp = angular.module(‘app’,[]); angularApp .controller(‘NameController’, [‘$scope’, function($scope) { $scope.name =”name” }]);   [/codesyntax]
E.g. HTML Code: [codesyntax lang=”xml” container=”pre” strict=”no”] <div ng-controller=”NameController”> Enter Name <input ng-model=”name”> equals {{name}} </div>     [/codesyntax]
Scope: Scope is an object that refers to the application model. Scope act as a bond between controller and view.
[codesyntax lang=”xml” container=”pre” strict=”no”] var myApp = angular.module(‘angularApp’,[]); myApp.controller(‘DemoController’, [‘$scope’, function($scope) { $scope.message = ‘Welcome!’; }]);   [/codesyntax]
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.
[codesyntax lang-“xml” container=”pre” strict=”no”] var myApp = angular.module(‘angularApp’,[]); myApp.controller(‘DemoController’, [‘$scope’, function($scope) { $scope.message = ‘Welcome!’; }]); [/codesyntax]
Here we are creating ‘DemoController’.
[codesyntax lang=”xml” container=”pre” strict=”no”] <div ng-controller=”DemoController”> {{ message}} </div> [/codesyntax]
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.: [codesyntax lang=”xml” container=”pre” strict=”no”] <input ng-model=”name”> Uppercased: {{ name| uppercase }} uppercase filter is used in above code. It will upper case name. [/codesyntax]
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:
[codesyntax lang=”xml” container=”pre” strict=”no”] <!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> [/codesyntax]
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.
Showing 2 comments
  • surbhi nahta

    Thank you for the information and updates. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. I am searching for this topic and I get exact post. I am also searching about AngularJS training in pune, try to write something about this topic.

  • Steve

    Thank you for this information, I appreciate your effort, please keep us update.

Leave a Comment