AngularJS is an open source JavaScript framework maintained by Google,that assist making single page web application with MVC framework ,it also support for testing.
AngularJS is a MVC framework that defines numerous concepts to properly organize your web application.Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instantiated by dependency injection. Use of dependency injection, AngularJS helps you structure and test your JavaScript code very easily. Finally, utility code can easily be divided into services that can be injected in your controllers. Now let’s have a closer look at all those features.
Expressions
In order to create views ,AngularJS help you to directly execute expression from HTML page.
AngularJS is a MVC framework that defines numerous concepts to properly organize your web application.Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instantiated by dependency injection. Use of dependency injection, AngularJS helps you structure and test your JavaScript code very easily. Finally, utility code can easily be divided into services that can be injected in your controllers. Now let’s have a closer look at all those features.
Expressions
In order to create views ,AngularJS help you to directly execute expression from HTML page.
<div>1+2 = {{1+2}}</div>
the page will display 1+2 = 3
Directives
Directives are one of the most powerful feature of AngularJS. They allow to extend HTML the needs of web applications. Directives specify how page should be structured for the data available in a given scope.
There is several directives most people uses ngRepeat
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
by this you can possible looping through the driversList.
Filters
In order to change the way data are displayed in your page, AngularJS provides you with the filter mechanism.
Just look at the code:
<tr ng-repeat="driver in driversList | filter: searchFilter">
The searchFilter will filter the driverList.
Partial Views
AngularJS is single page web application .So we have only one real HTML page ,its content can be changed without download a new page.
In order to build an application, We define a main page (index.html) which acts as a container for web application. In this page, we can bind part of our application to a specific AngularJS module with the directive “ngApp”. We can bind the whole page to a single AngularJS module if you want. After that, you can use the directive “ngView" in order to use partial views.
index.html look like:
<body ng-app="F1FeederApp">
<ng-view>
</ng-view>
</body>
Controllers
In AngularJS, the controller is where the behavior of your application is located. Controllers are used to populate the scope with all the necessary data for the view. Using proper separation of concerns, controllers should never contain anything related to the DOM.
REST communication
In order to communicate with a restful server, AngularJS provides two services $http and $resource. $http is a small layer on top of XmlHttpRequest while $resource is working at a higher level of abstraction, both can perform the same job.
ergastAPI.getDrivers = function() {
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
} Using AngularJS i created an application which gives status of F1 Championship standings,for live demo . To see code repo .
No comments:
Post a Comment