Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeStock: Orchestrating Apps by Composing Angular Directives

CodeStock: Orchestrating Apps by Composing Angular Directives

Jeremy Fairbank

July 11, 2015
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. Orchestrating Apps by Composing Angular Directives
    9:25 AM / Ballroom C

    View full-size slide

  2. Orchestrating Apps by
    Composing Angular Directives
    Jeremy Fairbank
    @elpapapollo

    View full-size slide

  3. Hi, I’m Jeremy
    jfairbank
    @elpapapollo
    pushagency.io
    blog.jeremyfairbank.com
    simplybuilt.com

    View full-size slide

  4. Building software is hard

    View full-size slide

  5. Who is software for?

    View full-size slide

  6. Who is software for?
    • Computers
    • Users
    • Programmers
    • Me
    • You
    http://www.commitstrip.com/en/2015/05/29/always-stuck-somewhere-in-my-head/

    View full-size slide

  7. Competing Goals

    View full-size slide

  8. Competing Goals
    • Performance
    • Maintainability
    • Shipping
    • Readability
    • Scalability

    View full-size slide

  9. Competing Goals
    • Performance
    • Maintainability
    • Shipping
    • Readability
    • Scalability

    View full-size slide

  10. Patterns make it “easier”

    View full-size slide

  11. Why not use them with
    JavaScript frameworks?

    View full-size slide

  12. What is composition?

    View full-size slide

  13. What is composition?

    View full-size slide

  14. What is composition?

    View full-size slide

  15. – Wikipedia
    “The various visual elements, known as
    elements of design, formal elements, or
    elements of art, are the vocabulary
    with which the visual artist composes.
    These elements in the overall design
    usually relate to each other and to the
    whole art work.”
    What is composition?

    View full-size slide

  16. – Wikipedia
    “The way in which something is put
    together or arranged. The combination
    of parts or elements that make up
    something.”
    What is composition?

    View full-size slide

  17. Composition
    Create with small independent pieces.

    View full-size slide

  18. Composition
    Embodiment of many design principles.

    View full-size slide

  19. Design Principles

    View full-size slide

  20. Design Principles
    • Modularity
    • Separation of concerns (SOC)
    • Loose coupling
    • High cohesion
    • Composition over inheritance
    • Ad nauseam…

    View full-size slide

  21. Directives Review

    View full-size slide

  22. Directives Review
    • Attach behavior to the DOM via attributes, elements,
    comments, or CSS classes
    • Componentize functionality with HTML
    • Create custom HTML elements

    View full-size slide

  23. Directives Review
    • Attach behavior to the DOM via attributes, elements,
    comments, or CSS classes
    • Componentize functionality with HTML
    • Create custom HTML elements


    View full-size slide

  24. Directives Review
    angular.module('myApp', [])
    .directive('nameTag', function() {
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    });

    View full-size slide

  25. Directives Review
    angular.module('myApp', [])
    .directive('nameTag', function() {
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    });

    View full-size slide

  26. Directives Review
    angular.module('myApp', [])
    .directive('nameTag', function() {
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    });

    View full-size slide

  27. Directives Review
    angular.module('myApp', [])
    .directive('nameTag', function() {
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    });

    View full-size slide

  28. Directives Review








    View full-size slide

  29. Directives Review








    View full-size slide

  30. Directives Review








    View full-size slide

  31. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };

    View full-size slide

  32. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    Restrict to element declaration
    (i.e. ``)
    E - element
    A - attribute
    C - class name

    View full-size slide

  33. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    Isolate scope
    @ - attributes
    = - bindings
    & - behavior/callbacks

    View full-size slide

  34. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    Templates
    template - literal template
    templateUrl - url or script id for template

    View full-size slide

  35. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };
    link
    manipulate DOM or set some
    defaults on scope
    controller
    add to scope too, preferably
    for exposing an API
    Set up

    View full-size slide

  36. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };








    View full-size slide

  37. Directives Review
    return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };








    Supplying the
    attribute value

    View full-size slide

  38. return {
    restrict: 'E',
    scope: { name: '@' },
    template: 'Hello, my name is {{name}}',
    link: function(scope) {
    if (!scope.name) {
    scope.name = 'Joe Schmoe';
    }
    }
    };








    Directives Review
    Using the
    default value

    View full-size slide

  39. Composition and Angular

    View full-size slide

  40. Composition and Angular
    • Focus on smaller problems to solve a large problem
    • Apply design principles to directives
    • Build app in terms of directives
    • Decompose large directives into small reusable directives
    • Refactoring and adding new features becomes more
    manageable

    View full-size slide

  41. But how do we fit directives
    together?

    View full-size slide

  42. Data Flow
    App
    Directive Directive
    Directive Directive Directive Directive Directive
    Directive Directive

    View full-size slide

  43. Data Flow
    • Connecting directives to
    build an “app” through the
    flow of data
    • Handling model data
    among directives
    • Many approaches with
    pros and cons
    App
    Directive Directive
    Directive Directive Directive Directive Directive
    Directive Directive

    View full-size slide

  44. Data Flow
    1. Shared/global state with
    prototypal scoping
    2. Exporting API’s with
    directive controllers
    3. Isolate scope bindings and
    callbacks
    4. Event broadcasting and
    emitting
    App
    Directive Directive
    Directive Directive Directive Directive Directive
    Directive Directive

    View full-size slide

  45. Prototypal Scoping

    View full-size slide

  46. Prototypal Scoping
    app.directive('imageGallery', function() {
    return {
    scope: true,
    templateUrl: 'image-gallery.html'
    };
    });

    View full-size slide

  47. Prototypal Scoping
    app.directive('imageGallery', function() {
    return {
    scope: true,
    templateUrl: 'image-gallery.html'
    };
    });
    Create a child scope that
    “inherits” from parent scope

    View full-size slide

  48. Prototypal Scoping
    app.controller('ImageCtrl', function($scope) {
    function createImage(src, text) {
    return { src: src, text: text, favorited: false };
    }
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    });

    View full-size slide

  49. Prototypal Scoping
    app.controller('ImageCtrl', function($scope) {
    function createImage(src, text) {
    return { src: src, text: text, favorited: false };
    }
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    });

    View full-size slide

  50. Prototypal Scoping
    app.controller('ImageCtrl', function($scope) {
    function createImage(src, text) {
    return { src: src, text: text, favorited: false };
    }
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    });

    View full-size slide

  51. Prototypal Scoping
    <br/><main-image></main-image><br/><image-list></image-list><br/><image-favorites></image-favorites><br/>



    View full-size slide

  52. Prototypal Scoping
    <br/><main-image></main-image><br/><image-list></image-list><br/><image-favorites></image-favorites><br/>



    View full-size slide

  53. Prototypal Scoping
    <br/><main-image></main-image><br/><image-list></image-list><br/><image-favorites></image-favorites><br/>



    View full-size slide

  54. Prototypal Scoping
    <br/><h3>Main Image</h3><br/><img width="160" ng-src="{{mainImage.src}}"><br/>

    View full-size slide

  55. Prototypal Scoping
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  56. Prototypal Scoping
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  57. Prototypal Scoping
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  58. Prototypal Scoping
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  59. Prototypal Scoping
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  60. Prototypal Scoping
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  61. Prototypal Scoping
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  62. Prototypal Scoping
    app.directive('mainImage', function() {
    return {
    scope: true,
    templateUrl: 'image-gallery.html'
    };
    });

    View full-size slide

  63. Prototypal Scoping
    app.directive('imageFavorites', function() {
    return {
    scope: true,
    templateUrl: 'image-favorites.html',
    link: function(scope) {
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    scope.imageFavorites.splice(i, 1);
    }
    };
    }
    };
    });

    View full-size slide

  64. Prototypal Scoping
    app.directive('imageFavorites', function() {
    return {
    scope: true,
    templateUrl: 'image-favorites.html',
    link: function(scope) {
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    scope.imageFavorites.splice(i, 1);
    }
    };
    }
    };
    });

    View full-size slide

  65. Prototypal Scoping
    Demo

    View full-size slide

  66. Prototypal Scoping
    What about more than one gallery?








    View full-size slide

  67. Prototypal Scoping
    What about more than one gallery?








    View full-size slide

  68. Prototypal Scoping
    app.controller('CatImageCtrl', function($scope) {
    $scope.images = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    }).controller('NatureImageCtrl', function($scope) {
    $scope.images = [
    createImage('/images/nature-1.jpg', 'Nature 1'),
    createImage('/images/nature-2.jpg', 'Nature 2'),
    createImage('/images/nature-3.jpg', 'Nature 3'),
    createImage('/images/nature-4.jpg', 'Nature 4')
    ];
    });

    View full-size slide

  69. Prototypal Scoping
    Demo

    View full-size slide

  70. Prototypal Scoping
    What’s the problem?

    View full-size slide

  71. Prototypal Scoping
    Object properties on prototypes are problematic

    View full-size slide

  72. app.controller('ImageCtrl', function($scope) {
    // ...
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    });
    app.directive('imageList', function() {
    return {
    // ...
    link: function(scope) {
    scope.setMainImage = function(image) {
    scope.mainImage.src = image.src;
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.imageFavorites.push(image);
    }
    };
    }
    };
    });

    View full-size slide

  73. app.controller('ImageCtrl', function($scope) {
    // ...
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    });
    app.directive('imageList', function() {
    return {
    // ...
    link: function(scope) {
    scope.setMainImage = function(image) {
    scope.mainImage.src = image.src;
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.imageFavorites.push(image);
    }
    };
    }
    };
    });

    View full-size slide

  74. app.controller('ImageCtrl', function($scope) {
    // ...
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    });
    app.directive('imageList', function() {
    return {
    // ...
    link: function(scope) {
    scope.setMainImage = function(image) {
    scope.mainImage.src = image.src;
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.imageFavorites.push(image);
    }
    };
    }
    };
    });

    View full-size slide

  75. app.controller('CatImageCtrl', function($scope) {
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    }).controller('NatureImageCtrl', function($scope) {
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/nature-1.jpg', 'Nature 1'),
    createImage('/images/nature-2.jpg', 'Nature 2'),
    createImage('/images/nature-3.jpg', 'Nature 3'),
    createImage('/images/nature-4.jpg', 'Nature 4')
    ];
    });

    View full-size slide

  76. app.controller('CatImageCtrl', function($scope) {
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    }).controller('NatureImageCtrl', function($scope) {
    $scope.mainImage = {};
    $scope.imageFavorites = [];
    $scope.images = [
    createImage('/images/nature-1.jpg', 'Nature 1'),
    createImage('/images/nature-2.jpg', 'Nature 2'),
    createImage('/images/nature-3.jpg', 'Nature 3'),
    createImage('/images/nature-4.jpg', 'Nature 4')
    ];
    });

    View full-size slide

  77. Prototypal Scoping Fixed
    Demo

    View full-size slide

  78. Prototypal Scoping
    • Reusable functions
    • Perfect when sharing data is desired
    • Shared data is problematic when reusing directive
    • Fixing shared data issues duplicates code
    • Assumptions about parent scopes

    View full-size slide

  79. Requiring Directive Controllers

    View full-size slide

  80. Requiring Directive Controllers
    Export an API from a parent directive

    View full-size slide

  81. Requiring Directive Controllers
    app.directive('imageList', function() {
    return {
    require: '^imageGallery',
    scope: true,
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    ctrl.setMainImage(scope.images[0]);
    scope.ctrl = ctrl;
    }
    };
    });

    View full-size slide

  82. Requiring Directive Controllers
    app.directive('imageList', function() {
    return {
    require: '^imageGallery',
    scope: true,
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    ctrl.setMainImage(scope.images[0]);
    scope.ctrl = ctrl;
    }
    };
    });

    View full-size slide

  83. Requiring Directive Controllers
    app.directive('imageList', function() {
    return {
    require: '^imageGallery',
    scope: true,
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    ctrl.setMainImage(scope.images[0]);
    scope.ctrl = ctrl;
    }
    };
    });
    Directive name

    View full-size slide

  84. Requiring Directive Controllers
    app.directive('imageList', function() {
    return {
    require: '^imageGallery',
    scope: true,
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    ctrl.setMainImage(scope.images[0]);
    scope.ctrl = ctrl;
    }
    };
    });
    Parent

    View full-size slide

  85. Requiring Directive Controllers
    app.directive('imageList', function() {
    return {
    require: '^imageGallery',
    scope: true,
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    ctrl.setMainImage(scope.images[0]);
    scope.ctrl = ctrl;
    }
    };
    });

    View full-size slide

  86. Requiring Directive Controllers
    app.directive('imageList', function() {
    return {
    require: '^imageGallery',
    scope: true,
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    ctrl.setMainImage(scope.images[0]);
    scope.ctrl = ctrl;
    }
    };
    });

    View full-size slide

  87. Requiring Directive Controllers
    app.directive('imageGallery', function() {
    return {
    scope: true,
    templateUrl: 'templates/image-gallery.html',
    controller: function() {
    // ...
    }
    };
    });

    View full-size slide

  88. Requiring Directive Controllers
    app.directive('imageGallery', function() {
    return {
    scope: true,
    templateUrl: 'templates/image-gallery.html',
    controller: function() {
    // ...
    }
    };
    });

    View full-size slide

  89. controller: function() {
    this.mainImage = {};
    this.imageFavorites = [];
    this.setMainImage = function(image) {
    this.mainImage.src = image.src;
    };
    this.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    this.imageFavorites.push(image);
    }
    };
    this.unfavorite = function(image) {
    var i = this.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    this.imageFavorites.splice(i, 1);
    }
    };
    }

    View full-size slide

  90. controller: function() {
    this.mainImage = {};
    this.imageFavorites = [];
    this.setMainImage = function(image) {
    this.mainImage.src = image.src;
    };
    this.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    this.imageFavorites.push(image);
    }
    };
    this.unfavorite = function(image) {
    var i = this.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    this.imageFavorites.splice(i, 1);
    }
    };
    }

    View full-size slide

  91. controller: function() {
    this.mainImage = {};
    this.imageFavorites = [];
    this.setMainImage = function(image) {
    this.mainImage.src = image.src;
    };
    this.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    this.imageFavorites.push(image);
    }
    };
    this.unfavorite = function(image) {
    var i = this.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    this.imageFavorites.splice(i, 1);
    }
    };
    }

    View full-size slide

  92. Requiring Directive Controllers
    app.directive('mainImage', function() {
    return {
    require: '^imageGallery',
    // ...
    link: function(scope, el, attrs, ctrl) {
    scope.ctrl = ctrl;
    }
    }
    }).directive('imageFavorites', function() {
    return {
    require: '^imageGallery',
    // ...
    link: function(scope, el, attrs, ctrl) {
    scope.ctrl = ctrl;
    }
    };
    });

    View full-size slide

  93. Requiring Directive Controllers
    <br/><h3>Main Image</h3><br/><img width="160" ng-src="{{ctrl.mainImage.src}}"><br/>

    View full-size slide

  94. Requiring Directive Controllers
    <br/><h3>Main Image</h3><br/><img width="160" ng-src="{{ctrl.mainImage.src}}"><br/>

    View full-size slide

  95. Requiring Directive Controllers
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="ctrl.favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="ctrl.setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  96. Requiring Directive Controllers
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="ctrl.favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="ctrl.setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  97. Requiring Directive Controllers
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{ctrl.imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in ctrl.imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="ctrl.unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  98. Requiring Directive Controllers
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{ctrl.imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in ctrl.imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="ctrl.unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  99. Requiring Directive Controllers
    Demo

    View full-size slide

  100. Requiring Directive Controllers
    • Consolidate behavior into a controller API
    • Keep own copy of data instead of sharing
    • Higher coupling — child directives depend upon parent
    directive
    • Still need a parent controller to scope own images (cat
    versus nature)

    View full-size slide

  101. Isolate Scopes

    View full-size slide

  102. Isolate Scopes
    • Directive scope is isolated from other scopes
    – No parent scope to inherit from
    – Can’t access other scopes “easily”
    • Use object literal for scope definition
    scope: {
    age: '@age',
    name: '=',
    selectHobby: '&onSelectHobby'
    }

    View full-size slide

  103. Isolate Scopes
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    scope: {
    name: '=',
    age: '@age',
    selectHobby: '&onSelectHobby'
    }

    View full-size slide

  104. scope: {
    name: '=',
    age: '@age',
    selectHobby: '&onSelectHobby'
    }
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    Isolate Scopes
    Explicitly specify HTML attribute

    View full-size slide

  105. scope: {
    name: '=',
    age: '@age',
    selectHobby: '&onSelectHobby'
    }
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    Isolate Scopes
    Implicit — use the scope
    key for HTML attribute

    View full-size slide

  106. Isolate Scopes
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    scope: {
    name: '=',
    age: '@age',
    selectHobby: '&onSelectHobby'
    }
    Bidirectional data binding
    Use property scopeName
    from current scope

    View full-size slide

  107. Isolate Scopes
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    scope: {
    name: '=',
    age: '@age',
    selectHobby: '&onSelectHobby'
    }
    Attribute/string binding; static.
    Use literal string "28"

    View full-size slide

  108. Isolate Scopes
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    scope: {
    name: '=',
    age: '@age',
    selectHobby: '&onSelectHobby'
    }
    Execute code in a “parent”
    scope (i.e. a callback)
    Function call with any parameter names. Uses function
    printHobby on parent scope (not the directive scope).

    View full-size slide

  109. Isolate Scopes
    app.directive('nameTag', function() {
    return {
    scope: {
    age: '@age',
    name: '=',
    selectHobby: '&onSelectHobby'
    },
    templateUrl: 'name-tag.html',
    link: function(scope, el, attrs) {
    scope.hobbies = ['program', 'read', 'play guitar'];
    scope.age = attrs.age;
    }
    };
    });

    View full-size slide

  110. Isolate Scopes
    <br/><p>Hi, my name is {{name}}. I am {{age}} years old.</p><br/><p><input type="text" ng-model="name"></p><br/><ul><br/><li ng-repeat="hobby in hobbies"><br/><a href="javascript:void(0)"<br/>ng-click="selectHobby({ hobby: hobby })"><br/>{{hobby}}<br/></a><br/></li><br/></ul><br/>

    View full-size slide

  111. Isolate Scopes
    <br/><p>Hi, my name is {{name}}. I am {{age}} years old.</p><br/><p><input type="text" ng-model="name"></p><br/><ul><br/><li ng-repeat="hobby in hobbies"><br/><a href="javascript:void(0)"<br/>ng-click="selectHobby({ hobby: hobby })"><br/>{{hobby}}<br/></a><br/></li><br/></ul><br/>

    View full-size slide

  112. Isolate Scopes
    <br/><p>Hi, my name is {{name}}. I am {{age}} years old.</p><br/><p><input type="text" ng-model="name"></p><br/><ul><br/><li ng-repeat="hobby in hobbies"><br/><a href="javascript:void(0)"<br/>ng-click="selectHobby({ hobby: hobby })"><br/>{{hobby}}<br/></a><br/></li><br/></ul><br/>

    View full-size slide

  113. Isolate Scopes
    <br/><p>Hi, my name is {{name}}. I am {{age}} years old.</p><br/><p><input type="text" ng-model="name"></p><br/><ul><br/><li ng-repeat="hobby in hobbies"><br/><a href="javascript:void(0)"<br/>ng-click="selectHobby({ hobby: hobby })"><br/>{{hobby}}<br/></a><br/></li><br/></ul><br/>

    View full-size slide

  114. Isolate Scopes
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    <br/><p>Hi, my name is {{name}}. I am {{age}} years old.</p><br/><p><input type="text" ng-model="name"></p><br/><ul><br/><li ng-repeat="hobby in hobbies"><br/><a href="javascript:void(0)"<br/>ng-click="selectHobby({ hobby: hobby })"><br/>{{hobby}}<br/></a><br/></li><br/></ul><br/>

    View full-size slide

  115. <br/><p>Hi, my name is {{name}}. I am {{age}} years old.</p><br/><p><input type="text" ng-model="name"></p><br/><ul><br/><li ng-repeat="hobby in hobbies"><br/><a href="javascript:void(0)"<br/>ng-click="selectHobby({ hobby: hobby })"><br/>{{hobby}}<br/></a><br/></li><br/></ul><br/>
    Isolate Scopes
    name="scopeName"
    age="28"
    on-select-hobby="printHobby(hobby)">
    Invocations require “named
    arguments” via object literal.

    View full-size slide

  116. Isolate Scopes
    Apply to the image gallery now

    View full-size slide

  117. Isolate Scopes




    View full-size slide

  118. Isolate Scopes




    View full-size slide

  119. Isolate Scopes
    app.controller('ImageCtrl', function($scope) {
    $scope.catImages = [
    createImage('/images/cat-1.jpg', 'Cat 1'),
    createImage('/images/cat-2.jpg', 'Cat 2'),
    createImage('/images/cat-3.jpg', 'Cat 3'),
    createImage('/images/cat-4.jpg', 'Cat 4')
    ];
    $scope.natureImages = [
    createImage('/images/nature-1.jpg', 'Nature 1'),
    createImage('/images/nature-2.jpg', 'Nature 2'),
    createImage('/images/nature-3.jpg', 'Nature 3'),
    createImage('/images/nature-4.jpg', 'Nature 4')
    ];
    });

    View full-size slide

  120. Isolate Scopes
    app.directive('imageGallery', function() {
    return {
    scope: {
    images: '='
    },
    templateUrl: 'templates/image-gallery.html',
    link: function(scope) {
    // ...
    }
    };
    });

    View full-size slide

  121. Isolate Scopes
    app.directive('imageGallery', function() {
    return {
    scope: {
    images: '='
    },
    templateUrl: 'templates/image-gallery.html',
    link: function(scope) {
    // ...
    }
    };
    });

    View full-size slide

  122. Isolate Scopes
    link: function(scope) {
    scope.mainImage = {};
    scope.imageFavorites = [];
    scope.setMain = function(image) {
    scope.mainImage.src = image.src;
    };
    scope.favorite = function(image) {
    scope.imageFavorites.push(image);
    };
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    scope.imageFavorites.splice(i, 1);
    }
    };
    }

    View full-size slide

  123. Isolate Scopes
    link: function(scope) {
    scope.mainImage = {};
    scope.imageFavorites = [];
    scope.setMain = function(image) {
    scope.mainImage.src = image.src;
    };
    scope.favorite = function(image) {
    scope.imageFavorites.push(image);
    };
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    scope.imageFavorites.splice(i, 1);
    }
    };
    }

    View full-size slide

  124. Isolate Scopes
    link: function(scope) {
    scope.mainImage = {};
    scope.imageFavorites = [];
    scope.setMain = function(image) {
    scope.mainImage.src = image.src;
    };
    scope.favorite = function(image) {
    scope.imageFavorites.push(image);
    };
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    scope.imageFavorites.splice(i, 1);
    }
    };
    }

    View full-size slide

  125. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  126. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  127. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  128. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  129. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  130. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  131. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  132. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  133. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  134. Isolate Scopes
    <br/><main-image image="mainImage"></main-image><br/><image-list<br/>images="images"<br/>on-set-main="setMain(image)"<br/>on-favorite="favorite(image)"></image-list><br/><image-favorites<br/>images="imageFavorites"<br/>on-unfavorite="unfavorite(image)"></image-favorites><br/>

    View full-size slide

  135. Isolate Scopes
    app.directive('mainImage', function() {
    return {
    scope: {
    mainImage: '=image'
    },
    templateUrl: 'templates/main-image.html'
    }
    });

    View full-size slide

  136. Isolate Scopes
    app.directive('mainImage', function() {
    return {
    scope: {
    mainImage: '=image'
    },
    templateUrl: 'templates/main-image.html'
    }
    });

    View full-size slide

  137. Isolate Scopes
    <br/><h3>Main Image</h3><br/><img width="160" ng-src="{{mainImage.src}}"><br/>

    View full-size slide

  138. Isolate Scopes
    <br/><h3>Main Image</h3><br/><img width="160" ng-src="{{mainImage.src}}"><br/>

    View full-size slide

  139. Isolate Scopes
    app.directive('imageFavorites', function() {
    return {
    scope: {
    imageFavorites: '=images',
    triggerUnfavorite: '&onUnfavorite'
    },
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.unfavorite = function(image) {
    image.favorited = false;
    scope.triggerUnfavorite({ image: image });
    };
    }
    };
    });

    View full-size slide

  140. Isolate Scopes
    app.directive('imageFavorites', function() {
    return {
    scope: {
    imageFavorites: '=images',
    triggerUnfavorite: '&onUnfavorite'
    },
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.unfavorite = function(image) {
    image.favorited = false;
    scope.triggerUnfavorite({ image: image });
    };
    }
    };
    });

    View full-size slide

  141. Isolate Scopes
    app.directive('imageFavorites', function() {
    return {
    scope: {
    imageFavorites: '=images',
    triggerUnfavorite: '&onUnfavorite'
    },
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.unfavorite = function(image) {
    image.favorited = false;
    scope.triggerUnfavorite({ image: image });
    };
    }
    };
    });

    View full-size slide

  142. Isolate Scopes
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  143. Isolate Scopes
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  144. Isolate Scopes
    <br/><h3>Favorites</h3><br/><h4>Favorited: {{imageFavorites.length}}</h4><br/><ul><br/><li ng-repeat="image in imageFavorites"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/>{{image.text}}<br/><button ng-click="unfavorite(image)"><br/>Unfavorite<br/></button><br/></p><br/></li><br/></ul><br/>

    View full-size slide

  145. app.directive('imageList', function() {
    return {
    scope: {
    images: '=',
    setMainImage: '&onSetMain',
    triggerFavorite: '&onFavorite'
    },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage({ image: scope.images[0] });
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.triggerFavorite({ image: image });
    }
    };
    }
    };
    });

    View full-size slide

  146. app.directive('imageList', function() {
    return {
    scope: {
    images: '=',
    setMainImage: '&onSetMain',
    triggerFavorite: '&onFavorite'
    },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage({ image: scope.images[0] });
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.triggerFavorite({ image: image });
    }
    };
    }
    };
    });

    View full-size slide

  147. app.directive('imageList', function() {
    return {
    scope: {
    images: '=',
    setMainImage: '&onSetMain',
    triggerFavorite: '&onFavorite'
    },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage({ image: scope.images[0] });
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.triggerFavorite({ image: image });
    }
    };
    }
    };
    });

    View full-size slide

  148. app.directive('imageList', function() {
    return {
    scope: {
    images: '=',
    setMainImage: '&onSetMain',
    triggerFavorite: '&onFavorite'
    },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage({ image: scope.images[0] });
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.triggerFavorite({ image: image });
    }
    };
    }
    };
    });

    View full-size slide

  149. Isolate Scopes
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage({ image: image })"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  150. Isolate Scopes
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage({ image: image })"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  151. Isolate Scopes
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage({ image: image })"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  152. Isolate Scopes
    Demo

    View full-size slide

  153. Isolate Scopes
    • Black box a directive to be self-contained and reusable
    • Think in terms of small pieces
    • Establish well-defined interface/API through HTML
    attributes
    • Juggle multiple points of state
    • More markup

    View full-size slide

  154. Events
    • Built in eventing with $emit, $broadcast, and $on
    methods of $scope.
    • Use events like a message bus to transfer data
    • Events travel vertically through scopes
    – Use parent scope event delegation for sibling directive
    communication

    View full-size slide

  155. Events
    $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });

    View full-size slide

  156. $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    Events
    $emit sends events up
    to parent scopes.

    View full-size slide

  157. $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    Events
    $broadcast sends events
    down to child scopes.

    View full-size slide

  158. $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    Events
    $on listens for $emit
    and $broadcast
    events and triggers the
    provided callbacks.

    View full-size slide

  159. // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    Events
    The first parameter is
    an event object like
    DOM events.

    View full-size slide

  160. // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    Events
    Remaining
    parameters are the
    remaining arguments
    supplied to $emit
    and $broadcast.

    View full-size slide

  161. $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    Events
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    Stick to a naming
    convention like
    verb:noun.

    View full-size slide

  162. $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    Events
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    Verb

    View full-size slide

  163. $scope.$emit('select:greeting', 'hello world');
    $scope.$broadcast('add:item', 42);
    Events
    // In a child directive
    var items = [];
    $scope.$on('add:item', function(e, n) {
    items.push(n);
    });
    // In a parent directive
    $scope.$on('select:greeting', function(e, greeting) {
    console.log(greeting.toUpperCase());
    });
    Noun

    View full-size slide

  164. Events
    Apply to the image gallery now

    View full-size slide

  165. Events
    <br/><main-image></main-image><br/><image-list images="images"></image-list><br/><image-favorites></image-favorites><br/>

    View full-size slide

  166. Events
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  167. Events
    <br/><h3>Images</h3><br/><div class="image-info" ng-repeat="image in images"><br/><div ng-click="favorite(image)"><br/><img ng-src="{{image.src}}"><br/></div><br/><p>{{image.text}}</p><br/><button ng-click="setMainImage(image)"><br/>Set Main Image<br/></button><br/></div><br/>

    View full-size slide

  168. app.directive('imageList', function() {
    return {
    scope: { images: '=', },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage = function(image) {
    scope.$emit('delegate:set:mainImage', image);
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.$emit('delegate:favorite:image', image);
    }
    };
    scope.setMainImage(scope.images[0]);
    }
    };
    });

    View full-size slide

  169. app.directive('imageList', function() {
    return {
    scope: { images: '=', },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage = function(image) {
    scope.$emit('delegate:set:mainImage', image);
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.$emit('delegate:favorite:image', image);
    }
    };
    scope.setMainImage(scope.images[0]);
    }
    };
    });

    View full-size slide

  170. app.directive('imageList', function() {
    return {
    scope: { images: '=', },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage = function(image) {
    scope.$emit('delegate:set:mainImage', image);
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.$emit('delegate:favorite:image', image);
    }
    };
    scope.setMainImage(scope.images[0]);
    }
    };
    });

    View full-size slide

  171. app.directive('imageList', function() {
    return {
    scope: { images: '=', },
    templateUrl: 'templates/image-list.html',
    link: function(scope, el, attrs, ctrl) {
    scope.setMainImage = function(image) {
    scope.$emit('delegate:set:mainImage', image);
    };
    scope.favorite = function(image) {
    if (!image.favorited) {
    image.favorited = true;
    scope.$emit('delegate:favorite:image', image);
    }
    };
    scope.setMainImage(scope.images[0]);
    }
    };
    });

    View full-size slide

  172. Events
    app.directive('imageGallery', function() {
    return {
    scope: { images: '=' },
    templateUrl: 'templates/image-gallery.html',
    link: function(scope) {
    scope.$on('delegate:set:mainImage', function(e, image) {
    scope.$broadcast('set:mainImage', image);
    });
    scope.$on('delegate:favorite:image', function(e, image) {
    scope.$broadcast('favorite:image', image);
    });
    }
    };
    });

    View full-size slide

  173. Events
    app.directive('imageGallery', function() {
    return {
    scope: { images: '=' },
    templateUrl: 'templates/image-gallery.html',
    link: function(scope) {
    scope.$on('delegate:set:mainImage', function(e, image) {
    scope.$broadcast('set:mainImage', image);
    });
    scope.$on('delegate:favorite:image', function(e, image) {
    scope.$broadcast('favorite:image', image);
    });
    }
    };
    });

    View full-size slide

  174. Events
    app.directive('mainImage', function() {
    return {
    scope: {},
    templateUrl: 'templates/main-image.html',
    link: function(scope) {
    scope.mainImage = {};
    scope.$on('set:mainImage', function(e, image) {
    scope.mainImage.src = image.src;
    });
    }
    }
    });

    View full-size slide

  175. Events
    app.directive('mainImage', function() {
    return {
    scope: {},
    templateUrl: 'templates/main-image.html',
    link: function(scope) {
    scope.mainImage = {};
    scope.$on('set:mainImage', function(e, image) {
    scope.mainImage.src = image.src;
    });
    }
    }
    });

    View full-size slide

  176. Events
    app.directive('mainImage', function() {
    return {
    scope: {},
    templateUrl: 'templates/main-image.html',
    link: function(scope) {
    scope.mainImage = {};
    scope.$on('set:mainImage', function(e, image) {
    scope.mainImage.src = image.src;
    });
    }
    }
    });

    View full-size slide

  177. Events
    app.directive('mainImage', function() {
    return {
    scope: {},
    templateUrl: 'templates/main-image.html',
    link: function(scope) {
    scope.mainImage = {};
    scope.$on('set:mainImage', function(e, image) {
    scope.mainImage.src = image.src;
    });
    }
    }
    });

    View full-size slide

  178. app.directive('imageFavorites', function() {
    return {
    scope: {},
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.imageFavorites = [];
    scope.$on('favorite:image', function(e, image) {
    scope.imageFavorites.push(image);
    });
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    scope.imageFavorites.splice(i, 1);
    }
    };
    }
    };
    });

    View full-size slide

  179. app.directive('imageFavorites', function() {
    return {
    scope: {},
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.imageFavorites = [];
    scope.$on('favorite:image', function(e, image) {
    scope.imageFavorites.push(image);
    });
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    scope.imageFavorites.splice(i, 1);
    }
    };
    }
    };
    });

    View full-size slide

  180. app.directive('imageFavorites', function() {
    return {
    scope: {},
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.imageFavorites = [];
    scope.$on('favorite:image', function(e, image) {
    scope.imageFavorites.push(image);
    });
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    scope.imageFavorites.splice(i, 1);
    }
    };
    }
    };
    });

    View full-size slide

  181. app.directive('imageFavorites', function() {
    return {
    scope: {},
    templateUrl: 'templates/image-favorites.html',
    link: function(scope) {
    scope.imageFavorites = [];
    scope.$on('favorite:image', function(e, image) {
    scope.imageFavorites.push(image);
    });
    scope.unfavorite = function(image) {
    var i = scope.imageFavorites.indexOf(image);
    if (i > -1) {
    image.favorited = false;
    scope.imageFavorites.splice(i, 1);
    }
    };
    }
    };
    });

    View full-size slide

  182. Events
    • Decouple directives
    • Isolate state more easily
    • Cleaner markup
    • Indirection of data flow (who responds to an event?)
    • Have to remember and duplicate event names (may hurt
    directive reuse)

    View full-size slide

  183. Upshot
    Refactoring

    View full-size slide

  184. Refactoring
    • Easier to change or update app
    • Don’t have to touch entire app, just an individual directive
    – Touching multiple pieces may mean better SOC needed
    – SOC is evolutionary for the lifetime of the app

    View full-size slide

  185. • Remove count
    • Remove image text
    • Sort images by text
    Alter image gallery favorites
    Refactoring
    Demo

    View full-size slide

  186. Refactoring
    Alter image gallery favorites
    <br/><h3>Favorites</h3><br/><ul><br/><li ng-repeat="image in imageFavorites | orderBy: 'text'"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/></p><br/><button ng-clik="unfavorite(image)"><br/>Unfavorite<br/></button><br/></li><br/></ul><br/>

    View full-size slide

  187. <br/><h3>Favorites</h3><br/><ul><br/><li ng-repeat="image in imageFavorites | orderBy: 'text'"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/></p><br/><button ng-clik="unfavorite(image)"><br/>Unfavorite<br/></button><br/></li><br/></ul><br/>
    Refactoring
    Alter image gallery favorites
    Favorites count gone

    View full-size slide

  188. Refactoring
    Alter image gallery favorites
    <br/><h3>Favorites</h3><br/><ul><br/><li ng-repeat="image in imageFavorites | orderBy: 'text'"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/></p><br/><button ng-clik="unfavorite(image)"><br/>Unfavorite<br/></button><br/></li><br/></ul><br/>
    Image text gone

    View full-size slide

  189. Refactoring
    Alter image gallery favorites
    <br/><h3>Favorites</h3><br/><ul><br/><li ng-repeat="image in imageFavorites | orderBy: 'text'"><br/><p><br/><img ng-src="{{image.src}}" width="40"><br/></p><br/><button ng-clik="unfavorite(image)"><br/>Unfavorite<br/></button><br/></li><br/></ul><br/>

    View full-size slide

  190. Composition is a critical
    tool in software
    development.

    View full-size slide

  191. Thanks!
    jfairbank
    @elpapapollo
    blog.jeremyfairbank.com
    Demo and code
    github.com/jfairbank/orchestrating-apps-angular

    View full-size slide