· AngularJS is a client-side JavaScript MVC framework to develop a dynamic web application.
· entirely based on HTML and JavaScript
· The ng-app directive is a starting point of AngularJS Application. It initializes the AngularJS framework automatically. AngularJS framework will first check for ng-app directive in a HTML document after the entire document is loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.
· <body ng-app="myAngularApp">
<script>
var app = angular.module('myAngularApp', []);
</script>
· {{ expression }}
a. Directives
Directive
Description
ng-app
Auto bootstrap AngularJS application.
ng-init
Initializes AngularJS variables
ng-model
Binds HTML control’s value to a property on the $scope object.
ng-controller
Attaches the controller of MVC to the view.
ng-bind
Replaces the value of HTML control with the value of specified AngularJS expression.
ng-repeat
Repeats HTML template once per each item in the specified collection.
ng-show
Display HTML element based on the value of the specified expression.
ng-readonly
Makes HTML element read-only based on the value of the specified expression.
ng-disabled
Sets the disable attribute on the HTML element if specified expression evaluates to true.
ng-if
Removes or recreates HTML element based on an expression.
ng-click
Specifies custom behavior when an element is clicked.
<div ng-controller="myController">
{{message}}
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "Hello World!";
});
</script>
· $scope — inside controller
· $rootscope — overall ngapp
<body ng-app="myNgApp">
<div ng-controller="myController">
Enter Message: <input type="text" ng-model="message" /> <br />
<button ng-click="showMsg(message)">Show Message</button>
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "Hello World!";
$scope.showMsg = function (msg) {
alert(msg);
};
});
</script>
</body>
b. Scope object methods:
The $scope object contains various methods. The following table lists important methods of $scope object.
Method
Description
$new()
Creates new child scope.
$watch()
Register a callback to be executed whenever model property changes.
$watchGroup()
Register a callback to be executed whenever model properties changes. Here, specify an array of properties to be tracked.
$watchCollection()
Register a callback to be executed whenever model object or array property changes.
$digest()
Processes all of the watchers of the current scope and its children.Â
$destroy()
Removes the current scope (and all of its children) from the parent scope.
$eval()
Executes the expression on the current scope and returns the result.
$apply()
Executes an expression in angular outside the angular framework.
$on()
Register a callback for an event.
$emit()
Dispatches the specified event upwards till $rootScope.
$broadcast()
Dispatches the specified event downwards to all child scopes.
c. AngularJS event directives.
Event Directive
ng-blur
ng-change
ng-click
ng-dblclick
ng-focus
ng-keydown
ng-keyup
ng-keypress
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
d. built-in AngularJS services.
$anchorScroll
$exceptionHandler
$interval
$rootScope
$animate
$filter
$locale
$sceDelegate
$cacheFactory
$httpParamSerializer
$location
$sce
$templateCache
$httpParamSerializerJQLike
$log
$templateRequest
$compile
$http
$parse
$timeout
$controller
$httpBackend
$q
$window
$document
$interpolate
$rootElement
i. $http is a service as an object. It includes following shortcut methods.
Method
Description
$http.get()
Perform Http GET request.
$http.head()
Perform Http HEAD request.
$http.post()
Perform Http POST request.
$http.put()
Perform Http PUT request.
$http.delete()
Perform Http DELETE request.
$http.jsonp()
Perform Http JSONP request.
$http.patch()
Perform Http PATCH request.
ii. HTTP:
var promise = $http.get("/demo/getdata").success(onSuccess).error(onError);
$http.post('/demo/submitData', { myData: 'Hello World!' })
.success(onSuccess)
.error(onError);
iii. LOG:
$log.log('This is log.');
$log.error('This is error.');
$log.info('This is info.');
$log.warn('This is warning.');
$log.debug('This is debugging.');
9.5. Angularjs filters:
{{expression | filterName:parameter }}
Filter Name
Description
Number
Formats a numeric data as text with comma and fraction.
Currency
Formats numeric data into specified currency format and fraction.
Date
Formats date to string in specified format.
Uppercase
Converts string to upper case.
Lowercase
Converts string to lower case.
Filter
Filters an array based on specified criteria and returns new array.
orderBy
Sorts an array based on specified predicate expression.
Json
Converts JavaScript object into JSON string
limitTo
Returns new array containing specified number of elements from an existing array.
e. Modules:
Different files:
app.js:
var myApp = angular.module(“myApp”, []);
myController.js:
myApp.controller(“myController”, function ($scope) {
$scope.message = “Hello Angular World!”;
});
f. Forms:
<form **ng-submit="submitStudnetForm()"** >
<label for="firstName" >First Name: </label><br />
<input type="text" id="firstName" ng-model="student.firstName" /> <br />
<label for="gender" >Gender</label> <br />
<select id="gender" ng-model="student.gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br /> <br />
<input type="submit" value="Submit" />
<input type="reset" ng-click="resetForm()" value="Reset" />
</form>
g. AngularJS includes the following validation directives.
Directive
Description
ng-required
Sets required attribute on an input field.
ng-minlength
Sets minlength attribute on an input field.
ng-maxlength
Sets maxlength attribute on an input field. Setting the attribute to a negative or non-numeric value, allows view values of any length.
ng-pattern
Sets pattern validation error key if the ngModel value does not match the specified RegEx expression.
h. Route:
var app = angular.module('ngRoutingDemo', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/login.html',
controller: 'loginController'
}).when('/student/:username', {
templateUrl: '/student.html',
controller: 'studentController'
}).otherwise({
redirectTo: "/"
});
app.controller("loginController", function ($scope, $location) {
$scope.authenticate = function (username) {
// write authentication code here..
$location.path('/student/' + username)
};
});
app.controller("studentController", function ($scope, $routeParams) {
$scope.username = $routeParams.username;
});
i. Exception Handling:
app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
return function (exception, cause) {
$delegate(exception, cause);
alert('Error occurred! Please contact admin.');
};
});
});