Introduction to AngularJS

AngularJS is a very popular open source javascript developement framework maintained by Google.

It is an MVC based framework, with the capability to extend the HTML attributes with Directives. There are three primary directives in Angular JS –

  • ng-app – Used to define an Angular JS application.
  • ng-model – Used to bind HTML controls (textboxes, textareas, checkboxes, etc.) to the application data.
  • ng-bind – Almost opposite to what is applicable for ng-modelng-bind is used to bind application data to the HTML.

AngularJS also provides Dependency Injection that helps the developing the application which is modular, easier to develop, understand, and test. With AngularJS, we can divide the application into number of components and these components get injected into each other at runtime.

Data Binding is another powerful feature provided by AngularJS, that provides automatic synchronization between the model and the view (which can be a pure HTML page).

When we will actually get into code, there is something else you will come across, which is the scope. The scope is an object serving as the model and acts as a glue between controller and the view. Controller is defined using the ng-controller directive and a new controller object gets instantiated along with the new scope object getting injected. Controller has functions bound to the scope and updates this scope accordingly based on the implemented business logic.

In other words, scope keeps the application data intact, with both view and the controller dynamically bound to it. A user action on the browser screen updates the scope object, which in turn invokes the controller with an updated scope object as its parameter. Controller functions might further manipulate the current scope object based on the implemented business logic. The updated scope object then immediately reflects the change in the view because of the data binding feature we talked about. Refer the below diagram which represents the control flow and will probably help you with the understanding:AngularJS - Flow of Control

Let’s check out how the below code snippet complies to what we have discussed so far.

Explore AngularJS sample code snippet

Hopefully, the above diagram will help understanding the very basic structure of an AngularJS application.

With an evolution of Javascript Frameworks and libraries with time, the developer code is getting reduced significantly to achieve almost the same functionality.

With a very rough estimate I could take, what functionality we could achieve in 300 lines of code with Core Javascript, can be done in approximately 150 lines of code with jQuery, 50 lines of code with DOJO, and may be 30 or even less lines of code with AngularJS.

We will soon get more familiar to all these when we actually start looking at the sample codes in our subsequent articles.

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.