Try AngularJS!

A project based introduction to AngularJS

Transcript

1. Carlos Hernando
   @chernando
   

   View Slide

2. Javascript
   

   View Slide

3. AngularJS
   

   View Slide

4. 
   7KH3ULQFLSOHV
   %RLOHUSODWH
   '5< 6WUXFWXUH 7HVWDELOLW\
   Google I/O 2013 - Design Decisions in AngularJS
   http://youtu.be/HCR7i5F5L8c
   

   View Slide

5. AngularJS at a glance
   

   View Slide

6. View Slide

7. View
   

   View Slide

8. Bootstrap
   !
   !
   !
   !
   !
   
   /app/index.html
   

   View Slide

9. Directives
   !
   !
   !
   !
   !
   !
   !
   !
   
   /app/index.html
   

   View Slide

10. Data binding
    !
    !
    !
    !
    !
    Hello {{ name }}!
    !
    !
    !
    
    /app/index.html
    

    View Slide

11. step 0
    

    View Slide

12. Application Structure
    'use strict';!
    !
    angular.module('tryitApp', []);
    /app/scripts/app.js
    

    View Slide

13. Directives
    

    View Slide

14. ng-repeat
    !
    {{ talk.title }}!
    !
    !
    {{ talk.starts }}!
    {{ talk.author }}!
    !
    !
    !
    {{ talk.description }}!
    !
    
    /app/index.html
    

    View Slide

15. Filters
    !
    {{ talk.starts | date:'medium' }}!
    {{ talk.author | uppercase}}!
    !
    !
    /app/index.html
    

    View Slide

16. ng-repeat & filters
    !
    !
    !
    !
    {{ talk.title }}!
    !
    …!
    !
    !
    …!
    !
    
    /app/index.html
    

    View Slide

17. Directives & Data-binding
    !
    width="160"!
    height="160"!
    !
    ng-src="images/{{ talk.image || 'robot.png' }}">!
    !
    {{ talk.description }}!
    
    /app/index.html
    

    View Slide

18. step 1
    

    View Slide

19. No JavaScript
    

    View Slide

20. Controllers & Services
    

    View Slide

21. Controller: ScheduleCtrl
    angular.module('tryitApp')!
    .controller('ScheduleCtrl',!
    function ($scope) {!
    $scope.talks = […];!
    }!
    );!
    /app/scripts/controllers/schedule.js
    

    View Slide

22. $scope
    

    View Slide

23. Controllers & Views
    !
    !
    ng-controller="ScheduleCtrl">!
    !
    !
    {{ talk.title }}!
    …!
    
    /app/index.html
    

    View Slide

24. Service: T
    alks
    angular.module('tryitApp')!
    .service('Talks', function Talks() {!
    var talks = [!
    {!
    'id': 1,!
    'title': 'Acto de Apertura',!
    'starts': new Date('2012-03-17T10:00:00+0100'),!
    …!
    }, …!
    ];!
    !
    this.query = function () {!
    return talks;!
    };!
    });
    /app/scripts/services/talks.js
    

    View Slide

25. Dependency Injection
    angular.module('tryitApp')!
    .controller('ScheduleCtrl',!
    function ($scope, Talks) {!
    $scope.talks = Talks.query();!
    }!
    );
    /app/scripts/controllers/schedule.js
    

    View Slide

26. step 2
    

    View Slide

27. Testing
    

    View Slide

28. Service: Favorites
    angular.module('tryitApp')!
    .factory('Favorites', function ($log) {!
    var favorites = [];!
    !
    function addTalk(talk) {!
    …!
    }!
    !
    function isIn(talk) {!
    …!
    }!
    !
    return {!
    addTalk: addTalk,!
    isIn: isIn,!
    talks: function() {!
    return favorites;!
    },!
    };!
    });!
    /app/scripts/controllers/schedule.js
    

    View Slide

29. Test: Favorites
    describe('Service: Favorites', function () {!
    !
    beforeEach(module('tryitApp'));!
    !
    var Favorites,!
    talk1 = { id: 1 },!
    talk2 = { id: 2 };!
    !
    beforeEach(inject(function (_Favorites_) {!
    Favorites = _Favorites_;!
    }));!
    !
    it('should not add same talk twice', function () {!
    expect(Favorites.talks().length).toBe(0);!
    Favorites.addTalk(talk1);!
    Favorites.addTalk(talk1);!
    expect(Favorites.talks().length).toBe(1);!
    });!
    });!
    /test/spec/services/favorites.js
    

    View Slide

30. Adding Favorites
    angular.module('tryitApp')!
    .controller('ScheduleCtrl',!
    function ($scope, Talks, Favorites) {!
    $scope.talks = Talks.query();!
    $scope.favorites = Favorites;!
    }!
    );
    /app/scripts/controllers/schedule.js
    

    View Slide

31. Adding Favorites
    !
    {{ talk.starts | date:'medium' }}!
    {{ talk.author }}!
    !
    ng-click="favorites.addTalk(talk)">!
    Add to Favorites!
    !
    !
    
    /app/index.html
    

    View Slide

32. step 3
    

    View Slide

33. Routes & Views
    

    View Slide

34. Routes
    angular.module('tryitApp', ['ngRoute'])!
    .config(function ($routeProvider) {!
    $routeProvider!
    .when('/', {!
    templateUrl: 'views/schedule.html',!
    controller: 'ScheduleCtrl'!
    })!
    .when('/my-schedule', {!
    templateUrl: 'views/schedule.html',!
    controller: 'MyScheduleCtrl'!
    })!
    .otherwise({!
    redirectTo: '/'!
    });!
    });!
    /app/scripts/app.js
    

    View Slide

35. ng-view
    ng-view="">!
    !
    /app/index.html
    

    View Slide

36. views/schedule.html
    Talks!
    !
    !
    !
    !
    {{ talk.title }}!
    !
    {{ talk.starts | date:'medium' }}!
    {{ talk.author }}!
    ng-click="favorites.addTalk(talk)">!
    Add to Favorites!
    !
    !
    !
    !
    !
    {{ talk.description }}!
    !
    !
    /app/views/schedule.html
    

    View Slide

37. MyScheduleCtrl
    angular.module('tryitApp')!
    .controller('MyScheduleCtrl',!
    function ($scope, Favorites) {!
    $scope.talks = Favorites.talks();!
    $scope.favorites = Favorites;!
    });
    /app/scripts/controllers/myschedule.js
    

    View Slide

38. step 4
    

    View Slide

39. More…
    • Directives
    • Providers
    • Config
    • Constants
    • Directives
    • $watch & $apply
    • Protractor
    • Other modules:
    • Resource
    • Animation
    • …
    • …
    

    View Slide

40. Books
    

    View Slide

41. Questions?!?
    

    View Slide

42. https://github.com/chernando/tryit_angularjs/
    https://speakerdeck.com/chernando/try-angularjs
    

    View Slide

43. Thanks!
    

    View Slide

44. About
    This work is licensed under the Creative Commons
    Attribution-NonCommercial-ShareAlike 3.0 Unported
    License. To view a copy of this license, visit http://
    creativecommons.org/licenses/by-nc-sa/3.0/.
    Product names, logos and trademarks of other
    companies which are referenced in this document
    remain the property of those other companies.
    

    View Slide