Subscribe via RSS Feed

Concepts in Angular.js Application Development

July 21, 2013 1 Comment

In this post we will discuss some of the well-known concepts in Angular.js Application Development one-be-one.

1> ng-app – It is an angular directive, which defines a html body or a portion of html body to be defined as Angular.js Application.

2> Angular Expression - Some code like {{ some_angular_variable }} will evaluate the variable value. It is Angular Expression.

3> Angular View Template - An Angular.js View Template is a portion, which will be replaced by the data from Angular Model.

4> Angular Controller - Angular Controller is a form of JavaScript function, within which variable values for attributes of DOM elements are bound and the presentation logic of variables bound with  DOM element attributes are controlled and changed within the control of the JavaScript function(Controller). So the presentation logic for the values of the variables should be controlled in Angular Controller and those variables are bound with ng-model directive or angular expression with the DOM elements and Angular framework offers automatic binding of the variables with DOM Elements, where specified i.e. whenever the variable values will be changed within the Controller, that change will have automatic effect on the DOM elements.

5> Angular Scope Variables - In an Angular.js Application, JavaScript variable values will have existence within angular scope life-cycle. So all the variables can be observed for change of value and take action for that – within the respective scope of Angular.js Application. 

6> Angular MVC - 

A> Angular Model - Model is the data, which can be accessed by property of Angular Scope.

B> Angular Controller - Angular Controller is a form of JavaScript function, within which variable values for attributes of DOM elements are bound and the presentation logic of variables bound with  DOM element attributes are controlled and changed within the control of the JavaScript function(Controller).

C>Angular View – In Angular framework, the views consist of HTML Elements and Angular expressions, which are rendered in Browser, after manipulated in Angular Controller and Angular Model.

So an angular example here -

// An example Angular Model
[
   {
       "Product": "REL",
       "BBP": "10",
       "BSP": "10.2",
       "LTP": "10.1"
   },
   {
       "Product": "BEL",
       "BBP": "20",
       "BSP": "20.4",
       "LTP": "20"
   },
   {
       "Product": "MTL",
       "BBP": "50",
       "BSP": "50.5",
       "LTP": "50.1"
   },
   {
       "Product": "BSL",
       "BBP": "100",
       "BSP": "101",
       "LTP": "100.2"
   }
]
 <!-- Angular Code Snippet in HTML -->
...
<html lang="en" ng-app="stocksample"> <!--Angular Directive for Angular Application Definition -->
...
<body ng-controller="StockListCtrl">  <!--Angular Controller to control Angular Model Data for View in HTML Body-->
....
<table>
    <tbody>
         <tr ng-repeat="stock in stocks"> <!-- The Angular Scope Variable for the Model -->
             <td>{{stock.Product}}</td>   <!-- Angular Expressions -->
             <td>{{stock.BBP}}</td>
             <td>{{stock.BSP}}</td>
             <td>{{stock.LTP}}</td>
         </tr>
    </tbody>
</table>
</body>
// Angular Controller
function StockListCtrl($scope, $http) { // Dependency Injection for Angular Service
  $http.get('stocks.json').success(function(data) { // Angular $http Service
     $scope.stocks = data;
  });
}

In our next posts, we will discuss about Angular Services and Dependency Injection in Angular Application.

Reference :

Angular.js Documentation

Some other posts related to Angular.js by us are -

Angular.js Promise and Deferred Api – Implementation Explained

Angular.js $watch and $observe – a brief look

Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module)

Single Page Application with Angular.js, Node.js and CouchDB (Cradle Module)

Simple Bar Graph in Angular Directive with d3.js and Prototype.js – Element based Directive Definition

If you find this article helpful, you can connect us in Google+ and Twitter

Enter your email address:

Delivered by FeedBurner

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks