+ function GreetingCtrl($scope) {
+ $scope.greeting = 'Hola!';
+ }
+
+
+Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the
+template:
+
+++ +**NOTE**: Although Angular allows you to create Controller functions in the global scope, this is +not recommended. In a real application you should use the `.controller` method of your +{@link module Angular Module} for your application as follows: + ++ {{ greeting }} ++
+ var myApp = angular.module('myApp',[]);
+
+ myApp.controller('GreetingCtrl', ['$scope', function($scope) {
+ $scope.greeting = 'Hola!';
+ }]);
+
+
+We have used an **inline injection annotation** to explicitly specify the dependency
+of the Controller on the `$scope` service provided by Angular. See the guide on
+{@link http://docs.angularjs.org/guide/di Dependency Injection} for more information.
+
+
+# Adding Behavior to a Scope Object
+
+In order to react to events or execute computation in the view we must provide behavior to the
+scope. We add behavior to the scope by attaching methods to the `$scope` object. These methods are
+then available to be called from the template/view.
+
+The following example uses a Controller to add a method to the scope, which doubles a number:
+
+
+ var myApp = angular.module('myApp',[]);
+
+ myApp.controller('DoubleCtrl', ['$scope', function($scope) {
+ $scope.double = function(value) { return value * 2; };
+ }]);
+
+
+Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
+expression in the template:
+
+++ +As discussed in the {@link concepts Concepts} section of this guide, any +objects (or primitives) assigned to the scope become model properties. Any methods assigned to +the scope are available in the template/view, and can be invoked via angular expressions +and `ng` event handler directives (e.g. {@link api/ng.directive:ngClick ngClick}). + +# Using Controllers Correctly + +In general, a Controller shouldn't try to do too much. It should contain only the business logic +needed for a single view. + +The most common way to keep Controllers slim is by encapsulating work that doesn't belong to +controllers into services and then using these services in Controllers via dependency injection. +This is discussed in the {@link di Dependency Injection} {@link dev_guide.services +Services} sections of this guide. + +Do not use Controllers for: + +- Any kind of DOM manipulation — Controllers should contain only business logic. DOM +manipulation (the presentation logic of an application) is well known for being hard to test. +Putting any presentation logic into Controllers significantly affects testability of the business +logic. Angular offers {@link databinding databinding} for automatic DOM manipulation. If +you have to perform your own manual DOM manipulation, encapsulate the presentation logic in +{@link guide/directive directives}. +- Input formatting — Use {@link forms angular form controls} instead. +- Output filtering — Use {@link dev_guide.templates.filters angular filters} instead. +- Sharing stateless or stateful code across Controllers — Use {@link dev_guide.services angular +services} instead. +- Managing the life-cycle of other components (for example, to create service instances). + + +# Associating Controllers with Angular Scope Objects + +You can associate Controllers with scope objects implicitly via the {@link api/ng.directive:ngController ngController +directive} or {@link api/ngRoute.$route $route service}. + + +## Simple Spicy Controller Example + +To illustrate further how Controller components work in Angular, let's create a little app with the +following components: + +- A {@link templates template} with two buttons and a simple message +- A model consisting of a string named `spice` +- A Controller with two functions that set the value of `spice` + +The message in our template contains a binding to the `spice` model, which by default is set to the +string "very". Depending on which button is clicked, the `spice` model is set to `chili` or +`jalapeño`, and the message is automatically updated by data-binding. + ++ Two times equals {{ double(num) }} ++
The food is {{spice}} spicy!
+The food is {{spice}} spicy!
+Good {{timeOfDay}}, {{name}}!
+ +Good {{timeOfDay}}, {{name}}!
+ +Good {{timeOfDay}}, {{name}}!
+
+ var myApp = angular.module('myApp',[]);
+
+ myApp.controller('MyController', function($scope) {
+ $scope.spices = [{"name":"pasilla", "spiciness":"mild"},
+ {"name":"jalapeno", "spiceiness":"hot hot hot!"},
+ {"name":"habanero", "spiceness":"LAVA HOT!!"}];
+ $scope.spice = "habanero";
+ });
+
+
+**Controller Test:**
+
+describe('myController function', function() {
+
+ describe('myController', function() {
+ var $scope;
+
+ beforeEach(module('myApp'));
+
+ beforeEach(inject(function($rootScope, $controller) {
+ $scope = $rootScope.$new();
+ $controller('MyController', {$scope: $scope});
+ }));
+
+ it('should create "spices" model with 3 spices', function() {
+ expect($scope.spices.length).toBe(3);
+ });
+
+ it('should set the default value of spice', function() {
+ expect($scope.spice).toBe('habanero');
+ });
+ });
+});
+
+
+
+If you need to test a nested Controller you need to create the same scope hierarchy
+in your test that exists in the DOM:
+
+
+describe('state', function() {
+ var mainScope, childScope, grandChildScope;
+
+ beforeEach(module('myApp'));
+
+ beforeEach(inject(function($rootScope, $controller) {
+ mainScope = $rootScope.$new();
+ $controller('MainCtrl', {$scope: mainScope});
+ childScope = mainScope.$new();
+ $controller('ChildCtrl', {$scope: childScope});
+ grandChildScope = childScope.$new();
+ $controller('GrandChildCtrl', {$scope: grandChildScope});
+ }));
+
+ it('should have over and selected', function() {
+ expect(mainScope.timeOfDay).toBe('morning');
+ expect(mainScope.name).toBe('Nikki');
+ expect(childScope.timeOfDay).toBe('morning');
+ expect(childScope.name).toBe('Mattie');
+ expect(grandChildScope.timeOfDay).toBe('evening');
+ expect(grandChildScope.name).toBe('Gingerbreak Baby');
+ });
+});
+
+
+
+
--
cgit v1.2.3