AngularJS - the folly of choice

2,185 views

Published on

An intro to AngularJS and some experiences of using it to build https://starthq.com

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
2,185
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
59
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

AngularJS - the folly of choice

  1. 1. communityjs.org
  2. 2. StartHQ
  3. 3. Toolkits vs. Frameworks
  4. 4. Toolkits vs. Frameworks●Toolkit: collection of librariessome assembly required●Libraries should “do one thing and do it well”●Inversion of controlYou call a library, but a framework calls you
  5. 5. A Bit of History
  6. 6. AngularJS
  7. 7. AngularJS●What HTML would have been, had it beendesigned for building web apps●80% of code deals with manipulating the DOMAngularJS makes this go away●Definitely a standalone frameworkmodules, templating, dependency injection, events,services, promises, testing, directives, http,interceptors, history
  8. 8. Key Features
  9. 9. Key Features●Declarative – not imperativeTwo way data binding●Doesnt abstract away the DOMAugments it with directives●More than one way to do the same thing
  10. 10. Scopes
  11. 11. Scopes• creating a scope & controller$rootScope• prototypal inheritance• scope attributes & methods• importance of the dot
  12. 12. Templates
  13. 13. Templates• Interpolationng-directive alternative• ng-show, ng-hideng-cloak• ng-repeat<li ng-repeat=”item in items”>{{item.name}}</li>• logic can be templates
  14. 14. Modules
  15. 15. Modulesvar app = angular.module(app, [/* deps */]).config([..., function() {}]).run([..., function() {}]);• convenience methodscontroller, directive, filter, value, factory, providerngmodules.org
  16. 16. Dependency Injection
  17. 17. Dependency Injection• inversion of control, removal of global state– Important for testing• function TodoCtrl($scope) {}• app.controller(TodoCtrl,[$scope, function() {}]);
  18. 18. Views
  19. 19. Views• ng-view• ng-include src="/navbar.html"
  20. 20. Routing
  21. 21. Routing$locationProvider.html5Mode(true);$routeProvider.when(/config, {templateUrl:/views/config.html,controller:Config});$routeProvider.otherwise({redirectTo:/});
  22. 22. Directives
  23. 23. Directivesapp.directive(ngLoad, function() {return function($scope, element) {});• wrapping jQuery plugins$scope.watch, $scope.apply• web components
  24. 24. Other Tools
  25. 25. Other Tools• Services$http, $location• Events• Filters• Promises$q
  26. 26. Testing
  27. 27. Testing• Unit tests• End to end tests• angular-seed project• Karma test runner
  28. 28. Study Material
  29. 29. Study Materialdocs.angular.org/tutorialwww.egghead.iowww.youtube.com/user/angularjsgithub.com/olegp/nexus
  30. 30. Conclusion
  31. 31. Thank you!@olegpodsechingithub.com/olegpstarthq.com

×