Angular data binding by Soft Solutions4U

Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
AngularJS
Data Binding
Prepared By
Santhanam

Template Engine

One way data binding

Two way data binding (AngularJS)

Expressions


Expressions are used to bind application data to
HTML

Expressions are written inside double braces
like {{ expression }}

For example, valid expressions in Angular are:

1+2

a+b

user.name

items[index]
• In JavaScript, trying to use undefined properties
or methods generates ReferenceError or
TypeError. In AngularJs, it will not show any
error or warning.

Modules


Modules are used to separate logics say
services, controllers, application etc. and keep
the code clean.

A module is created by using the AngularJS
function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

Controllers


Controller is attached to the DOM via the ng-
controller directive

A new child scope will be created and made
available as an injectable parameter to the
Controller's constructor function as $scope

Use controllers to:
– Set up the initial state of the $scope object
– Add behavior to the $scope object

Set up the initial state of the $scope object
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope',
function($scope) {
$scope.greeting = 'Hola!';
}]);
Template
<div ng-controller="GreetingController">
{{ greeting }}
</div>

Add behavior to the $scope object
var myApp = angular.module('myApp',[]);
myApp.controller('DoubleController', ['$scope',
function($scope) {
$scope.double = function(value) {
return value * 2;
};
}]);
Template
<div ng-controller="DoubleController">
Two times <input ng-model="num"> equals {{ double(num) }}
</div>

Dependency Injection (DI)


Dependency Injection is a software design pattern in which
components are given their dependencies instead of hard coding
them within the component.

This helps in making components reusable, maintainable.

AngularJS provides following components which can be injected
into each other as dependencies
– value
– factory
– service
– provider
– constant

angular.module('myModule', [])
.factory('serviceId', ['depService',
function(depService) {
// ...
}])
.directive('directiveName', ['depService',
// ...
}])
.filter('filterName', ['depService',
// ...
}]);

Angular data binding by Soft Solutions4U

More Related Content

What's hot

Viewers also liked

Similar to Angular data binding by Soft Solutions4U

Recently uploaded

Angular data binding by Soft Solutions4U