Rss Feed Like Us on facebook Google Plus

November 17, 2013

AngularJS open-source JavaScript framework, maintained by Google

Its provide browser-based applications with MVC capability, in an effort to make easier development and testing.The library reads in HTML that contains additional custom tag attributes; it then obeys the directives in those custom attributes, and binds input or output parts of the page to a model represented by standard JavaScript variables. The values of those JavaScript variables can be manually set, or retrieved from static or dynamic JSON resources.


Angular JS Script:

 <script src=""></script>

Angular directives:AngularJS directives allow developer to specify custom and reusable HTML tags that moderate the behavior of certain elements.

1: ng-app 
Declares angularJS as a root element of the application allowing behavior to be modified through custom HTML tags.
<html ng-app>

2: ng-bind
Automatically changes the text of a HTML element to the value of a given expression.
<div ng-controller="Ctrl"> 
 Enter name: <input type="text" ng-model="name"><br> 
 Hello <span ng-bind="name"></span>

3: ng-model
Similar to ng-bind, but allows two-way data binding between the view and the scope.
 <input type="text" ng-model="name">

4: ng-class 
Allows class attributes to be dynamically loaded.  
<span class="base-class" ng-class="..">

5: ng-controller 
Specifies a JavaScript controller class that evaluates HTML expressions. 
<body ng-controller="...">

6: ng-repeat
Instantiate an element once per item from a collection. 

7: ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean expression. 
<div class="check-element animate-show" ng-show="checked">

8: ng-switch
Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.  

9: ng-view
The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. 

10: ng-if 
Basic if statement directive which allow to show the following element if the conditions are true.

<!doctype html>
<html ng-app>
<script src=""></script>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>

Learn More...

© 2011-2016 Techimpulsion All Rights Reserved.

The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.