Presentation about AngularJS at AIESEC Academy Iasi '15

1. @

2. DESPRE NOI

3. DESPRE NOI
BOGDAN COCHIOR

4. DESPRE NOI
IULIAN GIOADĂ

5. DESPRE VOI

6. DESPRE VOI

7. DESPRE VOI

8. AGENDA
S1
• INTRODUCERE IN ANGULARJS
• CE APLICATIE VOM FACE?
• PREGATIREA MEDIULUI DE
LUCRU (environment setup)
• DIRECTIVE (CORE)

9. AGENDA
S2 CONTROLERE (controllers)

10. AGENDA
S3
• RUTAREA (routing)
• DESPRE REST
(REpresentational State Transfer)
• SERVICII
(http services and custom services)

11. AGENDA
S4 BIBLIOTECI EXTERNE (third party)

12. INTRODUCERE IN

14. A JS FRAMEWORK

15. A JS LIBRARY?

16. CONCEPTS
oficial

17. CONCEPTS
personal

18. CONCEPTS
Cand?
Cum?

19. CORE FEATURES

20. CORE FEATURES - DI

21. DESIGN PATTERN

22. DESIGN PATTERN - MVC

23. 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

24. CON
Not Secure
Not degradable

25. APLICATIA
Basic To Do List

26. SPECIFICATII
1. Lista de taskuri
2. Adaugare de taskuri
3. Editare a taskurilor
4. Stergere a taskurilor
5. Marcarea taskurilor drept completate

27. SETUP
ANGULAR
Metode de instalare
- Download - https://angularjs.org/
- Bower/NPM
- Yeoman

28. BOOTSTRAP
Metode de instalare
- Download - http://getbootstrap.com/getting-started
- Bower

29. CORE DIRECTIVEs

30. CORE DIRECTIVES
ng-app
ng-model
ng-bind

31. ng-app
ng-model
ng-bind
CORE DIRECTIVES

32. ng-controller
ng-repeat
ng-click
ng-show/hide/class/href/src
CORE DIRECTIVES

33. ng-controller
ng-repeat
ng-click
ng-show/hide/class/href
CORE DIRECTIVES

34. 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

35. CONTROLLERS

36. CONTROLLERS
• The business logic that controls the app
• Data-provider for our views

37. • The business logic that controls the app
• Data-provider for our views
CONTROLLERS

38. DIRTY CHECKING, WATCH LIST si DIGEST LOOP
{{a+b}}
oldValue
newValue
function

39. ROUTING

40. ROUTING
SPA?

41. ROUTING

42. ROUTING

43. ROUTING

44. REST

45. Representational State Transfer
REST este un tip de architectura ce exploateaza
tehnologiile si protocoalele Web existente, inclusiv HTTP
REST

46. WHY REST?

47. GET
PUT
HEAD OPTIONS
DELETE
POST PATCH
REST VERBS

48. SERVICES

49. SERVICES
• singletons that carry out specific tasks
• lazy instantiated (only when you need them)

50. SERVICES interaction
Provides inter- and cross-communication across
scopes, services, filters, and other AngularJS
artifacts.
Just because a service encapsulates state does
not mean you can persist the state there (do a
refresh)

51. • $scope
• $rootScope
• $location
• $http / $resource
SERVICES - familiar till now

52. • SERVICE
• FACTORY
• PROVIDER
SERVICES

53. $http service

54. $http request object

55. $httpBackend service
$httpBackend.whenGET(/^/tasks?limit=d+&offset=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();

56. THIRD-PARTY

58. Useful resources
• Pluralsight
• Egghead.io
• ngBook
• AngularJS TDD development
• codeschool / tutorialspoint