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