diff options
| author | Felix | 2013-10-10 17:19:55 -0430 |
|---|---|---|
| committer | Pete Bacon Darwin | 2013-10-11 12:58:22 +0100 |
| commit | c3024254b6535486097648503e2ddae5562b6ddc (patch) | |
| tree | 76e206f701fe3696ebdbfd302d7f05f69f084682 | |
| parent | 770353df1956ab45bdbe45a4d5040caa40bf880f (diff) | |
| download | angular.js-c3024254b6535486097648503e2ddae5562b6ddc.tar.bz2 | |
docs(guide/controller): use `.controller` syntax
Use the recommended `module.controller` syntax rather than global
functions to define controllers in the examples.
| -rw-r--r-- | docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc | 75 |
1 files changed, 41 insertions, 34 deletions
diff --git a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc index 5e49902e..880601fa 100644 --- a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc +++ b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc @@ -103,23 +103,25 @@ string "very". Depending on which button is clicked, the `spice` model is set to ## A Spicy Controller Example <pre> -<body ng-controller="SpicyCtrl"> +<body ng-app="SpicyApp" ng-controller="SpicyCtrl"> <button ng-click="chiliSpicy()">Chili</button> <button ng-click="jalapenoSpicy()">Jalapeño</button> <p>The food is {{spice}} spicy!</p> </body> -function SpicyCtrl($scope) { - $scope.spice = 'very'; - $scope.chiliSpicy = function() { - $scope.spice = 'chili'; - } - $scope.jalapenoSpicy = function() { - $scope.spice = 'jalapeño'; - } -} - - +var myApp = angular.module('SpicyApp', []); + +myApp.controller('SpicyCtrl', ['$scope', function($scope){ + $scope.spicy = 'very'; + + $scope.chiliSpicy = function() { + $scope.spice = 'chili'; + }; + + $scope.jalapenoSpicy = function() { + $scope.spice = 'jalapeño'; + }; +}]); </pre> Things to notice in the example above: @@ -147,19 +149,24 @@ previous example. ## Controller Method Arguments Example <pre> -<body ng-controller="SpicyCtrl"> - <input ng-model="customSpice" value="wasabi"> +<body ng-app="SpicyApp" ng-controller="SpicyCtrl"> + <input ng-model="customSpice"> <button ng-click="spicy('chili')">Chili</button> <button ng-click="spicy(customSpice)">Custom spice</button> <p>The food is {{spice}} spicy!</p> </body> -function SpicyCtrl($scope) { - $scope.spice = 'very'; - $scope.spicy = function(spice) { - $scope.spice = spice; - } -} +var myApp = angular.module('SpicyApp', []); + +myApp.controller('SpicyCtrl', ['$scope', function($scope){ + $scope.customSpice = "wasabi"; + $scope.spice = 'very'; + + $scope.spicy = function(spice){ + $scope.spice = spice; + }; +}]); + </pre> Notice that the `SpicyCtrl` controller now defines just one method called `spicy`, which takes one @@ -174,7 +181,7 @@ Controller inheritance in Angular is based on {@link api/ng.$rootScope.Scope Sco have a look at an example: <pre> -<body ng-controller="MainCtrl"> +<body ng-app="MyApp" ng-controller="MainCtrl"> <p>Good {{timeOfDay}}, {{name}}!</p> <div ng-controller="ChildCtrl"> <p>Good {{timeOfDay}}, {{name}}!</p> @@ -182,19 +189,19 @@ have a look at an example: </div> </body> -function MainCtrl($scope) { - $scope.timeOfDay = 'morning'; - $scope.name = 'Nikki'; -} - -function ChildCtrl($scope) { - $scope.name = 'Mattie'; -} - -function BabyCtrl($scope) { - $scope.timeOfDay = 'evening'; - $scope.name = 'Gingerbreak Baby'; -} +var myApp = angular.module('MyApp', []) + +.controller('MainCtrl', ['$scope', function($scope){ + $scope.timeOfDay = 'morning'; + $scope.name = 'Nikki'; +}]) +.controller('ChildCtrl', ['$scope', function($scope){ + $scope.name = 'Mattie'; +}]) +.controller('BabyCtrl', ['$scope', function($scope){ + $scope.timeOfDay = 'evening'; + $scope.name = 'Gingerbreak Baby'; +}]); </pre> Notice how we nested three `ngController` directives in our template. This template construct will |