What is AngularJS

AngualrJS is an open JavaScript framework developed and maintained by Google. It implements the MVC (Model View Controller) pattern to separate data, presentation and logical components. It is like enhanced HTML for web applications as it extends traditional HTML through usage of different attributes on HTML tags. These attributes are called as directives in Angular terminology.

Why AngularJS

Angular markup lives in DOM.
For example, if we consider HTML, browser displays the content based on HTML tags, like if

tag is present, browser understands it to be heading and displays the page accordingly. Similarly, we have many predefined tags in HTML used for displaying static content. Now, if we want our web page to be user interactive or a dynamic page, we go for JavaScript frameworks. Other JavaScript frameworks provide plugins or functions which are invoked on HTML elements. For example, if we want to show datepicker on the page, consider the jQuery perspective, we first add normal input field to the HTML, then in jQuery, we write $(element).datePicker(); to actually convert it to datepicker. So, when we look at markup, can we immediately guess what that input field actually is? Is it a plain input field or date picker? We have to look into jQuery code to confirm.

So, the Angular approach is use of attributes or say directives on HTML tags to make the DOM more understandable and maintainable. Thus, angular markup or directives lives in DOM.

Two way Data Binding. What it means is if there is any change in model (back-end) then view will be updated and vice versa. We can use this approach to build high performance web application with less efforts. To do same binding in jQuery, we need to write logic in both model and view layer. But in angular, we just have to bind the variable using $scope and angular handles the rest.

Can Validate forms and input Fields before submitting it.

Allows us to control complete DOM structure, i.e., show/hide changing everything with Angular.

We can create templates for reusable blocks and use multiple times. This is achieved by creating Custom Directives in Angular.

Allows us to write basic flow end-to-end testing, unit testing.

Include AngularJS Reference

To start creating applications using angular, download the angular.js file from https://angularjs.org/ and reference it in HTML page where angular markups will be used. An alternate way of including angular.js file is from CDN (Content Delivery Network) http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js. If we are creating standalone applications, the best thing is to include the file in project instead of using it from CDN.