Introduction of angular js

2,230 views
2,052 views

Published on

Introduction to AngularJS
مقدمة عن AngularJS

Follow us on Egyptian NodeJs Community on google+

https://plus.google.com/u/0/communities/110403046378899425503

Published in: Technology

Introduction of angular js

  1. 1. Introduction of AngularJSBy : Tamer Solieman
  2. 2. Whats 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. 3. Why AngularJS?● Bootstrapping● Templates● 2-way data binding● Dependency Injection● Routing● Directives
  4. 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. 5. TEMPLATES<ul> <li ng-repeat = "item in [ web , element , #14] "> {{item}} </li></ul>This will result : ● web ● eleent ● #14
  6. 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. 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. 8. 2-WAY DATA BINDING● MVVM Pattern● $scope Object
  9. 9. 2-WAY DATA BINDING
  10. 10. DEPENDENCY INJECTIONmyApp.service(myService,function(){/*...*/});myApp.controller(SomeItemsController,function(myService){ //myService was automatically injected myService.get(some/path).success(function(data){ $scope.items=data.items; });});
  11. 11. ROUTING$routeProvidermyApp.config([$routeProvider,function($rp){ $rp .when(/foo,{ templateUrl : tpl/foo.html, controller : FooController }) .otherwise({ redirectTo : /bar });}]);
  12. 12. DIRECTIVES● Directives let you invent new HTML syntax, specific to your application.● Reusable Components.● Localization.
  13. 13. THANKSAuthor : Tamer SoliemanTwitter: @tamersoliemanG+ : gplus.to/tamersolieman

×