Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!
25 Oct 2016

Angularjs Tutorial: Basics

angularjs

In recent past, Angular Js has become the defacto javascript framework of choice, overpowering all its predecessors like Backbone, Knockout e.t.c. Even though the recent release of Angular 2 has taken away limelight from Angular 1, it nevertheless remains the main powerhorse for lots of application today.

The basic concept of angular js is based on two way binding and that forms the core of angular js, so it is very important to understand what exactly is two way binding.

Two Way Binding

The essence of SPA or Single Page Application lies in the simple concept that DOM can be replaced by javascript to show different views which simulates the page change without really navigating away from the main URL. This concept is nothing new and has been the default implementation for any tab based HTML for ages, where we would show or hide parts of DOM based on which tab is selected.

With the addition of Java script based templating, now you can generate new DOM in runtime based on the data received from AJAX. This is possibly the most simplified definition of SPA, and no matter which framework we use, the concept remains the same, only implementation differs.

Now the big question is when to change the view, should it be manual i.e a developer has to decide when to change which DOM or should it be automatically refreshed based on javascript model change. Most of the javascript SPA framework pick one of these approach and they have very good reasons to do that. Programmatic control gives more fine grained control and therefore is much faster whereas automatic updates are easier for development.

Angular chooses automatic updation of UI as and when the model is updated, angular does this by running a digest cycle which checks if the model has been updated and if model has been updated then it updates the view.

Interestingly, lot of people I have came across in my career think this is two way binding, but this is still one way binding. When the model is updated the view is refreshed. There has to be other side of it for being two way right?

The digest cycle also checks for changes in form elements which are bound to model using ng-model and if the value is changed in the form, the model is updated.

$scope and Controllers

The heart of binding is something known as $scope, essentially this is a variable which angular is watching for any changes, and as soon as the $scope changes, it would update the view.

Lets look at a very simple example of binding.

    <div ng-controller="myController">
    Hello {{name}}
    </div>

So essentially any thing we put in $scope would be updated, should not be that hard right.

We still need some javascript code which updates the model but it has to do it in a way that angular would know when the update happens. This is a little tricky part of angular, so if we update a $scope from a code outside angular, the view would not get updated, i.e from a setTimeout function because angular is not watching the scope variable then.

We need an angular managed function which can update the $scope and when that function is done, angular would run the digest cycle again. This managed function is a Controller.

Directives

The main vision of angular js is to create a framework which would enhance html instead of javascript, imagine if you had a html tag called calendar or tab and you had ability to add or customize your own sets of tags in html.

Angular does this using some thing called as directives, the new tags are simply angular directives which you can define, reuse or extend to fit your needs. Each directive is responsible for a part of DOM, this is done through directive definition as either element, attribute or class.

angular.directive('calendar',function(){
    return{
        restrict:'A/E/C/M', // Attribute, Element, Class or Comment
        template:'<div class="calendar>
        ...
        </div>',
        controller:function($scope){
        // Manage the scope
        }
    }
});

Using a directive we can create our own tags or elements and attach our own DOM and behavior to it. Each directive has a $scope which is applicable for the DOM it controls and each directive also has a controller which manages the $scope .

It is a popular notion that Controllers have $scope but actually its the directives which has $scope, controllers manage the directives scope.

Interestingly angular provides a way to assign a controller to a DOM without writing a directive, this is through its in built directive called ng-controller which you see in the code above.

We will discuss directives in depth in one of later articles. In next part we would dive into the code and create a simple application using angular js.


Stats:
265 views
Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!

Angular Directives Demystified

Directives are the most misunderstood aspect of angular JS. Learn how directives can help you keep your code clean.

Third wave of digital transformation

Third wave of digital transformation

Angularjs Tutorial: Understanding Scope

Scopes are one of the most important and rarely understood concept in angular, in this part we explore how scope works in angularjs.

Comments:

Leave your comments