AngularJS at AIESEC Academy '15

download AngularJS at AIESEC Academy '15

of 58

  • date post

    10-Aug-2015
  • Category

    Education

  • view

    54
  • download

    4

Embed Size (px)

Transcript of AngularJS at AIESEC Academy '15

  1. 1. @
  2. 2. DESPRE NOI
  3. 3. DESPRE NOI BOGDAN COCHIOR
  4. 4. DESPRE NOI IULIAN GIOAD
  5. 5. DESPRE VOI
  6. 6. DESPRE VOI
  7. 7. DESPRE VOI
  8. 8. AGENDA S1 INTRODUCERE IN ANGULARJS CE APLICATIE VOM FACE? PREGATIREA MEDIULUI DE LUCRU (environment setup) DIRECTIVE (CORE)
  9. 9. AGENDA S2 CONTROLERE (controllers)
  10. 10. AGENDA S3 RUTAREA (routing) DESPRE REST (REpresentational State Transfer) SERVICII (http services and custom services)
  11. 11. AGENDA S4 BIBLIOTECI EXTERNE (third party)
  12. 12. INTRODUCERE IN
  13. 13. A JS FRAMEWORK
  14. 14. A JS LIBRARY?
  15. 15. CONCEPTS ocial
  16. 16. CONCEPTS personal
  17. 17. CONCEPTS Cand? Cum?
  18. 18. CORE FEATURES
  19. 19. CORE FEATURES - DI
  20. 20. DESIGN PATTERN
  21. 21. DESIGN PATTERN - MVC
  22. 22. PRO Single Page Application Data binding capability to HTML Unit testable Dependency injection and make use of separation of concerns Reusable components (directives) Less code and get more functionality Views = pure html pages; Controllers = business logic
  23. 23. CON Not Secure Not degradable
  24. 24. APLICATIA Basic To Do List
  25. 25. SPECIFICATII 1. Lista de taskuri 2. Adaugare de taskuri 3. Editare a taskurilor 4. Stergere a taskurilor 5. Marcarea taskurilor drept completate
  26. 26. SETUP ANGULAR Metode de instalare - Download - https://angularjs.org/ - Bower/NPM - Yeoman
  27. 27. BOOTSTRAP Metode de instalare - Download - http://getbootstrap.com/getting-started - Bower
  28. 28. CORE DIRECTIVEs
  29. 29. CORE DIRECTIVES ng-app ng-model ng-bind
  30. 30. ng-app ng-model ng-bind CORE DIRECTIVES
  31. 31. ng-controller ng-repeat ng-click ng-show/hide/class/href/src CORE DIRECTIVES
  32. 32. ng-controller ng-repeat ng-click ng-show/hide/class/href CORE DIRECTIVES
  33. 33. ng-if ng-change ng-checked ng-disabled ng- init ng-change ng-dblclick ng-form ng-blur ng-focus ng-include ng-mousedown ng- mouseup ng-mousenter ng-options ng- readonly ng-style ng-submit etc. CORE DIRECTIVES
  34. 34. CONTROLLERS
  35. 35. CONTROLLERS The business logic that controls the app Data-provider for our views
  36. 36. The business logic that controls the app Data-provider for our views CONTROLLERS
  37. 37. DIRTY CHECKING, WATCH LIST si DIGEST LOOP {{a+b}} oldValue newValue function
  38. 38. ROUTING
  39. 39. ROUTING SPA?
  40. 40. ROUTING
  41. 41. ROUTING
  42. 42. ROUTING
  43. 43. REST
  44. 44. Representational State Transfer REST este un tip de architectura ce exploateaza tehnologiile si protocoalele Web existente, inclusiv HTTP REST
  45. 45. WHY REST?
  46. 46. GET PUT HEAD OPTIONS DELETE POST PATCH REST VERBS
  47. 47. SERVICES
  48. 48. SERVICES singletons that carry out specic tasks lazy instantiated (only when you need them)
  49. 49. SERVICES interaction Provides inter- and cross-communication across scopes, services, lters, and other AngularJS artifacts. Just because a service encapsulates state does not mean you can persist the state there (do a refresh)
  50. 50. $scope $rootScope $location $http / $resource SERVICES - familiar till now
  51. 51. SERVICE FACTORY PROVIDER SERVICES
  52. 52. $http service
  53. 53. $http request object
  54. 54. $httpBackend service $httpBackend.whenGET(/^/tasks?limit=d+&oset=d+/).respond(fetchTasks); $httpBackend.whenGET(/^/tasks/d+/).respond(fetchTask); $httpBackend.whenPUT(/^/tasks/d+/done/).respond(completeTask); $httpBackend.whenPUT(/^/tasks/d+/).respond(updateTask); $httpBackend.whenPATCH(/^/tasks/d+/).respond(updateTask); $httpBackend.whenDELETE(/^/tasks/d+/).respond(deleteTask); $httpBackend.whenPOST(/^/tasks/).respond(addTask); $httpBackend.whenGET(/.*/).passThrough();
  55. 55. THIRD-PARTY
  56. 56. Useful resources Pluralsight Egghead.io ngBook AngularJS TDD development codeschool / tutorialspoint