{tocify} $title={Table of Contents}
· 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.');
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.');
};
});
});