Introduction of angular js
•
5 gostaram•1,779 visualizações
Introduction to AngularJS مقدمة عن AngularJS Follow us on Egyptian NodeJs Community on google+ https://plus.google.com/u/0/communities/110403046378899425503
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Introduction of angular js
Semelhante a Introduction of angular js (20)
Último
Último (20)
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