Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +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
<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';
}
var myApp = angular.module('MyApp', [])
function ChildCtrl($scope) {
$scope.name = 'Mattie';
}
function BabyCtrl($scope) {
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbreak Baby';
}
.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