From af042b60dbb35da8341f217aa2c50411950bfe89 Mon Sep 17 00:00:00 2001
From: Brian Ford <btford@umich.edu>
Date: Tue, 25 Mar 2014 17:33:05 -0700
Subject: [PATCH] docs(guide/directive): fix example style

* use -Controller suffix
* use array annotations
---
 docs/content/guide/directive.ngdoc | 91 +++++++++++++++---------------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/docs/content/guide/directive.ngdoc b/docs/content/guide/directive.ngdoc
index 2237f561..e757589b 100644
--- a/docs/content/guide/directive.ngdoc
+++ b/docs/content/guide/directive.ngdoc
@@ -43,13 +43,13 @@ determines when to use a given directive.
 
 In the following example, we say that the `<input>` element **matches** the `ngModel` directive.
 
-```javascript
+```html
 <input ng-model="foo">
 ```
 
 The following also **matches** `ngModel`:
 
-```javascript
+```html
 <input data-ng:model="foo">
 ```
 
@@ -70,12 +70,12 @@ Here are some equivalent examples of elements that match `ngBind`:
 <example module="docsBindExample">
   <file name="script.js">
     angular.module('docsBindExample', [])
-      .controller('Ctrl1', function Ctrl1($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';
-      });
+      }]);
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl1">
+    <div ng-controller="Controller">
       Hello <input ng-model='name'> <hr/>
       <span ng-bind="name"></span> <br/>
       <span ng:bind="name"></span> <br/>
@@ -86,7 +86,7 @@ Here are some equivalent examples of elements that match `ngBind`:
   </file>
   <file name="protractorTest.js">
     it('should show off bindings', function() {
-      expect(element(by.css('div[ng-controller="Ctrl1"] span[ng-bind]')).getText())
+      expect(element(by.css('div[ng-controller="Controller"] span[ng-bind]')).getText())
           .toBe('Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)');
     });
   </file>
@@ -218,12 +218,12 @@ Let's create a directive that simply replaces its contents with a static templat
 <example module="docsSimpleDirective">
   <file name="script.js">
     angular.module('docsSimpleDirective', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.customer = {
           name: 'Naomi',
           address: '1600 Amphitheatre'
         };
-      })
+      }])
       .directive('myCustomer', function() {
         return {
           template: 'Name: {{customer.name}} Address: {{customer.address}}'
@@ -231,7 +231,7 @@ Let's create a directive that simply replaces its contents with a static templat
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <div my-customer></div>
     </div>
   </file>
@@ -257,12 +257,12 @@ using `templateUrl` instead:
 <example module="docsTemplateUrlDirective">
   <file name="script.js">
     angular.module('docsTemplateUrlDirective', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.customer = {
           name: 'Naomi',
           address: '1600 Amphitheatre'
         };
-      })
+      }])
       .directive('myCustomer', function() {
         return {
           templateUrl: 'my-customer.html'
@@ -270,7 +270,7 @@ using `templateUrl` instead:
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <div my-customer></div>
     </div>
   </file>
@@ -302,12 +302,12 @@ Let's change our directive to use `restrict: 'E'`:
 <example module="docsRestrictDirective">
   <file name="script.js">
     angular.module('docsRestrictDirective', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.customer = {
           name: 'Naomi',
           address: '1600 Amphitheatre'
         };
-      })
+      }])
       .directive('myCustomer', function() {
         return {
           restrict: 'E',
@@ -317,7 +317,7 @@ Let's change our directive to use `restrict: 'E'`:
   </file>
 
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <my-customer></my-customer>
     </div>
   </file>
@@ -358,18 +358,18 @@ re-use such a directive:
 <example module="docsScopeProblemExample">
   <file name="script.js">
     angular.module('docsScopeProblemExample', [])
-      .controller('NaomiCtrl', function($scope) {
+      .controller('NaomiController', ['$scope', function($scope) {
         $scope.customer = {
           name: 'Naomi',
           address: '1600 Amphitheatre'
         };
-      })
-      .controller('IgorCtrl', function($scope) {
+      }])
+      .controller('IgorController', ['$scope', function($scope) {
         $scope.customer = {
           name: 'Igor',
           address: '123 Somewhere'
         };
-      })
+      }])
       .directive('myCustomer', function() {
         return {
           restrict: 'E',
@@ -378,11 +378,11 @@ re-use such a directive:
       });
   </file>
   <file name="index.html">
-    <div ng-controller="NaomiCtrl">
+    <div ng-controller="NaomiController">
       <my-customer></my-customer>
     </div>
     <hr>
-    <div ng-controller="IgorCtrl">
+    <div ng-controller="IgorController">
       <my-customer></my-customer>
     </div>
   </file>
@@ -400,10 +400,10 @@ we call an **isolate scope**. To do this, we can use a directive's `scope` optio
 <example module="docsIsolateScopeDirective">
   <file name="script.js">
     angular.module('docsIsolateScopeDirective', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
         $scope.igor = { name: 'Igor', address: '123 Somewhere' };
-      })
+      }])
       .directive('myCustomer', function() {
         return {
           restrict: 'E',
@@ -415,7 +415,7 @@ we call an **isolate scope**. To do this, we can use a directive's `scope` optio
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <my-customer info="naomi"></my-customer>
       <hr>
       <my-customer info="igor"></my-customer>
@@ -473,11 +473,11 @@ within our directive's template:
 <example module="docsIsolationExample">
   <file name="script.js">
     angular.module('docsIsolationExample', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
 
         $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
-      })
+      }])
       .directive('myCustomer', function() {
         return {
           restrict: 'E',
@@ -489,7 +489,7 @@ within our directive's template:
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <my-customer info="naomi"></my-customer>
     </div>
   </file>
@@ -543,10 +543,10 @@ We also want to remove the `$interval` if the directive is deleted so we don't i
 <example module="docsTimeDirective">
   <file name="script.js">
     angular.module('docsTimeDirective', [])
-      .controller('Ctrl2', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.format = 'M/d/yy h:mm:ss a';
-      })
-      .directive('myCurrentTime', function($interval, dateFilter) {
+      }])
+      .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {
 
         function link(scope, element, attrs) {
           var format,
@@ -574,10 +574,10 @@ We also want to remove the `$interval` if the directive is deleted so we don't i
         return {
           link: link
         };
-      });
+      }]);
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl2">
+    <div ng-controller="Controller">
       Date format: <input ng-model="format"> <hr/>
       Current time is: <span my-current-time="format"></span>
     </div>
