Angular Tips and Tricks

Most of JS developers have seen at least several times the AngularJs into presentations. So most of the people are pretty familiar with AngularJs at this post. This will be two parts presentation. First part will be deep dive into Angular’s injector object, explaining how dependency injection is working. In the second part, I’ll share tips and tricks I learn by working with AngularJs for more than an year.

Code samples can be found at:
https://github.com/RStankov/talk-angular-tips-tricks

Transcript

1. Radoslav Stankov 27/08/2014
   

   View Slide

2. Radoslav Stankov
   @rstankov
   
   !
   !
   !
   !
   http://rstankov.com
   

   View Slide

3. View Slide

4. https://speakerdeck.com/rstankov/angular-tips-and-tricks
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. credits: http://www.bennadel.com/
   

   View Slide

9. View Slide

10. Dependency Injection
    

    View Slide

11. app = angular.module('Demo', []);
    

    View Slide

12. app = angular.module('Demo', []);
    

    View Slide

13. app = angular.module('Demo', []);
    

    View Slide

14. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

15. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

16. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

17. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

18. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

19. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

20. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

21. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

22. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

23. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

24. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

25. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

26. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

27. app.controller(function($scope, Product){
    $scope.product = Product;
    });
    

    View Slide

28. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

29. View Slide

30. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

31. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

