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:
<head>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
</head>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
</head>
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>
...........
...........
</html>
2: ng-bind
3: ng-model
4: ng-class
5: ng-controller
6: ng-repeat
7: ng-show & ng-hide
8: ng-switch
9: ng-view
10: ng-if
Example:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
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>
</div>
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.
Example:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>