@@ -619,9 +619,9 @@ To do this, we need to use the `transclude` option.
 <example module="docsTransclusionDirective">
   <file name="script.js">
     angular.module('docsTransclusionDirective', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.name = 'Tobias';
-      })
+      }])
       .directive('myDialog', function() {
         return {
           restrict: 'E',
@@ -631,7 +631,7 @@ To do this, we need to use the `transclude` option.
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <my-dialog>Check out the contents, {{name}}!</my-dialog>
     </div>
   </file>
@@ -650,9 +650,9 @@ that redefines `name` as `Jeff`. What do you think the `{{name}}` binding will r
 <example module="docsTransclusionExample">
   <file name="script.js">
     angular.module('docsTransclusionExample', [])
-      .controller('Ctrl', function($scope) {
+      .controller('Controller', ['$scope', function($scope) {
         $scope.name = 'Tobias';
-      })
+      }])
       .directive('myDialog', function() {
         return {
           restrict: 'E',
@@ -666,7 +666,7 @@ that redefines `name` as `Jeff`. What do you think the `{{name}}` binding will r
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <my-dialog>Check out the contents, {{name}}!</my-dialog>
     </div>
   </file>
@@ -701,7 +701,7 @@ own behavior to it.
 <example module="docsIsoFnBindExample">
   <file name="script.js">
     angular.module('docsIsoFnBindExample', [])
-      .controller('Ctrl', function($scope, $timeout) {
+      .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
         $scope.name = 'Tobias';
         $scope.hideDialog = function () {
           $scope.dialogIsHidden = true;
@@ -709,7 +709,7 @@ own behavior to it.
             $scope.dialogIsHidden = false;
           }, 2000);
         };
-      })
+      }])
       .directive('myDialog', function() {
         return {
           restrict: 'E',
@@ -722,7 +722,7 @@ own behavior to it.
       });
   </file>
   <file name="index.html">
-    <div ng-controller="Ctrl">
+    <div ng-controller="Controller">
       <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
         Check out the contents, {{name}}!
       </my-dialog>
@@ -747,7 +747,8 @@ callback functions to directive behaviors.
 
 When the user clicks the `x` in the dialog, the directive's `close` function is called, thanks to
 `ng-click.`  This call to `close` on the isolated scope actually evaluates the expression
-`hideDialog()` in the context of the original scope, thus running `Ctrl`'s `hideDialog` function.
+`hideDialog()` in the context of the original scope, thus running `Controller`'s `hideDialog`
+function.
 
 <div class="alert alert-success">
 **Best Practice:** use `&attr` in the `scope` option when you want your directive
@@ -766,8 +767,8 @@ element?
 
 <example module="dragModule">
   <file name="script.js">
-    angular.module('dragModule', []).
-      directive('myDraggable', function($document) {
+    angular.module('dragModule', [])
+      .directive('myDraggable', ['$document', function($document) {
         return function(scope, element, attr) {
           var startX = 0, startY = 0, x = 0, y = 0;
 
@@ -801,7 +802,7 @@ element?
             $document.unbind('mouseup', mouseup);
           }
         };
-      });
+      }]);
   </file>
   <file name="index.html">
     <span my-draggable>Drag ME</span>