32. app.value('Porduct', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

33. app.value('Product', {
    title: 'iPhone',
    price: 700
    });
    

    View Slide

34. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

35. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

36. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

37. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

38. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

39. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

40. Error: [$injector:unpr] 

    Unknown provider: ProductProvider <- Product
    

    View Slide

41. View Slide

42. value service factory provider
    injector.get(‘Person’)
    Person
    

    View Slide

43. app.value('Person', {
    name: 'Rado',
    });
    

    View Slide

44. app.value('Person', {
    name: 'Rado',
    });
    

    View Slide

45. app.value('Person', {
    name: 'Rado',
    });
    

    View Slide

46. app.value('Person', {
    name: 'Rado',
    });
    

    View Slide

47. app.value('Person', {
    name: 'Rado',
    });
    

    View Slide

48. app.controller(function($scope, Person, $window) {
    $window.alert(Person.name + ' - hi');
    });
    

    View Slide

49. app.controller(function($scope, Person, $window) {
    $window.alert(Person.name + ' - hi');
    });
    

    View Slide

50. app.controller(function($scope, Person, $window) {
    $window.alert(Person.name + ' - hi');
    });
    

    View Slide

51. app.controller(function($scope, Person, $window) {
    $window.alert(Person.name + ' - hi');
    });
    

    View Slide

52. app.controller(function($scope, Person, $window) {
    $window.alert(Person.name + ' - hi');
    });
    

    View Slide

53. injector.get(‘Person’)
    Person
    

    View Slide

54. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

55. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

56. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

57. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

58. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

59. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

60. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

61. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

62. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

63. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

64. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

65. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

66. app.factory('Person', function($window) {
    var name = '';
    !
    return {
    setName: function(newName) {
    name = newName;
    },
    getName: function() {
    return name;
    },
    say: function(text) {
    $window.alert(name + ' - ' + text);
    }
    }
    });
    

    View Slide

67. app.controller(function($scope, Person) {
    Person.setName('Radoslav Stankov');
    Person.say('Hi');
    });
    

    View Slide

68. app.controller(function($scope, Person) {
    Person.setName('Radoslav Stankov');
    Person.say('Hi');
    });
    

    View Slide

69. app.controller(function($scope, Person) {
    Person.setName('Radoslav Stankov');
    Person.say('Hi');
    });
    

    View Slide

70. app.controller(function($scope, Person) {
    Person.setName('Radoslav Stankov');
    Person.say('Hi');
    });
    

    View Slide

71. app.controller(function($scope, Person) {
    Person.setName('Radoslav Stankov');
    Person.say('Hi');
    });
    

    View Slide

72. Cache? Cache = factory(…)
    false
    true
    injector.get(‘Person’)
    Person
    

    View Slide

73. app.service('Person', function($window) {
    var name = '';
    !
    this.setName = function(newName) {
    name = newName;
    };
    !
    this.getName = function() {
    return name;
    };
    !
    this.say = function(text) {
    $window.alert(name + ' - ' + text);
    };
    });
    

    View Slide

74. app.service('Person', function($window) {
    var name = '';
    !
    this.setName = function(newName) {
    name = newName;
    };
    !
    this.getName = function() {
    return name;
    };
    !
    this.say = function(text) {
    $window.alert(name + ' - ' + text);
    };
    });
    

    View Slide

75. app.service('Person', function($window) {
    var name = '';
    !
    this.setName = function(newName) {
    name = newName;
    };
    !
    this.getName = function() {
    return name;
    };
    !
    this.say = function(text) {
    $window.alert(name + ' - ' + text);
    };
    });
    

    View Slide

76. app.service('Person', function($window) {
    var name = '';
    !
    this.setName = function(newName) {
    name = newName;
    };
    !
    this.getName = function() {
    return name;
    };
    !
    this.say = function(text) {
    $window.alert(name + ' - ' + text);
    };
    });
    

    View Slide

77. app.service('Person', function($window) {
    var name = '';
    !
    this.setName = function(newName) {
    name = newName;
    };
    !
    this.getName = function() {
    return name;
    };
    !
    this.say = function(text) {
    $window.alert(name + ' - ' + text);
    };
    });
    

    View Slide

78. app.controller(function($scope, Person) {
    Person.setName('Radoslav Stankov');
    Person.say('Hi');
    });
    

    View Slide

79. Cache? Cache = new service(…)
    false
    true
    injector.get(‘Person’)
    Person
    

    View Slide

80. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

81. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

82. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

83. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

84. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

85. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

86. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

87. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

88. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

89. app.provider('Person', function() {
    this.name = '';
    !
    this.$get = function($window) {
    var self = this;
    return {
    setName: function(newName) {
    self.name = newName;
    },
    getName: function() {
    return self.name;
    },
    say: function(text) {
    $window.alert(self.name + ' - ' + text);
    }
    };
    }
    });
    

    View Slide

90. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

91. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

92. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

93. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

94. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

95. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

96. app.config(function(PersonProvider){
    PersonProvider.name = 'Rado';
    });
    

    View Slide

97. app.controller(function($scope, Person) {
    Person.say('Hi');
    });
    

    View Slide

98. app.controller(function($scope, Person) {
    Person.say('Hi');
    });
    

    View Slide

99. app.controller(function($scope, Person) {
    Person.say('Hi');
    });
    

    View Slide

100. Cache? Cache = new provider(…)
     false
     true
     injector.get(‘PersonProvider’)
     PersonProvider
     

     View Slide

101. Cache?
     false
     true
     injector.get(‘Person’)
     Person
     injector.get(‘PersonProvider’)
     Cache = PersonProvider.$get(…)
     

     View Slide

102. Error: [$injector:unpr] 

     Unknown provider: ProductProvider <- Product
     

     View Slide

103. View Slide

104. View Slide

105. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

106. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

107. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

108. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

109. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

110. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

111. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function value(name, val) {
     return factory(name, valueFn(val));
     }
     

     View Slide

112. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

113. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

114. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

115. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

116. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

117. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

118. function factory(name, factoryFn) {
     return provider(name, {$get: factoryFn});
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

119. Error: [$injector:unpr] 

     Unknown provider: ProductProvider <- Product
     

     View Slide

120. Cache?
     false
     true
     injector.get(‘Person’)
     Person
     injector.get(‘PersonProvider’)
     Cache = PersonProvider.$get(…)
     

     View Slide

121. View Slide

122. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

123. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

124. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

125. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

126. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

127. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

128. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

129. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

130. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

131. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

132. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

133. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

134. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

135. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

136. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

137. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

138. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

139. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

140. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

141. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function service(name, constructor) {
     return factory(name, ['$injector', function($injector) {
     return $injector.instantiate(constructor);
     }]);
     }
     

     View Slide

142. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

143. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

144. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function provider(name, provider_) {
     assertNotHasOwnProperty(name, 'service');
     !
     if (isFunction(provider_) || isArray(provider_)) {
     provider_ = providerInjector.instantiate(provider_);
     }
     !
     if (!provider_.$get) {
     throw $injectorMinErr('pget', "Provider '{0}' must define $get fac
     }
     !
     return providerCache[name + providerSuffix] = provider_;
     }
     

     View Slide

145. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

146. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

147. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

148. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

149. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

150. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

151. function instantiate(Type, locals, serviceName) {
     var Constructor = function() {};
     Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Typ
     var instance = new Constructor();
     var returnedValue = invoke(Type, instance, locals, serviceName);
     !
     if (isObject(returnedValue) || isFunction(returnedValue)) {
     return returnedValue;
     } else {
     return instance;
     }
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     

     View Slide

152. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

153. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

154. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

155. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

156. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

157. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

158. app.factory('MyFactory', function(Dependancy1, Dependancy2) {
     /* code */
     });
     

     View Slide

159. app.factory('MyFactory', ['Dependancy1', 'Dependancy2',
     function(Dependancy1, Dependancy2) {
     /* code */
     }
     ]);
     

     View Slide

160. function MyFactory(Dependancy1, Dependancy2) {
     /* code */
     }
     !
     MyFactory.$inject = ['Dependancy1', 'Dependancy2']
     !
     app.factory('MyFactory', MyFactory);
     

     View Slide

161. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

162. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

163. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

164. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

165. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

166. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

167. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

168. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

169. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

170. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

171. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

172. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

173. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

174. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

175. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

176. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

177. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

178. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

179. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

180. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

181. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

182. function annotate(fn, strictDi, name) {
     var $inject;
     !
     if (typeof fn === 'function') {
     if (!($inject = fn.$inject)) {
     // ... fill inject from argument names
     }
     } else if (isArray(fn)) {
     var last = fn.length - 1;
     assertArgFn(fn[last], 'fn');
     $inject = fn.slice(0, last);
     } else {
     assertArgFn(fn, 'fn', true);
     }
     return $inject;
     }
     https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     

     View Slide

183. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

184. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

185. https://github.com/angular/angular.js/blob/master/src/auto/injector.js*
     function invoke(fn, self, locals, serviceName) {
     var args = [],
     $inject = annotate(fn, strictDi, serviceName);
     !
     for(var i = 0, length = $inject.length; i < length; i++) {
     var key = $inject[i];
     if (typeof key !== 'string') {
     throw $injectorMinErr('...');
     }
     args.push(getService(key));
     }
     !
     return fn.apply(self, args);
     }
     

     View Slide

186. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     // ... code
     }
     }
     

     View Slide

187. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

188. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

189. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

190. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

191. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

192. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

193. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     if (cache[serviceName] === INSTANTIATING) {
     throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
     }
     return cache[serviceName];
     } else {
     // ... code
     }
     }
     

     View Slide

194. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

195. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

196. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

197. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

198. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

199. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

200. https://github.com/angular/angular.js/blob/master/src/auto/injector.js
     function getService(serviceName) {
     if (cache.hasOwnProperty(serviceName)) {
     // ... code
     } else {
     try {
     path.unshift(serviceName);
     cache[serviceName] = INSTANTIATING;
     return cache[serviceName] = factory(serviceName);
     } catch (err) {
     if (cache[serviceName] === INSTANTIATING) {
     delete cache[serviceName];
     }
     throw err;
     } finally {
     path.shift();
     }
     }
     }
     

     View Slide

201. Error: [$injector:unpr] 

     Unknown provider: ProductProvider <- Product
     

     View Slide

202. View Slide

203. angular.injector(['Demo']).invoke(function(Product) {
     /* code */
     });
     

     View Slide

204. Uncaught Error: [$injector:unpr] Unknown provider:
     !
     $rootElementProvider <- $rootElement <- $location <- $http <- $resource
     <- Product
     

     View Slide

205. Uncaught Error: [$injector:unpr] Unknown provider:
     !
     $rootElementProvider <- $rootElement <- $location <- $http <- $resource
     <- Product
     

     View Slide

206. Uncaught Error: [$injector:unpr] Unknown provider:
     !
     $rootElementProvider <- $rootElement <- $location <- $http <- $resource
     <- Product
     

     View Slide

