+
Angular initializes automatically upon `DOMContentLoaded` event or when the `angular.js` script is
evaluated if at that time `document.readyState` is set to `'complete'`. At this point Angular looks
for the {@link api/ng.directive:ngApp `ng-app`} directive which designates your application root.
diff --git a/docs/content/guide/concepts.ngdoc b/docs/content/guide/concepts.ngdoc
index bbf12b32..d0c2beca 100644
--- a/docs/content/guide/concepts.ngdoc
+++ b/docs/content/guide/concepts.ngdoc
@@ -2,450 +2,383 @@
@name Conceptual Overview
@description
-# Overview
-
-This document gives a quick overview of the main angular components and how they work together.
-These are:
-
- * {@link concepts#startup startup} - bring up hello world
- * {@link concepts#runtime runtime} - overview of angular runtime
- * {@link concepts#scope scope} - the glue between the view and the controller
- * {@link concepts#controller controller} - application behavior
- * {@link concepts#model model} - your application data
- * {@link concepts#view view} - what the user sees
- * {@link concepts#directives directives} - extend HTML vocabulary
- * {@link concepts#filters filters} - format the data in user locale
- * {@link concepts#injector injector} - assembles your application
- * {@link concepts#module module} - configures the injector
- * {@link concepts#angular_namespace `$`} - angular namespace
-
-
-
-The diagram and the example below describe how Angular interacts with the browser's event loop.
-
- 1. The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event,
- or network event (response from a server).
- 2. The event's callback gets executed. This enters the JavaScript context. The callback can
- modify the DOM structure.
- 3. Once the callback executes, the browser leaves the JavaScript context and
- re-renders the view based on DOM changes.
-
-Angular modifies the normal JavaScript flow by providing its own event processing loop. This
-splits the JavaScript into classical and Angular execution context. Only operations which are
-applied in Angular execution context will benefit from Angular data-binding, exception handling,
-property watching, etc... You can also use $apply() to enter Angular execution context from JavaScript. Keep in
-mind that in most places (controllers, services) $apply has already been called for you by the
-directive which is handling the event. An explicit call to $apply is needed only when
-implementing custom event callbacks, or when working with third-party library callbacks.
-
- 1. Enter Angular execution context by calling {@link guide/scope scope}`.`{@link
- api/ng.$rootScope.Scope#methods_$apply $apply}`(stimulusFn)`. Where `stimulusFn` is
- the work you wish to do in Angular execution context.
- 2. Angular executes the `stimulusFn()`, which typically modifies application state.
- 3. Angular enters the {@link api/ng.$rootScope.Scope#methods_$digest $digest} loop. The
- loop is made up of two smaller loops which process {@link
- api/ng.$rootScope.Scope#methods_$evalAsync $evalAsync} queue and the {@link
- api/ng.$rootScope.Scope#methods_$watch $watch} list. The {@link
- api/ng.$rootScope.Scope#methods_$digest $digest} loop keeps iterating until the model
- stabilizes, which means that the {@link api/ng.$rootScope.Scope#methods_$evalAsync
- $evalAsync} queue is empty and the {@link api/ng.$rootScope.Scope#methods_$watch
- $watch} list does not detect any changes.
- 4. The {@link api/ng.$rootScope.Scope#methods_$evalAsync $evalAsync} queue is used to
- schedule work which needs to occur outside of current stack frame, but before the browser's
- view render. This is usually done with `setTimeout(0)`, but the `setTimeout(0)` approach
- suffers from slowness and may cause view flickering since the browser renders the view after
- each event.
- 5. The {@link api/ng.$rootScope.Scope#methods_$watch $watch} list is a set of expressions
- which may have changed since last iteration. If a change is detected then the `$watch`
- function is called which typically updates the DOM with the new value.
- 6. Once the Angular {@link api/ng.$rootScope.Scope#methods_$digest $digest} loop finishes
- the execution leaves the Angular and JavaScript context. This is followed by the browser
- re-rendering the DOM to reflect any changes.
-
-
-Here is the explanation of how the `Hello world` example achieves the data-binding effect when the
-user enters text into the text field.
-
- 1. During the compilation phase:
- 1. the {@link api/ng.directive:ngModel ng-model} and {@link
- api/ng.directive:input input} {@link guide/directive
- directive} set up a `keydown` listener on the `` control.
- 2. the {@link api/ng.$interpolate {{name}} } interpolation
- sets up a {@link api/ng.$rootScope.Scope#methods_$watch $watch} to be notified of
- `name` changes.
- 2. During the runtime phase:
- 1. Pressing an '`X`' key causes the browser to emit a `keydown` event on the input control.
- 2. The {@link api/ng.directive:input input} directive
- captures the change to the input's value and calls {@link
- api/ng.$rootScope.Scope#methods_$apply $apply}`("name = 'X';")` to update the
- application model inside the Angular execution context.
- 3. Angular applies the `name = 'X';` to the model.
- 4. The {@link api/ng.$rootScope.Scope#methods_$digest $digest} loop begins
- 5. The {@link api/ng.$rootScope.Scope#methods_$watch $watch} list detects a change
- on the `name` property and notifies the {@link api/ng.$interpolate
- {{name}} } interpolation, which in turn updates the DOM.
- 6. Angular exits the execution context, which in turn exits the `keydown` event and with it
- the JavaScript execution context.
- 7. The browser re-renders the view with update text.
-
-
-A controller is the code behind the view. Its job is to construct the model and publish it to the
-view along with callback methods. The view is a projection of the scope onto the template (the
-HTML). The scope is the glue which marshals the model to the view and forwards the events to the
-controller.
-
-The separation of the controller and the view is important because:
-
- * The controller is written in JavaScript. JavaScript is imperative. Imperative is a good fit
- for specifying application behavior. The controller should not contain any rendering
- information (DOM references or HTML fragments).
- * The view template is written in HTML. HTML is declarative. Declarative is a good fit for
- specifying UI. The View should not contain any behavior.
- * Since the controller is unaware of the view, there could be many views for the same
- controller. This is important for re-skinning, device specific views (i.e. mobile vs desktop),
- and testability.
+Try out the Live Preview above, and then let's walk through the example and describe what's going on.
+
+
+
+This looks like normal HTML, with some new markup. In Angular, a file like this is called a
+
- Hello {{name}}!
-
-
- 
-
-The model is the data which is merged with the template to produce the view. To be able to
-render the model into the view, the model has to be able to be referenced from the scope. Unlike many
-other frameworks Angular makes no restrictions or requirements on the model. There are no classes
-to inherit from or special accessor methods for accessing or changing the model. The model can be
-primitive, object hash, or a full object Type. In short the model is a plain JavaScript object.
-
-
-
-# View
-
-
-
-The view is what the user sees. The view begins its life as a template, is merged with the
-model and finally rendered into the browser DOM. Angular takes a very different approach to
-rendering the view compared to most other templating systems.
-
- * **Others** - Most templating systems begin as an HTML string with special templating markup.
- Often the template markup breaks the HTML syntax which means that the template can not be
- edited by an HTML editor. The template string is then parsed by the template engine, and
- merged with the data. The result of the merge is an HTML string. The HTML string is then
- written to the browser using the `.innerHTML`, which causes the browser to render the HTML.
- When the model changes the whole process needs to be repeated. The granularity of the template
- is the granularity of the DOM updates. The key here is that the templating system manipulates
- strings.
- * **Angular** - Angular is different, since its templating system works on DOM objects not on
- strings. The template is still written in an HTML string, but it is HTML (not HTML with
- template sprinkled in.) The browser parses the HTML into the DOM, and the DOM becomes the input to
- the template engine known as the {@link api/ng.$compile compiler}. The compiler
- looks for {@link guide/directive directives} which in turn set up {@link
- api/ng.$rootScope.Scope#methods_$watch watches} on the model. The result is a
- continuously updating view which does not need template model re-merging. Your model becomes
- the single source-of-truth for your view.
-
-
-
-
-
-
+ -
-
list={{list}} -
-
-
- - {{item}} - -
+ Invoice:
+
+ Quantity:
+
+
+ Costs:
+
+
+
+ Total:
+
+ {{invoice.total(c) | currency:c}}
+
+
+
+ 
+
+# View independent business logic: Services
+
+Right now, the `InvoiceController` contains all logic of our example. When the application grows it
+is a good practise to move view independent logic from the controller into a so called
+"{@link dev_guide.services service}", so it can be reused by other parts
+of the application as well. Later on, we could also change that service to load the exchange rates
+from the web, e.g. by calling the Yahoo Finance API, without changing the controller.
+
+Let's refactor our example and move the currency conversion into a service in another file:
+
+Edit Me
- model = {{content}}
+ });
- Number formatting: {{ 1234567890 | number }}
- array filtering - {{ list | filter:predicate | json }} -
+ - array filtering - {{ list | filter:predicate | json }} -
+ Invoice:
+
+ Quantity:
+
+
+ Costs:
+
+
+
+ Total:
+
+ {{invoice.total(c) | currency:c}}
+
+
+
+ 
-
-The {@link api/AUTO.$injector injector} is a service locator. There is a single
-{@link api/AUTO.$injector injector} per Angular {@link
-api/ng.directive:ngApp application}. The {@link
-api/AUTO.$injector injector} provides a way to look up an object instance by its
-name. The injector keeps an internal cache of all objects so that repeated calls to get the same
-object name result in the same instance. If the object does not exist, then the {@link
-api/AUTO.$injector injector} asks the instance factory to create a new instance.
-
-A {@link api/angular.Module module} is a way to configure the injector's instance factory, known
-as a {@link api/AUTO.$provide provider}.
-
-
- // Create a module
- var myModule = angular.module('myModule', [])
-
- // Configure the injector
- myModule.factory('serviceA', function() {
- return {
- // instead of {}, put your object creation here
- };
- });
-
- // create an injector and configure it from 'myModule'
- var $injector = angular.injector(['myModule']);
-
- // retrieve an object from the injector by name
- var serviceA = $injector.get('serviceA');
-
- // always true because of instance cache
- $injector.get('serviceA') === $injector.get('serviceA');
-
-
-
-But the real magic of the {@link api/AUTO.$injector injector} is that it can be
-used to {@link api/AUTO.$injector#methods_invoke call} methods and {@link
-api/AUTO.$injector#methods_instantiate instantiate} types. This subtle feature is what
-allows the methods and types to ask for their dependencies instead of having to look for them.
-
-
- // You write functions such as this one.
- function doSomething(serviceA, serviceB) {
- // do something here.
- }
-
- // Angular provides the injector for your application
- var $injector = ...;
-
- ///////////////////////////////////////////////
- // the old-school way of getting dependencies.
- var serviceA = $injector.get('serviceA');
- var serviceB = $injector.get('serviceB');
-
- // now call the function
- doSomething(serviceA, serviceB);
-
- ///////////////////////////////////////////////
- // the cool way of getting dependencies.
- // the $injector will supply the arguments to the function automatically
- $injector.invoke(doSomething); // This is how the framework calls your functions
-
-
-Notice that the only thing you needed to write was the function, and list the dependencies in the
-function arguments. When angular calls the function, it will use the {@link
-api/AUTO.$injector#methods_invoke call} which will automatically fill the function
-arguments.
-
-Examine the `ClockCtrl` below, and notice how it lists the dependencies in the constructor. When the
-{@link api/ng.directive:ngController ng-controller} instantiates
-the controller it automatically provides the dependencies. There is no need to create
-dependencies, look for dependencies, or even get a reference to the injector.
-
-
- Current time is: {{ time.now }}
-
+
+
+What changed?
+We moved the `convertCurrency` function and the definition of the existing currencies
+into the new file `finance.js`. But how does the controller
+get a hold of the now separated function?
+
+This is where "{@link di Dependency Injection}" comes into play.
+Dependency Injection (DI) is a software design pattern that
+deals with how objects and functions get created and how they get a hold of their dependencies.
+Everything within Angular (directives, filters, controllers,
+services, ...) is created and wired using dependency injection. Within Angular,
+the DI container is called the "{@link di injector}".
+
+To use DI, there needs to be a place where all the things that should work together are registered.
+In Angular, this is the purpose of the so called "{@link module modules}".
+When Angular starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
+including the configuration of all modules that this module depends on.
+
+In the example above:
+The template contains the directive `ng-app="invoice"`. This tells Angular
+to use the `invoice` module as the main module for the application.
+The code snippet `angular.module('invoice', ['finance'])` specifies that the `invoice` module depends on the
+`finance` module. By this, Angular uses the `InvoiceController` as well as the `currencyConverter` service.
+
+Now that Angular knows of all the parts of the application, it needs to create them.
+In the previous section we saw that controllers are created using a factory function.
+For services there are multiple ways to define their factory
+(see the {@link dev_guide.services service guide}).
+In the example above, we are using a function that returns the `currencyConverter` function as the factory
+for the service.
+
+Back to the initial question: How does the `InvoiceController` get a reference to the `currencyConverter` function?
+In Angular, this is done by simply defining arguments on the constructor function. With this, the injector
+is able to create the objects in the right order and pass the previously created objects into the
+factories of the objects that depend on them.
+In our example, the `InvoiceController` has an argument named `currencyConverter`. By this, Angular knows about the
+dependency between the controller and the service and calls the controller with the service instance as argument.
+
+The last thing that changed in the example between the previous section and this section is that we
+now pass an array to the `module.controller` function, instead of a plain function. The array first
+contains the names of the service dependencies that the controller needs. The last entry
+in the array is the controller constructor function.
+Angular uses this array syntax to define the dependencies so that the DI also works after minifying
+the code, which will most probably rename the argument name of the controller constructor function
+to something shorter like `a`.
+
+# Accessing the backend
+
+Let's finish our example by fetching the exchange rates from the Yahoo Finance API.
+The following example shows how this is done with Angular:
+
+
+ Invoice:
+
+ Quantity:
+
+
+ Costs:
+
+
+
+ Total:
+
+ {{invoice.total(c) | currency:c}}
+
+
+
+
+ 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!
+` element and
+and its children).
+
+## Spicy Arguments Example
+
+Controller methods can also take arguments, as demonstrated in the following variation of the
+previous example.
+
+
+
+
+
+
+Notice that the `SpicyCtrl` Controller now defines just one method called `spicy`, which takes one
+argument called `spice`. The template then refers to this Controller method and passes in a string
+constant `'chili'` in the binding for the first button and a model property `spice` (bound to an
+input box) in the second button.
+
+## Scope Inheritance Example
+
+It is common to attach Controllers at different levels of the DOM hierarchy. Since the
+{@link api/ng.directive:ngController ng-controller} directive creates a new child scope, we get a
+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.
+See {@link https://github.com/angular/angular.js/wiki/Understanding-Scopes Understanding Scopes} for
+more information about scope inheritance.
+
+
+
+
+
+
+Notice how we nested three `ng-controller` directives in our template. This will result in four
+scopes being created for our view:
+
+- The root scope
+- The `MainCtrl` scope, which contains `timeOfDay` and `name` properties
+- The `ChildCtrl` scope, which inherits the `timeOfDay` property but overrides (hides) the `name`
+property from the previous
+- The `GrandChildCtrl` scope, which overrides (hides) both the `timeOfDay` property defined in `MainCtrl`
+and the `name` property defined in `ChildCtrl`
+
+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.
+
+
+## Testing Controllers
+
+Although there are many ways to test a Controller, one of the best conventions, shown below,
+involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$controller $controller}:
+
+**Controller Definition:**
+
+Most templating systems bind data in only one direction: they merge template and model components
+together into a view, as illustrated in the diagram. After the merge occurs, changes to the model
+or related sections of the view are NOT automatically reflected in the view. Worse, any changes
+that the user makes to the view are not reflected in the model. This means that the developer has
+to write code that constantly syncs the view with the model and the model with the view.
+
+## Data Binding in Angular Templates
+
+
+The way Angular templates works is different, as illustrated in the diagram. They are different
+because first the template (which is the uncompiled HTML along with any additional markup or
+directives) is compiled on the browser, and second, the compilation step produces a live view. We
+say live because any changes to the view are immediately reflected in the model, and any changes in
+the model are propagated to the view. This makes the model always the single-source-of-truth for
+the application state, greatly simplifying the programming model for the developer. You can think of
+the view as simply an instant projection of your model.
+
+Because the view is just a projection of the model, the controller is completely separated from the
+view and unaware of it. This makes testing a snap because it is easy to test your controller in
+isolation without the view and the related DOM/browser dependency.
+
+
+## Related Topics
+
+* {@link scope Angular Scopes}
+* {@link templates Angular Templates}
diff --git a/docs/content/guide/dev_guide.mvc.ngdoc b/docs/content/guide/dev_guide.mvc.ngdoc
deleted file mode 100644
index 9bfca071..00000000
--- a/docs/content/guide/dev_guide.mvc.ngdoc
+++ /dev/null
@@ -1,24 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular
-@description
-
-While Model-View-Controller (MVC) has acquired different shades of meaning over the years since it
-first appeared, Angular incorporates the basic principles behind the original {@link
-http://en.wikipedia.org/wiki/Model–view–controller MVC} software design pattern into its way of
-building client-side web applications.
-
-The MVC pattern summarized:
-
-* Separate applications into distinct presentation, data, and logic components
-* Encourage loose coupling between these components
-
-Along with {@link dev_guide.services services} and {@link di dependency injection}, MVC
-makes angular applications better structured, easier to maintain and more testable.
-
-The following topics explain how angular incorporates the MVC pattern into the angular way of
-developing web applications:
-
-* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
-* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
-* {@link dev_guide.mvc.understanding_view Understanding the View Component}
-
diff --git a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc
deleted file mode 100644
index 3cf1940d..00000000
--- a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc
+++ /dev/null
@@ -1,346 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular: Understanding the Controller Component
-@description
-
-# Understanding Controllers
-
-In Angular, a Controller is a JavaScript **constructor function** that is used to augment the
-{@link scope Angular Scope}.
-
-When a Controller is attached to the DOM via the {@link api/ng.directive:ngController ng-controller}
-directive, Angular will instantiate a new Controller object, using the specified Controller's
-**constructor function**. A new **child scope** will be available as an injectable parameter to the
-Controller's constructor function as `$scope`.
-
-Use Controllers to:
-
-- Set up the initial state of the `$scope` object.
-- Add behavior to the `$scope` object.
-
-# Setting up the initial state of a `$scope` object
-
-Typically, when you create an application you need to set up the initial state for the Angular
-`$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
-`$scope` properties will be available to the template at the point in the DOM where the Controller
-is registered.
-
-The following example shows a very simple constructor function for a Controller, `GreetingCtrl`,
-which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
-
-
-
-
-
-
-Things to notice in the example above:
-
-- The `ng-controller` directive is used to (implicitly) create a scope for our template, and the
-scope is augmented (managed) by the `SpicyCtrl` Controller.
-- `SpicyCtrl` is just a plain JavaScript function. As an (optional) naming convention the name
-starts with capital letter and ends with "Ctrl" or "Controller".
-- Assigning a property to `$scope` creates or updates the model.
-- Controller methods can be created through direct assignment to scope (see the `chiliSpicy` method)
-- The Controller methods and properties are available in the template (for the `
+
+
+
+
+
+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');
+ });
+});
+
+
+
+
diff --git a/docs/content/guide/databinding.ngdoc b/docs/content/guide/databinding.ngdoc
new file mode 100644
index 00000000..e5b4f754
--- /dev/null
+++ b/docs/content/guide/databinding.ngdoc
@@ -0,0 +1,38 @@
+@ngdoc overview
+@name Data Binding
+@description
+
+Data-binding in Angular web apps is the automatic synchronization of data between the model and view
+components. The way that Angular implements data-binding lets you treat the model as the
+single-source-of-truth in your application. The view is a projection of the model at all times.
+When the model changes, the view reflects the change, and vice versa.
+
+## Data Binding in Classical Template Systems
+
+
+Most templating systems bind data in only one direction: they merge template and model components
+together into a view, as illustrated in the diagram. After the merge occurs, changes to the model
+or related sections of the view are NOT automatically reflected in the view. Worse, any changes
+that the user makes to the view are not reflected in the model. This means that the developer has
+to write code that constantly syncs the view with the model and the model with the view.
+
+## Data Binding in Angular Templates
+
+
+The way Angular templates works is different, as illustrated in the diagram. They are different
+because first the template (which is the uncompiled HTML along with any additional markup or
+directives) is compiled on the browser, and second, the compilation step produces a live view. We
+say live because any changes to the view are immediately reflected in the model, and any changes in
+the model are propagated to the view. This makes the model always the single-source-of-truth for
+the application state, greatly simplifying the programming model for the developer. You can think of
+the view as simply an instant projection of your model.
+
+Because the view is just a projection of the model, the controller is completely separated from the
+view and unaware of it. This makes testing a snap because it is easy to test your controller in
+isolation without the view and the related DOM/browser dependency.
+
+
+## Related Topics
+
+* {@link scope Angular Scopes}
+* {@link templates Angular Templates}
diff --git a/docs/content/guide/dev_guide.mvc.ngdoc b/docs/content/guide/dev_guide.mvc.ngdoc
deleted file mode 100644
index 9bfca071..00000000
--- a/docs/content/guide/dev_guide.mvc.ngdoc
+++ /dev/null
@@ -1,24 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular
-@description
-
-While Model-View-Controller (MVC) has acquired different shades of meaning over the years since it
-first appeared, Angular incorporates the basic principles behind the original {@link
-http://en.wikipedia.org/wiki/Model–view–controller MVC} software design pattern into its way of
-building client-side web applications.
-
-The MVC pattern summarized:
-
-* Separate applications into distinct presentation, data, and logic components
-* Encourage loose coupling between these components
-
-Along with {@link dev_guide.services services} and {@link di dependency injection}, MVC
-makes angular applications better structured, easier to maintain and more testable.
-
-The following topics explain how angular incorporates the MVC pattern into the angular way of
-developing web applications:
-
-* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
-* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
-* {@link dev_guide.mvc.understanding_view Understanding the View Component}
-
diff --git a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc
deleted file mode 100644
index 3cf1940d..00000000
--- a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc
+++ /dev/null
@@ -1,346 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular: Understanding the Controller Component
-@description
-
-# Understanding Controllers
-
-In Angular, a Controller is a JavaScript **constructor function** that is used to augment the
-{@link scope Angular Scope}.
-
-When a Controller is attached to the DOM via the {@link api/ng.directive:ngController ng-controller}
-directive, Angular will instantiate a new Controller object, using the specified Controller's
-**constructor function**. A new **child scope** will be available as an injectable parameter to the
-Controller's constructor function as `$scope`.
-
-Use Controllers to:
-
-- Set up the initial state of the `$scope` object.
-- Add behavior to the `$scope` object.
-
-# Setting up the initial state of a `$scope` object
-
-Typically, when you create an application you need to set up the initial state for the Angular
-`$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
-`$scope` properties will be available to the template at the point in the DOM where the Controller
-is registered.
-
-The following example shows a very simple constructor function for a Controller, `GreetingCtrl`,
-which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
-
-
- 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!
-` element and
-and its children).
-
-## Spicy Arguments Example
-
-Controller methods can also take arguments, as demonstrated in the following variation of the
-previous example.
-
-
-
-
-
-
-Notice that the `SpicyCtrl` Controller now defines just one method called `spicy`, which takes one
-argument called `spice`. The template then refers to this Controller method and passes in a string
-constant `'chili'` in the binding for the first button and a model property `spice` (bound to an
-input box) in the second button.
-
-## Scope Inheritance Example
-
-It is common to attach Controllers at different levels of the DOM hierarchy. Since the
-{@link api/ng.directive:ngController ng-controller} directive creates a new child scope, we get a
-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.
-See {@link https://github.com/angular/angular.js/wiki/Understanding-Scopes Understanding Scopes} for
-more information about scope inheritance.
-
-
-
-
-
-
-Notice how we nested three `ng-controller` directives in our template. This will result in four
-scopes being created for our view:
-
-- The root scope
-- The `MainCtrl` scope, which contains `timeOfDay` and `name` properties
-- The `ChildCtrl` scope, which inherits the `timeOfDay` property but overrides (hides) the `name`
-property from the previous
-- The `GrandChildCtrl` scope, which overrides (hides) both the `timeOfDay` property defined in `MainCtrl`
-and the `name` property defined in `ChildCtrl`
-
-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.
-
-
-## Testing Controllers
-
-Although there are many ways to test a Controller, one of the best conventions, shown below,
-involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$controller $controller}:
-
-**Controller Definition:**
-
-
-
-## Related Topics
-
-* {@link dev_guide.mvc About MVC in Angular}
-* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
-* {@link dev_guide.mvc.understanding_view Understanding the View Component}
diff --git a/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc
deleted file mode 100644
index 2827cf67..00000000
--- a/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc
+++ /dev/null
@@ -1,22 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular: Understanding the View Component
-@description
-
-In Angular, the view is the DOM loaded and rendered in the browser, after Angular has transformed
-the DOM based on information in the template, controller and model.
-
-
-
-In the Angular implementation of MVC, the view has knowledge of both the model and the controller.
-The view knows about the model where two-way data-binding occurs. The view has knowledge of the
-controller through Angular directives, such as {@link api/ng.directive:ngController
-ngController} and {@link api/ngRoute.directive:ngView ngView}, and through bindings of this form:
-`{{someControllerFunction()}}`. In these ways, the view can call functions in an associated
-controller function.
-
-
-## 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_controller Understanding the Controller Component}
diff --git a/docs/content/guide/dev_guide.templates.css-styling.ngdoc b/docs/content/guide/dev_guide.templates.css-styling.ngdoc
index 46ae6e96..38962fd2 100644
--- a/docs/content/guide/dev_guide.templates.css-styling.ngdoc
+++ b/docs/content/guide/dev_guide.templates.css-styling.ngdoc
@@ -13,7 +13,7 @@ Angular sets these CSS classes. It is up to your application to provide useful s
* `ng-binding`
- **Usage:** angular applies this class to any element that is attached to a data binding, via `ng-bind` or
- {{}} curly braces, for example. (see {@link guide/dev_guide.templates.databinding databinding} guide)
+ {{}} curly braces, for example. (see {@link guide/databinding databinding} guide)
* `ng-invalid`, `ng-valid`
- **Usage:** angular applies this class to an input widget element if that element's input does
@@ -27,5 +27,5 @@ Angular sets these CSS classes. It is up to your application to provide useful s
## Related Topics
-* {@link dev_guide.templates Angular Templates}
+* {@link templates Angular Templates}
* {@link forms Angular Forms}
diff --git a/docs/content/guide/dev_guide.templates.databinding.ngdoc b/docs/content/guide/dev_guide.templates.databinding.ngdoc
deleted file mode 100644
index 8fc7687e..00000000
--- a/docs/content/guide/dev_guide.templates.databinding.ngdoc
+++ /dev/null
@@ -1,38 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Templates: Data Binding in Angular
-@description
-
-Data-binding in Angular web apps is the automatic synchronization of data between the model and view
-components. The way that Angular implements data-binding lets you treat the model as the
-single-source-of-truth in your application. The view is a projection of the model at all times.
-When the model changes, the view reflects the change, and vice versa.
-
-## Data Binding in Classical Template Systems
-
-
-Most templating systems bind data in only one direction: they merge template and model components
-together into a view, as illustrated in the diagram. After the merge occurs, changes to the model
-or related sections of the view are NOT automatically reflected in the view. Worse, any changes
-that the user makes to the view are not reflected in the model. This means that the developer has
-to write code that constantly syncs the view with the model and the model with the view.
-
-## Data Binding in Angular Templates
-
-
-The way Angular templates works is different, as illustrated in the diagram. They are different
-because first the template (which is the uncompiled HTML along with any additional markup or
-directives) is compiled on the browser, and second, the compilation step produces a live view. We
-say live because any changes to the view are immediately reflected in the model, and any changes in
-the model are propagated to the view. This makes the model always the single-source-of-truth for
-the application state, greatly simplifying the programming model for the developer. You can think of
-the view as simply an instant projection of your model.
-
-Because the view is just a projection of the model, the controller is completely separated from the
-view and unaware of it. This makes testing a snap because it is easy to test your controller in
-isolation without the view and the related DOM/browser dependency.
-
-
-## Related Topics
-
-* {@link scope Angular Scopes}
-* {@link dev_guide.templates Angular Templates}
diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc
deleted file mode 100644
index b01b4448..00000000
--- a/docs/content/guide/dev_guide.templates.ngdoc
+++ /dev/null
@@ -1,57 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Understanding Angular Templates
-@description
-
-An Angular template is the declarative specification that, along with information from the model
-and controller, becomes the rendered view that a user sees in the browser. It is the static DOM,
-containing HTML, CSS, and angular-specific elements and angular-specific element attributes. The
-Angular elements and attributes direct angular to add behavior and transform the template DOM into
-the dynamic view DOM.
-
-These are the types of Angular elements and element attributes you can use in a template:
-
-* {@link guide/directive Directive} — An attribute or element that
- augments an existing DOM element or represents a reusable DOM component - a widget.
-* {@link api/ng.$interpolate Markup} — The double
-curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup.
-* {@link dev_guide.templates.filters Filter} — Formats your data for display to the user.
-* {@link forms Form controls} — Lets you validate user input.
-
-Note: In addition to declaring the elements above in templates, you can also access these elements
-in JavaScript code.
-
-The following code snippet shows a simple Angular template made up of standard HTML tags along with
-Angular {@link guide/directive directives} and curly-brace bindings
-with {@link expression expressions}:
-
-
-
-
-
-
-
-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}
-
-
diff --git a/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc
deleted file mode 100644
index 1f4715c1..00000000
--- a/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc
+++ /dev/null
@@ -1,71 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular: Understanding the Model Component
-@description
-
-Depending on the context of the discussion in the Angular documentation, the term _model_ can refer to
-either a single object representing one entity (for example, a model called "phones" with its value
-being an array of phones) or the entire data model for the application (all entities).
-
-In Angular, a model is any data that is reachable as a property of an angular {@link
-scope Scope} object. The name of the property is the model identifier and the value is
-any JavaScript object (including arrays and primitives).
-
-The only requirement for a JavaScript object to be a model in Angular is that the object must be
-referenced by an Angular scope as a property of that scope object. This property reference can be
-created explicitly or implicitly.
-
-You can create models by explicitly creating scope properties referencing JavaScript objects in the
-following ways:
-
-* Make a direct property assignment to the scope object in JavaScript code; this most commonly
-occurs in controllers:
-
- function MyCtrl($scope) {
- // create property 'foo' on the MyCtrl's scope
- // and assign it an initial value 'bar'
- $scope.foo = 'bar';
- }
-
-* Use an {@link expression angular expression} with an assignment operator in templates:
-
-
-
-* Use {@link api/ng.directive:ngInit ngInit directive} in templates (for toy/example apps
-only, not recommended for real applications):
-
-
-
-Angular creates models implicitly (by creating a scope property and assigning it a suitable value)
-when processing the following template constructs:
-
-* Form input, select, textarea and other form elements:
-
-
-
- The code above creates a model called "query" on the current scope with the value set to "fluffy
-cloud".
-
-* An iterator declaration in {@link api/ng.directive:ngRepeat ngRepeater}:
-
-
-
- The code above creates one child scope for each item in the "phones" array and creates a "phone"
-object (model) on each of these scopes with its value set to the value of "phone" in the array.
-
-In Angular, a JavaScript object stops being a model when:
-
-* No Angular scope contains a property that references the object.
-
-* All Angular scopes that contain a property referencing the object become stale and eligible for
-garbage collection.
-
-The following illustration shows a simple data model created implicitly from a simple template:
-
-
-
-
-## Related Topics
-
-* {@link dev_guide.mvc About MVC in Angular}
-* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
-* {@link dev_guide.mvc.understanding_view Understanding the View Component}
diff --git a/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc
deleted file mode 100644
index 2827cf67..00000000
--- a/docs/content/guide/dev_guide.mvc.understanding_view.ngdoc
+++ /dev/null
@@ -1,22 +0,0 @@
-@ngdoc overview
-@name Developer Guide: About MVC in Angular: Understanding the View Component
-@description
-
-In Angular, the view is the DOM loaded and rendered in the browser, after Angular has transformed
-the DOM based on information in the template, controller and model.
-
-
-
-In the Angular implementation of MVC, the view has knowledge of both the model and the controller.
-The view knows about the model where two-way data-binding occurs. The view has knowledge of the
-controller through Angular directives, such as {@link api/ng.directive:ngController
-ngController} and {@link api/ngRoute.directive:ngView ngView}, and through bindings of this form:
-`{{someControllerFunction()}}`. In these ways, the view can call functions in an associated
-controller function.
-
-
-## 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_controller Understanding the Controller Component}
diff --git a/docs/content/guide/dev_guide.templates.css-styling.ngdoc b/docs/content/guide/dev_guide.templates.css-styling.ngdoc
index 46ae6e96..38962fd2 100644
--- a/docs/content/guide/dev_guide.templates.css-styling.ngdoc
+++ b/docs/content/guide/dev_guide.templates.css-styling.ngdoc
@@ -13,7 +13,7 @@ Angular sets these CSS classes. It is up to your application to provide useful s
* `ng-binding`
- **Usage:** angular applies this class to any element that is attached to a data binding, via `ng-bind` or
- {{}} curly braces, for example. (see {@link guide/dev_guide.templates.databinding databinding} guide)
+ {{}} curly braces, for example. (see {@link guide/databinding databinding} guide)
* `ng-invalid`, `ng-valid`
- **Usage:** angular applies this class to an input widget element if that element's input does
@@ -27,5 +27,5 @@ Angular sets these CSS classes. It is up to your application to provide useful s
## Related Topics
-* {@link dev_guide.templates Angular Templates}
+* {@link templates Angular Templates}
* {@link forms Angular Forms}
diff --git a/docs/content/guide/dev_guide.templates.databinding.ngdoc b/docs/content/guide/dev_guide.templates.databinding.ngdoc
deleted file mode 100644
index 8fc7687e..00000000
--- a/docs/content/guide/dev_guide.templates.databinding.ngdoc
+++ /dev/null
@@ -1,38 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Templates: Data Binding in Angular
-@description
-
-Data-binding in Angular web apps is the automatic synchronization of data between the model and view
-components. The way that Angular implements data-binding lets you treat the model as the
-single-source-of-truth in your application. The view is a projection of the model at all times.
-When the model changes, the view reflects the change, and vice versa.
-
-## Data Binding in Classical Template Systems
-
-
-Most templating systems bind data in only one direction: they merge template and model components
-together into a view, as illustrated in the diagram. After the merge occurs, changes to the model
-or related sections of the view are NOT automatically reflected in the view. Worse, any changes
-that the user makes to the view are not reflected in the model. This means that the developer has
-to write code that constantly syncs the view with the model and the model with the view.
-
-## Data Binding in Angular Templates
-
-
-The way Angular templates works is different, as illustrated in the diagram. They are different
-because first the template (which is the uncompiled HTML along with any additional markup or
-directives) is compiled on the browser, and second, the compilation step produces a live view. We
-say live because any changes to the view are immediately reflected in the model, and any changes in
-the model are propagated to the view. This makes the model always the single-source-of-truth for
-the application state, greatly simplifying the programming model for the developer. You can think of
-the view as simply an instant projection of your model.
-
-Because the view is just a projection of the model, the controller is completely separated from the
-view and unaware of it. This makes testing a snap because it is easy to test your controller in
-isolation without the view and the related DOM/browser dependency.
-
-
-## Related Topics
-
-* {@link scope Angular Scopes}
-* {@link dev_guide.templates Angular Templates}
diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc
deleted file mode 100644
index b01b4448..00000000
--- a/docs/content/guide/dev_guide.templates.ngdoc
+++ /dev/null
@@ -1,57 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Understanding Angular Templates
-@description
-
-An Angular template is the declarative specification that, along with information from the model
-and controller, becomes the rendered view that a user sees in the browser. It is the static DOM,
-containing HTML, CSS, and angular-specific elements and angular-specific element attributes. The
-Angular elements and attributes direct angular to add behavior and transform the template DOM into
-the dynamic view DOM.
-
-These are the types of Angular elements and element attributes you can use in a template:
-
-* {@link guide/directive Directive} — An attribute or element that
- augments an existing DOM element or represents a reusable DOM component - a widget.
-* {@link api/ng.$interpolate Markup} — The double
-curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup.
-* {@link dev_guide.templates.filters Filter} — Formats your data for display to the user.
-* {@link forms Form controls} — Lets you validate user input.
-
-Note: In addition to declaring the elements above in templates, you can also access these elements
-in JavaScript code.
-
-The following code snippet shows a simple Angular template made up of standard HTML tags along with
-Angular {@link guide/directive directives} and curly-brace bindings
-with {@link expression expressions}:
-
-
-
-
-
-
-
-
-
-
-From the `ng-model` attribute of the `` tags, Angular automatically sets up two-way data
-binding, and we also demonstrate some easy input validation:
-
- Quantity:
- Cost:
-
-These input widgets look normal enough, but consider these points:
-
- * When this page loaded, Angular bound the names of the input widgets (`qty` and `cost`) to
- variables of the same name. Think of those variables as the "Model" component of the
- Model-View-Controller design pattern.
- * Note that the HTML widget {@link api/ng.directive:input input}
- has special powers. The input invalidates itself by turning red when you enter invalid data or
- leave the input fields blank. These new widget behaviors make it easier to implement field
- validation, which is common in CRUD applications.
-
-And finally, the mysterious `{{ double curly braces }}`:
-
- Total: {{qty * cost | currency}}
-
-This notation, `{{ _expression_ }}`, is Angular markup for data-binding. The expression itself can
-be a combination of both an expression and a {@link dev_guide.templates.filters filter}: `{{
-expression | filter }}`. Angular provides filters for formatting display data.
-
-In the example above, the expression in double-curly braces directs Angular to "bind the data we
-got from the input widgets to the display, multiply them together, and format the resulting number
-into output that looks like money."
-
-Notice that we achieved this application behavior neither by calling Angular methods, nor by
-implementing application specific behavior as a framework. We achieved the behavior because the
-browser behaved more in line with what is needed for a dynamic web application rather than what is
-needed for a static document. Angular has lowered the impedance mismatch to the point where no
-library/framework calls are needed.
-
-
-# The Zen of Angular
-
-Angular is built around the belief that declarative code is better than imperative when it comes
-to building UIs and wiring software components together, while imperative code is excellent for
-expressing business logic.
-
-
- * It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves
- the testability of the code.
- * It is a really, _really_ good idea to regard app testing as equal in importance to app
- writing. Testing difficulty is dramatically affected by the way the code is structured.
- * It is an excellent idea to decouple the client side of an app from the server side. This
- allows development work to progress in parallel, and allows for reuse of both sides.
- * It is very helpful indeed if the framework guides developers through the entire journey of
- building an app: from designing the UI, through writing the business logic, to testing.
- * It is always good to make common tasks trivial and difficult tasks possible.
-
-
-
-Angular frees you from the following pains:
-
- * **Registering callbacks:** Registering callbacks clutters your code, making it hard to see the
- forest for the trees. Removing common boilerplate code such as callbacks is a good thing. It
- vastly reduces the amount of JavaScript coding _you_ have to do, and it makes it easier to see
- what your application does.
- * **Manipulating HTML DOM programmatically:** Manipulating HTML DOM is a cornerstone of AJAX
- applications, but it's cumbersome and error-prone. By declaratively describing how the UI
- should change as your application state changes, you are freed from low-level DOM manipulation
- tasks. Most applications written with Angular never have to programmatically manipulate the
- DOM, although you can if you want to.
- * **Marshaling data to and from the UI:** CRUD operations make up the majority of AJAX
- applications' tasks. The flow of marshaling data from the server to an internal object to an HTML
- form, allowing users to modify the form, validating the form, displaying validation errors,
- returning to an internal model, and then back to the server, creates a lot of boilerplate
- code. Angular eliminates almost all of this boilerplate, leaving code that describes the
- overall flow of the application rather than all of the implementation details.
- * **Writing tons of initialization code just to get started:** Typically you need to write a lot
- of plumbing just to get a basic "Hello World" AJAX app working. With Angular you can bootstrap
- your app easily using services, which are auto-injected into your application in a {@link
- http://code.google.com/p/google-guice/ Guice}-like dependency-injection style. This allows you
- to get started developing features quickly. As a bonus, you get full control over the
- initialization process in automated tests.
-
-
-# Watch a Presentation About Angular
-
-Here is a presentation on Angular from May 2012. The {@link http://mhevery.github.io/angular-demo-slides/index.html#/list corresponding slides} are also available.
-
-
diff --git a/docs/content/guide/scope.ngdoc b/docs/content/guide/scope.ngdoc
index 629d3782..342877d7 100644
--- a/docs/content/guide/scope.ngdoc
+++ b/docs/content/guide/scope.ngdoc
@@ -110,46 +110,46 @@ new child scopes (refer to directive documentation to see which directives creat
When new scopes are created, they are added as children of their parent scope. This creates a tree
structure which parallels the DOM where they're attached
-When Angular evaluates `{{username}}`, it first looks at the scope associated with the given
-element for the `username` property. If no such property is found, it searches the parent scope
+When Angular evaluates `{{name}}`, it first looks at the scope associated with the given
+element for the `name` property. If no such property is found, it searches the parent scope
and so on until the root scope is reached. In JavaScript this behavior is known as prototypical
inheritance, and child scopes prototypically inherit from their parents.
-This example illustrates scopes in application, and prototypical inheritance of properties.
+This example illustrates scopes in application, and prototypical inheritance of properties. The example is followed by
+a diagram depicting the scope boundaries.
+
-
- /* remove .doc-example-live in jsfiddle */
- .doc-example-live .ng-scope {
- border: 1px dashed red;
- }
+
+
+ Hello {{name}}!
+
+
+
+ - {{name}}
+
+
- function EmployeeController($scope) {
- $scope.department = 'Engineering';
- $scope.employee = {
- name: 'Joe the Manager',
- reports: [
- {name: 'John Smith'},
- {name: 'Mary Run'}
- ]
- };
+ function GreetCtrl($scope) {
+ $scope.name = 'World';
+ }
+
+ function ListCtrl($scope) {
+ $scope.names = ['Igor', 'Misko', 'Vojta'];
}
-
-
- Manager: {{employee.name}} [ {{department}} ]
- Reports:
-
- -
- {{employee.name}} [ {{department}} ]
-
-
-
- {{greeting}}
-
+
+ .show-scope .doc-example-live.ng-scope,
+ .show-scope .doc-example-live .ng-scope {
+ border: 1px solid red;
+ margin: 3px;
+ }
+
+
+
Notice that Angular automatically places `ng-scope` class on elements where scopes are
attached. The `