Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-04-21 07:10:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(guide/controller): use .controller syntax

Browse source 
Use the recommended `module.controller` syntax rather than global
functions to define controllers in the examples.
This commit is contained in:
Felix 2013-10-10 17:19:55 -04:30 committed by Pete Bacon Darwin
parent b1e604e38c
commit e86aaa992f
1 changed files with 39 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc
View file

@ -103,23 +103,25 @@ string "very". Depending on which button is clicked, the `spice` model is set to
## A Spicy Controller Example ## A Spicy Controller Example
<pre> <pre>
<body ng-controller="SpicyCtrl"> <body ng-app="SpicyApp" ng-controller="SpicyCtrl">
<button ng-click="chiliSpicy()">Chili</button> <button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button> <button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p> <p>The food is {{spice}} spicy!</p>
</body> </body>
function SpicyCtrl($scope) { var myApp = angular.module('SpicyApp', []);
$scope.spice = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
}
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
}
}
myApp.controller('SpicyCtrl', ['$scope', function($scope){
$scope.spicy = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
};
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
};
}]);
</pre> </pre>
Things to notice in the example above: Things to notice in the example above:
@ -147,19 +149,24 @@ previous example.
## Controller Method Arguments Example ## Controller Method Arguments Example
<pre> <pre>
<body ng-controller="SpicyCtrl"> <body ng-app="SpicyApp" ng-controller="SpicyCtrl">
<input ng-model="customSpice" value="wasabi"> <input ng-model="customSpice">
<button ng-click="spicy('chili')">Chili</button> <button ng-click="spicy('chili')">Chili</button>
<button ng-click="spicy(customSpice)">Custom spice</button> <button ng-click="spicy(customSpice)">Custom spice</button>
<p>The food is {{spice}} spicy!</p> <p>The food is {{spice}} spicy!</p>
</body> </body>
function SpicyCtrl($scope) { var myApp = angular.module('SpicyApp', []);
$scope.spice = 'very';
$scope.spicy = function(spice) { myApp.controller('SpicyCtrl', ['$scope', function($scope){
$scope.spice = spice; $scope.customSpice = "wasabi";
} $scope.spice = 'very';
}
$scope.spicy = function(spice){
$scope.spice = spice;
};
}]);
</pre> </pre>
Notice that the `SpicyCtrl` controller now defines just one method called `spicy`, which takes one 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: have a look at an example:
<pre> <pre>
<body ng-controller="MainCtrl"> <body ng-app="MyApp" ng-controller="MainCtrl">
<p>Good {{timeOfDay}}, {{name}}!</p> <p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="ChildCtrl"> <div ng-controller="ChildCtrl">
<p>Good {{timeOfDay}}, {{name}}!</p> <p>Good {{timeOfDay}}, {{name}}!</p>
@ -182,19 +189,19 @@ have a look at an example:
</div> </div>
</body> </body>
function MainCtrl($scope) { var myApp = angular.module('MyApp', [])
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}
function ChildCtrl($scope) { .controller('MainCtrl', ['$scope', function($scope){
$scope.name = 'Mattie'; $scope.timeOfDay = 'morning';
} $scope.name = 'Nikki';
}])
function BabyCtrl($scope) { .controller('ChildCtrl', ['$scope', function($scope){
$scope.timeOfDay = 'evening'; $scope.name = 'Mattie';
$scope.name = 'Gingerbreak Baby'; }])
} .controller('BabyCtrl', ['$scope', function($scope){
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbreak Baby';
}]);
</pre> </pre>
Notice how we nested three `ngController` directives in our template. This template construct will Notice how we nested three `ngController` directives in our template. This template construct will