Getting Started with AngularJs

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , , , with 2 Comments on Getting Started with AngularJs
AngularJS by Google
AngularJS by Google

AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so if you are stucked somewhere while using this library, you will have tons of supporters.

So what is so special about this framework, other than its developed by Google ?

  • Unlike Backbone and Ember, You don’t have to spend time on Event Handling (Bind, UnBind Events etc).
  • It Works on principal of Dirty Checking.
  • Automatically fires event if something gets changed.

What ? Dirty checking ? wouldn’t it be performance impact on my web application?

You are correct. But Google team has answer for this.

  • AngularJS performance mainly linked to your computer (Client’s Computer) performance.
  • Ergonomical point of view, an HTML page should not have more than 200 fields. More fields will just distract users.

In this article, I will demonstrate how to use AngularJs framework to create simple application.

Application will look like :

Getting Started with AngularJs
Getting Started with AngularJs

We have already discussed about using underscore library for javascript collection related utilities and templating in previous article. In this demo also, I have used this library to clear list of items which are checked using method “filter“.

Live Demo of application

HTML Code :

<body ng-app>
    <h2> Angular Demo with BootStrap and Underscore.js</h2>

    <div ng-controller="ItemCtrl">
          Total Items -  {{items.length}}
        <ul class="unstyled">
            <li ng-repeat="item in items">
                <input type="checkbox" ng-model="item.done">
                    <span class="done-{{item.done}}"> {{item.txt}} </span>
            </li>
        </ul>

            <form class="form-horizontal">
                 <div class="form-group">
                    <input type="text" ng-model="itemToAdd"   placeHolder="Add Item"/>
                    <button   class="btn" ng-click="add()">
                        <i class="icon-plus-sign"></i>  Add
                    </button>
                </div>
                <button class="btn" ng-click="clear()">
                    <i class="icon-trash"></i> Clear Completed Items
                </button>
            </form>
    </div>
</body>

JavaScript code :

function ItemCtrl($scope)
{

  $scope.items = [
    {txt:"Angular is Awsome", done:false},
    {txt:"Next is Node.js", done:false}
  ];

  $scope.add = function() {
  $scope.items.push({txt:$scope.itemToAdd,done:false});
		$scope.itemToAdd = "";
  }

  $scope.clear = function(){
    //Here we will use Underscore as simplest library to work with Collections
    $scope.items = _.filter($scope.items, function(item){
    return !item.done;
  });
}
}

For look and Feel we are using Tweeter’s Bootstrap library.

Additional CSS :

.done-true {
    text-decoration:line-through;
    color:grey;
}

Output of above code is already shown above.

Now Lets understand above code and few basics of AngularJs.

How to define variables ?

Variable can be used in HTML as well as javascript part of your application. Inside Javascript, you can use it normally, however if you want to use any variable inside HTML (View) then your variable has to be enclosed between double curly bracket.

Lets take other example to understand this.

<body ng-app>
  <p>Hello {{name}}</p>
  <input type="text" ng-model="name">
</body>

As shown in above code, “name” is variable. Without single line of javascript code, your angularJs will understand that whatever entered inside text box has to be updated in <p> tag. If you see, we have not added any onchange event on textbox. It all works automatically on principal of dirty checking, Isn’t it so cool ? 🙂

Working demo of above example.

Lets come back to our original code. If you see HTML part, we have used many variables like {{item.length}} and it is defined in JavaScript code.

What is Angular application or “ng-app” ?

Your web page can have one or many application defined by tag “ng-app”. This represents one unit of application which will have its own controller. In order to use AngularJs, you must need to have atleast one ng-app.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.

What is Controller ?

Controller will decide that what action has to perform on part of your web application. It Controls flow of execution and logic.

This is defined with help of attribute “ng-controller“. This is actually Engine Directive used to define Controller. $scope variables can be accessed only between its definition. In our Example, we have defined controller by name “ItemCtrl”. In Simple words you can say that Controller is plain javaScript function where you define your data to visible in scope and operations to be performed.

There are many ways to define controller. One of the simplest way, which I followed in this example is to define normal javaScript function and supply $scope argument.

Inside Controller “ItemCtrl”, we have defined items available for List , also we have defined two methods named add() and clear().

What is Scope ?

Scope is object in Angular which is used to bind data and other information between Controller and View. $scope defines that which data and which method can be accessed by controller. It is represented as $scope. If you see our javascript part of code, we have supplied $scope to controller method “ItemCtrl”.

Model or directive “ng-model”:

This is defined using directive “ng-model“. This is Engine Directive used to perform two way Binding of variable between View and Controller.

As shown in above code ; When we click on Checkbox, “ng-modal” directive will make sure that “done” attribute of item also set accordingly both side (Controller and View). In Same way When any value is added in Text Box, ng-model “itemToAdd” makes sure that it is available to Controller.

How to iterate over List ? “ng-repeat” is savior.

If you check our javascript part of code, you might be amazed that how list of items are iterated and added in UI? This magic is happen because of “ng-repeat” directive. One of the most used directives, it comes handy while iterating through list of items. In our case we iterated through items to create checkbox and “ng-modal” is used to make sure there is two way binding between View (HTML Components) and Controller.

Last but not least, “ng-click”.
Used to invoke Javascript function defined in $Scope of Controller on click event. In Our case, we have defined two methods, add() and clear().

I hope this article will give you start with Javascript framework AngularJs. Feedback and suggestions are welcome !!!

Related posts

  • I like the lean explanation of Angular to get easy start. I am adding this as quick reference to get stared on Angular in my last post I wrote with @mohit shrivastav on Angular.Js this is good for newbies to get started. Great work @jitendra

    • JitendraZaa

      Thanks Harshit. I am going to add few more article on same topic and little bit similar to @Mohit’s but not in Salesforce; so will provide reference to your post in those articles.