O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
communityjs.org
StartHQ
Toolkits vs. Frameworks
Toolkits vs. Frameworks●Toolkit: collection of librariessome assembly required●Libraries should “do one thing and do it we...
A Bit of History
AngularJS
AngularJS●What HTML would have been, had it beendesigned for building web apps●80% of code deals with manipulating the DOM...
Key Features
Key Features●Declarative – not imperativeTwo way data binding●Doesnt abstract away the DOMAugments it with directives●More...
Scopes
Scopes• creating a scope & controller$rootScope• prototypal inheritance• scope attributes & methods• importance of the dot
Templates
Templates• Interpolationng-directive alternative• ng-show, ng-hideng-cloak• ng-repeat<li ng-repeat=”item in items”>{{item....
Modules
Modulesvar app = angular.module(app, [/* deps */]).config([..., function() {}]).run([..., function() {}]);• convenience me...
Dependency Injection
Dependency Injection• inversion of control, removal of global state– Important for testing• function TodoCtrl($scope) {}• ...
Views
Views• ng-view• ng-include src="/navbar.html"
Routing
Routing$locationProvider.html5Mode(true);$routeProvider.when(/config, {templateUrl:/views/config.html,controller:Config});...
Directives
Directivesapp.directive(ngLoad, function() {return function($scope, element) {});• wrapping jQuery plugins$scope.watch, $s...
Other Tools
Other Tools• Services$http, $location• Events• Filters• Promises$q
Testing
Testing• Unit tests• End to end tests• angular-seed project• Karma test runner
Study Material
Study Materialdocs.angular.org/tutorialwww.egghead.iowww.youtube.com/user/angularjsgithub.com/olegp/nexus
Conclusion
Thank you!@olegpodsechingithub.com/olegpstarthq.com
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
AngularJS - the folly of choice
Próximos SlideShares
Carregando em…5
×

AngularJS - the folly of choice

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

  • Entre para ver os comentários

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

×