- 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 dev_guide.mvc.understanding_model Model} 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 dev_guide.templates.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 dev_guide.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');
- });
-});
-
-
-
-## Related Topics
-
-* {@link dev_guide.mvc About MVC in Angular}
-* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
-* {@link dev_guide.mvc.understanding_view Understanding the View Component}
-
-
--
cgit v1.2.3