Introduction to AngularJS

Definition

AngularJs is a Javscript open source front-end framework that is mainly used to develop single page web applications(SPAs).It is a continuously growing and expanding framework which provides better ways for developing web applications.It changes the static HTML to dynamic HTML.It’s features like dynamic binding and dependency injection eliminates the need of code that we have to write otherwise.AngularJs is rapidly growing and because of this reason we have different versions of AngularJs with the latest stable being 1.7.7 . It is also important to note that Angular is different from AngularJs. It is an open source project which can be freely used and changed by anyone.It extends HTML attributes with Directives, and data is binded with HTML.

History:



AngularJs was originally developed in 2008-2009 by Misko hevery and Adam abrons,and is now maintained by google.

Why use it?

  • Easy to work with:All you need to know to work with AngularJs is basics of HTML,CSS and Javascript,not necessary to be an expert in these technologies.
  • Time saving:AngularJs allows us to work with components and hence we can use them again which saves time and unnecessary code.
  • Ready to use template:AngularJs is mainly plain HTML,and it mainly makes use of the plain HTML template and passes it to the DOM and then the AngularJS compiler.It traverses the templates and then they are ready to use.

Key Features:

Model View Controller(MVC):
An architecture that is basically a software pattern used to develop an application. It consists of three components in general, they are:

  • Model: used to manage the application data.
  • View: responsible for displaying the application data.
  • Controller: main job is to connect the model and the view component.

Normally when we talk about MVC architecture, we have to split our applications into these three components and then write the code to connect them. However, in AngularJs all we have to do is split the application into MVC and it does the rest by itself. It saves a lot of time and allows to finish the job with less code.

Data Model Binding:
Data Binding in AngularJS is a two-way process,i.e the view layer of the MVC architecture is an exact copy of the model layer. You don’t need to write special code to bind data to the HTML controls. Normally in other MVC architectures, we have to continuously update the view layer and the model layer to remain in sync with one another. In AngularJs it can be said that the model layer and the view layer remain synchronized with each other. Like when the data in the model changes, then the view layer reflects the change and vice versa. It happens immediately and automatically which helps in making sure that the model and the view is updated all times.

Templates:
On the main advantage of using AngularJS is how it makes use of the templates. Normally what happens is that the templates are passed by the browser into DOM, then DOM becomes the input of the AngularJS compiler and then AngularJS traverses the DOM template for rendering instructions which are called directives. The other siblings of AngularJS work differently as they make use of the HTML String whereas AngularJs does not manipulate the template strings. Using the DOM is what gives us the privilege to extend the directive vocabulary or even abstract them into reusable components.

Unit Testing ready:- The concern of Google’s designer was not only developed Angular but also developed a testing framework called “Karma” which helps in designing unit tests for AngularJS applications.

Benefits of AngularJS:

Depending Injection: Dependency Injection is a software design pattern. It works on the basis of Inversion of Control. Inversion control means objects do not create other objects. Instead, they get these objects from an outside source. The dependent object is not created by the primary object after that then use its methods. Instead, an external source creates the dependent object and gives it to the source object for further usage. On the basis of dependency injection, we create a service to acquire all the information from the database and get into the model class.
In Angular.JS, dependencies are injected by using an “injectable factory method” or “constructor function”.
These components can be injected with “service” and “value” components as dependencies.
The $http service is normally defined from within the controller in the following manner.

sampleApp.controller (‘AngularJSController’, function ($scope, $http)



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shubham_singh