AngularJS is a very popular web application JavaScript framework. It is open source and used in Single Page Application (SPA). It extends HTML DOM attributes with Directives, and binds data to HTML with Expressions.
AngularJS features:
Data-binding:
Two way data binding is the awesome and most useful feature in AngularJS. AngularJS two-way data-binding handle the synchronization of data between model and view. Use ng-model directive to create two-way data-binding between the input element and view. Always the view projected model. The view appear the changes when the model change, and vice versa.
Example:
<!DOCTYPE HTML>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
<div>
<label>First Name:</label>
<input type="text" ng-model="firstName" placeholder="Enter a First Name">
<hr>
<h1>My Name is, {{firstName}}!</h1>
</div>
</body>
</html>
Expressions:
AngularJS binds data to HTML using Expressions. Angular expressions are much like JavaScript code snippets that are usually placed in bindings such as {{ expression }}.
Few of valid Angular expressions
{{ 2 + 5 }}
{{ x + y }}
{{ x = 2 }}
{{ user.No }}
{{ items[index] }}
Example:
<!DOCTYPE HTML>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
<div>
<p>Total : {{ 5 + 5 }}</p>
</div>
</body>
</html>
Directives:
AngularJS Directives is important AngularJS application components. AngularJS Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.
ng-app - For starts an AngularJS Application.
Example:
<div ng-app=""> <span>code here</code> </div>
ng-init - Initializes application data.
Example:
<div ng-app="" ng-init="firstName='Roy'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>My Name: {{ firstName }}</p>
</div>
ng-model - Defines the model that is variable to be used in AngularJS.
Example:
<div ng-app=""> <p>Enter your Name: <input type="text" ng-model="firstName"></p> </div>
ng-repeat - Repeats html elements for each item in a collection.
Example:
<ul ng-controller='ProdController'>
<li ng-repeat='product in Products'>{{product.name}} - {{product.price}} </li>
</ul>
function ProdController($scope){
$scope.Products = [
{name: 'Mobile', price: 1000},
{name: 'Desktop', price: 20000}
];
}
Views and routes:
AngularJS $route is used for linking URLs to controllers and views. It watches $location.url() and tries to map the path to an existing route definition.
var webApp = angular.module('webApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/products', {
//route
templateUrl: 'views/products.html',
controller: 'ProdController'
}).
otherwise({
//default route
redirectTo: '/index'
});
}]);
Filter:
AngularJS filter formats the value of an expression for display to the user.
List of commonly used filters.
- currency
- filter
- lowercase
- uppercase
- orderBy
Example:
<div ng-app="">
<p>First Name:<input type="text" ng-model="firstName"></p>
<p>My Name in Upper Case: {{firstName | uppercase}}</p>
</div>
Form:
AngularJS form controls (input, select, textarea) are ways for a user to enter data.
For styling form fields have controls, ngModel adds these CSS classes:
- ng-valid: model is valid
- ng-invalid: model is invalid
- ng-valid-[key]: for each valid key added by $setValidity
- ng-invalid-[key]: for each invalid key added by $setValidity
- ng-pristine: the control hasn't been interacted with yet
- ng-dirty: the control has been interacted with
- ng-touched: the control has been blurred
- ng-untouched: the control hasn't been blurred
- ng-pending: any $asyncValidators are unfulfilled
Example:
<div ng-app="webApp" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="emp.firstName"><br>
Last Name:<br>
<input type="text" ng-model="emp.lastName">
<br><br>
<button ng-click="reset()">Reset</button>
</form>
<p>form = {{emp}}</p>
<p>master = {{master}}</p>
</div>
var app = angular.module('webApp', []);
app.controller('formController', function($scope) {
$scope.master = {firstName: "Roy", lastName: "Mathew"};
$scope.reset = function() {
$scope.emp = angular.copy($scope.master);
};
$scope.reset();
});