![Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
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.](https://image.slidesharecdn.com/angulardatabinding-160322080952/85/Angular-data-binding-by-Soft-Solutions4U-6-320.jpg)
![Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
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>](https://image.slidesharecdn.com/angulardatabinding-160322080952/85/Angular-data-binding-by-Soft-Solutions4U-8-320.jpg)
![Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
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>](https://image.slidesharecdn.com/angulardatabinding-160322080952/85/Angular-data-binding-by-Soft-Solutions4U-11-320.jpg)
![Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
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>](https://image.slidesharecdn.com/angulardatabinding-160322080952/85/Angular-data-binding-by-Soft-Solutions4U-12-320.jpg)
![Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
angular.module('myModule', [])
.factory('serviceId', ['depService',
function(depService) {
// ...
}])
.directive('directiveName', ['depService',
function(depService) {
// ...
}])
.filter('filterName', ['depService',
function(depService) {
// ...
}]);](https://image.slidesharecdn.com/angulardatabinding-160322080952/85/Angular-data-binding-by-Soft-Solutions4U-15-320.jpg)
Angular data binding by Soft Solutions4U
- 1. Website : http://www.softsolutions4u.com Email : [email protected] AngularJS Data Binding Prepared By Santhanam
- 2. Website : http://www.softsolutions4u.com Email : [email protected] Template Engine
- 3. Website : http://www.softsolutions4u.com Email : [email protected] One way data binding
- 4. Website : http://www.softsolutions4u.com Email : [email protected] Two way data binding (AngularJS)
- 5. Website : http://www.softsolutions4u.com Email : [email protected] Expressions
- 6. Website : http://www.softsolutions4u.com Email : [email protected] 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.
- 7. Website : http://www.softsolutions4u.com Email : [email protected] Modules
- 8. Website : http://www.softsolutions4u.com Email : [email protected] 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>
- 9. Website : http://www.softsolutions4u.com Email : [email protected] Controllers
- 10. Website : http://www.softsolutions4u.com Email : [email protected] 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
- 11. Website : http://www.softsolutions4u.com Email : [email protected] 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>
- 12. Website : http://www.softsolutions4u.com Email : [email protected] 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>
- 13. Website : http://www.softsolutions4u.com Email : [email protected] Dependency Injection (DI)
- 14. Website : http://www.softsolutions4u.com Email : [email protected] 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
- 15. Website : http://www.softsolutions4u.com Email : [email protected] angular.module('myModule', []) .factory('serviceId', ['depService', function(depService) { // ... }]) .directive('directiveName', ['depService', function(depService) { // ... }]) .filter('filterName', ['depService', function(depService) { // ... }]);