207. View Slide

208. https://docs.angularjs.org/guide/bootstrap
     

     View Slide

209. https://github.com/angular/angular.js/blob/master/src/Angular.js
     function bootstrap(element, modules, config) {
     // ... setup
     !
     var doBootstrap = function() {
     // ... do bootstrapping
     };
     !
     // ... call doBootstrap
     }
     

     View Slide

210. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

211. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

212. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

213. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

214. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

215. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

216. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

217. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

218. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

219. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

220. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

221. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

222. https://github.com/angular/angular.js/blob/master/src/Angular.js
     var doBootstrap = function() {
     element = jqLite(element);
     !
     // ...
     !
     modules.unshift(['$provide', function($provide) {
     $provide.value('$rootElement', element);
     }]);
     modules.unshift('ng');
     var injector = createInjector(modules, config.strictDi);
     injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector
     function bootstrapApply(scope, element, compile, injector) {
     scope.$apply(function() {
     element.data('$injector', injector);
     compile(element)(scope);
     });
     }]
     );
     return injector;
     };
     

     View Slide

223. angular.element(
     document.querySelector(‘[ng-app]’)
     ).data(‘injector').invoke(function(Product){
     /* code */
     });
     

     View Slide

224. angular.element(
     document.querySelector(‘[ng-app]’)
     ).injector().invoke(function(Product){
     /* code */
     });
     

     View Slide

225. View Slide

226. // development.js
     app.invoke = function(fn) {
     var dom = document.querySelector('[ng-app="' + this.name + '"]'),
     element = angular.element(dom);
     !
     return element.injector().invoke(fn);
     }
     1
     

     View Slide

227. !
     app.invoke(function(Product) {
     /* code */
     });
     

     View Slide

228. ngMock
     

     View Slide

229. Angular 2.0 (ES6+)
     

     View Slide

230. View Slide

231. Tips and Tricks
     

     View Slide

232. ngRouter
     

     View Slide

233. ngRouter
     

     View Slide

234. ngRouter
     

     View Slide

235. uiRouter
     

     View Slide

236. uiRouter
     https://github.com/angular-ui/ui-router
     2
     

     View Slide

237. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

238. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

239. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

240. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

241. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

242. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

243. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

244. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

245. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

246. Nested routes
     https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
     /settings/
     /settings/passwords
     /settings/invoices/
     /settings/invoices/:id
     /settings/repos/
     /settings/repos/new

     /settings/repos/:id
     

     View Slide

247. Multiple named views
     https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
     

     View Slide

248. Multiple named views
     https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
     

     View Slide

249. Multiple named views
     https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
     

     View Slide

250. Multiple named views
     https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
     

     View Slide

251. ui-sref
     https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
     Home |
     About
     !
     
     
     
     {{contact.name}}
     
     
     
     

     View Slide

252. ui-sref
     https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
     Home |
     About
     !
     
     
     
     {{contact.name}}
     
     
     
     

     View Slide

253. ui-sref
     https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
     Home |
     About
     !
     
     
     
     {{contact.name}}
     
     
     
     

     View Slide

254. ui-sref
     https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
     Home |
     About
     !
     
     
     
     {{contact.name}}
     
     
     
     

     View Slide

