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

The magic of Angular Dependency Injection

Alex Rothenberg
April 04, 2013
7
710

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
41
Don't let the Cocoa Api Crush your Ruby Code - Inspect2014
alexrothenberg
2
360

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
319
37k
4 Signs Your Business is Dying
shpigford
175
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
BBQ
matthewcrist
80
8.8k
Building Adaptive Systems
keathley
31
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
A Tale of Four Properties
chriscoyier
151
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Writing Fast Ruby
sferik
621
60k
How GitHub (no longer) Works
holman
304
140k

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