25 November 2015

Introduction to AngularJS

AngularJS is an open source JavaScript framework developed by Google. It helps in extending capabilities of HTML, CSS & JavaScript. It enhances browser based applications with MVC (Model-View-Controller) capabilities which help in making development and testing easier. AngularJS combines both Declarative Programming (used for building UIs and wiring software components) and Imperative Programming (used for building business logic). It provides two-way data binding features (similar to Silverlight/WPF XAML) which helps in automatic synchronization of models & views. It decouples DOM manipulation from application logic thus improving testability of the code.

Features of AngularJS -

Two way data binding – AngularJS provides two way data binding between Model & View. The data between model & view is automatically synchronized on change. This is most important and useful feature of AngularJS. This feature takes care of DOM manipulation and listening to DOM events. Thus application developers can focus on application logic instead of writing boiler plate code for handling DOM manipulation.

Model-View-Controller (MVC) – AngularJS is based on the basic principles of MVC design pattern.

  • In AngularJS, any JavaScript object can act as a Model. 
  • View is the declarative HTML used for UI design. It is based on DOM objects.
  • Controller is responsible for construction of the model and connects it to View. It contains business logic. They can be nested and can handle inheritance. 

Services – They perform small common tasks for your web application. We can use in-built services or create our own using various methods viz. Service API, Factory API or $provide API. In-built AngularJS services starts with “$” symbol.

Dependency Injection – AngularJS has in-built Dependency Injection. AngularJS services can be passed as parameters whenever required. AngularJS identifies the dependencies and automatically creates their instance.

Directives – Directives enables programmers to extend the HTML vocabulary in a declarative way. They help in transforming DOM or creating new behavior.  AngularJS has some in-built directives. It also allows programmers to create their own directives.

Templates – AngularJS enables programmers to create static declarative templates containing HTML, CSS & AngularJS elements. These templates get combined with model and controller at run-time to render the final view.

Filters – Filters helps in performing data transformation and data formatting. They can also be used to filter results.

Validation – AngularJS has many in-built validations for various HTML5 input variables, controls and directives. E.g. – Validations for textbox, number, URL, email, radio, checkbox, required validator, pattern validation, minlength, maxlength, min, max etc. It also enables programmers to create their own validations which can be re-used.

Testability – Applications created using AngularJS are highly testable due to use of MVC pattern and Dependency injection. Unit tests can be created and run against JavaScript code making enterprise application level testing possible.

References and Suggested Readings

http://angularjs.org/

1 comment:

Tejuteju said...

It was really a nice article and i was really impressed by reading this AngularJS Online Training Bangalore