4. Angular looks for {@link api/ng.directive:ngApp ng-app}

{@link guide/directive directive}, which designates application boundary

5. {@link guide/module Module} specified in {@link

the {@link api/AUTO.$injector $injector}

6. {@link api/AUTO.$injector $injector} is used to create the {@link

api/ng.$compile $compile} service as well as {@link

api/ng.$rootScope $rootScope}

it with {@link api/ng.$rootScope $rootScope}

guide/directive directive} assigns `World` to the `name` property on the {@link guide/scope

scope}

9. The `{{name}}` {@link api/ng.$interpolate interpolates} the expression to

api/ng.$rootScope.Scope#$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.

api/ng.$rootScope.Scope#$evalAsync $evalAsync} queue and the {@link

api/ng.$rootScope.Scope#$watch $watch} list. The {@link

api/ng.$rootScope.Scope#$digest $digest} loop keeps iterating until the model

5. The {@link api/ng.$rootScope.Scope#$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.

the execution leaves the Angular and JavaScript context. This is followed by the browser

re-rendering the DOM to reflect any changes.

5. The {@link api/ng.$rootScope.Scope#$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.

the JavaScript execution context.

7. The browser re-renders the view with update text.

function GreetCtrl($scope) {

$scope.name = 'World';

}

function ListCtrl($scope) {

$scope.names = ['Igor', 'Misko', 'Vojta'];

}

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

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.

$scope.action = function() {

$scope.name = 'OK';

}

$scope.name = 'World';

}

</file>

<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-view.png">

The view is what the users sees. The view begins its life as a template, it is merged with the

* **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

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.

strings. The template is still written in HTML string, but it is HTML (not HTML with

template sprinkled in.) The browser parses the HTML into DOM, and the DOM becomes the input to

the template engine know 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#$watch watches} on the model. The result is a

the single source-of-truth for your view.

<div class="clear">

<file name="index.html">

<div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] ">

Number formatting: {{ 1234567890 | number }} <br>

{{ list | filter:predicate | json }}

</div>

</file>

<pre>

// 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'

// 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');

</pre>

// 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);

// which will be available for injection

factory('time', function($timeout) {

var time = {};

(function tick() {

time.now = new Date().toString();

$timeout(tick, 1000);

})();

return time;

});

// and it will be provided. No need to look for it.

function ClockCtrl($scope, time) {

$scope.time = time;