diff options
| author | Caitlin Potter | 2014-02-06 14:02:18 +0000 |
|---|---|---|
| committer | Peter Bacon Darwin | 2014-02-16 19:03:40 +0000 |
| commit | f7d28cd377f06224247b950680517a187a7b6749 (patch) | |
| tree | 20203b9f7bf60748bb752f325b1869415352a6f3 /docs/content/guide/di.ngdoc | |
| parent | 2e641ac49f121a6e2cc70bd3879930b44a8a7710 (diff) | |
| download | angular.js-f7d28cd377f06224247b950680517a187a7b6749.tar.bz2 | |
docs(all): convert <pre>/</pre> snippets to GFM snippets
Diffstat (limited to 'docs/content/guide/di.ngdoc')
| -rw-r--r-- | docs/content/guide/di.ngdoc | 45 |
1 files changed, 23 insertions, 22 deletions
diff --git a/docs/content/guide/di.ngdoc b/docs/content/guide/di.ngdoc index 1714e2aa..dde41dcb 100644 --- a/docs/content/guide/di.ngdoc +++ b/docs/content/guide/di.ngdoc @@ -31,7 +31,7 @@ for test isolation. The third option is the most viable, since it removes the responsibility of locating the dependency from the component. The dependency is simply handed to the component. -<pre> +```js function SomeClass(greeter) { this.greeter = greeter; } @@ -39,7 +39,7 @@ dependency from the component. The dependency is simply handed to the component. SomeClass.prototype.doSomething = function(name) { this.greeter.greet(name); } -</pre> +``` In the above example `SomeClass` is not concerned with locating the `greeter` dependency, it is simply handed the `greeter` at runtime. @@ -55,7 +55,7 @@ construction and lookup of dependencies. Here is an example of using the injector service: -<pre> +```js // Provide the wiring information in a module angular.module('myModule', []). @@ -77,19 +77,20 @@ Here is an example of using the injector service: // Request any dependency from the injector var greeter = injector.get('greeter'); -</pre> +``` Asking for dependencies solves the issue of hard coding, but it also means that the injector needs to be passed throughout the application. Passing the injector breaks the [Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter). To remedy this, we turn the dependency lookup responsibility to the injector by declaring the dependencies as in this example: -<pre> +```html <!-- Given this HTML --> <div ng-controller="MyController"> <button ng-click="sayHello()">Hello</button> </div> -</pre> -<pre> +``` + +```js // And this controller definition function MyController($scope, greeter) { $scope.sayHello = function() { @@ -99,7 +100,7 @@ dependency lookup responsibility to the injector by declaring the dependencies a // The 'ng-controller' directive does this behind the scenes injector.instantiate(MyController); -</pre> +``` Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the dependencies of `MyController` without the controller ever knowing about the injector. This is @@ -121,11 +122,11 @@ information. These can be used interchangeably as you see fit and are equivalent The simplest way to get hold of the dependencies, is to assume that the function parameter names are the names of the dependencies. -<pre> +```js function MyController($scope, greeter) { ... } -</pre> +``` Given a function the injector can infer the names of the service to inject by examining the function declaration and extracting the parameter names. In the above example `$scope`, and @@ -140,12 +141,12 @@ To allow the minifers to rename the function parameters and still be able to inj the function needs to be annotated with the `$inject` property. The `$inject` property is an array of service names to inject. -<pre> +```js var MyController = function(renamed$scope, renamedGreeter) { ... } MyController['$inject'] = ['$scope', 'greeter']; -</pre> +``` In this scenario the ordering of the values in the '$inject' array must match the ordering of the arguments to inject. Using above code snippet as an example, '$scope' will be injected into 'renamed$scope' and 'greeter' into 'renamedGreeter'. @@ -162,15 +163,15 @@ directives. For example: -<pre> +```js someModule.factory('greeter', function($window) { ... }); -</pre> +``` Results in code bloat due to needing a temporary variable: -<pre> +```js var greeterFactory = function(renamed$window) { ... }; @@ -178,15 +179,15 @@ Results in code bloat due to needing a temporary variable: greeterFactory.$inject = ['$window']; someModule.factory('greeter', greeterFactory); -</pre> +``` For this reason the third annotation style is provided as well. -<pre> +```js someModule.factory('greeter', ['$window', function(renamed$window) { ... }]); -</pre> +``` Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular where injection is supported. @@ -200,7 +201,7 @@ DI is pervasive throughout Angular. It is typically used in controllers and fact Controllers are classes which are responsible for application behavior. The recommended way of declaring controllers is using the array notation: -<pre> +```js someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) { ... $scope.aMethod = function() { @@ -208,7 +209,7 @@ declaring controllers is using the array notation: } ... }]); -</pre> +``` This avoids the creation of global functions for controllers and also protects against minification. @@ -219,7 +220,7 @@ Factory methods are responsible for creating most objects in Angular. Examples a services, and filters. The factory methods are registered with the module, and the recommended way of declaring factories is: -<pre> +```js angular.module('myModule', []). config(['depProvider', function(depProvider){ ... @@ -236,4 +237,4 @@ of declaring factories is: run(['depService', function(depService) { ... }]); -</pre> +``` |
