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

The magic of Angular Dependency Injection

Alex Rothenberg
April 04, 2013
7
720

The magic of Angular Dependency Injection

Talk at AngularJS Boston Meetup April 3, 2013

Alex Rothenberg

April 04, 2013
Tweet

More Decks by Alex Rothenberg

See All by Alex Rothenberg
The Chirpolith: Successfully Migrating A Messy App To Ember
alexrothenberg
0
50
Don't let the Cocoa Api Crush your Ruby Code - Inspect2014
alexrothenberg
2
380

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Practical Orchestrator
shlominoach
186
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
The Cult of Friendly URLs
andyhume
78
6k
Being A Developer After 40
akosma
86
590k
Bash Introduction
62gerente
608
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2.1k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Speed Design
sergeychernyshev
24
600
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k

Transcript

  1. AngularJS Boston Meetup April 3, 2013 Alex Rothenberg http://www.alexrothenberg.com @alexrothenberg

    https://github.com/alexrothenberg McKinsey & Co. The Magic of Angular Dependency Injection Thursday, April 4, 13

  2. var MyController = function($scope, $filter, $location, $timeout, $http, $routeParams){ //

    start using these services } Thursday, April 4, 13

  3. var MyController = function() { var $scope = new Scope()

    var $location = LocationFactory.gimme() // load the rest... // now do some work } Thursday, April 4, 13

  4. This is the Angular Way var MyController = function($scope, $filter,

    $location, $timeout, $http, $routeParams){ // start using these services } Thursday, April 4, 13

  5. Inversion of Control Thursday, April 4, 13

  6. Dependency Injection Thursday, April 4, 13

  7. The Hollywood Principle Thursday, April 4, 13

  8. 1. Don’t hardcode your dependencies 2. Let your caller pass

    them in What is Dependency Injection? Thursday, April 4, 13

  9. var onClick = function() { $.get("https://api.github.com", function(data) { $('#res').html(data.emojis_url); }

    ); } $('#my-button').click(onClick); Thursday, April 4, 13

  10. var onClick = function() { $.get("https://api.github.com", function(data) { $('#res').html(data.emojis_url); }

    ); } $('#my-button').click(onClick); Thursday, April 4, 13

  11. it("should get the gihub emoji", function() { onClick() $('#res').html().should.equal('something') });

    Thursday, April 4, 13

  12. it("should get the gihub emoji", function() { onClick() $('#res').html().should.equal('something') });

    Oh no do we have to setup a DOM Thursday, April 4, 13

  13. it("should get the gihub emoji", function() { onClick() $('#res').html().should.equal('something') });

    Where did “something” come from? Thursday, April 4, 13

  14. it("should get the gihub emoji", function() { onClick() fakeDom.should.have.called('html') .with('something')

    }); Use a fakeDOM Thursday, April 4, 13

  15. it("should get the gihub emoji", function() { fakeAjax = mock

    fakeAjax.expectGET('https://api.github.com') .respond({ "emojis_url": "something" }); onClick() fakeDom.should.have.called('html') .with('something') }); Set “something” Expect “something” Thursday, April 4, 13

  16. it("should get the gihub emoji", function() { fakeAjax = mock

    fakeAjax.expectGET('https://api.github.com') .respond({ "emojis_url": "something" }); onClick(fakeDom, fakeAjax) fakeDom.should.have.called('html') .with('something') }); Use fake services Thursday, April 4, 13

  17. var onClick = function() { $.get("https://api.github.com", function(data) { $('#res').html(data.emojis_url); }

    ); } $('#my-button').click(onClick); Thursday, April 4, 13

  18. var onClick = function(ajaxer, domer) { ajaxer.get("https://api.github.com", function(data) { domer('#res').html(data.emojis_url);

    } ); } $('#my-button').click(onClick); Thursday, April 4, 13

  19. var onClick = function(ajaxer, domer) { ajaxer.get("https://api.github.com", function(data) { domer('#res').html(data.emojis_url);

    } ); } $('#my-button').click(onClick); How is jQuery passed in? Thursday, April 4, 13

  20. Thursday, April 4, 13

  21. <html ng-app> <head> <script src="angular.js"></script> <script> var MyController = function($scope)

    { $scope.name = 'World' } </script> </head> <body ng-controller="MyController"> Hello {{ name }} </body> </html> Thursday, April 4, 13

  22. <html ng-app> <head> <script src="angular.js"></script> <script> var MyController = function($scope)

    { $scope.name = 'World' } </script> </head> <body ng-controller="MyController"> Hello {{ name }} </body> </html> Thursday, April 4, 13

  23. <html ng-app> <head> <script src="angular.js"></script> <script> var MyController = function($scope)

    { $scope.name = 'World' } </script> </head> <body ng-controller="MyController"> Hello {{ name }} </body> </html> Thursday, April 4, 13

  24. Thursday, April 4, 13

  25. <html ng-app> <head> <script src="angular.js"></script> <script> var MyController = function($scope)

    { $scope.name = 'World' } </script> </head> <body ng-controller="MyController"> Hello {{ name }} </body> </html> Thursday, April 4, 13

  26. var scope, ctrl; beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); ctrl

    = $controller(MyController, {$scope: scope}); })); it('should set name to "World"', function() { expect(scope.name).toEqual('World'); }); Thursday, April 4, 13

  27. var scope, ctrl; beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); ctrl

    = $controller(MyController, {$scope: scope}); })); it('should set name to "World"', function() { expect(scope.name).toEqual('World'); }); Thursday, April 4, 13

  28. var scope, ctrl; beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); ctrl

    = $controller(MyController, {$scope: scope}); })); it('should set name to "World"', function() { expect(scope.name).toEqual('World'); }); Thursday, April 4, 13

  29. var scope, ctrl; beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); ctrl

    = $controller(MyController, {$scope: scope}); })); it('should set name to "World"', function() { expect(scope.name).toEqual('World'); }); Thursday, April 4, 13

  30. Injectable The dependency injection in AngularJS allows you to declaratively

    describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess. Dependency injection is also a core to AngularJS. This means that any component which does not fit your needs can easily be replaced. Testable AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS. http://angularjs.org/ Thursday, April 4, 13

  31. Injectable The dependency injection in AngularJS allows you to declaratively

    describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess. Dependency injection is also a core to AngularJS. This means that any component which does not fit your needs can easily be replaced. Testable AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS. http://angularjs.org/ Dependency injection is also core to AngularJS. Thursday, April 4, 13

  32. Injectable The dependency injection in AngularJS allows you to declaratively

    describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess. Dependency injection is also a core to AngularJS. This means that any component which does not fit your needs can easily be replaced. Testable AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS. http://angularjs.org/ AngularJS was designed from ground up to be testable Thursday, April 4, 13

  33. 1. What is Dependency Injection 2. Why Dependency Injection is

    useful 3. How we use Dependency Injection in Angular 4. How Angular implements DI 5. Use our knowledge to break Angular 6. Thursday, April 4, 13

  34. 1. What is Dependency Injection 2. Why Dependency Injection is

    useful 3. How we use Dependency Injection in Angular 4. How Angular implements DI 5. Use our knowledge to break Angular 6. We’ll unbreak it Thursday, April 4, 13

  35. <body ng-controller="MyController"> <h1>Recent commits to AngularJS</h1> <ul> <li ng-repeat="commit in

    commits"> {{ commit.commit.committer.date | date}} {{ commit.sha }} {{commit.commit.message}} </li> </ul> </body> </html> Thursday, April 4, 13

  36. <body ng-controller="MyController"> <h1>Recent commits to AngularJS</h1> <ul> <li ng-repeat="commit in

    commits"> {{ commit.commit.committer.date | date}} {{ commit.sha }} {{commit.commit.message}} </li> </ul> </body> </html> Thursday, April 4, 13

  37. <body ng-controller="MyController"> <h1>Recent commits to AngularJS</h1> <ul> <li ng-repeat="commit in

    commits"> {{ commit.commit.committer.date | date}} {{ commit.sha }} {{commit.commit.message}} </li> </ul> </body> </html> Thursday, April 4, 13

  38. var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/ angular/angular.js/commits') .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  39. var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/ angular/angular.js/commits') .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  40. var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/ angular/angular.js/commits') .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  41. var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/ angular/angular.js/commits') .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  42. Thursday, April 4, 13

  43. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  44. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  45. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  46. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  47. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  48. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  49. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  50. var $httpBackend, scope, ctrl; beforeEach(inject(function($rootScope, _$httpBackend_, $controller) { $httpBackend =

    _$httpBackend_; $httpBackend.expectGET('https://api.github.com/repos/angular/ angular.js/commits') .respond([ { "sha": "3a81dd" }, { "sha": "df9bff" } ]); scope = $rootScope.$new(); ctrl = $controller(MyController, {$scope: scope}); })); it('should get 2 commits from mock ajax', function() { $httpBackend.flush(); expect(scope.commits).toEqualData( [{ "sha": "3a81dd" }, { "sha": "df9bff" }]); }); Thursday, April 4, 13

  51. How Angular loads your controller <body ng-controller="MyController"> Thursday, April 4,

    13

  52. How Angular loads your controller 1. Figure out what MyController

    depends on $scope $http Thursday, April 4, 13

  53. How Angular loads your controller 2. Finds a service that

    implements each one $scope => // the scope {} $http => // the http service Thursday, April 4, 13

  54. How Angular loads your controller 3. Calls MyController with injected

    dependencies MyController(the-scope, the-http-svc); Thursday, April 4, 13

  55. 1. Figure out what MyController depends on $scope $http Thursday,

    April 4, 13

  56. Thursday, April 4, 13

  57. var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/ angular/angular.js/commits') .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  58. var MyController = function($http, $scope) { $http.get('https://api.github.com/repos/ angular/angular.js/commits') .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  59. Thursday, April 4, 13

  60. Thursday, April 4, 13

  61. var divide = function(numerator, denominator){ return numerator / denominator; }

    Thursday, April 4, 13

  62. Yeah: We can do math Thursday, April 4, 13

  63. var divide = function(numerator, denominator){ return numerator / denominator; }

    Thursday, April 4, 13

  64. var divide = function(denominator, numerator){ return numerator / denominator; }

    Thursday, April 4, 13

  65. Oops: We can’t do math Thursday, April 4, 13

  66. Thursday, April 4, 13

  67. First Class Functions Thursday, April 4, 13

  68. toString() Thursday, April 4, 13

  69. var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; var FN_ARG_SPLIT = /,/; var FN_ARG

    = /^\s*(_?)(\S+?)\1\s*$/; var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg; function annotate(fn) { var $inject, fnText, argDecl, last; $inject = []; fnText = fn.toString().replace(STRIP_COMMENTS, ''); argDecl = fnText.match(FN_ARGS); forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){ arg.replace(FN_ARG, function(all, underscore, name){ $inject.push(name); }); }); return $inject; } Angular’s annotate() Thursday, April 4, 13

  70. var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; var FN_ARG_SPLIT = /,/; var FN_ARG

    = /^\s*(_?)(\S+?)\1\s*$/; var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg; function annotate(fn) { var $inject, fnText, argDecl, last; $inject = []; fnText = fn.toString().replace(STRIP_COMMENTS, ''); argDecl = fnText.match(FN_ARGS); forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){ arg.replace(FN_ARG, function(all, underscore, name){ $inject.push(name); }); }); return $inject; } Thursday, April 4, 13

  71. var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; var FN_ARG_SPLIT = /,/; var FN_ARG

    = /^\s*(_?)(\S+?)\1\s*$/; var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg; function annotate(fn) { var $inject, fnText, argDecl, last; $inject = []; fnText = fn.toString().replace(STRIP_COMMENTS, ''); argDecl = fnText.match(FN_ARGS); forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){ arg.replace(FN_ARG, function(all, underscore, name){ $inject.push(name); }); }); return $inject; } Thursday, April 4, 13

  72. var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; var FN_ARG_SPLIT = /,/; var FN_ARG

    = /^\s*(_?)(\S+?)\1\s*$/; var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg; function annotate(fn) { var $inject, fnText, argDecl, last; $inject = []; fnText = fn.toString().replace(STRIP_COMMENTS, ''); argDecl = fnText.match(FN_ARGS); forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){ arg.replace(FN_ARG, function(all, underscore, name){ $inject.push(name); }); }); return $inject; } Thursday, April 4, 13

  73. Angular’s “annotate” Thursday, April 4, 13

  74. How Angular loads your controller 1 Uses “annotate” what your

    parameters are called [”$scope”, “$http”] or [“$http”, ”$scope”] Thursday, April 4, 13

  75. How Angular loads your controller 1 Uses “annotate” what your

    parameters are called 2. Finds a service that implements each one 3. Calls MyController with injected dependencies Thursday, April 4, 13

  76. Thursday, April 4, 13

  77. var MyController = function($scope, $http) { $http.get("https://api.github.com/repos/ angular/angular.js/commits") .success(function(commits) {

    $scope.commits = commits }) } Thursday, April 4, 13

  78. var MyController = function(e,t) { t.get("https://api.github.com/repos/angular/ angular.js/commits") .success(function(t) { e.commits=t

    }) } Thursday, April 4, 13

  79. angular.injector().annotate(MyController) ["e", "t"] Thursday, April 4, 13

  80. Thursday, April 4, 13

  81. function annotate(fn) { var $inject, fnText, argDecl, last; if (typeof

    fn == 'function') { // all the regular expression code } else if (isArray(fn)) { last = fn.length - 1; assertArgFn(fn[last], 'fn') $inject = fn.slice(0, last); } else { assertArgFn(fn, 'fn', true); } return $inject; } Thursday, April 4, 13

  82. function annotate(fn) { var $inject, fnText, argDecl, last; if (typeof

    fn == 'function') { // all the regular expression code } else if (isArray(fn)) { last = fn.length - 1; assertArgFn(fn[last], 'fn') $inject = fn.slice(0, last); } else { assertArgFn(fn, 'fn', true); } return $inject; } Thursday, April 4, 13

  83. function annotate(fn) { var $inject, fnText, argDecl, last; if (typeof

    fn == 'function') { // all the regular expression code } else if (isArray(fn)) { last = fn.length - 1; assertArgFn(fn[last], 'fn') $inject = fn.slice(0, last); } else { assertArgFn(fn, 'fn', true); } return $inject; } Thursday, April 4, 13

  84. function annotate(fn) { var $inject, fnText, argDecl, last; if (typeof

    fn == 'function') { // all the regular expression code } else if (isArray(fn)) { last = fn.length - 1; assertArgFn(fn[last], 'fn') $inject = fn.slice(0, last); } else { assertArgFn(fn, 'fn', true); } return $inject; } Thursday, April 4, 13

  85. function annotate(fn) { var $inject, fnText, argDecl, last; if (typeof

    fn == 'function') { // all the regular expression code } else if (isArray(fn)) { last = fn.length - 1; assertArgFn(fn[last], 'fn') $inject = fn.slice(0, last); } else { assertArgFn(fn, 'fn', true); } return $inject; } Thursday, April 4, 13

  86. var MyController = function(e,t) { t.get("https://api.github.com/repos/angular/ angular.js/commits") .success(function(t) { e.commits=t

    }) } Thursday, April 4, 13

  87. var MyController = ['$scope', '$http', function(e,t) { t.get("https://api.github.com/repos/angular/ angular.js/commits") .success(function(t)

    { e.commits=t }) }] Thursday, April 4, 13

  88. TL;DR Thursday, April 4, 13

  89. It’s fun to understand how things work Thursday, April 4,

    13

  90. Don’t be afraid to read the source Thursday, April 4,

    13

  91. Use the array syntax var MyController = ['$scope', '$http', function($scope,$http)

    { ... } ] Thursday, April 4, 13

  92. The array syntax is repetitive Try the Angular Minifier https://github.com/btford/ngmin

    Thursday, April 4, 13

  93. Thank You Photos from http://blackandwtf.tumblr.com Alex Rothenberg http://www.alexrothenberg.com @alexrothenberg https://github.com/alexrothenberg

    McKinsey & Co. Thursday, April 4, 13