ConnectJS Orchestrating Apps by Composing Angular Directives

Transcript

1. Orchestrating Apps by
   Composing Angular Directives
   Jeremy Fairbank
   jeremyfairbank.com
   @elpapapollo
   

   View Slide

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

   View Slide

3. Building applications is hard
   

   View Slide

4. Who is software for?
   

   View Slide

5. Who is software for?
   • Computers
   • Users
   • Programmers
   • Me
   • You
   

   View Slide

6. Competing Goals
   

   View Slide

7. Competing Goals
   • Performance
   • Maintainability
   • Shipping code
   • Readability
   • Scalability
   

   View Slide

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

   View Slide

9. Patterns make it “easier”
   

   View Slide

10. Why not use them with
    JavaScript frameworks?
    

    View Slide

11. Composition
    

    View Slide

12. What is composition?
    

    View Slide

13. What is composition?
    

    View Slide

14. What is composition?
    

    View 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 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 Slide

17. Composition
    Create with small independent pieces.
    

    View Slide

18. Composition
    Embodiment of many design principles.
    

    View Slide

19. Design Principles
    

    View Slide

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

    View Slide

21. Directives Review
    

    View 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 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 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 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 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 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 Slide

28. Directives Review
    
    
    
    
    
    
    
    
    

    View Slide

29. Directives Review
    
    
    
    
    
    
    
    
    

    View Slide

30. Directives Review
    
    
    
    
    
    
    
    
    

    View 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 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 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 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 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 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 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 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 Slide

39. Composition and Angular
    

    View 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 Slide

41. But how do we fit directives
    together?
    

    View Slide

42. Data Flow
    

    View Slide

43. Data Flow
    App
    Directive Directive
    Directive Directive Directive Directive Directive
    Directive Directive
    

    View Slide

44. 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 Slide

45. 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 Slide

46. Prototypal Scoping
    

    View Slide

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

    View Slide

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

    View 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 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 Slide

51. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

59. 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 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 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 Slide

62. 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 Slide

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

    View Slide

64. Prototypal Scoping
    app.directive('imageList', function() {
    return {
    scope: true,
    templateUrl: 'image-list.html',
    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 Slide

65. 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 Slide

66. 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 Slide

67. Prototypal Scoping
    Demo
    

    View Slide

68. Prototypal Scoping
    What about more than one gallery?
    
    
    
    
    
    
    
    
    

    View Slide

69. Prototypal Scoping
    What about more than one gallery?
    
    
    
    
    
    
    
    
    

    View Slide

70. 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 Slide

71. Prototypal Scoping
    Demo
    

    View Slide

72. Prototypal Scoping
    What’s the problem?
    

    View Slide

73. Prototypal Scoping
    Object properties on prototypes are problematic
    

    View 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 Slide

75. 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 Slide

76. 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 Slide

77. 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 Slide

78. 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 Slide

79. Prototypal Scoping Fixed
    Demo
    

    View Slide

80. 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 Slide

81. Requiring Directive Controllers
    

    View Slide

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

    View 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;
    }
    };
    });
    

    View 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;
    }
    };
    });
    

    View 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;
    }
    };
    });
    Directive name
    

    View 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;
    }
    };
    });
    Parent
    

    View Slide

87. 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 Slide

88. 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 Slide

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

    View Slide

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

    View 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 Slide

92. 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 Slide

93. 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 Slide

94. 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 Slide

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

    View Slide

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

    View Slide

97. 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 Slide

98. 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 Slide

99. 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 Slide

100. 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 Slide

101. Requiring Directive Controllers
     Demo
     

     View Slide

102. 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 Slide

103. Isolate Scopes
     

     View Slide

104. 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 Slide

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

     View Slide

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

     View Slide

107. 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 Slide

108. 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 Slide

109. 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 Slide

110. 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 Slide

111. 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 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 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 Slide

114. 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 Slide

115. 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 Slide

116. 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 Slide

117. <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 Slide

118. Isolate Scopes
     Apply to the image gallery now
     

     View Slide

119. Isolate Scopes
     
     
     
     
     

     View Slide

120. Isolate Scopes
     
     
     
     
     

     View Slide

121. 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 Slide

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

     View Slide

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

     View 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 Slide

125. 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 Slide

126. 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 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 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 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 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 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 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 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 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 Slide

135. 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 Slide

136. 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 Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View 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 Slide

142. 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 Slide

143. 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 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 Slide

145. 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 Slide

146. 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 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 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 Slide

149. 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 Slide

150. 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 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 Slide

152. 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 Slide

153. 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 Slide

154. Isolate Scopes
     Demo
     

     View Slide

155. 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 Slide

156. Events
     

     View Slide

157. 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 Slide

158. 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 Slide

159. $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 Slide

160. $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 Slide

161. $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 Slide

162. // 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 Slide

163. // 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 Slide

164. $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 Slide

165. $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 Slide

166. $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 Slide

167. Events
     Apply to the image gallery now
     

     View Slide

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

     View Slide

169. 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 Slide

170. 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 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 Slide

172. 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 Slide

173. 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 Slide

174. 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 Slide

175. 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 Slide

176. 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 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 Slide

178. 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 Slide

179. 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 Slide

180. 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 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 Slide

182. 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 Slide

183. 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 Slide

184. 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 Slide

185. Demo
     Events
     

     View Slide

186. 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 Slide

187. Upshot
     

     View Slide

188. Upshot
     Refactoring
     

     View Slide

189. 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 Slide

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

     View Slide

191. 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 Slide

192. <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 Slide

193. 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 Slide

194. 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 Slide

195. Composition is a critical
     tool in software
     development.
     

     View Slide

196. Thanks!
     jfairbank
     @elpapapollo
     blog.jeremyfairbank.com
     Demo and code
     github.com/jfairbank/orchestrating-apps-angular
     Slides:
     speakerdeck.com/jfairbank/connectjs-orchestrating-apps-by-composing-angular-directives
     

     View Slide