255. ui-sref
     https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
     Home |
     About
     !
     
     
     
     {{contact.name}}
     
     
     
     

     View Slide

256. 2.0
     

     View Slide

257. Interceptors
     

     View Slide

258. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

259. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

260. app.config(function($stateProvider) {
     $stateProvider
     .state('product', {
     url: '/product/:id',
     controller: ‘productCtrl',
     templateUrl: ‘product.html',
     resolve: {
     product: function($stateParams, Product) {
     return Product.get(id: $stateParams.id).$promise;
     }
     }
     });
     });
     

     View Slide

261. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

262. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

263. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

264. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

265. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

266. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

267. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

268. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

269. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

270. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

271. app.config(function($httpProvider) {
     var CODE_MAPPING = {
     401: '/errors/unauthorized',
     404: ‘/errors/not_found'
     };
     !
     $httpProvider.interceptors.push(function($q, $location) {
     return {
     'responseError': function(rejection) {
     var path = CODE_MAPPING[rejection.status];
     if (path) {
     return $location.path(path);
     } else {
     return $q.reject(rejection);
     }
     }
     };
     });
     });
     3
     

     View Slide

272. Directives
     

     View Slide

273. 
     

     View Slide

274. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

275. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

276. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

277. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

278. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

279. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

280. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

281. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

282. 4
     app.directive('simpleFileUpload', function() {
     return {
     require: '?ngModel',
     link: function(scope, element, attrs, ngModel) {
     return element.on('change', function(event) {
     return scope.$apply(function() {
     return ngModel.$setViewValue(event.target.files[0]);
     });
     });
     }
     };
     });
     

     View Slide

283. transclusion
     

     View Slide

284. 
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     

     View Slide

285. 
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     

     View Slide

286. 
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     

     View Slide

287. 
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     

     View Slide

288. 
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     

     View Slide

289. !
     !
     
     Description
     
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     
     

     View Slide

290. !
     !
     
     Description
     
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     
     

     View Slide

291. !
     !
     
     Description
     
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     
     

     View Slide

292. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

293. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

294. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

295. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

296. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

297. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

298. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

299. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

300. 5
     app.directive('myPanel', function() {
     return {
     restrict: 'E',
     transclude: true,
     scope: {
     title: '=title'
     },
     template:
     '' +
     '{{title}}' +
     '' +
     ''
     };
     });
     

     View Slide

301. 
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     

     View Slide

302. !
     !
     
     Description
     
     Long text
     Very long text
     Very very long text
     Even longer text than the very very long text
     
     
     

     View Slide

303. ng-if vs ng-show/ng-hide
     6
     

     View Slide

304. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

305. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

306. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

307. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

308. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

309. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

310. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

311. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

312. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
     var ngShowDirective = ['$animate', function($animate) {
     return {
     restrict: 'A',
     multiElement: true,
     link: function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
     $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide')
     });
     }
     };
     }];
     

     View Slide

313. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

314. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

315. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

316. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

317. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

318. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

319. https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js
     var ngIfDirective = ['$animate', function($animate) {
     return {
     transclude: 'element',
     // ... settings
     link: function ($scope, $element, $attr, ctrl, $transclude) {
     $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
     if (value) {
     // add content from page
     } else {
     // remove content from page
     }
     });
     }
     };
     }];
     

     View Slide

320. https://github.com/Pasvaz/bindonce
     7
     

     View Slide

321. 1.3.0
     

     View Slide

322. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

323. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

324. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

325. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

326. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

327. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

328. 
     !
     
     {{::item.name}}
     
     https://github.com/angular/angular.js/commit/cee429f0aaebf32ef1c9aedd8447a48f163dd0a4
     

     View Slide

329. View Slide

330. https://github.com/RStankov/talk-angular-tips-tricks
     The code commit by commit
     

     View Slide

331. И сега на къде?
     https://angularjs.org/
     

     View Slide

332. View Slide

333. View Slide

334. @rstankov
     Thank you :)
     

     View Slide

335. View Slide