Getting Started with AngularJs | Techila
2682
single,single-post,postid-2682,single-format-standard,ajax_updown_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-content-sidebar-responsive,qode-theme-ver-9.4.2,bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive
 

Getting Started with AngularJs

GETTING STARTED WITH ANGULARJS

Getting Started with AngularJs

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.

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;}

 

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.

Let’s 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.

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.

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().

Courtesy: http://www.jitendrazaa.com/blog/webtech/web/getting-started-with-angularjs/

https://i.ytimg.com/vi/k4qVkWh1EAo/hqdefault.jpg

“Know more about Salesforce Consulting at Techila”

Author: techila

No Comments

Post A Comment