$30 off During Our Annual Pro Sale. View Details »

Try AngularJS!

Try AngularJS!

A project based introduction to AngularJS

Carlos Hernando

March 19, 2014
Tweet

More Decks by Carlos Hernando

Other Decks in Programming

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