Introduction of angular js
5 likes•1,785 views
The document provides an introduction to AngularJS, covering its purpose as a framework developed by Google to standardize web application development. It discusses key features such as bootstrapping, templates, two-way data binding, dependency injection, routing, and custom directives. Additionally, it includes examples of how to implement these features in a web application context.
![TEMPLATES
<ul>
<li ng-repeat = "item in [ 'web' , 'element' , '#14'] ">
{{item}}
</li>
</ul>
This will result :
● web
● eleent
● #14](https://image.slidesharecdn.com/introductionofangularjs-130302093119-phpapp02/85/Introduction-of-angular-js-5-320.jpg)
![TEMPLATES
● with Controller
○ JS
myApp.controller('TemplatesController',function($scope){
$scope.items=['web','element','#14'];
});
○ Template
<div ng-controller="TemplatesController">
<span ng-repeat="item in items">
{{item}} <small> {{$index}} </small>
</span>
</div>](https://image.slidesharecdn.com/introductionofangularjs-130302093119-phpapp02/85/Introduction-of-angular-js-6-320.jpg)
![ROUTING
$routeProvider
myApp.config(['$routeProvider',function($rp){
$rp
.when('/foo',{
templateUrl : 'tpl/foo.html',
controller : FooController
})
.otherwise({ redirectTo : '/bar' });
}]);](https://image.slidesharecdn.com/introductionofangularjs-130302093119-phpapp02/85/Introduction-of-angular-js-11-320.jpg)
Introduction of angular js
- 1. Introduction of AngularJS By : Tamer Solieman
- 2. What's AngularJS ● Why Called ng. ● Is AngularJS a library, framework, plugin or a browser extension? ● Is AngularJS a templating system? ● What browsers does AngularJS work with? ● Does AngularJS use the jQuery library? ● It was developed by Google. AngularJS came about to standardize web application structure and provide a future template for how client-side apps should be developed.
- 3. Why AngularJS? ● Bootstrapping ● Templates ● 2-way data binding ● Dependency Injection ● Routing ● Directives
- 4. BOOTSTRAPPING Step 1: <html ng-app> Step 2 : <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5 /angular.min.js"></script>
- 5. TEMPLATES <ul> <li ng-repeat = "item in [ 'web' , 'element' , '#14'] "> {{item}} </li> </ul> This will result : ● web ● eleent ● #14
- 6. TEMPLATES ● with Controller ○ JS myApp.controller('TemplatesController',function($scope){ $scope.items=['web','element','#14']; }); ○ Template <div ng-controller="TemplatesController"> <span ng-repeat="item in items"> {{item}} <small> {{$index}} </small> </span> </div>
- 7. TEMPLATES ● Async Templates <div ng-view ><!-- Only one on the page --> But You can use this <div ng-include = "templates/foo.html" > with nested levels ;-) AngularJS loads the templates asynchronously.
- 8. 2-WAY DATA BINDING ● MVVM Pattern ● $scope Object
- 10. DEPENDENCY INJECTION myApp.service('myService',function(){/*...*/}); myApp.controller('SomeItemsController',function(myService){ //myService was automatically injected myService.get('some/path').success(function(data){ $scope.items=data.items; }); });
- 11. ROUTING $routeProvider myApp.config(['$routeProvider',function($rp){ $rp .when('/foo',{ templateUrl : 'tpl/foo.html', controller : FooController }) .otherwise({ redirectTo : '/bar' }); }]);
- 12. DIRECTIVES ● Directives let you invent new HTML syntax, specific to your application. ● Reusable Components. ● Localization.
- 13. THANKS Author : Tamer Solieman Twitter: @tamersolieman G+ : gplus.to/tamersolieman