Morph MORPH
SIGN IN SIGN UP
angular / angular.js UNCLAIMED

AngularJS - HTML enhanced for web apps!

58861 0 0 JavaScript
Normal View History Raw
new batch of docs
2011-06-06 08:50:35 -07:00
@ngdoc overview
docs(guide/overview): Refactor overview and mvc docs Before, there we multiple overview docs: - guide/overview - guide/introduction - guide/dev_guide.mvc - guide/dev_guide.mvc.understanding_model - guide/dev_guide.mvc.understanding_view - guide/concepts Now we have: - guide/introduction: High level description of Angular with the key benefits but without code or any concrete concepts - guide/concepts: explains all important concepts with a simple example and contains deep links to the other parts of the guide. All the old information was moved into existing documents or deleted when they were duplicates.
2013-11-05 22:16:11 -08:00
@name Controllers
docs(guide): add sortOrder to each page Finally we can control the order of the guide pages
2014-09-04 16:49:16 +01:00
@sortOrder 220
new batch of docs
2011-06-06 08:50:35 -07:00
@description
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
# Understanding Controllers
new batch of docs
2011-06-06 08:50:35 -07:00
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
In AngularJS, a Controller is defined by a JavaScript **constructor function** that is used to augment the
{@link scope AngularJS Scope}.
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/Controllers): fix headings; re-order info
2018-01-10 12:57:57 +01:00
Controllers can be attached to the DOM in different ways. For each of them, AngularJS will
instantiate a new Controller object, using the specified Controller's **constructor function**:
- the {@link ng.directive:ngController ngController} directive. A new **child scope** will be
created and made available as an injectable parameter to the Controller's constructor function
as `$scope`.
- a route controller in a {@link ngRoute.$routeProvider $route definition}.
- the controller of a {@link guide/directive regular directive}, or a
{@link guide/component component directive}.
docs(guide/controller): add a line about `controller as`
2015-07-13 13:18:23 +01:00
If the controller has been attached using the `controller as` syntax then the controller instance will
docs(guide/Controllers): fix headings; re-order info
2018-01-10 12:57:57 +01:00
be assigned to a property on the scope.
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
Use controllers to:
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
- Set up the initial state of the `$scope` object.
- Add behavior to the `$scope` object.
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
Do not use controllers to:
- Manipulate DOM — Controllers should contain only business logic.
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
Putting any presentation logic into Controllers significantly affects its testability. AngularJS
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
has {@link databinding databinding} for most cases and {@link guide/directive directives} to
encapsulate manual DOM manipulation.
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
- Format input — Use {@link forms AngularJS form controls} instead.
- Filter output — Use {@link guide/filter AngularJS filters} instead.
- Share code or state across controllers — Use {@link services AngularJS
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
services} instead.
- Manage the life-cycle of other components (for example, to create service instances).
docs(guide/Controllers): fix headings; re-order info
2018-01-10 12:57:57 +01:00
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} and {@link services
Services} sections of this guide.
docs(guide/Controllers): grammar and header fixes fixed a comma and made the headers more logical.
2015-03-13 09:00:08 -07:00
## Setting up the initial state of a `$scope` object
new batch of docs
2011-06-06 08:50:35 -07:00
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
Typically, when you create an application you need to set up the initial state for the AngularJS
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
`$scope`. You set up the initial state of a scope by attaching properties to the `$scope` object.
The properties contain the **view model** (the model that will be presented by the view). All the
docs(guide/Controllers): grammar and header fixes fixed a comma and made the headers more logical.
2015-03-13 09:00:08 -07:00
`$scope` properties will be available to the {@link templates template} at the point in the DOM where the Controller
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
is registered.
docs(guide/controller): tweak initial example
2014-07-03 12:13:12 +01:00
The following example demonstrates creating a `GreetingController`, which attaches a `greeting`
property containing the string `'Hola!'` to the `$scope`:
docs(guide/controller): only show best practice controller creation If it is not recommended to use a global function to create controllers, why should it be shown as possible in the documentation? One of the most common complaints about AngularJS is that it doesn't enforce any convention. This is intentional and I generally like this. However if we can avoid outright bad implementations in examples I believe we should. Closes #8011
2014-06-27 21:18:07 -04:00
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(guide/controller): only show best practice controller creation If it is not recommended to use a global function to create controllers, why should it be shown as possible in the documentation? One of the most common complaints about AngularJS is that it doesn't enforce any convention. This is intentional and I generally like this. However if we can avoid outright bad implementations in examples I believe we should. Closes #8011
2014-06-27 21:18:07 -04:00
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
$scope.greeting = 'Hola!';
docs(guide/controller): only show best practice controller creation If it is not recommended to use a global function to create controllers, why should it be shown as possible in the documentation? One of the most common complaints about AngularJS is that it doesn't enforce any convention. This is intentional and I generally like this. However if we can avoid outright bad implementations in examples I believe we should. Closes #8011
2014-06-27 21:18:07 -04:00
}]);
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
new batch of docs
2011-06-06 08:50:35 -07:00
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
We create an {@link module AngularJS Module}, `myApp`, for our application. Then we add the controller's
docs(guide/controller): tweak initial example
2014-07-03 12:13:12 +01:00
constructor function to the module using the `.controller()` method. This keeps the controller's
constructor function out of the global scope.
<div class="alert alert-info">
We have used an **inline injection annotation** to explicitly specify the dependency
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
of the Controller on the `$scope` service provided by AngularJS. See the guide on
docs(guide/controller): tweak initial example
2014-07-03 12:13:12 +01:00
{@link guide/di Dependency Injection} for more information.
</div>
docs(guide/controller): only show best practice controller creation If it is not recommended to use a global function to create controllers, why should it be shown as possible in the documentation? One of the most common complaints about AngularJS is that it doesn't enforce any convention. This is intentional and I generally like this. However if we can avoid outright bad implementations in examples I believe we should. Closes #8011
2014-06-27 21:18:07 -04:00
docs(guide/controller): tweak initial example
2014-07-03 12:13:12 +01:00
We attach our controller to the DOM using the `ng-controller` directive. The `greeting` property can
now be data-bound to the template:
new batch of docs
2011-06-06 08:50:35 -07:00
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
<div ng-controller="GreetingController">
{{ greeting }}
</div>
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
docs(guide): minor grammar fixes
2012-09-26 15:30:55 +02:00
docs(guide/Controllers): grammar and header fixes fixed a comma and made the headers more logical.
2015-03-13 09:00:08 -07:00
## Adding Behavior to a Scope Object
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
In order to react to events or execute computation in the view we must provide behavior to the
docs(guide/understanding_controller): correct grammar Add the word "to" to improve grammar. Closes #4698
2013-10-28 23:56:45 -07:00
scope. We add behavior to the scope by attaching methods to the `$scope` object. These methods are
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
then available to be called from the template/view.
docs(guide/controller): improve wording Closes #11000
2015-02-06 15:02:31 -08:00
The following example uses a Controller to add a method, which doubles a number, to the scope:
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
var myApp = angular.module('myApp',[]);
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
myApp.controller('DoubleController', ['$scope', function($scope) {
$scope.double = function(value) { return value * 2; };
}]);
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
Once the Controller has been attached to the DOM, the `double` method can be invoked in an AngularJS
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
expression in the template:
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
<div ng-controller="DoubleController">
Two times <input ng-model="num"> equals {{ double(num) }}
</div>
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/overview): Refactor overview and mvc docs Before, there we multiple overview docs: - guide/overview - guide/introduction - guide/dev_guide.mvc - guide/dev_guide.mvc.understanding_model - guide/dev_guide.mvc.understanding_view - guide/concepts Now we have: - guide/introduction: High level description of Angular with the key benefits but without code or any concrete concepts - guide/concepts: explains all important concepts with a simple example and contains deep links to the other parts of the guide. All the old information was moved into existing documents or deleted when they were duplicates.
2013-11-05 22:16:11 -08:00
As discussed in the {@link concepts Concepts} section of this guide, any
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
objects (or primitives) assigned to the scope become model properties. Any methods assigned to
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
the scope are available in the template/view, and can be invoked via AngularJS expressions
docs(bike-shed-migration): fix url-based links refs to AUTO module
2014-02-12 22:47:42 +00:00
and `ng` event handler directives (e.g. {@link ng.directive:ngClick ngClick}).
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
## Simple Spicy Controller Example
new batch of docs
2011-06-06 08:50:35 -07:00
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
To illustrate further how Controller components work in AngularJS, let's create a little app with the
new batch of docs
2011-06-06 08:50:35 -07:00
following components:
docs(guide/overview): Refactor overview and mvc docs Before, there we multiple overview docs: - guide/overview - guide/introduction - guide/dev_guide.mvc - guide/dev_guide.mvc.understanding_model - guide/dev_guide.mvc.understanding_view - guide/concepts Now we have: - guide/introduction: High level description of Angular with the key benefits but without code or any concrete concepts - guide/concepts: explains all important concepts with a simple example and contains deep links to the other parts of the guide. All the old information was moved into existing documents or deleted when they were duplicates.
2013-11-05 22:16:11 -08:00
- A {@link templates template} with two buttons and a simple message
new batch of docs
2011-06-06 08:50:35 -07:00
- A model consisting of a string named `spice`
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
- A Controller with two functions that set the value of `spice`
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/Controllers): grammar and header fixes fixed a comma and made the headers more logical.
2015-03-13 09:00:08 -07:00
The message in our template contains a binding to the `spice` model which, by default, is set to the
new batch of docs
2011-06-06 08:50:35 -07:00
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.
docs(examples): give all examples a name Closes #14958
2016-07-27 18:30:35 +01:00
<example module="spicyApp1" name="controller-spicy-1">
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
<file name="index.html">
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
<div ng-controller="SpicyController">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p>
</div>
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
</file>
<file name="app.js">
var myApp = angular.module('spicyApp1', []);
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
myApp.controller('SpicyController', ['$scope', function($scope) {
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
$scope.spice = 'very';
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
};
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
};
}]);
</file>
</example>
new batch of docs
2011-06-06 08:50:35 -07:00
Things to notice in the example above:
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
- The `ng-controller` directive is used to (implicitly) create a scope for our template, and the
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
scope is augmented (managed) by the `SpicyController` Controller.
- `SpicyController` is just a plain JavaScript function. As an (optional) naming convention the name
docs(guide/controller): remove duplicate -Controller suffix Closes #8482
2014-08-04 17:28:03 +02:00
starts with capital letter and ends with "Controller".
docs(guide/controllers): update w/ controller scope separation
2012-04-10 12:27:16 -04:00
- Assigning a property to `$scope` creates or updates the model.
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
- Controller methods can be created through direct assignment to scope (see the `chiliSpicy` method)
docs(guide/Controllers): Syntax adjustments. Closes #12379
2015-07-19 11:33:53 -04:00
- The Controller methods and properties are available in the template (for both the `<div>` element and
docs(guide/controller): fix duplicated "and" typo Remove the second instance of the word "and" from the docs where it was duplicated.
2014-01-21 13:05:48 +01:00
its children).
docs(guide/controllers): update w/ controller scope separation
2012-04-10 12:27:16 -04:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
## Spicy Arguments Example
new batch of docs
2011-06-06 08:50:35 -07:00
Controller methods can also take arguments, as demonstrated in the following variation of the
previous example.
docs(examples): give all examples a name Closes #14958
2016-07-27 18:30:35 +01:00
<example module="spicyApp2" name="controller-spicy-2">
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
<file name="index.html">
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
<div ng-controller="SpicyController">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
<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>
</div>
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
</file>
<file name="app.js">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
var myApp = angular.module('spicyApp2', []);
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
myApp.controller('SpicyController', ['$scope', function($scope) {
chore(eslint): enable `quotes: ["error", "single"]` The quotes rule had to be disabled for e2e tests generated from ngdoc because dgeni templates use double quotes as string delimiters. Since we can't have guarantees that dgeni template wrappers will follow the same JS code style the Angular 1 repo uses, we should find a way to enforce our ESLint setup only for the parts in this repo, perhaps via prepending a generated `/* eslint-enable OUR_RULES */` pragma. Closes #15011
2016-08-10 12:13:14 +02:00
$scope.customSpice = 'wasabi';
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope.spice = 'very';
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
$scope.spicy = function(spice) {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope.spice = spice;
};
}]);
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
</file>
</example>
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
Notice that the `SpicyController` Controller now defines just one method called `spicy`, which takes one
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
argument called `spice`. The template then refers to this Controller method and passes in a string
docs(guide/understanding_controller): fix incorrect property reference Correct " model property `spice` " to " model property `customSpice` " to match the code sample Closes #4812
2013-11-06 14:02:09 -08:00
constant `'chili'` in the binding for the first button and a model property `customSpice` (bound to an
new batch of docs
2011-06-06 08:50:35 -07:00
input box) in the second button.
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
## Scope Inheritance Example
docs(guide/controller): reorganize, add Controller suffix, formatting
2014-03-03 12:38:26 -08:00
It is common to attach Controllers at different levels of the DOM hierarchy. Since the
docs(bike-shed-migration): fix url-based links refs to AUTO module
2014-02-12 22:47:42 +00:00
{@link ng.directive:ngController ng-controller} directive creates a new child scope, we get a
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
hierarchy of scopes that inherit from each other. The `$scope` that each Controller receives will
have access to properties and methods defined by Controllers higher up the hierarchy.
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
See [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) for
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
more information about scope inheritance.
docs(examples): give all examples a name Closes #14958
2016-07-27 18:30:35 +01:00
<example module="scopeInheritance" name="controller-scope-inheritance">
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
<file name="index.html">
docs(examples): fix example dependencies
2014-02-13 23:22:02 +00:00
<div class="spicy">
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
<div ng-controller="MainController">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
<p>Good {{timeOfDay}}, {{name}}!</p>
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
<div ng-controller="ChildController">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
<p>Good {{timeOfDay}}, {{name}}!</p>
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
<div ng-controller="GrandChildController">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
</file>
<file name="app.css">
div.spicy div {
padding: 10px;
border: solid 2px blue;
}
</file>
<file name="app.js">
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
var myApp = angular.module('scopeInheritance', []);
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
myApp.controller('MainController', ['$scope', function($scope) {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}]);
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
myApp.controller('ChildController', ['$scope', function($scope) {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope.name = 'Mattie';
}]);
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
myApp.controller('GrandChildController', ['$scope', function($scope) {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope.timeOfDay = 'evening';
docs(guide/controller): fix typo
2014-05-08 11:28:16 -04:00
$scope.name = 'Gingerbread Baby';
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
}]);
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
</file>
</example>
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
Notice how we nested three `ng-controller` directives in our template. This will result in four
scopes being created for our view:
new batch of docs
2011-06-06 08:50:35 -07:00
- The root scope
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
- The `MainController` scope, which contains `timeOfDay` and `name` properties
docs(guide/controller): change "hides" to "shadows" "Shadows" should better convey the meaning of "overwriting the value of the property in the child scope, while leaving the parent scope intact". "Hides" could give the impression that it makes the property unavailable in the child scope and leaving "overrides" only, could give the impression that the parent scope would be affected too, especially to people not familiar with JavaScript's prototypal inheritance. Closes #15375
2016-11-07 20:57:22 -06:00
- The `ChildController` scope, which inherits the `timeOfDay` property but overrides (shadows) the
`name` property from the previous scope
- The `GrandChildController` scope, which overrides (shadows) both the `timeOfDay` property defined
in `MainController` and the `name` property defined in `ChildController`
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
Inheritance works with methods in the same way as it does with properties. So in our previous
examples, all of the properties could be replaced with methods that return string values.
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/Controllers): fix headings; re-order info
2018-01-10 12:57:57 +01:00
## Testing Controllers
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
Although there are many ways to test a Controller, one of the best conventions, shown below,
docs(bike-shed-migration): fix url-based links refs to AUTO module
2014-02-12 22:47:42 +00:00
involves injecting the {@link ng.$rootScope $rootScope} and {@link ng.$controller $controller}:
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
**Controller Definition:**
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
var myApp = angular.module('myApp',[]);
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
myApp.controller('MyController', function($scope) {
$scope.spices = [{"name":"pasilla", "spiciness":"mild"},
docs(guide/controller): fixed spelling of spiciness Closes #7185
2014-04-21 15:46:53 -07:00
{"name":"jalapeno", "spiciness":"hot hot hot!"},
{"name":"habanero", "spiciness":"LAVA HOT!!"}];
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope.spice = "habanero";
});
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
**Controller Test:**
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
new batch of docs
2011-06-06 08:50:35 -07:00
describe('myController function', function() {
chore(formating): clean code to be function() {
2011-10-07 11:27:49 -07:00
describe('myController', function() {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
var $scope;
beforeEach(module('myApp'));
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
beforeEach(inject(function($rootScope, $controller) {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
$scope = $rootScope.$new();
$controller('MyController', {$scope: $scope});
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
}));
new batch of docs
2011-06-06 08:50:35 -07:00
it('should create "spices" model with 3 spices', function() {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
expect($scope.spices.length).toBe(3);
new batch of docs
2011-06-06 08:50:35 -07:00
});
it('should set the default value of spice', function() {
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
expect($scope.spice).toBe('habanero');
new batch of docs
2011-06-06 08:50:35 -07:00
});
});
});
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
new batch of docs
2011-06-06 08:50:35 -07:00
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
docs(guide/Controllers): Syntax adjustments. Closes #12379
2015-07-19 11:33:53 -04:00
If you need to test a nested Controller you must create the same scope hierarchy
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
in your test that exists in the DOM:
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
describe('state', function() {
docs(guide/understanding_controller): apply a more intuitive metaphor The BabyCtrl was a bit confusing and GrandChildCtrl seems to make more sense with the whole "scope inheritance" concept. Closes #4634
2013-10-24 11:19:28 -07:00
var mainScope, childScope, grandChildScope;
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
docs(guide/controller): improve guidance and examples Remove mention of global controller functions Convert larger examples to runnable demos Remove mention of pre-1.0 controllers, in particular discussion of controller inheritance. TODO: Probably could do with updating to explain the "controller as" syntax at some point. Closes: #4373
2013-10-11 11:46:59 +01:00
beforeEach(module('myApp'));
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
beforeEach(inject(function($rootScope, $controller) {
mainScope = $rootScope.$new();
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
$controller('MainController', {$scope: mainScope});
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
childScope = mainScope.$new();
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
$controller('ChildController', {$scope: childScope});
docs(guide/understanding_controller): apply a more intuitive metaphor The BabyCtrl was a bit confusing and GrandChildCtrl seems to make more sense with the whole "scope inheritance" concept. Closes #4634
2013-10-24 11:19:28 -07:00
grandChildScope = childScope.$new();
docs(guide/controller): use -Controller suffix Previously, the convention was to end controllers with -Ctrl. The new convention is to use -Controller
2014-03-25 17:07:47 -07:00
$controller('GrandChildController', {$scope: grandChildScope});
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
}));
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');
docs(guide/understanding_controller): apply a more intuitive metaphor The BabyCtrl was a bit confusing and GrandChildCtrl seems to make more sense with the whole "scope inheritance" concept. Closes #4634
2013-10-24 11:19:28 -07:00
expect(grandChildScope.timeOfDay).toBe('evening');
docs(guide/controllers): Just a typo Gingerbreak would break testing. :) Oh my gosh he's right, it totally w/ould. That is so embarrassing! Closes #10353
2014-12-06 21:45:09 +01:00
expect(grandChildScope.name).toBe('Gingerbread Baby');
docs(guide/controllers): add a section on testing controllers
2012-03-14 14:34:51 -04:00
});
});
docs(bike-shed-migration): fix up links outside the domain It is safer to use markdown style links and save jsdoc style links for internal links and code references
2014-02-06 13:33:42 +00:00
```
Reference in New Issue Copy Permalink