diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css
index 183dad3a0829..eb4fa813086e 100644
--- a/docs/app/assets/css/docs.css
+++ b/docs/app/assets/css/docs.css
@@ -647,6 +647,11 @@ ul.events > li {
padding-top: 50px;
}
+.diagram {
+ margin-bottom: 10px;
+ margin-top: 30px;
+}
+
@media only screen and (min-width: 769px) and (max-width: 991px) {
.main-body-grid {
margin-top: 160px;
diff --git a/docs/app/src/tutorials.js b/docs/app/src/tutorials.js
index 84ea6171a743..09df4138fc96 100644
--- a/docs/app/src/tutorials.js
+++ b/docs/app/src/tutorials.js
@@ -5,7 +5,8 @@ angular.module('tutorials', [])
'',
'step_00', 'step_01', 'step_02', 'step_03', 'step_04',
'step_05', 'step_06', 'step_07', 'step_08', 'step_09',
- 'step_10', 'step_11', 'step_12', 'the_end'
+ 'step_10', 'step_11', 'step_12', 'step_13', 'step_14',
+ 'the_end'
];
return {
scope: {},
@@ -43,7 +44,7 @@ angular.module('tutorials', [])
'<a href="http://angular.github.io/angular-phonecat/step-{{step}}/app">Step {{step}} Live Demo</a>.</p>\n' +
'</div>\n' +
'<p>The most important changes are listed below. You can see the full diff on ' +
- '<a ng-href="https://github.com/angular/angular-phonecat/compare/step-{{step ? (step - 1): \'0~1\'}}...step-{{step}}" title="See diff on Github">GitHub</a>\n' +
+ '<a ng-href="https://github.com/angular/angular-phonecat/compare/step-{{step ? (step - 1): \'0~1\'}}...step-{{step}}" title="See diff on Github">GitHub</a>.\n' +
'</p>'
};
-});
\ No newline at end of file
+});
diff --git a/docs/config/templates/indexPage.template.html b/docs/config/templates/indexPage.template.html
index 82a75fba00fe..cbdbc2fadebe 100644
--- a/docs/config/templates/indexPage.template.html
+++ b/docs/config/templates/indexPage.template.html
@@ -228,10 +228,10 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
)
</p>
<p>
- Code licensed under the
- <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The
- MIT License</a>. Documentation licensed under <a
- href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ Code licensed under
+ <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The MIT License</a>.
+ Documentation licensed under
+ <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
</p>
</div>
</footer>
diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc
index 78e1cfee6172..e17cae45c61c 100644
--- a/docs/content/tutorial/index.ngdoc
+++ b/docs/content/tutorial/index.ngdoc
@@ -6,12 +6,12 @@
# PhoneCat Tutorial App
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
-the construction of an AngularJS web app. The app you will build is a catalog that displays a list
+the construction of an Angular web app. The app you will build is a catalog that displays a list
of Android devices, lets you filter the list to see only devices that interest you, and then view
details for any device.
-<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413" alt="demo
-application running in the browser">
+<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413"
+ alt="demo application running in the browser">
Follow the tutorial to see how Angular makes browsers smarter — without the use of native
extensions or plug-ins:
@@ -28,10 +28,11 @@ When you finish the tutorial you will be able to:
* Create a dynamic application that works in all modern browsers.
* Use data binding to wire up your data model to your views.
* Create and run unit tests, with Karma.
-* Create and run end to end tests, with Protractor.
-* Move application logic out of the template and into Controllers.
+* Create and run end-to-end tests, with Protractor.
+* Move application logic out of the template and into components and controllers.
* Get data from a server using Angular services.
-* Apply animations to your application, using ngAnimate.
+* Apply animations to your application, using the `ngAnimate` module.
+* Structure your Angular applications in a modular way that scales well for larger projects.
* Identify resources for learning more about AngularJS.
The tutorial guides you through the entire process of building a simple application, including
@@ -42,16 +43,18 @@ You can go through the whole tutorial in a couple of hours or you may want to sp
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
{@link misc/started Getting Started} document.
-# Get Started
+
+# Environment Setup
The rest of this page explains how you can set up your local machine for development.
-If you just want to read the tutorial then you can just go straight to the first step:
+If you just want to _read_ the tutorial, you can go straight to the first step:
[Step 0 - Bootstrapping](tutorial/step_00).
-# Working with the code
+
+## Working with the Code
You can follow along with this tutorial and hack on the code in the comfort of your own computer.
-In this way you can get hands-on practice of really writing AngularJS code and also on using the
+This way, you can get hands-on practice of really writing Angular code and also on using the
recommended testing tools.
The tutorial relies on the use of the [Git][git] versioning system for source code management.
@@ -62,10 +65,11 @@ a few git commands.
### Install Git
You can download and install Git from http://git-scm.com/download. Once installed, you should have
-access to the `git` command line tool. The main commands that you will need to use are:
+access to the `git` command line tool. The main commands that you will need to use are:
+
+* `git clone ...`: Clone a remote repository onto your local machine.
+* `git checkout ...`: Check out a particular branch or a tagged version of the code to hack on.
-- `git clone ...` : clone a remote repository onto your local machine
-- `git checkout ...` : check out a particular branch or a tagged version of the code to hack on
### Download angular-phonecat
@@ -73,13 +77,14 @@ Clone the [angular-phonecat repository][angular-phonecat] located at GitHub by r
command:
```
-git clone --depth=14 https://github.com/angular/angular-phonecat.git
+git clone --depth=16 https://github.com/angular/angular-phonecat.git
```
-This command creates the `angular-phonecat` directory in your current directory.
+This command creates an `angular-phonecat` sub-directory in your current directory.
-<div class="alert alert-info">The `--depth=14` option just tells Git to pull down only the last 14 commits. This makes the
-download much smaller and faster.
+<div class="alert alert-info">
+ The `--depth=16` option tells Git to pull down only the last 16 commits.
+ This makes the download much smaller and faster.
</div>
Change your current directory to `angular-phonecat`.
@@ -88,16 +93,16 @@ Change your current directory to `angular-phonecat`.
cd angular-phonecat
```
-The tutorial instructions, from now on, assume you are running all commands from the
+The tutorial instructions, from now on, assume you are running all commands from within the
`angular-phonecat` directory.
### Install Node.js
-If you want to run the preconfigured local web-server and the test tools then you will also need
-[Node.js v0.10.27+][node].
+If you want to run the preconfigured local web server and the test tools then you will also need
+[Node.js v4+][node].
-You can download a Node.js installer for your operating system from http://nodejs.org/download/.
+You can download a Node.js installer for your operating system from https://nodejs.org/en/download/.
Check the version of Node.js that you have installed by running the following command:
@@ -105,7 +110,7 @@ Check the version of Node.js that you have installed by running the following co
node --version
```
-In Debian based distributions, there is a name clash with another utility called `node`. The
+In Debian based distributions, there might be a name clash with another utility called `node`. The
suggested solution is to also install the `nodejs-legacy` apt package, which renames `node` to
`nodejs`.
@@ -115,12 +120,9 @@ nodejs --version
npm --version
```
-
-<div class="alert alert-info">If you need to run different versions of node.js
- in your local environment, consider installing
- <a href="https://github.com/creationix/nvm" title="Node Version Manager Github Repo link">
- Node Version Manager (nvm)
- </a>.
+<div class="alert alert-info">
+ If you need to run different versions of Node.js in your local environment, consider installing
+ [Node Version Manager (nvm)][nvm] or [Node Version Manager (nvm) for Windows][nvm-windows].
</div>
Once you have Node.js installed on your machine, you can download the tool dependencies by running:
@@ -129,30 +131,32 @@ Once you have Node.js installed on your machine, you can download the tool depen
npm install
```
-This command reads angular-phonecat's `package.json` file and downloads the following tools
-into the `node_modules` directory:
+This command reads angular-phonecat's `package.json` file and downloads the following tools into the
+`node_modules` directory:
-- [Bower][bower] - client-side code package manager
-- [Http-Server][http-server] - simple local static web server
-- [Karma][karma] - unit test runner
-- [Protractor][protractor] - end to end (E2E) test runner
+* [Bower][bower] - client-side code package manager
+* [Http-Server][http-server] - simple local static web server
+* [Karma][karma] - unit test runner
+* [Protractor][protractor] - end-to-end (E2E) test runner
-Running `npm install` will also automatically use bower to download the Angular framework into the
+Running `npm install` will also automatically use bower to download the AngularJS framework into the
`app/bower_components` directory.
<div class="alert alert-info">
Note the angular-phonecat project is setup to install and run these utilities via npm scripts.
This means that you do not have to have any of these utilities installed globally on your system
- to follow the tutorial. See **Installing Helper Tools** below for more information.
+ to follow the tutorial. See [Installing Helper Tools](tutorial/#install-helper-tools-optional-)
+ below for more information.
</div>
The project is preconfigured with a number of npm helper scripts to make it easy to run the common
tasks that you will need while developing:
-- `npm start` : start a local development web-server
-- `npm test` : start the Karma unit test runner
-- `npm run protractor` : run the Protractor end to end (E2E) tests
-- `npm run update-webdriver` : install the drivers needed by Protractor
+* `npm start`: Start a local development web server.
+* `npm test`: Start the Karma unit test runner.
+* `npm run protractor`: Run the Protractor end-to-end (E2E) tests.
+* `npm run update-webdriver`: Install the drivers needed by Protractor.
+
### Install Helper Tools (optional)
@@ -167,7 +171,7 @@ For instance, to install the Bower command line executable you would do:
sudo npm install -g bower
```
-*(Omit the sudo if running on Windows)*
+_(Omit the sudo if running on Windows)_
Then you can run the bower tool directly, such as:
@@ -176,10 +180,10 @@ bower install
```
-### Running Development Web Server
+### Running the Development Web Server
While Angular applications are purely client-side code, and it is possible to open them in a web
-browser directly from the file system, it is better to serve them from a HTTP web server. In
+browser directly from the file system, it is better to serve them from an HTTP web server. In
particular, for security reasons, most modern browsers will not allow JavaScript to make server
requests if the page is loaded directly from the file system.
@@ -190,70 +194,64 @@ application during development. Start the web server by running:
npm start
```
-This will create a local webserver that is listening to port 8000 on your local machine.
-You can now browse to the application at:
-
-```
-http://localhost:8000/app/index.html
-```
+This will create a local web server that is listening to port 8000 on your local machine.
+You can now browse to the application at http://localhost:8000/index.html.
<div class="alert alert-info">
-To serve the web app on a different IP address or port, edit the "start" script within package.json.
-You can use `-a` to set the address and `-p` to set the port.
+ To serve the web app on a different IP address or port, edit the "start" script within
+ `package.json`. You can use `-a` to set the address and `-p` to set the port. You also need to
+ update the `baseUrl` configuration property in `e2e-test/protractor.conf.js`.
</div>
+
### Running Unit Tests
We use unit tests to ensure that the JavaScript code in our application is operating correctly.
-Unit tests focus on testing small isolated parts of the application. The unit tests are kept in the
-`test/unit` directory.
+Unit tests focus on testing small isolated parts of the application. The unit tests are kept in test
+files (specs) side-by-side with the application code. This way it's easier to find them and keep
+them up-to-date with the code under test. It also makes refactoring our app structure easier, since
+tests are moved together with the source code.
The angular-phonecat project is configured to use [Karma][karma] to run the unit tests for the
-application. Start Karma by running:
+application. Start Karma by running:
```
npm test
```
-This will start the Karma unit test runner. Karma will read the configuration file at
-`test/karma.conf.js`. This configuration file tells Karma to:
+This will start the Karma unit test runner. Karma will read the configuration file `karma.conf.js`,
+located at the root of the project directory. This configuration file tells Karma to:
-- open up a Chrome browser and connect it to Karma
-- execute all the unit tests in this browser
-- report the results of these tests in the terminal/command line window
-- watch all the project's JavaScript files and re-run the tests whenever any of these change
+* Open up instances of the Chrome and Firefox browsers and connect them to Karma.
+* Execute all the unit tests in these browsers.
+* Report the results of these tests in the terminal/command line window.
+* Watch all the project's JavaScript files and re-run the tests whenever any of these change.
It is good to leave this running all the time, in the background, as it will give you immediate
feedback about whether your changes pass the unit tests while you are working on the code.
-### Running End to End Tests
+### Running E2E Tests
-We use End to End tests to ensure that the application as a whole operates as expected.
-End to End tests are designed to test the whole client side application, in particular that the
-views are displaying and behaving correctly. It does this by simulating real user interaction with
-the real application running in the browser.
+We use E2E (end-to-end) tests to ensure that the application as a whole operates as expected.
+E2E tests are designed to test the whole client-side application, in particular that the views are
+displaying and behaving correctly. It does this by simulating real user interaction with the real
+application running in the browser.
-The End to End tests are kept in the `test/e2e` directory.
+The E2E tests are kept in the `e2e-tests` directory.
-The angular-phonecat project is configured to use [Protractor][protractor] to run the End to End
-tests for the application. Protractor relies upon a set of drivers to allow it to interact with
-the browser. You can install these drivers by running:
+The angular-phonecat project is configured to use [Protractor][protractor] to run the E2E tests for
+the application. Protractor relies upon a set of drivers to allow it to interact with the browser.
+You can install these drivers by running:
```
npm run update-webdriver
```
-*(You should only need to do this once.)*
-
-You will need to have Java present on your dev machine to allow the Selenium standalone to be started.
-Check if you already have java installed by opening a terminal/command line window and typing
-'''
-java -version
-'''
-If java is already installed and exists in the PATH then you will be shown the version installed,
-if, however you receive a message that "java is not recognized as an internal command or external
-command" you will need to install [java].
+<div class="alert alert-info">
+ You don't have to manually run this command. Our npm scripts are configured so that it will be
+ automatically executed as part of the command that runs the E2E tests.
+</div>
Since Protractor works by interacting with a running application, we need to start our web server:
@@ -261,32 +259,79 @@ Since Protractor works by interacting with a running application, we need to sta
npm start
```
-Then in a separate terminal/command line window, we can run the Protractor test scripts against the
-application by running:
+Then, in a _separate_ terminal/command line window, we can run the Protractor test scripts against
+the application by running:
```
npm run protractor
```
-Protractor will read the configuration file at `test/protractor-conf.js`. This configuration tells
-Protractor to:
+Protractor will read the configuration file at `e2e-tests/protractor.conf.js`. This configuration
+file tells Protractor to:
-- open up a Chrome browser and connect it to the application
-- execute all the End to End tests in this browser
-- report the results of these tests in the terminal/command line window
-- close down the browser and exit
+* Open up a Chrome browser and connect it to the application.
+* Execute all the E2E tests in this browser.
+* Report the results of these tests in the terminal/command line window.
+* Close the browser and exit.
-It is good to run the end to end tests whenever you make changes to the HTML views or want to check
-that the application as a whole is executing correctly. It is very common to run End to End tests
-before pushing a new commit of changes to a remote repository.
+It is good to run the E2E tests whenever you make changes to the HTML views or want to check that
+the application as a whole is executing correctly. It is very common to run E2E tests before pushing
+a new commit of changes to a remote repository.
+
+
+### Common Issues
+
+<br />
+**Firewall / Proxy issues**
+
+Git and other tools, often use the `git:` protocol for accessing files in remote repositories.
+Some firewall configurations are blocking `git://` URLs, which leads to errors when trying to clone
+repositories or download dependencies. (For example corporate firewalls are "notorious" for blocking
+`git:`.)
+
+If you run into this issue, you can force the use of `https:` instead, by running the following
+command: `git config --global url."https://".insteadOf git://`
+
+<br />
+**Updating WebDriver takes too long**
+
+Running `update-webdriver` for the first time may take from several seconds up to a few minutes
+(depending on your hardware and network connection). If you cancel the operation (e.g. using
+`Ctrl+C`), you might get errors, when trying to run Protractor later.
+
+In that case, you can delete the `node_modules/` directory and run `npm install` again.
+
+<br />
+**Protractor dependencies**
+
+Under the hood, Protractor uses the [Selenium Stadalone Server][selenium], which in turn requires
+the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this by running
+`java -version` from the command line.
+
+If JDK is not already installed, you can download it [here][jdk-download].
+
+<br />
+**Error running the web server**
+
+The web server is configured to use port 8000. If the port is already in use (for example by another
+instance of a running web server) you will get an `EADDRINUSE` error. Make sure the port is
+available, before running `npm start`.
+
+<hr />
+
+Now that you have set up your local machine, let's get started with the tutorial:
+{@link step_00 Step 0 - Bootstrapping}
-Now that you have set up your local machine, let's get started with the tutorial: {@link step_00 Step 0 - Bootstrapping}
-[git]: http://git-scm.com/
-[node]: http://nodejs.org/
[angular-phonecat]: https://github.com/angular/angular-phonecat
-[protractor]: https://github.com/angular/protractor
[bower]: http://bower.io/
+[git]: http://git-scm.com/
[http-server]: https://github.com/nodeapps/http-server
-[karma]: https://github.com/karma-runner/karma
-[java]: https://www.java.com/en/download/help/download_options.xml
+[jdk]: https://en.wikipedia.org/wiki/Java_Development_Kit
+[jdk-download]: http://www.oracle.com/technetwork/java/javase/downloads/index.html
+[karma]: https://karma-runner.github.io/
+[node]: http://nodejs.org/
+[nvm]: https://github.com/creationix/nvm
+[nvm-windows]: https://github.com/coreybutler/nvm-windows
+[protractor]: https://github.com/angular/protractor
+[selenium]: http://docs.seleniumhq.org/
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc
index 1a83fdf5ed2a..91d8bad361f7 100644
--- a/docs/content/tutorial/step_00.ngdoc
+++ b/docs/content/tutorial/step_00.ngdoc
@@ -7,11 +7,12 @@
In this step of the tutorial, you will become familiar with the most important source code files of
-the AngularJS phonecat app. You will also learn how to start the development servers bundled with
-angular-seed, and run the application in the browser.
+the AngularJS Phonecat App. You will also learn how to start the development servers bundled with
+[angular-seed][angular-seed], and run the application in the browser.
-Before you continue, make sure you have set up your development environment and installed all necessary
-dependencies, as described in {@link index#get-started Get Started}.
+Before you continue, make sure you have set up your development environment and installed all
+necessary dependencies, as described in the {@link tutorial/#environment-setup Environment Setup}
+section.
In the `angular-phonecat` directory, run this command:
@@ -19,118 +20,130 @@ In the `angular-phonecat` directory, run this command:
git checkout -f step-0
```
-
This resets your workspace to step 0 of the tutorial app.
You must repeat this for every future step in the tutorial and change the number to the number of
the step you are on. This will cause any changes you made within your working directory to be lost.
-If you haven't already done so you need to install the dependencies by running:
+If you haven't already done so, you need to install the dependencies by running:
```
npm install
```
-To see the app running in a browser, open a *separate* terminal/command line tab or window, then
-run `npm start` to start the web server. Now, open a browser window for the app and navigate to
-<a href="http://localhost:8000/app/" target="_blank" title="Open app on localhost">`http://localhost:8000/app/`</a>
+To see the app running in a browser, open a _separate_ terminal/command line tab or window, then run
+`npm start` to start the web server. Now, open a browser window for the app and navigate to
+http://localhost:8000/index.html.
-Note that if you already ran the master branch app prior to checking out step-0, you may see the cached
-master version of the app in your browser window at this point. Just hit refresh to re-load the page.
+Note that if you already ran the master branch app prior to checking out step-0, you may see the
+cached master version of the app in your browser window at this point. Just hit refresh to re-load
+the page.
You can now see the page in your browser. It's not very exciting, but that's OK.
The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
The code contains some key Angular elements that we will need as we progress.
-__`app/index.html`:__
+**`app/index.html`:**
```html
<!doctype html>
<html lang="en" ng-app>
-<head>
- <meta charset="utf-8">
- <title>My HTML File</title>
- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
- <link rel="stylesheet" href="css/app.css">
- <script src="bower_components/angular/angular.js"></script>
-</head>
-<body>
-
- <p>Nothing here {{'yet' + '!'}}</p>
-
-</body>
+ <head>
+ <meta charset="utf-8">
+ <title>My HTML File</title>
+ <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+ <script src="bower_components/angular/angular.js"></script>
+ </head>
+ <body>
+
+ <p>Nothing here {{'yet' + '!'}}</p>
+
+ </body>
</html>
```
-
## What is the code doing?
-**`ng-app` directive:**
+<br />
+**`ng-app` attribute:**
- <html ng-app>
+```html
+<html ng-app>
+```
+
+The `ng-app` attribute represents an Angular directive, named `ngApp` (Angular uses `kebab-case` for
+its custom attributes and `camelCase` for the corresponding directives which implement them). This
+directive is used to flag the HTML element that Angular should consider to be the root element of
+our application. This gives application developers the freedom to tell Angular if the entire HTML
+page or only a portion of it should be treated as the AngularJS application.
- The `ng-app` attribute represents an Angular directive named `ngApp` (Angular uses
- `spinal-case` for its custom attributes and `camelCase` for the corresponding directives
- which implement them).
- This directive is used to flag the html element that Angular should consider to be the root element
- of our application.
- This gives application developers the freedom to tell Angular if the entire html page or only a
- portion of it should be treated as the Angular application.
+For more info on `ngApp`, check out the {@link ngApp API Reference}.
-**AngularJS script tag:**
+<br />
+**`angular.js` script tag:**
- <script src="bower_components/angular/angular.js">
+```html
+<script src="bower_components/angular/angular.js"></script>
+```
- This code downloads the `angular.js` script which registers a callback that will be executed by the
+This code downloads the `angular.js` script which registers a callback that will be executed by the
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
-looks for the {@link ng.directive:ngApp ngApp} directive. If
-Angular finds the directive, it will bootstrap the application with the root of the application DOM
-being the element on which the `ngApp` directive was defined.
+looks for the {@link ngApp ngApp} directive. If Angular finds the directive, it will bootstrap the
+application with the root of the application DOM being the element on which the `ngApp` directive
+was defined.
+For more info on bootstrapping your app, checkout the [Bootstrap](guide/bootstrap) section of the
+Developer Guide.
+
+<br />
**Double-curly binding with an expression:**
- Nothing here {{'yet' + '!'}}
+```html
+Nothing here {{'yet' + '!'}}
+```
This line demonstrates two core features of Angular's templating capabilities:
- * a binding, denoted by double-curlies `{{ }}`
- * a simple expression `'yet' + '!'` used in this binding.
+* A binding, denoted by double-curlies: `{{ }}`
+* A simple expression used in this binding: `'yet' + '!'`
-The binding tells Angular that it should evaluate an expression and insert the result into the
-DOM in place of the binding. Rather than a one-time insert, as we'll see in the next steps, a
-binding will result in efficient continuous updates whenever the result of the expression
-evaluation changes.
+The binding tells Angular that it should evaluate an expression and insert the result into the DOM
+in place of the binding. As we will see in the next steps, rather than a one-time insert, a binding
+will result in efficient continuous updates whenever the result of the expression evaluation
+changes.
-{@link guide/expression Angular expression} is a JavaScript-like code snippet that is
-evaluated by Angular in the context of the current model scope, rather than within the scope of
-the global context (`window`).
+{@link guide/expression Angular expressions} are JavaScript-like code snippets that are evaluated by
+Angular in the context of the current model scope, rather than within the scope of the global
+context (`window`).
-As expected, once this template is processed by Angular, the html page contains the text:
-"Nothing here yet!".
+As expected, once this template is processed by Angular, the HTML page contains the text:
-## Bootstrapping AngularJS apps
+```
+Nothing here yet!
+```
-Bootstrapping AngularJS apps automatically using the `ngApp` directive is very easy and suitable
-for most cases. In advanced cases, such as when using script loaders, you can use the
-{@link guide/bootstrap imperative / manual way} to bootstrap the app.
+## Bootstrapping Angular Applications
-There are 3 important things that happen during the app bootstrap:
+Bootstrapping Angular applications automatically using the `ngApp` directive is very easy and
+suitable for most cases. In advanced cases, such as when using script loaders, you can use the
+{@link guide/bootstrap#manual-initialization imperative/manual way} to bootstrap the application.
+
+There are 3 important things that happen during the bootstrap phase:
1. The {@link auto.$injector injector} that will be used for dependency injection is created.
-2. The injector will then create the {@link ng.$rootScope root scope} that will
- become the context for the model of our application.
+2. The injector will then create the {@link ng.$rootScope root scope} that will become the context
+ for the model of our application.
3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any
directives and bindings found along the way.
-
Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
-click, key press or incoming HTTP response) that might change the model. Once such an event occurs,
-Angular detects if it caused any model changes and if changes are found, Angular will reflect them
-in the view by updating all of the affected bindings.
+clicks, key presses or incoming HTTP responses) that might change the model. Once such an event
+occurs, Angular detects if it caused any model changes and if changes are found, Angular will
+reflect them in the view by updating all of the affected bindings.
The structure of our application is currently very simple. The template contains just one directive
and one static binding, and our model is empty. That will soon change!
@@ -140,27 +153,29 @@ and one static binding, and our model is empty. That will soon change!
## What are all these files in my working directory?
-
-Most of the files in your working directory come from the [angular-seed project][angular-seed] which
-is typically used to bootstrap new Angular projects. The seed project is pre-configured to install
-the angular framework (via `bower` into the `app/bower_components/` folder) and tools for developing
-a typical web app (via `npm`).
+Most of the files in your working directory come from the [angular-seed project][angular-seed],
+which is typically used to bootstrap new AngularJS projects. The seed project is pre-configured to
+install the AngularJS framework (via `bower` into the `app/bower_components/` directory) and tools
+for developing and testing a typical web application (via `npm`).
For the purposes of this tutorial, we modified the angular-seed with the following changes:
-* Removed the example app
-* Added phone images to `app/img/phones/`
-* Added phone data files (JSON) to `app/phones/`
+* Removed the example app.
+* Removed unused dependencies.
+* Added phone images to `app/img/phones/`.
+* Added phone data files (JSON) to `app/phones/`.
* Added a dependency on [Bootstrap](http://getbootstrap.com) in the `bower.json` file.
-
# Experiments
-* Try adding a new expression to the `index.html` that will do some math:
+<div></div>
- <p>1 + 2 = {{ 1 + 2 }}</p>
+* Try adding a new expression to `index.html` that will do some math:
+ ```html
+ <p>1 + 2 = {{1 + 2}}</p>
+ ```
# Summary
diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc
index fa7c3d420604..a944a554dd80 100644
--- a/docs/content/tutorial/step_01.ngdoc
+++ b/docs/content/tutorial/step_01.ngdoc
@@ -12,11 +12,11 @@ dynamically display the same result with any set of data.
In this step you will add some basic information about two cell phones to an HTML page.
-- The page now contains a list with information about two phones.
+* The page now contains a list with information about two phones.
<div doc-tutorial-reset="1"></div>
-
+<br />
**`app/index.html`:**
```html
@@ -39,15 +39,19 @@ In this step you will add some basic information about two cell phones to an HTM
# Experiments
+<div></div>
+
* Try adding more static HTML to `index.html`. For example:
- <p>Total number of phones: 2</p>
+ ```html
+ <p>Total number of phones: 2</p>
+ ```
# Summary
-This addition to your app uses static HTML to display the list. Now, let's go to {@link step_02
-step 2} to learn how to use AngularJS to dynamically generate the same list.
+This addition to your app uses static HTML to display the list. Now, let's go to
+{@link step_02 step 2} to learn how to use Angular to dynamically generate the same list.
<ul doc-tutorial-nav="1"></ul>
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc
index 624bbc322e6e..fc6eecdecf8a 100644
--- a/docs/content/tutorial/step_02.ngdoc
+++ b/docs/content/tutorial/step_02.ngdoc
@@ -6,37 +6,38 @@
<ul doc-tutorial-nav="2"></ul>
-Now it's time to make the web page dynamic — with AngularJS. We'll also add a test that verifies the
-code for the controller we are going to add.
+Now, it's time to make the web page dynamic — with AngularJS. We will also add a test that verifies
+the code for the controller we are going to add.
-There are many ways to structure the code for an application. For Angular apps, we encourage the use of
-[the Model-View-Controller (MVC) design pattern](http://en.wikipedia.org/wiki/Model–View–Controller)
-to decouple the code and to separate concerns. With that in mind, let's use a little Angular and
-JavaScript to add model, view, and controller components to our app.
+There are many ways to structure the code for an application. For Angular applications, we encourage
+the use of the [Model-View-Controller (MVC) design pattern][mvc-pattern] to decouple the code and
+separate concerns. With that in mind, let's use a little Angular and JavaScript to add models,
+views, and controllers to our app.
-- The list of three phones is now generated dynamically from data
+* The list of three phones is now generated dynamically from data
<div doc-tutorial-reset="2"></div>
## View and Template
-In Angular, the __view__ is a projection of the model through the HTML __template__. This means that
+In Angular, the **view** is a projection of the model through the HTML **template**. This means that
whenever the model changes, Angular refreshes the appropriate binding points, which updates the
view.
-The view component is constructed by Angular from this template:
+The view is constructed by Angular from this template.
-__`app/index.html`:__
+<br />
+**`app/index.html`:**
```html
<html ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
- <script src="js/controllers.js"></script>
+ <script src="app.js"></script>
</head>
-<body ng-controller="PhoneListCtrl">
+<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
@@ -49,97 +50,117 @@ __`app/index.html`:__
</html>
```
-We replaced the hard-coded phone list with the {@link ng.directive:ngRepeat ngRepeat directive}
-and two {@link guide/expression Angular expressions}:
+We replaced the hard-coded phone list with the {@link ngRepeat ngRepeat} directive and two
+{@link guide/expression Angular expressions}:
-* The `ng-repeat="phone in phones"` attribute in the `<li>` tag is an Angular repeater directive.
-The repeater tells Angular to create a `<li>` element for each phone in the list using the `<li>`
-tag as the template.
-* The expressions wrapped in curly braces (`{{phone.name}}` and `{{phone.snippet}}`) will be replaced
-by the value of the expressions.
+* The `ng-repeat="phone in phones"` attribute on the `<li>` tag is an Angular repeater directive.
+ The repeater tells Angular to create a `<li>` element for each phone in the list, using the `<li>`
+ tag as the template.
+* The expressions wrapped in curly braces (`{{phone.name}}` and `{{phone.snippet}}`) will be
+ replaced by the values of the expressions.
-We have added a new directive, called `ng-controller`, which attaches a `PhoneListCtrl`
-__controller__ to the <body> tag. At this point:
+We have also added a new directive, called {@link ngController ngController}, which attaches a
+`PhoneListController` **controller** to the `<body>` tag. At this point:
-* The expressions in curly braces (`{{phone.name}}` and `{{phone.snippet}}`) denote
-bindings, which are referring to our application model, which is set up in our `PhoneListCtrl`
-controller.
+* `PhoneListController` is in charge of the DOM sub-tree under (and including) the `<body>` element.
+* The expressions in curly braces (`{{phone.name}}` and `{{phone.snippet}}`) denote bindings, which
+ are referring to our application model, which is set up in our `PhoneListController` controller.
<div class="alert alert-info">
-Note: We have specified an {@link angular.Module Angular Module} to load using `ng-app="phonecatApp"`,
-where `phonecatApp` is the name of our module. This module will contain the `PhoneListCtrl`.
+ Note: We have specified an {@link angular.Module Angular Module} to load using
+ `ng-app="phonecatApp"`, where `phonecatApp` is the name of our module. This module will contain
+ the `PhoneListController`.
</div>
-<img class="diagram" src="img/tutorial/tutorial_02.png">
## Model and Controller
-The data __model__ (a simple array of phones in object literal notation) is now instantiated within
-the `PhoneListCtrl` __controller__. The __controller__ is simply a constructor function that takes a
-`$scope` parameter:
+The data **model** (a simple array of phones in object literal notation) is now instantiated within
+the `PhoneListController` **controller**. The **controller** is simply a constructor function that
+takes a `$scope` parameter:
-__`app/js/controllers.js`:__
+<br />
+**`app/app.js`:**
```js
-
+// Define the `phonecatApp` module
var phonecatApp = angular.module('phonecatApp', []);
-phonecatApp.controller('PhoneListCtrl', function ($scope) {
+// Define the `PhoneListController` controller on the `phonecatApp` module
+phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [
- {'name': 'Nexus S',
- 'snippet': 'Fast just got faster with Nexus S.'},
- {'name': 'Motorola XOOM™ with Wi-Fi',
- 'snippet': 'The Next, Next Generation tablet.'},
- {'name': 'MOTOROLA XOOM™',
- 'snippet': 'The Next, Next Generation tablet.'}
+ {
+ name: 'Nexus S',
+ snippet: 'Fast just got faster with Nexus S.'
+ }, {
+ name: 'Motorola XOOM™ with Wi-Fi',
+ snippet: 'The Next, Next Generation tablet.'
+ }, {
+ name: 'MOTOROLA XOOM™',
+ snippet: 'The Next, Next Generation tablet.'
+ }
];
});
```
-Here we declared a controller called `PhoneListCtrl` and registered it in an AngularJS
-module, `phonecatApp`. Notice that our `ng-app` directive (on the `<html>` tag) now specifies the `phonecatApp`
-module name as the module to load when bootstrapping the Angular application.
+Here we declared a controller called `PhoneListController` and registered it in an Angular module,
+`phonecatApp`. Notice that our `ngApp` directive (on the `<html>` tag) now specifies the
+`phonecatApp` module name as the module to load when bootstrapping the application.
Although the controller is not yet doing very much, it plays a crucial role. By providing context
-for our data model, the controller allows us to establish data-binding between
-the model and the view. We connected the dots between the presentation, data, and logic components
-as follows:
+for our data model, the controller allows us to establish data-binding between the model and the
+view. We connected the dots between the presentation, data, and logic components as follows:
+
+* The {@link ngController ngController} directive, located on the `<body>` tag, references the name
+ of our controller, `PhoneListController` (located in the JavaScript file `app.js`).
-* The {@link ng.directive:ngController ngController} directive, located on the `<body>` tag,
-references the name of our controller, `PhoneListCtrl` (located in the JavaScript file
-`controllers.js`).
+* The `PhoneListController` controller attaches the phone data to the `$scope` that was injected
+ into our controller function. This _scope_ is a prototypal descendant of the _root scope_ that was
+ created when the application was defined. This controller scope is available to all bindings
+ located within the `<body ng-controller="PhoneListController">` tag.
-* The `PhoneListCtrl` controller attaches the phone data to the `$scope` that was injected into our
-controller function. This *scope* is a prototypical descendant of the *root scope* that was created
-when the application was defined. This controller scope is available to all bindings located within
-the `<body ng-controller="PhoneListCtrl">` tag.
### Scope
The concept of a scope in Angular is crucial. A scope can be seen as the glue which allows the
-template, model and controller to work together. Angular uses scopes, along with the information
+template, model, and controller to work together. Angular uses scopes, along with the information
contained in the template, data model, and controller, to keep models and views separate, but in
sync. Any changes made to the model are reflected in the view; any changes that occur in the view
are reflected in the model.
To learn more about Angular scopes, see the {@link ng.$rootScope.Scope angular scope documentation}.
+<img class="diagram" src="img/tutorial/tutorial_02.png">
-## Tests
+<div class="alert alert-warning">
+ <p>
+ Angular scopes prototypally inherit from their parent scope, all the way up to the *root scope*
+ of the application. As a result, assigning values directly on the scope makes it easy to share
+ data across different parts of the page and create interactive applications.
+ While this approach works for prototypes and smaller applications, it quickly leads to tight
+ coupling and difficulty to reason about changes in our data model.
+ </p>
+ <p>
+ In the next step, we will learn how to better organize our code, by "packaging" related pieces
+ of application and presentation logic into isolated, reusable entities, called components.
+ </p>
+</div>
-The "Angular way" of separating controller from the view, makes it easy to test code as it is being
-developed. If our controller is available on the global namespace then we could simply instantiate it
-with a mock `scope` object:
-__`test/e2e/scenarios.js`:__
+# Testing
+The "Angular way" of separating controller from the view, makes it easy to test code as it is being
+developed. If our controller were available on the global namespace, we could simply instantiate it
+with a mock scope object:
+
+<br />
```js
-describe('PhoneListCtrl', function(){
+describe('PhoneListController', function() {
- it('should create "phones" model with 3 phones', function() {
- var scope = {},
- ctrl = new PhoneListCtrl(scope);
+ it('should create a `phones` model with 3 phones', function() {
+ var scope = {};
+ var ctrl = new PhoneListController(scope);
expect(scope.phones.length).toBe(3);
});
@@ -147,30 +168,31 @@ describe('PhoneListCtrl', function(){
});
```
-The test instantiates `PhoneListCtrl` and verifies that the phones array property on the scope
-contains three records. This example demonstrates how easy it is to create a unit test for code in
-Angular. Since testing is such a critical part of software development, we make it easy to create
-tests in Angular so that developers are encouraged to write them.
+The test instantiates `PhoneListController` and verifies that the phones array property on the
+scope contains three records. This example demonstrates how easy it is to create a unit test for
+code in Angular. Since testing is such a critical part of software development, we make it easy to
+create tests in Angular so that developers are encouraged to write them.
+
-### Testing non-Global Controllers
+## Testing non-global Controllers
-In practice, you will not want to have your controller functions in the global namespace. Instead,
-you can see that we have registered it via an anonymous constructor function on the `phonecatApp`
-module.
+In practice, you will not want to have your controller functions in the global namespace. Instead,
+you can see that we have registered it via a constructor function on the `phonecatApp` module.
In this case Angular provides a service, `$controller`, which will retrieve your controller by name.
Here is the same test using `$controller`:
-__`test/unit/controllersSpec.js`:__
+<br />
+**`app/app.spec.js`:**
```js
-describe('PhoneListCtrl', function(){
+describe('PhoneListController', function() {
beforeEach(module('phonecatApp'));
- it('should create "phones" model with 3 phones', inject(function($controller) {
- var scope = {},
- ctrl = $controller('PhoneListCtrl', {$scope:scope});
+ it('should create a `phones` model with 3 phones', inject(function($controller) {
+ var scope = {};
+ var ctrl = $controller('PhoneListController', {$scope: scope});
expect(scope.phones.length).toBe(3);
}));
@@ -179,29 +201,46 @@ describe('PhoneListCtrl', function(){
```
* Before each test we tell Angular to load the `phonecatApp` module.
-* We ask Angular to `inject` the `$controller` service into our test function
-* We use `$controller` to create an instance of the `PhoneListCtrl`
+* We ask Angular to `inject` the `$controller` service into our test function.
+* We use `$controller` to create an instance of the `PhoneListController`.
* With this instance, we verify that the phones array property on the scope contains three records.
+<div class="alert alert-info">
+ <p>**A note on file naming:**</p>
+ <p>
+ As already mentioned in the [introduction](tutorial/#running-unit-tests), the unit test files
+ (specs) are kept side-by-side with the application code. We name our specs after the file
+ containing the code to be tested plus a specific suffix to distinguish them from files
+ containing application code. Note that test files are still plain JavaScript files, so they have
+ a `.js` file extension.
+ </p>
+ <p>
+ In this tutorial, we are using the `.spec` suffix. So the test file corresponding to
+ `something.js` would be called `something.spec.js`.
+ (Another common convention is to use a `_spec` or `_test` suffix.)
+ </p>
+</div>
+
-### Writing and Running Tests
+## Writing and Running Tests
-Angular developers prefer the syntax of Jasmine's Behavior-driven Development (BDD) framework when
-writing tests. Although Angular does not require you to use Jasmine, we wrote all of the tests in
-this tutorial in Jasmine v1.3. You can learn about Jasmine on the [Jasmine home page][jasmine] and
-at the [Jasmine docs][jasmine-docs].
+Many Angular developers prefer the syntax of
+[Jasmine's Behavior-Driven Development (BDD) framework][jasmine-home], when writing tests. Although
+Angular does not require you to use Jasmine, we wrote all of the tests in this tutorial in Jasmine
+v2.4. You can learn about Jasmine on the [Jasmine home page][jasmine-home] and at the
+[Jasmine docs][jasmine-docs].
-The angular-seed project is pre-configured to run unit tests using [Karma][karma] but you will need
+The angular-seed project is pre-configured to run unit tests using [Karma][karma], but you will need
to ensure that Karma and its necessary plugins are installed. You can do this by running
`npm install`.
-To run the tests, and then watch the files for changes: `npm test`.
+To run the tests, and then watch the files for changes execute: `npm test`
* Karma will start new instances of Chrome and Firefox browsers automatically. Just ignore them and
let them run in the background. Karma will use these browsers for test execution.
* If you only have one of the browsers installed on your machine (either Chrome or Firefox), make
- sure to update the karma configuration file before running the test. Locate the configuration file
- in `test/karma.conf.js`, then update the `browsers` property.
+ sure to update the karma configuration file (`karma.conf.js`), before running the test. Locate the
+ configuration file in the root directory and update the `browsers` property.
E.g. if you only have Chrome installed:
<pre>
@@ -213,23 +252,27 @@ To run the tests, and then watch the files for changes: `npm test`.
* You should see the following or similar output in the terminal:
<pre>
- info: Karma server started at http://localhost:9876/
- info (launcher): Starting browser "Chrome"
- info (Chrome 22.0): Connected on socket id tPUm9DXcLHtZTKbAEO-n
- Chrome 22.0: Executed 1 of 1 SUCCESS (0.093 secs / 0.004 secs)
+ INFO [karma]: Karma server started at http://localhost:9876/
+ INFO [launcher]: Starting browser Chrome
+ INFO [Chrome 49.0]: Connected on socket ... with id ...
+ Chrome 49.0: Executed 1 of 1 SUCCESS (0.05 secs / 0.04 secs)
</pre>
Yay! The test passed! Or not...
-* To rerun the tests, just change any of the source or test .js files. Karma will notice the change
+
+* To rerun the tests, just change any of the source or test `.js` files. Karma will notice the change
and will rerun the tests for you. Now isn't that sweet?
<div class="alert alert-info">
-Make sure you don't minimize the browser that Karma opened. On some OS, memory assigned to a minimized
-browser is limited, which results in your karma tests running extremely slow.
+ Make sure you don't minimize the browser that Karma opened. On some OS, memory assigned to a
+ minimized browser is limited, which results in your karma tests running extremely slow.
</div>
+
# Experiments
+<div></div>
+
* Add another binding to `index.html`. For example:
```html
@@ -238,46 +281,60 @@ browser is limited, which results in your karma tests running extremely slow.
* Create a new model property in the controller and bind to it from the template. For example:
- $scope.name = "World";
+ ```js
+ $scope.name = 'world';
+ ```
Then add a new binding to `index.html`:
- <p>Hello, {{name}}!</p>
+ ```html
+ <p>Hello, {{name}}!</p>
+ ```
- Refresh your browser and verify that it says "Hello, World!".
+ Refresh your browser and verify that it says 'Hello, world!'.
-* Update the unit test for the controller in `./test/unit/controllersSpec.js` to reflect the previous change. For example by adding:
+* Update the unit test for the controller in `app/app.spec.js` to reflect the previous change.
+ For example by adding:
- expect(scope.name).toBe('World');
+ ```js
+ expect(scope.name).toBe('world');
+ ```
* Create a repeater in `index.html` that constructs a simple table:
- <table>
- <tr><th>row number</th></tr>
- <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
- </table>
+ ```html
+ <table>
+ <tr><th>Row number</th></tr>
+ <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
+ </table>
+ ```
Now, make the list 1-based by incrementing `i` by one in the binding:
- <table>
- <tr><th>row number</th></tr>
- <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
- </table>
+ ```html
+ <table>
+ <tr><th>Row number</th></tr>
+ <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
+ </table>
+ ```
- Extra points: try and make an 8x8 table using an additional `ng-repeat`.
+ Extra points: Try and make an 8x8 table using an additional `ng-repeat`.
-* Make the unit test fail by changing `expect(scope.phones.length).toBe(3)` to instead use `toBe(4)`.
+* Make the unit test fail by changing `expect(scope.phones.length).toBe(3)` to instead use
+ `toBe(4)`.
# Summary
-You now have a dynamic app that features separate model, view, and controller components, and you
-are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to add full text search
-to the app.
+We now have a dynamic application which separates models, views, and controllers, and we are testing
+as we go. Let's go to {@link step_03 step 3} to learn how to improve our application's architecture,
+by utilizing components.
<ul doc-tutorial-nav="2"></ul>
-[jasmine]: http://jasmine.github.io/
-[jasmine-docs]: http://jasmine.github.io/1.3/introduction.html
-[karma]: http://karma-runner.github.io/
+
+[jasmine-docs]: http://jasmine.github.io/2.4/introduction.html
+[jasmine-home]: http://jasmine.github.io/
+[karma]: https://karma-runner.github.io/
+[mvc-pattern]: http://en.wikipedia.org/wiki/Model–View–Controller
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc
index 4025b520db2e..7d9e3665a466 100644
--- a/docs/content/tutorial/step_03.ngdoc
+++ b/docs/content/tutorial/step_03.ngdoc
@@ -1,223 +1,282 @@
@ngdoc tutorial
-@name 3 - Filtering Repeaters
+@name 3 - Components
@step 3
@description
<ul doc-tutorial-nav="3"></ul>
-We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
-simple; we will add full text search (yes, it will be simple!). We will also write an end-to-end
-test, because a good end-to-end test is a good friend. It stays with your app, keeps an eye on it,
-and quickly detects regressions.
+In the previous step, we saw how a controller and a template worked together to convert a static
+HTML page into a dynamic view. This is a very common pattern in Single-Page Applications in general
+(and Angular applications in particular):
-* The app now has a search box. Notice that the phone list on the page changes depending on what a
-user types into the search box.
+* Instead of creating a static HTML page on the server, the client-side code "takes over" and
+ interacts dynamically with the view, updating it instantly to reflect changes in model data or
+ state, usually as a result of user interaction (we'll see an example shortly in
+ {@link step_05 step 5}).
-<div doc-tutorial-reset="3"></div>
+The **template** (the part of the view containing the bindings and presentation logic) acts as a
+a blueprint for how our data should be organized and presented to the user.
+The **controller** provides the context in which the bindings are evaluated and applies behavior
+and logic to our template.
+There are still a couple of areas we can do better:
-## Controller
+1. What if we want to reuse the same functionality in a different part of our application ?<br />
+ We would need to duplicate the whole template (including the controller). This is error-prone and
+ hurts maintainability.
+2. The scope, that glues our controller and template together into a dynamic view, is not isolated
+ from other parts of the page. What this means is that a random, unrelated change in a different
+ part of the page (e.g. a property-name conflict) could have unexpected and hard-to-debug side
+ effects on our view.
-We made no changes to the controller.
+ (OK, this might not be a real concern in our minimal example, but it **is** a valid concern for
+ bigger, real-world applications.)
-## Template
+<div doc-tutorial-reset="3"></div>
-__`app/index.html`:__
-```html
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-2">
- <!--Sidebar content-->
-
- Search: <input ng-model="query">
-
- </div>
- <div class="col-md-10">
- <!--Body content-->
-
- <ul class="phones">
- <li ng-repeat="phone in phones | filter:query">
- {{phone.name}}
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
-
- </div>
- </div>
- </div>
-```
+## Components to the rescue!
-We added a standard HTML `<input>` tag and used Angular's
-{@link ng.filter:filter filter} function to process the input for the
-{@link ng.directive:ngRepeat ngRepeat} directive.
+Since this combination (template + controller) is such a common and recurring pattern, Angular
+provides an easy and concise way to combine them together into reusable and isolated entities,
+known as _components_.
+Additionally, Angular will create a so called _isolate scope_ for each instance of our component,
+which means no prototypal inheritance and no risk of our component affecting other parts of the
+application or vice versa.
-This lets a user enter search criteria and immediately see the effects of their search on the phone
-list. This new code demonstrates the following:
+<div class="alert alert-info">
+ <p>
+ Since this is an introductory tutorial, we are not going to dive deep into all features provided
+ by Angular **components**. You can read more about components and their usage patterns in the
+ [Components](guide/component) section of the Developer Guide.
+ </p>
+ <p>
+ In fact, one could think of components as an opinionated and stripped-down version of their more
+ complex and verbose (but powerful) siblings, **directives**, which are Angular's way of teaching
+ HTML new tricks. You can read all about them in the [Directives](guide/directive) section of the
+ Developer Guide.
+ </p>
+ <p>
+ (**Note:** Directives are an advanced topic, so you might want to postpone studying them, until
+ you have mastered the basics.)
+ </p>
+</div>
-* Data-binding: This is one of the core features in Angular. When the page loads, Angular binds the
-name of the input box to a variable of the same name in the data model and keeps the two in sync.
+To create a component, we use the {@link angular.Module#component .component()} method of an
+{@link module Angular module}. We must provide the name of the component and the Component
+Definition Object (CDO for short).
- In this code, the data that a user types into the input box (named __`query`__) is immediately
-available as a filter input in the list repeater (`phone in phones | filter:`__`query`__). When
-changes to the data model cause the repeater's input to change, the repeater efficiently updates
-the DOM to reflect the current state of the model.
+Remember that (since components are also directives) the name of the component is in `camelCase`,
+but we will use `kebab-case`, when referring to it in our HTML.
-<img class="diagram" src="img/tutorial/tutorial_03.png">
+In its simplest form, the CDO will just contain a template and a controller. (We can actually omit
+the controller and Angular will create a dummy controller for us. This is useful for simple
+"presentational" components, that don't attach any behavior to the template.)
-* Use of the `filter` filter: The {@link ng.filter:filter filter} function uses the
-`query` value to create a new array that contains only those records that match the `query`.
+Let's see an example:
- `ngRepeat` automatically updates the view in response to the changing number of phones returned
-by the `filter` filter. The process is completely transparent to the developer.
+```js
+ angular.
+ module('myApp').
+ component('greetUser', {
+ template: 'Hello, {{$ctrl.user}}!',
+ controller: function GreetUserController() {
+ this.user = 'world';
+ }
+ });
+```
-## Test
+Now, every time we include `<greet-user></greet-user>` in our view, Angular will expand it into a
+DOM sub-tree constructed using the provided `template` and managed by an instance of the specified
+controller.
-In Step 2, we learned how to write and run unit tests. Unit tests are perfect for testing
-controllers and other components of our application written in JavaScript, but they can't easily
-test DOM manipulation or the wiring of our application. For these, an end-to-end test is a much
-better choice.
+But wait, where did that `$ctrl` come from and what does it refer to ?
-The search feature was fully implemented via templates and data-binding, so we'll write our first
-end-to-end test, to verify that the feature works.
+For reasons already mentioned (and for other reasons that are out of the scope of this tutorial), it
+is considered a good practice to avoid using the scope directly. We can (and should) use our
+controller instance; i.e. assign our data and methods on properties of our controller (the "`this`"
+inside the controller constructor), instead of directly to the scope.
-__`test/e2e/scenarios.js`:__
+From the template, we can refer to our controller instance using an alias. This way, the context of
+evaluation for our expressions is even more clear. By default, components use `$ctrl` as the
+controller alias, but we can override it, should the need arise.
-```js
-describe('PhoneCat App', function() {
+There are more options available, so make sure you check out the
+{@link ng.$compileProvider#component API Reference}, before using `.component()` in your own
+applications.
- describe('Phone list view', function() {
- beforeEach(function() {
- browser.get('app/index.html');
- });
+## Using Components
+Now that we know how to create components, let's refactor the HTML page to make use of our newly
+acquired skill.
- it('should filter the phone list as a user types into the search box', function() {
+<br />
+**`app/index.html`:**
- var phoneList = element.all(by.repeater('phone in phones'));
- var query = element(by.model('query'));
+```html
+<html ng-app="phonecatApp">
+<head>
+ ...
+ <script src="bower_components/angular/angular.js"></script>
+ <script src="app.js"></script>
+ <script src="phone-list.component.js"></script>
+</head>
+<body>
+
+ <!-- Use a custom component to render a list of phones -->
+ <phone-list></phone-list>
+
+</body>
+</html>
+```
- expect(phoneList.count()).toBe(3);
+<br />
+**`app/app.js`:**
+
+```js
+// Define the `phonecatApp` module
+angular.module('phonecatApp', []);
+```
- query.sendKeys('nexus');
- expect(phoneList.count()).toBe(1);
+<br />
+**`app/phone-list.component.js`:**
- query.clear();
- query.sendKeys('motorola');
- expect(phoneList.count()).toBe(2);
- });
+```js
+// Register `phoneList` component, along with its associated controller and template
+angular.
+ module('phonecatApp').
+ component('phoneList', {
+ template:
+ '<ul>' +
+ '<li ng-repeat="phone in $ctrl.phones">' +
+ '<span>{{phone.name}}</span>' +
+ '<p>{{phone.snippet}}</p>' +
+ '</li>' +
+ '</ul>',
+ controller: function PhoneListController() {
+ this.phones = [
+ {
+ name: 'Nexus S',
+ snippet: 'Fast just got faster with Nexus S.'
+ }, {
+ name: 'Motorola XOOM™ with Wi-Fi',
+ snippet: 'The Next, Next Generation tablet.'
+ }, {
+ name: 'MOTOROLA XOOM™',
+ snippet: 'The Next, Next Generation tablet.'
+ }
+ ];
+ }
});
-});
```
-This test verifies that the search box and the repeater are correctly wired together. Notice how
-easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it
-really is that easy to set up any functional, readable, end-to-end test.
+Voilà! The resulting output should look the same, but let's see what we have gained:
-### Running End to End Tests with Protractor
-Even though the syntax of this test looks very much like our controller unit test written with
-Jasmine, the end-to-end test uses APIs of [Protractor](https://github.com/angular/protractor). Read
-about the Protractor APIs at http://angular.github.io/protractor/#/api.
+* Our phone list is reusable. Just drop `<phone-list></phone-list>` anywhere in the page to get a
+ list of phones.
+* Our main view (`index.html`) is cleaner and more declarative. Just by looking at it, we know there
+ is a list of phones. We are not bothered with implementation details.
+* Our component is isolated and safe from "external influences". Likewise, we don't have to worry,
+ that we might accidentally break something in some other part of the application. What happens
+ inside our component, stays inside our component.
+* It's easier to test our component in isolation.
-Much like Karma is the test runner for unit tests, we use Protractor to run end-to-end tests.
-Try it with `npm run protractor`. End-to-end tests are slow, so unlike with unit tests, Protractor
-will exit after the test run and will not automatically rerun the test suite on every file change.
-To rerun the test suite, execute `npm run protractor` again.
+<img class="diagram" src="img/tutorial/tutorial_03.png">
<div class="alert alert-info">
- Note: You must ensure your application is being served via a web-server to test with protractor.
- You can do this using `npm start`.
- You also need to ensure you've installed the protractor and updated webdriver prior to running the
- `npm run protractor`. You can do this by issuing `npm install` and `npm run update-webdriver` into
- your terminal.
+ <p>**A note on file naming:**</p>
+ <p>
+ It is a good practice to distinguish different types of entities by suffix. In this tutorial, we
+ are using the `.component` suffix for components, so the definition of a `someComponent`
+ component would be in a file named `some-component.component.js`.
+ </p>
</div>
-# Experiments
+# Testing
-### Display Current Query
-Display the current value of the `query` model by adding a `{{query}}` binding into the
-`index.html` template, and see how it changes when you type in the input box.
+Although we have combined our controller with a template into a component, we still can (and should)
+unit test the controller separately, since this is where are application logic and data reside.
-### Display Query in Title
-Let's see how we can get the current value of the `query` model to appear in the HTML page title.
+In order to retrieve and instantiate a component's controller, Angular provides the
+{@link ngMock.$componentController $componentController} service.
-* Add an end-to-end test into the `describe` block, `test/e2e/scenarios.js` should look like this:
+<div class="alert alert-info">
+ The `$controller` service that we used in the previous step, can only instantiate controllers that
+ where registered by name, using the `.controller()` method. We could have registered our component
+ controller this way too, if we wanted to. Instead, we chose to define it inline — inside the
+ CDO — to keep things localized, but either way works equally well.
+</div>
- ```js
- describe('PhoneCat App', function() {
-
- describe('Phone list view', function() {
-
- beforeEach(function() {
- browser.get('app/index.html');
- });
-
- var phoneList = element.all(by.repeater('phone in phones'));
- var query = element(by.model('query'));
-
- it('should filter the phone list as a user types into the search box', function() {
- expect(phoneList.count()).toBe(3);
-
- query.sendKeys('nexus');
- expect(phoneList.count()).toBe(1);
-
- query.clear();
- query.sendKeys('motorola');
- expect(phoneList.count()).toBe(2);
- });
-
- it('should display the current filter value in the title bar', function() {
- query.clear();
- expect(browser.getTitle()).toMatch(/Google Phone Gallery:\s*$/);
-
- query.sendKeys('nexus');
- expect(browser.getTitle()).toMatch(/Google Phone Gallery: nexus$/);
- });
- });
- });
- ```
+<br />
+**`app/phone-list.component.spec.js`:**
- Run protractor (`npm run protractor`) to see this test fail.
+```js
+describe('phoneList', function() {
+ // Load the module that contains the `phoneList` component before each test
+ beforeEach(module('phonecatApp'));
-* You might think you could just add the `{{query}}` to the title tag element as follows:
+ // Test the controller
+ describe('PhoneListController', function() {
- <title>Google Phone Gallery: {{query}}</title>
+ it('should create a `phones` model with 3 phones', inject(function($componentController) {
+ var ctrl = $componentController('phoneList');
- However, when you reload the page, you won't see the expected result. This is because the "query"
- model lives in the scope, defined by the `ng-controller="PhoneListCtrl"` directive, on the body
- element:
+ expect(ctrl.phones.length).toBe(3);
+ }));
- <body ng-controller="PhoneListCtrl">
+ });
- If you want to bind to the query model from the `<title>` element, you must __move__ the
- `ngController` declaration to the HTML element because it is the common parent of both the body
- and title elements:
+});
+```
- <html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
+The test retrieves the controller associated with the `phoneList` component, instantiates it and
+verifies that the phones array property on it contains three records. Note that the data is now on
+the controller instance itself, not on a `scope`.
- Be sure to __remove__ the `ng-controller` declaration from the body element.
-* Re-run `npm run protractor` to see the test now pass.
+## Running Tests
-* While using double curlies works fine within the title element, you might have noticed that
-for a split second they are actually displayed to the user while the page is loading. A better
-solution would be to use the {@link ng.directive:ngBind ngBind} or
-{@link ng.directive:ngBindTemplate ngBindTemplate} directives, which are invisible to the user
-while the page is loading:
+Same as before, execute `npm test` to run the tests and then watch the files for changes.
- <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
+
+# Experiments
+
+<div></div>
+
+* Try the experiments from the previous step, this time on the `phoneList` component.
+
+* Add a couple more phone lists on the page, by just adding more `<phone-list></phone-list>`
+ elements in `index.html`. Now add another binding to the `phoneList` component's template:
+
+ ```js
+ template:
+ '<p>Total number of phones: {{$ctrl.phones.length}}</p>' +
+ '<ul>' +
+ ...
+ ```
+
+ Reload the page and watch the new "feature" propagate to all phone lists. In real-world
+ applications, where the phone lists could appear on several different pages, being able to change
+ or add something in one place (e.g. a component's template) and have that change propagate
+ throughout the application, is a big win.
# Summary
-We have now added full text search and included a test to verify that search works! Now let's go on
-to {@link step_04 step 4} to learn how to add sorting capability to the phone app.
+You have learned how to organize your application and presentation logic into isolated reusable
+components. Let's go to {@link step_04 step 4} to learn how to organize our code in directories and
+files, so it remains easy to locate as our application grows.
<ul doc-tutorial-nav="3"></ul>
+
+[jasmine-docs]: http://jasmine.github.io/2.4/introduction.html
+[jasmine-home]: http://jasmine.github.io/
+[karma]: https://karma-runner.github.io/
+[mvc-pattern]: http://en.wikipedia.org/wiki/Model–View–Controller
diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc
index 2a041030f2ad..cc2e152f0b4a 100644
--- a/docs/content/tutorial/step_04.ngdoc
+++ b/docs/content/tutorial/step_04.ngdoc
@@ -1,199 +1,315 @@
@ngdoc tutorial
-@name 4 - Two-way Data Binding
+@name 4 - Directory and File Organization
@step 4
@description
<ul doc-tutorial-nav="4"></ul>
-In this step, you will add a feature to let your users control the order of the items in the phone
-list. The dynamic ordering is implemented by creating a new model property, wiring it together with
-the repeater, and letting the data binding magic do the rest of the work.
+In this step, we will not be adding any new functionality to our application. Instead, we are going
+to take a step back, refactor our codebase and move files and code around, in order to make our
+application more easily expandable and maintainable.
-* In addition to the search box, the app displays a drop down menu that allows users to control the
- order in which the phones are listed.
+In the previous step, we saw how to architect our application to be modular and testable. What's
+equally important though, is organizing our codebase in a way that makes it easy (both for us and
+other developers on our team) to navigate through the code and quickly locate the pieces that are
+relevant to a specific feature or section of the application.
+
+To that end, we will explain why and how we:
+
+* Put each entity in its **own file**.
+* Organize our code by **feature area**, instead of by function.
+* Split our code into **modules** that other modules can depend on.
+
+<div class="alert alert-info">
+ We will keep it short, not going into great detail on every good practice and convention. These
+ principles are explained in great detail in the [Angular Style Guide][styleguide], which also
+ contains many more techniques for effectively organizing Angular codebases.
+</div>
<div doc-tutorial-reset="4"></div>
-## Template
+## One Feature per File
-__`app/index.html`:__
+It might be tempting, for the sake of simplicity, to put everything in one file, or have one file
+per type; e.g. all controllers is one file, all components in another file, all services in a third
+file, and so on.
+This might seem to work well in the beginning, but as our application grows it becomes a burden to
+maintain. As we add more and more features, our files will get bigger and bigger and it will be
+difficult to navigate and find the code we are looking for.
-```html
- Search: <input ng-model="query">
- Sort by:
- <select ng-model="orderProp">
- <option value="name">Alphabetical</option>
- <option value="age">Newest</option>
- </select>
+Instead we should put each feature/entity in its own file. Each stand-alone controller will be
+defined in its own file, each component will be defined in each own file, etc.
+Luckily, we don't need to change anything with respect to that guideline in our code, since we have
+already defined our `phoneList` component in its own `phone-list.component.js` file. Good job!
- <ul class="phones">
- <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
- <span>{{phone.name}}</span>
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
-```
+We will keep this in mind though, as we add more features.
-We made the following changes to the `index.html` template:
-* First, we added a `<select>` html element named `orderProp`, so that our users can pick from the
-two provided sorting options.
+## Organizing by Feature
-<img class="diagram" src="img/tutorial/tutorial_04.png">
+So, now that we learned we should put everything in its own file, our `app/` directory will soon be
+full with dozens of files and specs (remember we keep our unit test files next to the corresponding
+source code files). What's more important, logically related files will not be grouped together; it
+will be really difficult of locate all files related to a specific section of the application and
+make a change or fix a bug.
-* We then chained the `filter` filter with {@link ng.filter:orderBy `orderBy`}
-filter to further process the input into the repeater. `orderBy` is a filter that takes an input
-array, copies it and reorders the copy which is then returned.
+So, what shall we do?
-Angular creates a two way data-binding between the select element and the `orderProp` model.
-`orderProp` is then used as the input for the `orderBy` filter.
+Well, we are going to group our files into directories _by feature_. For example, since we have a
+section in our application that lists phones, we will put all related files into a `phone-list/`
+directory under `app/`. We are soon to find out that certain features are used across different
+parts of the application. We will put those inside `app/core/`.
-As we discussed in the section about data-binding and the repeater in step 3, whenever the model
-changes (for example because a user changes the order with the select drop down menu), Angular's
-data-binding will cause the view to automatically update. No bloated DOM manipulation code is
-necessary!
+<div class="alert alert-info">
+ <p>
+ Other typical names for our `core` directory are `shared`, `common` and `components`. The last
+ one is kind of misleading though, as it will contain other things than components as well.
+ </p>
+ <p>
+ (This is mostly a relic of the past, when "components" just meant the generic building blocks of
+ an application.)
+ </p>
+</div>
+
+Based on what we have discussed so far, here is our directory/file layout for the `phoneList`
+"feature":
+
+```
+ app/
+ phone-list/
+ phone-list.component.js
+ phone-list.component.spec.js
+ app.js
+```
+## Using Modules
-## Controller
+As previously mentioned, one of the benefits of having a modular architecture is code reuse —
+not only inside the same application, but across applications too. There is one final step in making
+this code reuse frictionless:
-__`app/js/controllers.js`:__
+* Each feature/section should declare its own module and all related entities should register
+ themselves on that module.
+
+Let's take the `phoneList` feature as an example. Previously, the `phoneList` component would
+register itself on the `phonecatApp` module:
```js
-var phonecatApp = angular.module('phonecatApp', []);
-
-phonecatApp.controller('PhoneListCtrl', function ($scope) {
- $scope.phones = [
- {'name': 'Nexus S',
- 'snippet': 'Fast just got faster with Nexus S.',
- 'age': 1},
- {'name': 'Motorola XOOM™ with Wi-Fi',
- 'snippet': 'The Next, Next Generation tablet.',
- 'age': 2},
- {'name': 'MOTOROLA XOOM™',
- 'snippet': 'The Next, Next Generation tablet.',
- 'age': 3}
- ];
-
- $scope.orderProp = 'age';
-});
+ angular.
+ module('phonecatApp').
+ component('phoneList', ...);
```
-* We modified the `phones` model - the array of phones - and added an `age` property to each phone
-record. This property is used to order phones by age.
+Similarly, the accompanying spec file loads the `phonecatApp` module before each test (because
+that's where our component is registered). Now, imagine that we need a list of phones on another
+project that we are working on. Thanks to our modular architecture, we don't have to reinvent the
+wheel; we simply copy the `phone-list/` directory on our other project and add the necessary script
+tags in our `index.html` file and we are done, right ?
-* We added a line to the controller that sets the default value of `orderProp` to `age`. If we had
-not set a default value here, the `orderBy` filter would remain uninitialized until our
-user picked an option from the drop down menu.
+Well, not so fast. The new project doesn't know anything about a `phonecatApp` module. So, we would
+have to replace all references to `phonecatApp` with the name of this project's main module. As you
+can imagine this is both laborious and error-prone.
- This is a good time to talk about two-way data-binding. Notice that when the app is loaded in the
-browser, "Newest" is selected in the drop down menu. This is because we set `orderProp` to `'age'`
-in the controller. So the binding works in the direction from our model to the UI. Now if you
-select "Alphabetically" in the drop down menu, the model will be updated as well and the phones
-will be reordered. That is the data-binding doing its job in the opposite direction — from the UI
-to the model.
+Yeah, you guessed it: There is a better way !
+Each feature/section, will declare its own module and have all related entities registered there.
+The main module (`phonecatApp`) will declare a dependency on each feature/section module. Now,
+all it takes to reuse the same code on new project is copying the feature directory over and adding
+the feature module as a dependency in the new project's main module.
+Here is what our `phoneList` feature will look like after this change:
-## Test
+<br />
+**`/`:**
-The changes we made should be verified with both a unit test and an end-to-end test. Let's look at
-the unit test first.
+```
+ app/
+ phone-list/
+ phone-list.module.js
+ phone-list.component.js
+ phone-list.component.spec.js
+ app.module.js
+```
-__`test/unit/controllersSpec.js`:__
+<br />
+**`app/phone-list/phone-list.module.js`:**
```js
-describe('PhoneCat controllers', function() {
+// Define the `phoneList` module
+angular.module('phoneList', []);
+```
- describe('PhoneListCtrl', function(){
- var scope, ctrl;
+<br />
+**`app/phone-list/phone-list.component.js`:**
- beforeEach(module('phonecatApp'));
+```js
+// Register the `phoneList` component on the `phoneList` module,
+angular.
+ module('phoneList').
+ component('phoneList', {...});
+```
- beforeEach(inject(function($controller) {
- scope = {};
- ctrl = $controller('PhoneListCtrl', {$scope:scope});
- }));
+<br />
+**`app/app.module.js`:**<br />
+_(since `app/app.js` now only contains the main module declaration, we gave it a `.module` suffix)_
- it('should create "phones" model with 3 phones', function() {
- expect(scope.phones.length).toBe(3);
- });
+```js
+// Define the `phonecatApp` module
+angular.module('phonecatApp', [
+ // ...which depends on the `phoneList` module
+ 'phoneList'
+]);
+```
+By passing `phoneList` inside the dependencies array when defining the `phonecatApp` module, Angular
+will make all entities registered on `phoneList` available on `phonecatApp` as well.
+
+<div class="alert alert-info">
+ <p>
+ Don't forget to also update your `index.html` adding a `<script>` tag for each JacaScript file
+ we have created. This might seem tedious, but is totally worth it.
+ </p>
+ <p>
+ In a production-ready application, you would concatenate and minify all your JavaScript files
+ anyway (for performance reasons), so this won't be an issue any more.
+ </p>
+</div>
+
+<div class="alert alert-warning">
+ Note that files defining a module (i.e. `.module.js`) need to be included before other files that
+ add features (e.g. components, controllers, services, filters) to that module.
+</div>
+
+
+## External Templates
+
+Since we are at refactoring, let's do one more thing. As we learned, components have templates,
+which are basically fragments of HTML code that dictate how our data is laid out and presented to
+the user. In {@link step_03 step 3}, we saw how we can specify the template for a component as a
+string using the `template` property of the CDO (Component Definition Object).
+Having HTML code in a string isn't ideal, especially for bigger templates. It would be much better,
+if we could have our HTML code in `.html` files. This way, we would get all the support our
+IDE/editor has to offer (e.g. HTML-specific color-highlighting and auto-completion) and also keep
+our component definitions cleaner.
+
+So, while it's perfectly fine to keep our component templates inline (using the `template` property
+of the CDO), we are going to use an external template for our `phoneList` component. In order to
+denote that we are using an external template, we use the `templateUrl` property and specify the URL
+that our template will be loaded from. Since we want to keep our template close to where the
+component is defined, we place it inside `app/phone-list/`.
+
+We copied the contents of the `template` property (the HTML code) into
+`app/phone-list/phone-list.template.html` and modified our CDO like this:
+
+<br />
+**`app/phone-list/phone-list.component.js`:**
- it('should set the default value of orderProp model', function() {
- expect(scope.orderProp).toBe('age');
- });
+```js
+angular.
+ module('phoneList').
+ component('phoneList', {
+ // Note: The URL is relative to our `index.html` file
+ templateUrl: 'phone-list/phone-list.template.html',
+ controller: ...
});
-});
```
+At runtime, when Angular needs to create an instance of the `phoneList` component, it will make an
+HTTP request to get the template from `app/phone-list/phone-list.template.html`.
-The unit test now verifies that the default ordering property is set.
+<div class="alert alert-info">
+ Keeping inline with our convention, we will be using the `.template` suffix for external
+ templates. Another common convention is to just have the `.html` extension
+ (e.g. `phone-list.html`).
+</div>
-We used Jasmine's API to extract the controller construction into a `beforeEach` block, which is
-shared by all tests in the parent `describe` block.
+<div class="alert alert-warning">
+ <p>
+ Using an external template like this, will result in more HTTP requests to the server (one for
+ each external template). Although Angular takes care not to make extraneous requests (e.g.
+ fetching the templates lazily, caching the results, etc), additional requests do have a cost
+ (especially on mobile devices and data-plan connections).
+ </p>
+ <p>
+ Luckily, there are ways to avoid the extra costs (while still keeping your templates external).
+ A detailed discussion of the subject is outside the scope of this tutorial, but you can take a
+ look at the {@link ng.$templateRequest $templateRequest} and
+ {@link ng.$templateCache $templateCache} services for more info on how Angular manages external
+ templates.
+ </p>
+</div>
-You should now see the following output in the Karma tab:
-<pre>Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs)</pre>
+## Final Directory/File Layout
+After all the refactorings that took place, this is how our application looks from the outside:
-Let's turn our attention to the end-to-end test.
+<br />
+**`/`:**
-__`test/e2e/scenarios.js`:__
-
-```js
-...
- it('should be possible to control phone order via the drop down select box', function() {
+```
+ app/
+ phone-list/
+ phone-list.component.js
+ phone-list.component.spec.js
+ phone-list.module.js
+ phone-list.template.html
+ app.css
+ app.module.js
+ index.html
+```
- var phoneNameColumn = element.all(by.repeater('phone in phones').column('phone.name'));
- var query = element(by.model('query'));
- function getNames() {
- return phoneNameColumn.map(function(elm) {
- return elm.getText();
- });
- }
+# Testing
- query.sendKeys('tablet'); //let's narrow the dataset to make the test assertions shorter
+Since this was just a refactoring step (no actual code addition/deletions), we shouldn't need to
+change much (if anything) as far as our specs are concerned.
- expect(getNames()).toEqual([
- "Motorola XOOM\u2122 with Wi-Fi",
- "MOTOROLA XOOM\u2122"
- ]);
+One thing that we can (and should) change is the name of the module to be loaded before each test in
+`app/phone-list/phone-list.component.spec.js`. We don't need to pull in the whole `phonecatApp`
+module (which will soon grow to depend on more stuff). All we want to test is already included in
+the much smaller `phoneList` module, so it suffices to just load that.
+This is one extra benefit that we get out of our modular architecture for free.
- element(by.model('orderProp')).element(by.css('option[value="name"]')).click();
+<br />
+**`app/phone-list/phone-list.component.spec.js`:**
- expect(getNames()).toEqual([
- "MOTOROLA XOOM\u2122",
- "Motorola XOOM\u2122 with Wi-Fi"
- ]);
- });...
-```
+```js
+describe('phoneList', function() {
-The end-to-end test verifies that the ordering mechanism of the select box is working correctly.
+ // Load the module that contains the `phoneList` component before each test
+ beforeEach(module('phoneList'));
-You can now rerun `npm run protractor` to see the tests run.
+ ...
-# Experiments
+});
+```
-* In the `PhoneListCtrl` controller, remove the statement that sets the `orderProp` value and
-you'll see that Angular will temporarily add a new blank ("unknown") option to the drop-down list and the
-ordering will default to unordered/natural order.
+If not already done so, run the tests (using the `npm test` command) and verify that they still
+pass.
-* Add an `{{orderProp}}` binding into the `index.html` template to display its current value as
-text.
+<div class="alert alert-success">
+ One of the great things about tests is the confidence they provide, when refactoring your
+ application. It's easy to break something as you start moving files around and re-arranging
+ modules. Having good test coverage is the quickest, easiest and most reliable way of knowing that
+ your application will continue to work as expected.
+</div>
-* Reverse the sort order by adding a `-` symbol before the sorting value: `<option value="-age">Oldest</option>`
# Summary
-Now that you have added list sorting and tested the app, go to {@link step_05 step 5} to learn
-about Angular services and how Angular uses dependency injection.
+Even if we didn't add any new and exciting functionality to our application, we have made a great
+step towards a well-architected and maintainable application. Time to spice things up. Let's go to
+{@link step_05 step 5} to learn how to add full-text search to the application.
<ul doc-tutorial-nav="4"></ul>
+
+
+[angular-seed]: https://github.com/angular/angular-seed
+[styleguide]: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc
index c7db2889567e..e38e68e4e3f7 100644
--- a/docs/content/tutorial/step_05.ngdoc
+++ b/docs/content/tutorial/step_05.ngdoc
@@ -1,277 +1,168 @@
@ngdoc tutorial
-@name 5 - XHRs & Dependency Injection
+@name 5 - Filtering Repeaters
@step 5
@description
<ul doc-tutorial-nav="5"></ul>
-Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
-from our server using one of Angular's built-in {@link guide/services services} called {@link
-ng.$http $http}. We will use Angular's {@link guide/di dependency
-injection (DI)} to provide the service to the `PhoneListCtrl` controller.
+We did a lot of work in laying a foundation for the app in the previous steps, so now we'll do
+something simple; we will add full-text search (yes, it will be simple!). We will also write an
+end-to-end (E2E) test, because a good E2E test is a good friend. It stays with your app, keeps an
+eye on it, and quickly detects regressions.
+
+* The app now has a search box. Notice that the phone list on the page changes depending on what a
+ user types into the search box.
-* There is now a list of 20 phones, loaded from the server.
<div doc-tutorial-reset="5"></div>
-## Data
-The `app/phones/phones.json` file in your project is a dataset that contains a larger list of phones
-stored in the JSON format.
+## Component Controller
-Following is a sample of the file:
+We made no changes to the component's controller.
-```js
-[
- {
- "age": 13,
- "id": "motorola-defy-with-motoblur",
- "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
- "snippet": "Are you ready for everything life throws your way?"
- ...
- },
-...
-]
-```
+## Component Template
-## Controller
+<br />
+**`app/phone-list/phone-list.template.html`:**
-We'll use Angular's {@link ng.$http $http} service in our controller to make an HTTP
-request to your web server to fetch the data in the `app/phones/phones.json` file. `$http` is just
-one of several built-in {@link guide/services Angular services} that handle common operations
-in web apps. Angular injects these services for you where you need them.
+```html
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-2">
+ <!--Sidebar content-->
-Services are managed by Angular's {@link guide/di DI subsystem}. Dependency injection
-helps to make your web apps both well-structured (e.g., separate components for presentation, data,
-and control) and loosely coupled (dependencies between components are not resolved by the
-components themselves, but by the DI subsystem).
+ Search: <input ng-model="$ctrl.query" />
-__`app/js/controllers.js:`__
+ </div>
+ <div class="col-md-10">
+ <!--Body content-->
-```js
-var phonecatApp = angular.module('phonecatApp', []);
+ <ul class="phones">
+ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
+ <span>{{phone.name}}</span>
+ <p>{{phone.snippet}}</p>
+ </li>
+ </ul>
-phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
- $http.get('phones/phones.json').success(function(data) {
- $scope.phones = data;
- });
-
- $scope.orderProp = 'age';
-});
+ </div>
+ </div>
+ </div>
```
-`$http` makes an HTTP GET request to our web server, asking for `phones/phones.json` (the url is
-relative to our `index.html` file). The server responds by providing the data in the json file.
-(The response might just as well have been dynamically generated by a backend server. To the
-browser and our app, they both look the same. For the sake of simplicity, we used a json file in this
-tutorial.)
-
-The `$http` service returns a {@link ng.$q promise object} with a `success`
-method. We call this method to handle the asynchronous response and assign the phone data to the
-scope controlled by this controller, as a model called `phones`. Notice that Angular detected the
-json response and parsed it for us!
-
-To use a service in Angular, you simply declare the names of the dependencies you need as arguments
-to the controller's constructor function, as follows:
-
- phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {...}
-
-Angular's dependency injector provides services to your controller when the controller is being
-constructed. The dependency injector also takes care of creating any transitive dependencies the
-service may have (services often depend upon other services).
-
-Note that the names of arguments are significant, because the injector uses these to look up the
-dependencies.
-
+We added a standard HTML `<input>` tag and used Angular's {@link ng.filter:filter filter} function
+to process the input for the {@link ngRepeat ngRepeat} directive.
-<img class="diagram" src="img/tutorial/tutorial_05.png">
+By virtue of the {@link ngModel ngModel} directive, this lets a user enter search criteria and
+immediately see the effects of their search on the phone list. This new code demonstrates the
+following:
+* Data-binding: This is one of the core features in Angular. When the page loads, Angular binds the
+ value of the input box to the data model variable specified with `ngModel` and keeps the two in
+ sync.
-### `$` Prefix Naming Convention
+ In this code, the data that a user types into the input box (bound to **`$ctrl.query`**) is
+ immediately available as a filter input in the list repeater
+ (`phone in $ctrl.phones | filter:`**`$ctrl.query`**). When changes to the data model cause the
+ repeater's input to change, the repeater efficiently updates the DOM to reflect the current state
+ of the model.
-You can create your own services, and in fact we will do exactly that in step 11. As a naming
-convention, Angular's built-in services, Scope methods and a few other Angular APIs have a `$`
-prefix in front of the name.
+ <img class="diagram" src="img/tutorial/tutorial_05.png">
-The `$` prefix is there to namespace Angular-provided services.
-To prevent collisions it's best to avoid naming your services and models anything that begins with a `$`.
+* Use of the `filter` filter: The {@link ng.filter:filter filter} function uses the `$ctrl.query`
+ value to create a new array that contains only those records that match the query.
-If you inspect a Scope, you may also notice some properties that begin with `$$`. These
-properties are considered private, and should not be accessed or modified.
+ `ngRepeat` automatically updates the view in response to the changing number of phones returned
+ by the `filter` filter. The process is completely transparent to the developer.
-### A Note on Minification
+# Testing
-Since Angular infers the controller's dependencies from the names of arguments to the controller's
-constructor function, if you were to [minify](http://goo.gl/SAnnsm) the JavaScript code for
-`PhoneListCtrl` controller, all of its function arguments would be minified as well, and the
-dependency injector would not be able to identify services correctly.
+In previous steps, we learned how to write and run unit tests. Unit tests are perfect for testing
+controllers and other parts of our application written in JavaScript, but they can't easily
+test templates, DOM manipulation or interoperability of components and services. For these, an
+end-to-end (E2E) test is a much better choice.
-We can overcome this problem by annotating the function with the names of the dependencies, provided
-as strings, which will not get minified. There are two ways to provide these injection annotations:
+The search feature was fully implemented via templates and data-binding, so we'll write our first
+E2E test, to verify that the feature works.
-* Create a `$inject` property on the controller function which holds an array of strings.
- Each string in the array is the name of the service to inject for the corresponding parameter.
- In our example, we would write:
-
- ```js
- function PhoneListCtrl($scope, $http) {...}
- PhoneListCtrl.$inject = ['$scope', '$http'];
- phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
- ```
-
-* Use an inline annotation where, instead of just providing the function, you provide an array.
- This array contains a list of the service names, followed by the function itself.
-
- ```js
- function PhoneListCtrl($scope, $http) {...}
- phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
- ```
-
-Both of these methods work with any function that can be injected by Angular, so it's up to your
-project's style guide to decide which one you use.
-
-When using the second method, it is common to provide the constructor function inline as an
-anonymous function when registering the controller:
+<br />
+**`e2e-tests/scenarios.js`:**
```js
- phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);
-```
+describe('PhoneCat Application', function() {
-From this point onward, we're going to use the inline method in the tutorial. With that in mind,
-let's add the annotations to our `PhoneListCtrl`:
+ describe('phoneList', function() {
-__`app/js/controllers.js:`__
-
-```js
-var phonecatApp = angular.module('phonecatApp', []);
-
-phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
- function ($scope, $http) {
- $http.get('phones/phones.json').success(function(data) {
- $scope.phones = data;
+ beforeEach(function() {
+ browser.get('index.html');
});
- $scope.orderProp = 'age';
- }]);
-```
-
-## Test
-
-__`test/unit/controllersSpec.js`:__
+ it('should filter the phone list as a user types into the search box', function() {
+ var phoneList = element.all(by.repeater('phone in $ctrl.phones'));
+ var query = element(by.model('$ctrl.query'));
-Because we started using dependency injection and our controller has dependencies, constructing the
-controller in our tests is a bit more complicated. We could use the `new` operator and provide the
-constructor with some kind of fake `$http` implementation. However, Angular provides a mock `$http`
-service that we can use in unit tests. We configure "fake" responses to server requests by calling
-methods on a service called `$httpBackend`:
+ expect(phoneList.count()).toBe(3);
-```js
-describe('PhoneCat controllers', function() {
-
- describe('PhoneListCtrl', function(){
- var scope, ctrl, $httpBackend;
-
- // Load our app module definition before each test.
- beforeEach(module('phonecatApp'));
-
- // The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
- // This allows us to inject a service but then attach it to a variable
- // with the same name as the service in order to avoid a name conflict.
- beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
- $httpBackend = _$httpBackend_;
- $httpBackend.expectGET('phones/phones.json').
- respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-
- scope = $rootScope.$new();
- ctrl = $controller('PhoneListCtrl', {$scope: scope});
- }));
-```
-
-Note: Because we loaded Jasmine and `angular-mocks.js` in our test environment, we got two helper
-methods {@link angular.mock.module module} and {@link angular.mock.inject inject} that we'll
-use to access and configure the injector.
-
-We created the controller in the test environment, as follows:
-
-* We used the `inject` helper method to inject instances of
-{@link ng.$rootScope $rootScope},
-{@link ng.$controller $controller} and
-{@link ng.$httpBackend $httpBackend} services into the Jasmine's `beforeEach`
-function. These instances come from an injector which is recreated from scratch for every single
-test. This guarantees that each test starts from a well known starting point and each test is
-isolated from the work done in other tests.
-
-* We created a new scope for our controller by calling `$rootScope.$new()`
-
-* We called the injected `$controller` function passing the name of the `PhoneListCtrl` controller
-and the created scope as parameters.
-
-Because our code now uses the `$http` service to fetch the phone list data in our controller, before
-we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an
-incoming request from the controller. To do this we:
-
-* Request `$httpBackend` service to be injected into our `beforeEach` function. This is a mock
-version of the service that in a production environment facilitates all XHR and JSONP requests.
-The mock version of this service allows you to write tests without having to deal with
-native APIs and the global state associated with them — both of which make testing a nightmare.
+ query.sendKeys('nexus');
+ expect(phoneList.count()).toBe(1);
-* Use the `$httpBackend.expectGET` method to train the `$httpBackend` service to expect an incoming
-HTTP request and tell it what to respond with. Note that the responses are not returned until we call
-the `$httpBackend.flush` method.
-
-Now we will make assertions to verify that the `phones` model doesn't exist on `scope` before
-the response is received:
+ query.clear();
+ query.sendKeys('motorola');
+ expect(phoneList.count()).toBe(2);
+ });
-```js
- it('should create "phones" model with 2 phones fetched from xhr', function() {
- expect(scope.phones).toBeUndefined();
- $httpBackend.flush();
+ });
- expect(scope.phones).toEqual([{name: 'Nexus S'},
- {name: 'Motorola DROID'}]);
- });
+});
```
-* We flush the request queue in the browser by calling `$httpBackend.flush()`. This causes the
-promise returned by the `$http` service to be resolved with the trained response. See
-'Flushing HTTP requests' in the {@link ngMock.$httpBackend mock $httpBackend} documentation for
-a full explanation of why this is necessary.
+This test verifies that the search box and the repeater are correctly wired together. Notice how
+easy it is to write E2E tests in Angular. Although this example is for a simple test, it really is
+that easy to set up any functional, readable, E2E test.
-* We make the assertions, verifying that the phone model now exists on the scope.
-Finally, we verify that the default value of `orderProp` is set correctly:
+## Running E2E Tests with Protractor
-```js
- it('should set the default value of orderProp model', function() {
- expect(scope.orderProp).toBe('age');
- });
-```
+Even though the syntax of this test looks very much like our controller unit test written with
+Jasmine, the E2E test uses APIs of [Protractor][protractor]. Read about the Protractor APIs in the
+[Protractor API Docs][protractor-docs].
-You should now see the following output in the Karma tab:
-
-<pre>Chrome 22.0: Executed 2 of 2 SUCCESS (0.028 secs / 0.007 secs)</pre>
+Much like Karma is the test runner for unit tests, we use Protractor to run E2E tests. Try it with
+`npm run protractor`. E2E tests take time, so unlike with unit tests, Protractor will exit after the
+tests run and will not automatically rerun the test suite on every file change.
+To rerun the test suite, execute `npm run protractor` again.
+<div class="alert alert-info">
+ **Note:** In order for protractor to access and run tests against your application, it must be
+ served via a web server. In a different terminal/command line window, run `npm start` to fire up
+ the web server.
+</div>
# Experiments
-* At the bottom of `index.html`, add a `<pre>{{phones | filter:query | orderBy:orderProp | json}}</pre>`
-binding to see the list of phones displayed in json format.
+<div></div>
-* In the `PhoneListCtrl` controller, pre-process the http response by limiting the number of phones
-to the first 5 in the list. Use the following code in the `$http` callback:
+* Display the current value of the `query` model by adding a `{{$ctrl.query}}` binding into the
+ `phone-list.template.html` template and see how it changes, when you type in the input box.
- $scope.phones = data.splice(0, 5);
+ You might also try to add the `{{$ctrl.query}}` binding to `index.html`. However, when you reload
+ the page, you won't see the expected result. This is because the `query` model lives in the scope
+ defined by the `<phone-list>` component.<br />
+ Component isolation at work!
# Summary
-Now that you have learned how easy it is to use Angular services (thanks to Angular's dependency
-injection), go to {@link step_06 step 6}, where you will add some
-thumbnail images of phones and some links.
+We have now added full-text search and included a test to verify that it works! Now let's go on to
+{@link step_06 step 6} to learn how to add sorting capabilities to the PhoneCat application.
<ul doc-tutorial-nav="5"></ul>
+
+
+[protractor]: https://github.com/angular/protractor
+[protractor-docs]: https://angular.github.io/protractor/#/api
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index 90862cb1f62a..239d413ecf33 100644
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -1,108 +1,241 @@
@ngdoc tutorial
-@name 6 - Templating Links & Images
+@name 6 - Two-way Data Binding
@step 6
@description
<ul doc-tutorial-nav="6"></ul>
-In this step, you will add thumbnail images for the phones in the phone list, and links that, for
-now, will go nowhere. In subsequent steps you will use the links to display additional information
-about the phones in the catalog.
+In this step, we will add a feature to let our users control the order of the items in the phone
+list. The dynamic ordering is implemented by creating a new model property, wiring it together with
+the repeater, and letting the data binding magic do the rest of the work.
+
+* In addition to the search box, the application displays a drop-down menu that allows users to
+ control the order in which the phones are listed.
-* There are now links and images of the phones in the list.
<div doc-tutorial-reset="6"></div>
-## Data
-Note that the `phones.json` file contains unique IDs and image URLs for each of the phones. The
-URLs point to the `app/img/phones/` directory.
+## Component Template
+
+<br />
+**`app/phone-list/phone-list.template.html`:**
+
+```html
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-2">
+ <!--Sidebar content-->
+
+ <p>
+ Search:
+ <input ng-model="$ctrl.query">
+ </p>
+
+ <p>
+ Sort by:
+ <select ng-model="$ctrl.orderProp">
+ <option value="name">Alphabetical</option>
+ <option value="age">Newest</option>
+ </select>
+ </p>
+
+ </div>
+ <div class="col-md-10">
+ <!--Body content-->
+
+ <ul class="phones">
+ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
+ <span>{{phone.name}}</span>
+ <p>{{phone.snippet}}</p>
+ </li>
+ </ul>
+
+ </div>
+ </div>
+ </div>
+```
+
+We made the following changes to the `phone-list.template.html` template:
+
+* First, we added a `<select>` element bound to `$ctrl.orderProp`, so that our users can pick from
+ the two provided sorting options.
+
+ <img class="diagram" src="img/tutorial/tutorial_06.png">
-__`app/phones/phones.json`__ (sample snippet):
+* We then chained the `filter` filter with the {@link orderBy orderBy} filter to further process the
+ input for the repeater. `orderBy` is a filter that takes an input array, copies it and reorders
+ the copy which is then returned.
+
+ Angular creates a two way data-binding between the select element and the `$ctrl.orderProp` model.
+ `$ctrl.orderProp` is then used as the input for the `orderBy` filter.
+
+As we discussed in the section about data-binding and the repeater in {@link step_05 step 5},
+whenever the model changes (for example because a user changes the order with the select drop-down
+menu), Angular's data-binding will cause the view to automatically update. No bloated DOM
+manipulation code is necessary!
+
+
+## Component Controller
+
+<br />
+**`app/phone-list/phone-list.components.js`:**
```js
-[
- {
- ...
- "id": "motorola-defy-with-motoblur",
- "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
- "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
- ...
- },
- ...
-]
+ angular.
+ module('phoneList').
+ component('phoneList', {
+ templateUrl: 'phone-list/phone-list.template.html',
+ controller: function PhoneListController() {
+ this.phones = [
+ {
+ name: 'Nexus S',
+ snippet: 'Fast just got faster with Nexus S.',
+ age: 1
+ }, {
+ name: 'Motorola XOOM™ with Wi-Fi',
+ snippet: 'The Next, Next Generation tablet.',
+ age: 2
+ }, {
+ name: 'MOTOROLA XOOM™',
+ snippet: 'The Next, Next Generation tablet.',
+ age: 3
+ }
+ ];
+
+ this.orderProp = 'age';
+ }
+ });
```
+* We modified the `phones` model - the array of phones - and added an `age` property to each phone
+ record. This property is used to order the phones by age.
-## Template
+* We added a line to the controller that sets the default value of `orderProp` to `age`. If we had
+ not set a default value here, the `orderBy` filter would remain uninitialized until the user
+ picked an option from the drop-down menu.
-__`app/index.html`:__
+This is a good time to talk about two-way data-binding. Notice that when the application is loaded
+in the browser, "Newest" is selected in the drop-down menu. This is because we set `orderProp` to
+`'age'` in the controller. So the binding works in the direction from our model to the UI. Now if
+you select "Alphabetically" in the drop-down menu, the model will be updated as well and the phones
+will be reordered. That is the data-binding doing its job in the opposite direction — from the UI to
+the model.
-```html
-...
- <ul class="phones">
- <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
- <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}"></a>
- <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
-...
+
+# Testing
+
+The changes we made should be verified with both a unit test and an E2E test. Let's look at the unit
+test first.
+
+<br />
+**`app/phone-list/phone-list.component.spec.js`:**
+
+```js
+describe('phoneList', function() {
+
+ // Load the module that contains the `phoneList` component before each test
+ beforeEach(module('phoneList'));
+
+ // Test the controller
+ describe('PhoneListController', function() {
+ var ctrl;
+
+ beforeEach(inject(function($componentController) {
+ ctrl = $componentController('phoneList');
+ }));
+
+ it('should create a `phones` model with 3 phones', function() {
+ expect(ctrl.phones.length).toBe(3);
+ });
+
+ it('should set a default value for the `orderProp` model', function() {
+ expect(ctrl.orderProp).toBe('age');
+ });
+
+ });
+
+});
```
-To dynamically generate links that will in the future lead to phone detail pages, we used the
-now-familiar double-curly brace binding in the `href` attribute values. In step 2, we added the
-`{{phone.name}}` binding as the element content. In this step the `{{phone.id}}` binding is used in
-the element attribute.
+The unit test now verifies that the default ordering property is set.
-We also added phone images next to each record using an image tag with the {@link
-ng.directive:ngSrc ngSrc} directive. That directive prevents the
-browser from treating the Angular `{{ expression }}` markup literally, and initiating a request to
-an invalid URL `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had
-only specified an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`).
-Using the `ngSrc` directive prevents the browser from making an http request to an invalid location.
+We used Jasmine's API to extract the controller construction into a `beforeEach` block, which is
+shared by all tests in the parent `describe` block.
+You should now see the following output in the Karma tab:
-## Test
+```
+Chrome 49.0: Executed 2 of 2 SUCCESS (0.136 secs / 0.08 secs)
+```
-__`test/e2e/scenarios.js`__:
+Let's turn our attention to the E2E tests.
+
+<br />
+**`e2e-tests/scenarios.js`:**
```js
-...
- it('should render phone specific links', function() {
- var query = element(by.model('query'));
- query.sendKeys('nexus');
- element.all(by.css('.phones li a')).first().click();
- browser.getLocationAbsUrl().then(function(url) {
- expect(url).toBe('/phones/nexus-s');
+ describe('PhoneCat Application', function() {
+
+ describe('phoneList', function() {
+
+ ...
+
+ it('should be possible to control phone order via the drop-down menu', function() {
+ var queryField = element(by.model('$ctrl.query'));
+ var orderSelect = element(by.model('$ctrl.orderProp'));
+ var nameOption = orderSelect.element(by.css('option[value="name"]'));
+ var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
+
+ function getNames() {
+ return phoneNameColumn.map(function(elem) {
+ return elem.getText();
+ });
+ }
+
+ queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter
+
+ expect(getNames()).toEqual([
+ 'Motorola XOOM\u2122 with Wi-Fi',
+ 'MOTOROLA XOOM\u2122'
+ ]);
+
+ nameOption.click();
+
+ expect(getNames()).toEqual([
+ 'MOTOROLA XOOM\u2122',
+ 'Motorola XOOM\u2122 with Wi-Fi'
+ ]);
});
- });
-...
+
+ ...
```
-We added a new end-to-end test to verify that the app is generating correct links to the phone
-views that we will implement in the upcoming steps.
+The E2E test verifies that the ordering mechanism of the select box is working correctly.
You can now rerun `npm run protractor` to see the tests run.
# Experiments
-* Replace the `ng-src` directive with a plain old `src` attribute. Using tools such as Firebug,
-or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
-making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
-`/app/{{phone.imageUrl}}`).
+<div></div>
+
+* In the `phoneList` component's controller, remove the statement that sets the `orderProp` value
+ and you'll see that Angular will temporarily add a new blank ("unknown") option to the drop-down
+ list and the ordering will default to unordered/natural order.
+
+* Add a `{{$ctrl.orderProp}}` binding into the `phone-list.template.html` template to display its
+ current value as text.
- The issue here is that the browser will fire a request for that invalid image address as soon as
-it hits the `img` tag, which is before Angular has a chance to evaluate the expression and inject
-the valid address.
+* Reverse the sort order by adding a `-` symbol before the sorting value:
+ `<option value="-age">Oldest</option>`
# Summary
-Now that you have added phone images and links, go to {@link step_07 step 7} to learn about Angular
-layout templates and how Angular makes it easy to create applications that have multiple views.
+Now that you have added list sorting and tested the application, go to {@link step_07 step 7} to
+learn about Angular services and how Angular uses dependency injection.
<ul doc-tutorial-nav="6"></ul>
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
index b517fce9bf00..0fb439bb2768 100644
--- a/docs/content/tutorial/step_07.ngdoc
+++ b/docs/content/tutorial/step_07.ngdoc
@@ -1,380 +1,312 @@
@ngdoc tutorial
-@name 7 - Routing & Multiple Views
+@name 7 - XHR & Dependency Injection
@step 7
@description
<ul doc-tutorial-nav="7"></ul>
-In this step, you will learn how to create a layout template and how to build an app that has
-multiple views by adding routing, using an Angular module called 'ngRoute'.
+Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
+from our server using one of Angular's built-in {@link guide/services services} called
+{@link ng.$http $http}. We will use Angular's {@link guide/di dependency injection (DI)} to provide
+the service to the `phoneList` component's controller.
-* When you now navigate to `app/index.html`, you are redirected to `app/index.html/#/phones`
- and the phone list appears in the browser.
-* When you click on a phone link, the url changes to that specific phone and the stub of a
- phone detail page is displayed.
+* There is now a list of 20 phones, loaded from the server.
-<div doc-tutorial-reset="7"></div>
-## Dependencies
+<div doc-tutorial-reset="7"></div>
-The routing functionality added by this step is provided by angular in the `ngRoute` module, which
-is distributed separately from the core Angular framework.
-We are using [Bower][bower] to install client-side dependencies. This step updates the
-`bower.json` configuration file to include the new dependency:
+## Data
-```json
-{
- "name": "angular-phonecat",
- "description": "A starter project for AngularJS",
- "version": "0.0.0",
- "homepage": "https://github.com/angular/angular-phonecat",
- "license": "MIT",
- "private": true,
- "dependencies": {
- "angular": "1.4.x",
- "angular-mocks": "1.4.x",
- "jquery": "~2.2.3",
- "bootstrap": "~3.1.1",
- "angular-route": "1.4.x"
- }
-}
-```
+The `app/phones/phones.json` file in our project is a dataset that contains a larger list of phones,
+stored in JSON format.
-The new dependency `"angular-route": "1.4.x"` tells bower to install a version of the
-angular-route component that is compatible with version 1.4.x. We must tell bower to download
-and install this dependency.
+Following is a sample of the file:
-If you have bower installed globally, then you can run `bower install` but for this project, we have
-preconfigured npm to run bower install for us:
-
-```
-npm install
+```json
+[
+ {
+ "age": 13,
+ "id": "motorola-defy-with-motoblur",
+ "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
+ "snippet": "Are you ready for everything life throws your way?"
+ ...
+ },
+ ...
+]
```
-<div class="alert alert-warning">
- **Warning:** If a new version of Angular has been released since you last ran `npm install`, then you may have a
- problem with the `bower install` due to a conflict between the versions of angular.js that need to
- be installed. If you get this then simply delete your `app/bower_components` folder before running
- `npm install`.
-</div>
-
-<div class="alert alert-info">
- **Note:** If you have bower installed globally then you can run `bower install` but for this project we have
- preconfigured `npm install` to run bower for us.
-</div>
-
-
-## Multiple Views, Routing and Layout Template
-Our app is slowly growing and becoming more complex. Before step 7, the app provided our users with
-a single view (the list of all phones), and all of the template code was located in the
-`index.html` file. The next step in building the app is to add a view that will show detailed
-information about each of the devices in our list.
+## Component Controller
-To add the detailed view, we could expand the `index.html` file to contain template code for both
-views, but that would get messy very quickly. Instead, we are going to turn the `index.html`
-template into what we call a "layout template". This is a template that is common for all views in
-our application. Other "partial templates" are then included into this layout template depending on
-the current "route" — the view that is currently displayed to the user.
+We will use Angular's {@link ng.$http $http} service in our controller for making an HTTP request to
+our web server to fetch the data in the `app/phones/phones.json` file. `$http` is just one of
+several built-in {@link guide/services Angular services} that handle common operations in web
+applications. Angular injects these services for you, right where you need them.
-Application routes in Angular are declared via the {@link ngRoute.$routeProvider $routeProvider},
-which is the provider of the {@link ngRoute.$route $route service}. This service makes it easy to
-wire together controllers, view templates, and the current URL location in the browser. Using this
-feature, we can implement [deep linking](http://en.wikipedia.org/wiki/Deep_linking), which lets us
-utilize the browser's history (back and forward navigation) and bookmarks.
+Services are managed by Angular's {@link guide/di DI subsystem}. Dependency injection helps to make
+your web applications both well-structured (e.g. separate entities for presentation, data, and
+control) and loosely coupled (dependencies between entities are not resolved by the entities
+themselves, but by the DI subsystem). As a result, applications are easier to test as well.
+<br />
+**`app/phone-list/phone-list.component.js:`**
-### A Note About DI, Injector and Providers
+```js
+ angular.
+ module('phoneList').
+ component('phoneList', {
+ templateUrl: 'phone-list/phone-list.template.html',
+ controller: function PhoneListController($http) {
+ var self = this;
+ self.orderProp = 'age';
+
+ $http.get('phones/phones.json').then(function(response) {
+ self.phones = response.data;
+ });
+ }
+ });
+```
-As you {@link tutorial/step_05 noticed}, {@link guide/di dependency injection} (DI) is at the core of
-AngularJS, so it's important for you to understand a thing or two about how it works.
+`$http` makes an HTTP GET request to our web server, asking for `phones.json` (the URL is relative
+to our `index.html` file). The server responds by providing the data in the JSON file.
+(The response might just as well have been dynamically generated by a backend server. To the
+browser and our app, they both look the same. For the sake of simplicity, we will use JSON files
+in this tutorial.)
-When the application bootstraps, Angular creates an injector that will be used to find and inject all
-of the services that are required by your app. The injector itself doesn't know anything about what
-`$http` or `$route` services do. In fact, the injector doesn't even know about the existence of these services
-unless it is configured with proper module definitions.
+The `$http` service returns a {@link ng.$q promise object}, which has a `then()` method. We call
+this method to handle the asynchronous response and assign the phone data to the controller, as a
+property called `phones`. Notice that Angular detected the JSON response and parsed it for us into
+the `data` property of the `response` object passed to our callback!
-The injector only carries out the following steps :
+Since we are making the assignment of the `phones` property in a callback function, where the `this`
+value is not defined, we also introduce a local variable called `self` that points back to the
+controller instance.
- * load the module definition(s) that you specify in your app
- * register all Providers defined in these module definitions
- * when asked to do so, inject a specified function and any necessary dependencies (services) that
- it lazily instantiates via their Providers.
+To use a service in Angular, you simply declare the names of the dependencies you need as arguments
+to the controller's constructor function, as follows:
-Providers are objects that provide (create) instances of services and expose configuration APIs
-that can be used to control the creation and runtime behavior of a service. In case of the `$route`
-service, the `$routeProvider` exposes APIs that allow you to define routes for your application.
+```js
+function PhoneListController($http) {...}
+```
-<div class="alert alert-warning">
-**Note:** Providers can only be injected into `config` functions. Thus you could not inject
-`$routeProvider` into `PhoneListCtrl`.
-</div>
+Angular's dependency injector provides services to your controller, when the controller is being
+constructed. The dependency injector also takes care of creating any transitive dependencies the
+service may have (services often depend upon other services).
-Angular modules solve the problem of removing global state from the application and provide a way
-of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to
-solve the problem of script load ordering or lazy script fetching. These goals are totally independent and
-both module systems can live side by side and fulfill their goals.
+Note that the names of arguments are significant, because the injector uses these to look up the
+dependencies.
-To deepen your understanding of DI on Angular, see
-[Understanding Dependency Injection](https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection).
+<img class="diagram" src="img/tutorial/tutorial_05.png">
-## Template
-The `$route` service is usually used in conjunction with the {@link ngRoute.directive:ngView
-ngView} directive. The role of the `ngView` directive is to include the view template for the current
-route into the layout template. This makes it a perfect fit for our `index.html` template.
+### `$`-prefix Naming Convention
-<div class="alert alert-info">
-**Note:** Starting with AngularJS version 1.2, `ngRoute` is in its own module and must be loaded by
-loading the additional `angular-route.js` file, which we download via Bower above.
-</div>
+You can create your own services, and in fact we will do exactly that a few steps down the road. As
+a naming convention, Angular's built-in services, Scope methods and a few other Angular APIs have a
+`$` prefix in front of the name.
-__`app/index.html`:__
+The `$` prefix is there to namespace Angular-provided services. To prevent collisions it's best to
+avoid naming your services and models anything that begins with a `$`.
-```html
-<!doctype html>
-<html lang="en" ng-app="phonecatApp">
-<head>
-...
- <script src="bower_components/angular/angular.js"></script>
- <script src="bower_components/angular-route/angular-route.js"></script>
- <script src="js/app.js"></script>
- <script src="js/controllers.js"></script>
-</head>
-<body>
+If you inspect a Scope, you may also notice some properties that begin with `$$`. These properties
+are considered private, and should not be accessed or modified.
- <div ng-view></div>
-</body>
-</html>
-```
+### A Note on Minification
-We have added two new `<script>` tags in our index file to load up extra JavaScript files into our
-application:
-
-- `angular-route.js` : defines the Angular `ngRoute` module, which provides us with routing.
-- `app.js` : this file now holds the root module of our application.
-
-Note that we removed most of the code in the `index.html` template and replaced it with a single
-line containing a div with the `ng-view` attribute. The code that we removed was placed into the
-`phone-list.html` template:
-
-__`app/partials/phone-list.html`:__
-
-```html
-<div class="container-fluid">
- <div class="row">
- <div class="col-md-2">
- <!--Sidebar content-->
-
- Search: <input ng-model="query">
- Sort by:
- <select ng-model="orderProp">
- <option value="name">Alphabetical</option>
- <option value="age">Newest</option>
- </select>
-
- </div>
- <div class="col-md-10">
- <!--Body content-->
-
- <ul class="phones">
- <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
- <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
- <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
-
- </div>
- </div>
-</div>
-```
+Since Angular infers the controller's dependencies from the names of arguments to the controller's
+constructor function, if you were to [minify][minification] the JavaScript code for the
+`PhoneListController` controller, all of its function arguments would be minified as well, and the
+dependency injector would not be able to identify services correctly.
-<div style="display:none">
-TODO!
-<img class="diagram" src="img/tutorial/tutorial_07_final.png">
-</div>
+We can overcome this problem by annotating the function with the names of the dependencies, provided
+as strings, which will not get minified. There are two ways to provide these injection annotations:
-We also added a placeholder template for the phone details view:
+* Create an `$inject` property on the controller function which holds an array of strings.
+ Each string in the array is the name of the service to inject for the corresponding parameter.
+ In our example, we would write:
-__`app/partials/phone-detail.html`:__
+ ```js
+ function PhoneListController($http) {...}
+ PhoneListController.$inject = ['$http'];
+ ...
+ .component('phoneList', {..., controller: PhoneListController});
+ ```
-```html
-TBD: detail view for <span>{{phoneId}}</span>
-```
+* Use an inline annotation where, instead of just providing the function, you provide an array.
+ This array contains a list of the service names, followed by the function itself as the last item
+ of the array.
-Note how we are using the `phoneId` expression which will be defined in the `PhoneDetailCtrl` controller.
+ ```js
+ function PhoneListController($http) {...}
+ ...
+ .component('phoneList', {..., controller: ['$http', PhoneListController]});
+ ```
-## The App Module
+Both of these methods work with any function that can be injected by Angular, so it's up to your
+project's style guide to decide which one you use.
-To improve the organization of the app, we are making use of Angular's `ngRoute` module and we've
-moved the controllers into their own module `phonecatControllers` (as shown below).
-
-We added `angular-route.js` to `index.html` and created a new `phonecatControllers` module in
-`controllers.js`. That's not all we need to do to be able to use their code, however. We also have
-to add the modules as dependencies of our app. By listing these two modules as dependencies of
-`phonecatApp`, we can use the directives and services they provide.
-
-
-__`app/js/app.js`:__
+When using the second method, it is common to provide the constructor function inline, when
+registering the controller:
```js
-var phonecatApp = angular.module('phonecatApp', [
- 'ngRoute',
- 'phonecatControllers'
-]);
-
-...
+.component('phoneList', {..., controller: ['$http', function PhoneListController($http) {...}]});
```
-Notice the second argument passed to `angular.module`, `['ngRoute', 'phonecatControllers']`. This
-array lists the modules that `phonecatApp` depends on.
+From this point onwards, we are going to use the inline method in the tutorial. With that in mind,
+let's add the annotations to our `PhoneListController`:
+<br />
+**`app/phone-list/phone-list.component.js`**
```js
-...
-
-phonecatApp.config(['$routeProvider',
- function($routeProvider) {
- $routeProvider.
- when('/phones', {
- templateUrl: 'partials/phone-list.html',
- controller: 'PhoneListCtrl'
- }).
- when('/phones/:phoneId', {
- templateUrl: 'partials/phone-detail.html',
- controller: 'PhoneDetailCtrl'
- }).
- otherwise({
- redirectTo: '/phones'
- });
- }]);
+ angular.
+ module('phoneList').
+ component('phoneList', {
+ templateUrl: 'phone-list/phone-list.template.html',
+ controller: ['$http',
+ function PhoneListController($http) {
+ var self = this;
+ self.orderProp = 'age';
+
+ $http.get('phones/phones.json').then(function(response) {
+ self.phones = response.data;
+ });
+ }
+ ]
+ });
```
-Using the `phonecatApp.config()` method, we request the `$routeProvider` to be injected into our
-config function and use the {@link ngRoute.$routeProvider#when `$routeProvider.when()`} method to
-define our routes.
-Our application routes are defined as follows:
+# Testing
-* `when('/phones')`: The phone list view will be shown when the URL hash fragment is `/phones`. To
- construct this view, Angular will use the `phone-list.html` template and the `PhoneListCtrl`
- controller.
+Because we started using dependency injection and our controller has dependencies, constructing the
+controller in our tests is a bit more complicated. We could use the `new` operator and provide the
+constructor with some kind of fake `$http` implementation. However, Angular provides a mock `$http`
+service that we can use in unit tests. We configure "fake" responses to server requests by calling
+methods on a service called `$httpBackend`:
-* `when('/phones/:phoneId')`: The phone details view will be shown when the URL hash fragment
- matches '/phones/:phoneId', where `:phoneId` is a variable part of the URL. To construct the phone
- details view, Angular will use the `phone-detail.html` template and the `PhoneDetailCtrl`
- controller.
+<br />
+**`app/phone-list/phone-list.component.spec.js`:**
-* `otherwise({redirectTo: '/phones'})`: triggers a redirection to `/phones` when the browser
- address doesn't match either of our routes.
+```js
+describe('phoneList', function() {
+ beforeEach(module('phoneList'));
-We reused the `PhoneListCtrl` controller that we constructed in previous steps and we added a new,
-empty `PhoneDetailCtrl` controller to the `app/js/controllers.js` file for the phone details view.
+ describe('controller', function() {
+ var $httpBackend, ctrl;
+ // The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
+ // This allows us to inject a service and assign it to a variable with the same name
+ // as the service while avoiding a name conflict.
+ beforeEach(inject(function($componentController, _$httpBackend_) {
+ $httpBackend = _$httpBackend_;
+ $httpBackend.expectGET('phones/phones.json')
+ .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-Note the use of the `:phoneId` parameter in the second route declaration. The `$route` service uses
-the route declaration — `'/phones/:phoneId'` — as a template that is matched against the current
-URL. All variables defined with the `:` notation are extracted into the
-{@link ngRoute.$routeParams `$routeParams`} object.
+ ctrl = $componentController('phoneList');
+ }));
+ ...
-## Controllers
+ });
-__`app/js/controllers.js`:__
+});
+```
-```js
-var phonecatControllers = angular.module('phonecatControllers', []);
+<div class="alert alert-info">
+ **Note:** Because we loaded Jasmine and `angular-mocks.js` in our test environment, we got two
+ helper methods {@link angular.mock.module module} and {@link angular.mock.inject inject} that we
+ can use to access and configure the injector.
+</div>
-phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
- function ($scope, $http) {
- $http.get('phones/phones.json').success(function(data) {
- $scope.phones = data;
- });
+We created the controller in the test environment, as follows:
- $scope.orderProp = 'age';
- }]);
+* We used the `inject()` helper method to inject instances of
+ {@link ngMock.$componentController $componentController} and {@link ng.$httpBackend $httpBackend}
+ services into Jasmine's `beforeEach()` function. These instances come from an injector which is
+ recreated from scratch for every single test. This guarantees that each test starts from a well
+ known starting point and each test is isolated from the work done in other tests.
-phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
- function($scope, $routeParams) {
- $scope.phoneId = $routeParams.phoneId;
- }]);
-```
+* We called the injected `$componentController` function passing the name of the `phoneList`
+ component (whose controller we wanted to instantiate) as a parameter.
-Again, note that we created a new module called `phonecatControllers`. For small AngularJS
-applications, it's common to create just one module for all of your controllers if there are just a
-few. As your application grows, it is quite common to refactor your code into additional modules.
-For larger apps, you will probably want to create separate modules for each major feature of
-your app.
+Because our code now uses the `$http` service to fetch the phone list data in our controller, before
+we create the `PhoneListController`, we need to tell the testing harness to expect an incoming
+request from the controller. To do this we:
-Because our example app is relatively small, we'll just add all of our controllers to the
-`phonecatControllers` module.
+* Inject the `$httpBackend` service into the `beforeEach()` function. This is a
+ {@link ngMock.$httpBackend mock version} of the service that in a production environment
+ facilitates all XHR and JSONP requests. The mock version of this service allows us to write tests
+ without having to deal with native APIs and the global state associated with them — both of which
+ make testing a nightmare. It also overcomes the asynchronous nature of these calls, which would
+ slow down unit tests.
+* Use the `$httpBackend.expectGET()` method to train the `$httpBackend` service to expect an
+ incoming HTTP request and tell it what to respond with. Note that the responses are not returned
+ until we call the `$httpBackend.flush()` method.
-## Test
-
-To automatically verify that everything is wired properly, we wrote end-to-end tests that navigate
-to various URLs and verify that the correct view was rendered.
+Now we will make assertions to verify that the `phones` property doesn't exist on the controller
+before the response is received:
```js
-...
- it('should redirect index.html to index.html#/phones', function() {
- browser.get('app/index.html');
- browser.getLocationAbsUrl().then(function(url) {
- expect(url).toEqual('/phones');
- });
- });
+ it('should create a `phones` property with 2 phones fetched with `$http`', function() {
+ expect(ctrl.phones).toBeUndefined();
- describe('Phone list view', function() {
- beforeEach(function() {
- browser.get('app/index.html#/phones');
+ $httpBackend.flush();
+ expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
});
-...
+```
- describe('Phone detail view', function() {
+* We flush the request queue in the browser by calling `$httpBackend.flush()`. This causes the
+ promise returned by the `$http` service to be resolved with the trained response. See
+ {@link ngMock.$httpBackend#flushing-http-requests Flushing HTTP requests} in the mock
+ `$httpBackend` documentation for a full explanation of why this is necessary.
- beforeEach(function() {
- browser.get('app/index.html#/phones/nexus-s');
- });
+* We make the assertions, verifying that the `phones` property now exists on the controller.
+Finally, we verify that the default value of `orderProp` is set correctly:
- it('should display placeholder page with phoneId', function() {
- expect(element(by.binding('phoneId')).getText()).toBe('nexus-s');
+```js
+ it('should set a default value for the `orderProp` property', function() {
+ expect(ctrl.orderProp).toBe('age');
});
- });
```
+You should now see the following output in the Karma tab:
-You can now rerun `npm run protractor` to see the tests run.
+```
+Chrome 49.0: Executed 2 of 2 SUCCESS (0.133 secs / 0.097 secs)
+```
# Experiments
-* Try to add an `{{orderProp}}` binding to `index.html`, and you'll see that nothing happens even
-when you are in the phone list view. This is because the `orderProp` model is visible only in the
-scope managed by `PhoneListCtrl`, which is associated with the `<div ng-view>` element. If you add
-the same binding into the `phone-list.html` template, the binding will work as expected.
-
-<div style="display: none">
-* In `PhoneCatCtrl`, create a new model called "`hero`" with `this.hero = 'Zoro'`. In
-`PhoneListCtrl`, let's shadow it with `this.hero = 'Batman'`. In `PhoneDetailCtrl`, we'll use
-`this.hero = "Captain Proton"`. Then add the `<p>hero = {{hero}}</p>` to all three of our templates
-(`index.html`, `phone-list.html`, and `phone-detail.html`). Open the app and you'll see scope
-inheritance and model property shadowing do some wonders.
-</div>
+<div></div>
+
+* At the bottom of `phone-list.template.html`, add a
+ `<pre>{{$ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp | json}}</pre>` binding to see
+ the list of phones displayed in JSON format.
+
+* In the `PhoneListController` controller, pre-process the HTTP response by limiting the number of
+ phones to the first 5 in the list. Use the following code in the `$http` callback:
+
+ ```js
+ self.phones = response.data.slice(0, 5);
+ ```
# Summary
-With the routing set up and the phone list view implemented, we're ready to go to {@link step_08
-step 8} to implement the phone details view.
+Now that you have learned how easy it is to use Angular services (thanks to Angular's dependency
+injection), go to {@link step_08 step 8}, where you will add some thumbnail images of phones and
+some links.
<ul doc-tutorial-nav="7"></ul>
-[bower]: http://bower.io
+[minification]: https://en.wikipedia.org/wiki/Minification_(programming)
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index 6e5ef9abd8f7..5f7a98efafea 100644
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -1,197 +1,117 @@
@ngdoc tutorial
-@name 8 - More Templating
+@name 8 - Templating Links & Images
@step 8
@description
<ul doc-tutorial-nav="8"></ul>
-In this step, you will implement the phone details view, which is displayed when a user clicks on a
-phone in the phone list.
+In this step, we will add thumbnail images for the phones in the phone list, and links that, for
+now, will go nowhere. In subsequent steps, we will use the links to display additional information
+about the phones in the catalog.
-* When you click on a phone on the list, the phone details page with phone-specific information
-is displayed.
+* There are now links and images of the phones in the list.
-To implement the phone details view we are going to use {@link ng.$http $http} to fetch our data,
-and then flesh out the `phone-detail.html` view template.
<div doc-tutorial-reset="8"></div>
## Data
-In addition to `phones.json`, the `app/phones/` directory also contains one JSON file for each
-phone:
+Note that the `phones.json` file contains unique IDs and image URLs for each of the phones. The
+URLs point to the `app/img/phones/` directory.
-__`app/phones/nexus-s.json`:__ (sample snippet)
+<br />
+**`app/phones/phones.json`** (sample snippet):
-```js
-{
- "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
- "android": {
- "os": "Android 2.3",
- "ui": "Android"
+```json
+[
+ {
+ ...
+ "id": "motorola-defy-with-motoblur",
+ "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
+ "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
+ ...
},
...
- "images": [
- "img/phones/nexus-s.0.jpg",
- "img/phones/nexus-s.1.jpg",
- "img/phones/nexus-s.2.jpg",
- "img/phones/nexus-s.3.jpg"
- ],
- "storage": {
- "flash": "16384MB",
- "ram": "512MB"
- }
-}
-```
-
-
-Each of these files describes various properties of the phone using the same data structure. We'll
-show this data in the phone detail view.
-
-
-## Controller
-
-We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the JSON files. This works
-the same way as the phone list controller.
-
-__`app/js/controllers.js`:__
-
-```js
-var phonecatControllers = angular.module('phonecatControllers',[]);
-
-phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
- function($scope, $routeParams, $http) {
- $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
- $scope.phone = data;
- });
- }]);
+]
```
-To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current
-route by the `$route` service.
-
-
-## Template
-
-The TBD placeholder line has been replaced with lists and bindings that comprise the phone details.
-Note where we use the Angular `{{expression}}` markup and `ngRepeat` to project phone data from
-our model into the view.
+## Component Template
-__`app/partials/phone-detail.html`:__
+<br />
+**`app/phone-list/phone-list.template.html`:**
```html
-<img ng-src="{{phone.images[0]}}" class="phone">
-
-<h1>{{phone.name}}</h1>
-
-<p>{{phone.description}}</p>
-
-<ul class="phone-thumbs">
- <li ng-repeat="img in phone.images">
- <img ng-src="{{img}}">
- </li>
-</ul>
-
-<ul class="specs">
- <li>
- <span>Availability and Networks</span>
- <dl>
- <dt>Availability</dt>
- <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
- </dl>
- </li>
- ...
- <li>
- <span>Additional Features</span>
- <dd>{{phone.additionalFeatures}}</dd>
+...
+<ul class="phones">
+ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
+ <a href="#/phones/{{phone.id}}" class="thumb">
+ <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
+ </a>
+ <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
+ <p>{{phone.snippet}}</p>
</li>
</ul>
-```
-
-<div style="display: none">
-TODO!
-<img class="diagram" src="img/tutorial/tutorial_08-09_final.png">
-</div>
-
-## Test
-
-We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
-step 5.
-
-__`test/unit/controllersSpec.js`:__
-
-```js
-
- beforeEach(module('phonecatApp'));
-
- ...
-
- describe('PhoneDetailCtrl', function(){
- var scope, $httpBackend, ctrl;
-
- beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
- $httpBackend = _$httpBackend_;
- $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
-
- $routeParams.phoneId = 'xyz';
- scope = $rootScope.$new();
- ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
- }));
-
-
- it('should fetch phone detail', function() {
- expect(scope.phone).toBeUndefined();
- $httpBackend.flush();
-
- expect(scope.phone).toEqual({name:'phone xyz'});
- });
- });
...
```
-You should now see the following output in the Karma tab:
+To dynamically generate links that will in the future lead to phone detail pages, we used the
+now-familiar double-curly brace binding in the `href` attribute values. In step 2, we added the
+`{{phone.name}}` binding as the element content. In this step the `{{phone.id}}` binding is used in
+the element attribute.
-<pre>Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)</pre>
+We also added phone images next to each record using an image tag with the {@link ngSrc ngSrc}
+directive. That directive prevents the browser from treating the Angular `{{ expression }}` markup
+literally, and initiating a request to an invalid URL (`http://localhost:8000/{{phone.imageUrl}}`),
+which it would have done if we had only specified an attribute binding in a regular `src` attribute
+(`<img src="{{phone.imageUrl}}">`). Using the `ngSrc` directive, prevents the browser from making an
+HTTP request to an invalid location.
-We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
-heading on the page is "Nexus S".
+# Testing
-__`test/e2e/scenarios.js`:__
+<br />
+**`e2e-tests/scenarios.js`**:
```js
-...
- describe('Phone detail view', function() {
-
- beforeEach(function() {
- browser.get('app/index.html#/phones/nexus-s');
- });
+ ...
+ it('should render phone specific links', function() {
+ var query = element(by.model('$ctrl.query'));
+ query.sendKeys('nexus');
- it('should display nexus-s page', function() {
- expect(element(by.binding('phone.name')).getText()).toBe('Nexus S');
+ element.all(by.css('.phones li a')).first().click();
+ expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
});
- });
-...
+
+ ...
```
+We added a new E2E test to verify that the application is generating correct links to the phone
+views, that we will implement in the upcoming steps.
You can now rerun `npm run protractor` to see the tests run.
# Experiments
-* Using the [Protractor API](http://angular.github.io/protractor/#/api),
-write a test that verifies that we display 4 thumbnail images on the Nexus S details page.
+<div></div>
+
+* Replace the `ngSrc` directive with a plain old `src` attribute. Using tools such as your browser's
+ developer tools or inspecting the web server access logs, confirm that the application is indeed
+ making an extraneous request to `%7B%7Bphone.imageUrl%7D%7D` (or `{{phone.imageUrl}}`).
+
+ The issue here is that the browser will fire a request for that invalid image address as soon as
+ it hits the `<img>` tag, which is before Angular has a chance to evaluate the expression and
+ inject the valid address.
# Summary
-Now that the phone details view is in place, proceed to {@link step_09 step 9} to learn how to
-write your own custom display filter.
+Now that you have added phone images and links, go to {@link step_09 step 9} to learn about Angular
+layout templates and how Angular makes it easy to create applications that have multiple views.
<ul doc-tutorial-nav="8"></ul>
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
index a0984e49adf1..c0b0b304bf7d 100644
--- a/docs/content/tutorial/step_09.ngdoc
+++ b/docs/content/tutorial/step_09.ngdoc
@@ -1,144 +1,429 @@
@ngdoc tutorial
-@name 9 - Filters
+@name 9 - Routing & Multiple Views
@step 9
@description
<ul doc-tutorial-nav="9"></ul>
-In this step you will learn how to create your own custom display filter.
-* In the previous step, the details page displayed either "true" or "false" to indicate whether
-certain phone features were present or not. We have used a custom filter to convert those text
-strings into glyphs: ✓ for "true", and ✘ for "false". Let's see what the filter code looks like.
+In this step, you will learn how to create a layout template and how to build an application that
+has multiple views by adding routing, using an Angular module called {@link ngRoute ngRoute}.
-<div doc-tutorial-reset="9"></div>
+* When you now navigate to `/index.html`, you are redirected to `/index.html#!/phones` and the phone
+ list appears in the browser.
+* When you click on a phone link, the URL changes to that specific phone and the stub of a phone
+ detail page is displayed.
-## Custom Filter
+<div doc-tutorial-reset="9"></div>
-In order to create a new filter, you are going to create a `phonecatFilters` module and register
-your custom filter with this module:
-__`app/js/filters.js`:__
+## Dependencies
+
+The routing functionality added in this step is provided by Angular in the `ngRoute` module, which
+is distributed separately from the core Angular framework.
+
+Since we are using [Bower][bower] to install client-side dependencies, this step updates the
+`bower.json` configuration file to include the new dependency:
+
+<br />
+**`bower.json`:**
+
+```json
+{
+ "name": "angular-phonecat",
+ "description": "A starter project for AngularJS",
+ "version": "0.0.0",
+ "homepage": "https://github.com/angular/angular-phonecat",
+ "license": "MIT",
+ "private": true,
+ "dependencies": {
+ "angular": "1.5.x",
+ "angular-mocks": "1.5.x",
+ "angular-route": "1.5.x",
+ "bootstrap": "3.3.x"
+ }
+}
+```
+
+The new dependency `"angular-route": "1.5.x"` tells bower to install a version of the angular-route
+module that is compatible with version 1.5.x of Angular. We must tell bower to download and install
+this dependency.
-```js
-angular.module('phonecatFilters', []).filter('checkmark', function() {
- return function(input) {
- return input ? '\u2713' : '\u2718';
- };
-});
+```
+npm install
```
-The name of our filter is "checkmark". The `input` evaluates to either `true` or `false`, and we
-return one of the two unicode characters we have chosen to represent true (`\u2713` -> ✓) or false (`\u2718` -> ✘).
+<div class="alert alert-info">
+ **Note:** If you have bower installed globally, you can run `bower install`, but for this project
+ we have preconfigured `npm install` to run bower for us.
+</div>
-Now that our filter is ready, we need to register the `phonecatFilters` module as a dependency for
-our main `phonecatApp` module.
+<div class="alert alert-warning">
+ **Warning:** If a new version of Angular has been released since you last ran `npm install`, then
+ you may have a problem with the `bower install` due to a conflict between the versions of
+ angular.js that need to be installed. If you run into this issue, simply delete your
+ `app/bower_components` directory and then run `npm install`.
+</div>
-__`app/js/app.js`:__
-```js
-...
-angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters']);
-...
-```
+## Multiple Views, Routing and Layout Templates
+
+Our app is slowly growing and becoming more complex. Prior to this step, the app provided our users
+with a single view (including the list of all phones), and all of the template code was located in
+the `phone-list.template.html` file. The next step in building the application is to add a view that
+will show detailed information about each of the devices in our list.
+
+To add the detailed view, we are going to turn `index.html` into what we call a "layout template".
+This is a template that is common for all views in our application. Other "partial templates" are
+then included into this layout template depending on the current "route" — the view that is
+currently displayed to the user.
+
+Application routes in Angular are declared via the {@link ngRoute.$routeProvider $routeProvider},
+which is the provider of the {@link ngRoute.$route $route} service. This service makes it easy to
+wire together controllers, view templates, and the current URL location in the browser. Using this
+feature, we can implement [deep linking][deep-linking], which lets us utilize the browser's history
+(back and forward navigation) and bookmarks.
+
+<div class="alert alert-success">
+ <p>
+ `ngRoute` allows as to associate a controller and a template with a specific URL (or URL
+ pattern). This is pretty close to what we did with `ngController` and `index.html` back in
+ {@link step_02 step 2}.
+ </p>
+ <p>
+ Since we have already learned that components allow us to combine controllers with templates in
+ a modular, testable way, we are going to use components for routing as well.
+ Each route will be associated with a component and that component will be in charge of providing
+ the view template and the controller.
+ </p>
+</div>
+
+
+### A Note about DI, Injector and Providers
+
+As you {@link step_07 noticed}, {@link guide/di dependency injection} (DI) is at the core of
+AngularJS, so it's important for you to understand a thing or two about how it works.
+
+When the application bootstraps, Angular creates an injector that will be used to find and inject
+all of the services that are required by your application. The injector itself doesn't know anything
+about what the `$http` or `$route` services do. In fact, the injector doesn't even know about the
+existence of these services, unless it is configured with proper module definitions.
+
+The injector only carries out the following steps:
+
+* Load the module definition(s) that you specify in your application.
+* Register all Providers defined in these module definition(s).
+* When asked to do so, lazily instantiate services and their dependencies, via their Providers, as
+ parameters to an injectable function.
+
+Providers are objects that provide (create) instances of services and expose configuration APIs,
+that can be used to control the creation and runtime behavior of a service. In case of the `$route`
+service, the `$routeProvider` exposes APIs that allow you to define routes for your application.
+
+<div class="alert alert-warning">
+ **Note:** Providers can only be injected into `config` functions. Thus you could not inject
+ `$routeProvider` into `PhoneListController` at runtime.
+</div>
+
+Angular modules solve the problem of removing global variables from the application and provide a
+way of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try
+to solve the problem of script load ordering or lazy script fetching. These goals are totally
+independent and both module systems can live side-by-side and fulfill their goals.
+
+To deepen your understanding on Angular's DI, see [Understanding Dependency Injection][wiki-di].
## Template
-Since the filter code lives in the `app/js/filters.js` file, we need to include this file in our
-layout template.
+The `$route` service is usually used in conjunction with the {@link ngRoute.directive:ngView ngView}
+directive. The role of the `ngView` directive is to include the view template for the current route
+into the layout template. This makes it a perfect fit for our `index.html` template.
-__`app/index.html`:__
+<br />
+**`app/index.html`:**
```html
-...
- <script src="js/controllers.js"></script>
- <script src="js/filters.js"></script>
-...
+<head>
+ ...
+ <script src="bower_components/angular/angular.js"></script>
+ <script src="bower_components/angular-route/angular-route.js"></script>
+ <script src="app.module.js"></script>
+ <script src="app.config.js"></script>
+ ...
+ <script src="phone-detail/phone-detail.module.js"></script>
+ <script src="phone-detail/phone-detail.component.js"></script>
+</head>
+<body>
+
+ <div ng-view></div>
+
+</body>
```
-The syntax for using filters in Angular templates is as follows:
+We have added four new `<script>` tags in our `index.html` file to load some extra JavaScript files
+into our application:
- {{ expression | filter }}
+* `angular-route.js`: Defines the Angular `ngRoute` module, which provides us with routing.
+* `app.config.js`: Configures the providers available to our main module (see
+ [below](tutorial/step_09#configuring-a-module)).
+* `phone-detail.module.js`: Defines a new module containing a `phoneDetail` component.
+* `phone-detail.component.js`: Defines a dummy `phoneDetail` component (see
+ [below](tutorial/step_09#the-phonedetail-component)).
-Let's employ the filter in the phone details template:
+Note that we removed the `<phone-list></phone-list>` line from the `index.html` template and
+replaced it with a `<div>` with the `ng-view` attribute.
+<img class="diagram" src="img/tutorial/tutorial_09.png">
-__`app/partials/phone-detail.html`:__
+## Configuring a Module
-```html
-...
- <dl>
- <dt>Infrared</dt>
- <dd>{{phone.connectivity.infrared | checkmark}}</dd>
- <dt>GPS</dt>
- <dd>{{phone.connectivity.gps | checkmark}}</dd>
- </dl>
-...
+A module's {@link ng.angular.Module#config .config()} method gives us access to the available
+providers for configuration. To make the providers, services and directives defined in `ngRoute`
+available to our application, we need to add `ngRoute` as a dependency of our `phonecatApp` module.
+
+<br />
+**`app/app.module.js`:**
+
+```js
+angular.module('phonecatApp', [
+ 'ngRoute',
+ ...
+]);
+```
+
+Now, in addition to the core services and directives, we can also configure the `$route` service
+(using it's provider) for our application. In order to be able to quickly locate the configuration
+code, we put it into a separate file and used the `.config` suffix.
+
+<br />
+**`app/app.config.js`:**
+
+```js
+ angular.
+ module('phonecatApp').
+ config(['$locationProvider', '$routeProvider',
+ function config($locationProvider, $routeProvider) {
+ $locationProvider.hashPrefix('!');
+
+ $routeProvider.
+ when('/phones', {
+ template: '<phone-list></phone-list>'
+ }).
+ when('/phones/:phoneId', {
+ template: '<phone-detail></phone-detail>'
+ }).
+ otherwise('/phones');
+ }
+ ]);
+```
+
+Using the `.config()` method, we request the necessary providers (for example the `$routeProvider`)
+to be injected into our configuration function and then use their methods to specify the behavior of
+the corresponding services. Here, we use the
+{@link ngRoute.$routeProvider#when $routeProvider.when()} and
+{@link ngRoute.$routeProvider#otherwise $routeProvider.otherwise()} methods to define our
+application routes.
+
+<div class="alert alert-success">
+ <p>
+ We also used {@ink $locationProvider#hashPrefix $locationProvider.hashPrefix()} to set the
+ hash-prefix to `!`. This prefix will appear in the links to our client-side routes, right after
+ the hash (`#`) symbol and before the actual path (e.g. `index.html#!/some/path`).
+ </p>
+ <p>
+ Setting a prefix is not necessary, but it is considered a good practice (for reasons that are
+ outside the scope of this tutorial). `!` is the most commonly used prefix.
+ </p>
+</div>
+
+Our routes are defined as follows:
+
+* `when('/phones')`: Determines the view that will be shown, when the URL hash fragment is
+ `/phones`. According to the specified template, Angular will create an instance of the `phoneList`
+ component to manage the view. Note that this is the same markup that we used to have in the
+ `index.html` file.
+
+* `when('/phones/:phoneId')`: Determines the view that will be shown, when the URL hash fragment
+ matches `/phones/<phoneId>`, where `<phoneId>` is a variable part of the URL. In charge of the
+ view will be the `phoneDetail` component.
+
+* `otherwise('/phones')`: Defines a fallback route to redirect to, when no route definition matches
+ the current URL.(Here it will redirect to `/phones`.)
+
+We reused the `phoneList` component that we have already built and a new "dummy" `phoneDetail`
+component. For now, the `phoneDetail` component will just display the selected phone's ID.
+(Not too impressive, but we will enhance it in the {@link step_10 next step}.)
+
+Note the use of the `:phoneId` parameter in the second route declaration. The `$route` service uses
+the route declaration — `'/phones/:phoneId'` — as a template that is matched against the current
+URL. All variables defined with the `:` prefix are extracted into the (injectable)
+{@link ngRoute.$routeParams $routeParams} object.
+
+
+## The `phoneDetail` Component
+
+We created a `phoneDetail` component to handle the phone details view. We followed the same
+conventions as with `phoneList`, using a separate directory and creating a `phoneDetail` module,
+which we added as a dependency of the `phonecatApp` module.
+
+<br />
+**`app/phone-detail/phone-detail.module.js`:**
+
+```js
+angular.module('phoneDetail', [
+ 'ngRoute'
+]);
+```
+
+<br />
+**`app/phone-detail/phone-detail.component.js`:**
+
+```js
+ angular.
+ module('phoneDetail').
+ component('phoneDetail', {
+ template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
+ controller: ['$routeParams',
+ function PhoneDetailController($routeParams) {
+ this.phoneId = $routeParams.phoneId;
+ }
+ ]
+ });
+```
+
+<br />
+**`app/app.module.js`:**
+
+```js
+angular.module('phonecatApp', [
+ ...
+ 'phoneDetail',
+ ...
+]);
```
+### A Note on Sub-module Dependencies
+
+The `phoneDetail` module depends on the `ngRoute` module for providing the `$routeParams` object,
+which is used in the `phoneDetail` component's controller. Since `ngRoute` is also a dependency of
+the main `phonecatApp` module, its services and directives are already available everywhere in the
+application (including the `phoneDetail` component).
+
+This means that our application would continue to work even if we didn't include `ngRoute` in the
+list of dependencies for the `phoneDetail` component. Although it might be tempting to omit
+dependencies of a sub-module that are already imported by the main module, it breaks our hard-earned
+modularity.
+
+<div class="alert alert-warning">
+ Imagine what would happen if we decided to copy the `phoneDetail` feature over to another project
+ that does not declare a dependency on `ngRoute`. The injector would not be able to provide
+ `$routeParams` and our application would break.
+</div>
+
+The takeaway here is:
+
+* Always be explicit about the dependecies of a sub-module. Do not rely on dependencies inherited
+ from a parent module (because that parent module might not be there some day).
-## Test
+<div class="alert alert-success">
+ Declaring the same dependency in multiple modules does not incur extra "cost", because Angular
+ will still load each dependency once. For more info on modules and their dependencies take a look
+ at the [Modules](guide/module) section of the Developer Guide.
+</div>
-Filters, like any other component, should be tested and these tests are very easy to write.
-__`test/unit/filtersSpec.js`:__
+# Testing
+
+Since some of our modules depend on {@link ngRoute ngRoute} now, it is necessary to update the Karma
+configuration file with angular-route. Other than that, the unit tests should (still) pass without
+any modification.
+
+<br />
+**`karma.conf.js`:**
```js
-describe('filter', function() {
+ files: [
+ 'bower_components/angular/angular.js',
+ 'bower_components/angular-route/angular-route.js',
+ ...
+ ],
+```
- beforeEach(module('phonecatFilters'));
+<br />
+To automatically verify that everything is wired properly, we wrote E2E tests for navigating to
+various URLs and verifying that the correct view was rendered.
- describe('checkmark', function() {
+<br />
+**`e2e-tests/scenarios.js`**
+
+```js
+ ...
- it('should convert boolean values to unicode checkmark or cross',
- inject(function(checkmarkFilter) {
- expect(checkmarkFilter(true)).toBe('\u2713');
- expect(checkmarkFilter(false)).toBe('\u2718');
- }));
+ it('should redirect `index.html` to `index.html#!/phones', function() {
+ browser.get('index.html');
+ expect(browser.getLocationAbsUrl()).toBe('/phones');
});
-});
-```
-We must call `beforeEach(module('phonecatFilters'))` before any of
-our filter tests execute. This call loads our `phonecatFilters` module into the injector
-for this test run.
+ ...
+
+ describe('View: Phone list', function() {
+
+ beforeEach(function() {
+ browser.get('index.html#!/phones');
+ });
-Note that we call the helper function, `inject(function(checkmarkFilter) { ... })`, to get
-access to the filter that we want to test. See {@link angular.mock.inject angular.mock.inject()}.
+ ...
+
+ });
-Notice that the suffix 'Filter' is appended to your filter name when injected.
-See the {@link guide/filter#using-filters-in-controllers-services-and-directives Filter Guide}
-section where this is outlined.
+ ...
-You should now see the following output in the Karma tab:
+ describe('View: Phone details', function() {
-<pre>Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)</pre>
+ beforeEach(function() {
+ browser.get('index.html#!/phones/nexus-s');
+ });
+
+ it('should display placeholder page with `phoneId`', function() {
+ expect(element(by.binding('$ctrl.phoneId')).getText()).toBe('nexus-s');
+ });
+
+ });
+
+ ...
+```
+
+You can now rerun `npm run protractor` to see the tests run (and hopefully pass).
# Experiments
-* Let's experiment with some of the {@link api/ng/filter built-in Angular filters} and add the
-following bindings to `index.html`:
- * `{{ "lower cap string" | uppercase }}`
- * `{{ {foo: "bar", baz: 23} | json }}`
- * `{{ 1304375948024 | date }}`
- * `{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}`
+<div></div>
-* We can also create a model with an input element, and combine it with a filtered binding. Add
- the following to index.html:
+* Try to add a `{{$ctrl.phoneId}` binding in the template string for the phone details view:
- ```html
- <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
+ ```js
+ when('/phones/:phoneId', {
+ template: '{{$ctrl.phoneId}} <phone-detail></phone-detail>'
+ ...
```
+ You will see that nothing happens, even when you are in the phone details view. This is because
+ the `phoneId` model is visible only in the context set by the `phoneDetail` component. Again,
+ component isolation at work!
+
# Summary
-Now that you have learned how to write and test a custom filter, go to {@link step_10 step 10} to
-learn how we can use Angular to enhance the phone details page further.
+With the routing set up and the phone list view implemented, we are ready to go to
+{@link step_10 step 10} and implement a proper phone details view.
<ul doc-tutorial-nav="9"></ul>
+
+
+[bower]: http://bower.io
+[deep-linking]: https://en.wikipedia.org/wiki/Deep_linking
+[wiki-di]: https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection
diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc
index fd073a5c9d41..0305c80f80be 100644
--- a/docs/content/tutorial/step_10.ngdoc
+++ b/docs/content/tutorial/step_10.ngdoc
@@ -1,180 +1,214 @@
@ngdoc tutorial
-@name 10 - Event Handlers
+@name 10 - More Templating
@step 10
@description
<ul doc-tutorial-nav="10"></ul>
-In this step, you will add a clickable phone image swapper to the phone details page.
+In this step, we will implement the phone details view, which is displayed when a user clicks on a
+phone in the phone list.
+
+* When you click on a phone on the list, the phone details page with phone-specific information is
+ displayed.
+
+To implement the phone details view we are going to use {@link ng.$http $http} to fetch our data,
+and then flesh out the `phoneDetail` component's template.
-* The phone details view displays one large image of the current phone and several smaller thumbnail
-images. It would be great if we could replace the large image with any of the thumbnails just by
-clicking on the desired thumbnail image. Let's have a look at how we can do this with Angular.
<div doc-tutorial-reset="10"></div>
-## Controller
-__`app/js/controllers.js`:__
+## Data
+
+In addition to `phones.json`, the `app/phones/` directory also contains one JSON file for each
+phone:
+
+<br />
+**`app/phones/nexus-s.json`:** (sample snippet)
+
+```json
+{
+ "additionalFeatures": "Contour Display, Near Field Communications (NFC), ...",
+ "android": {
+ "os": "Android 2.3",
+ "ui": "Android"
+ },
+ ...
+ "images": [
+ "img/phones/nexus-s.0.jpg",
+ "img/phones/nexus-s.1.jpg",
+ "img/phones/nexus-s.2.jpg",
+ "img/phones/nexus-s.3.jpg"
+ ],
+ "storage": {
+ "flash": "16384MB",
+ "ram": "512MB"
+ }
+}
+```
+
+Each of these files describes various properties of the phone using the same data structure. We will
+show this data in the phone details view.
+
+
+## Component Controller
+
+We will expand the `phoneDetail` component's controller by using the `$http` service to fetch the
+appropriate JSON files. This works the same way as the `phoneList` component's controller.
+
+<br />
+**`app/phone-detail/phone-detail.component.js`:**
```js
-...
-var phonecatControllers = angular.module('phonecatControllers',[]);
-
-phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
- function($scope, $routeParams, $http) {
- $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
- $scope.phone = data;
- $scope.mainImageUrl = data.images[0];
+ angular.
+ module('phoneDetail').
+ component('phoneDetail', {
+ templateUrl: 'phone-detail/phone-detail.template.html',
+ controller: ['$http', '$routeParams',
+ function PhoneDetailController($http, $routeParams) {
+ var self = this;
+
+ $http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
+ self.phone = response.data;
+ });
+ }
+ ]
});
-
- $scope.setImage = function(imageUrl) {
- $scope.mainImageUrl = imageUrl;
- };
- }]);
```
-In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its
-default value to the first phone image URL.
+To construct the URL for the HTTP request, we use `$routeParams.phoneId`, which is extracted from
+the current route by the `$route` service.
-We also created a `setImage` event handler function that will change the value of `mainImageUrl`.
+## Component Template
-## Template
+The inline, TBD placeholder template has been replaced with a full blown external template,
+including lists and bindings that comprise the phone details. Note how we use the Angular
+`{{expression}}` markup and `ngRepeat` to project phone data from our model into the view.
-__`app/partials/phone-detail.html`:__
+<br />
+**`app/phone-detail/phone-detail.template.html`:**
```html
-<img ng-src="{{mainImageUrl}}" class="phone">
+<img ng-src="{{$ctrl.phone.images[0]}}" class="phone" />
-...
+<h1>{{$ctrl.phone.name}}</h1>
+
+<p>{{$ctrl.phone.description}}</p>
<ul class="phone-thumbs">
- <li ng-repeat="img in phone.images">
- <img ng-src="{{img}}" ng-click="setImage(img)">
+ <li ng-repeat="img in $ctrl.phone.images">
+ <img ng-src="{{img}}" />
</li>
</ul>
-...
-```
-We bound the `ngSrc` directive of the large image to the `mainImageUrl` property.
+<ul class="specs">
+ <li>
+ <span>Availability and Networks</span>
+ <dl>
+ <dt>Availability</dt>
+ <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
+ </dl>
+ </li>
+ ...
+ <li>
+ <span>Additional Features</span>
+ <dd>{{$ctrl.phone.additionalFeatures}}</dd>
+ </li>
+</ul>
+```
-We also registered an {@link ng.directive:ngClick `ngClick`}
-handler with thumbnail images. When a user clicks on one of the thumbnail images, the handler will
-use the `setImage` event handler function to change the value of the `mainImageUrl` property to the
-URL of the thumbnail image.
+<img class="diagram" src="img/tutorial/tutorial_10.png">
-<div style="display: none">
-TODO!
-<img class="diagram" src="img/tutorial/tutorial_10-11_final.png">
-</div>
-## Test
+# Testing
-To verify this new feature, we added two end-to-end tests. One verifies that the main image is set
-to the first phone image by default. The second test clicks on several thumbnail images and
-verifies that the main image changed appropriately.
+We wrote a new unit test that is similar to the one we wrote for the `phoneList` component's
+controller in {@link step_07#testing step 7}.
-__`test/e2e/scenarios.js`:__
+<br />
+**`app/phone-detail/phone-detail.component.spec.js`:**
```js
-...
- describe('Phone detail view', function() {
+describe('phoneDetail', function() {
-...
-
- it('should display the first phone image as the main phone image', function() {
- expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
- });
+ // Load the module that contains the `phoneDetail` component before each test
+ beforeEach(module('phoneDetail'));
+ // Test the controller
+ describe('PhoneDetailController', function() {
+ var $httpBackend, ctrl;
- it('should swap main image if a thumbnail image is clicked on', function() {
- element(by.css('.phone-thumbs li:nth-child(3) img')).click();
- expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
+ beforeEach(inject(function($componentController, _$httpBackend_, $routeParams) {
+ $httpBackend = _$httpBackend_;
+ $httpBackend.expectGET('phones/xyz.json').respond({name: 'phone xyz'});
- element(by.css('.phone-thumbs li:nth-child(1) img')).click();
- expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
- });
- });
-```
+ $routeParams.phoneId = 'xyz';
-You can now rerun `npm run protractor` to see the tests run.
+ ctrl = $componentController('phoneDetail');
+ }));
+ it('should fetch the phone details', function() {
+ expect(ctrl.phone).toBeUndefined();
-You also have to refactor one of your unit tests because of the addition of the `mainImageUrl`
-model property to the `PhoneDetailCtrl` controller. Below, we create the function `xyzPhoneData`
-which returns the appropriate json with the `images` attribute in order to get the test to pass.
+ $httpBackend.flush();
+ expect(ctrl.phone).toEqual({name: 'phone xyz'});
+ });
-__`test/unit/controllersSpec.js`:__
+ });
-```js
-...
- beforeEach(module('phonecatApp'));
+});
+```
-...
+You should now see the following output in the Karma tab:
- describe('PhoneDetailCtrl', function(){
- var scope, $httpBackend, ctrl,
- xyzPhoneData = function() {
- return {
- name: 'phone xyz',
- images: ['image/url1.png', 'image/url2.png']
- }
- };
+```
+Chrome 49.0: Executed 3 of 3 SUCCESS (0.159 secs / 0.136 secs)
+```
+We also added a new E2E test that navigates to the 'Nexus S' details page and verifies that the
+heading on the page is "Nexus S".
- beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
- $httpBackend = _$httpBackend_;
- $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
+<br />
+**`e2e-tests/scenarios.js`**
- $routeParams.phoneId = 'xyz';
- scope = $rootScope.$new();
- ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
- }));
+```js
+ ...
+ describe('View: Phone detail', function() {
- it('should fetch phone detail', function() {
- expect(scope.phone).toBeUndefined();
- $httpBackend.flush();
+ beforeEach(function() {
+ browser.get('index.html#!/phones/nexus-s');
+ });
- expect(scope.phone).toEqual(xyzPhoneData());
+ it('should display the `nexus-s` page', function() {
+ expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
});
+
});
+
+ ...
```
-Your unit tests should now be passing.
+You can run the tests with `npm run protractor`.
# Experiments
-* Let's add a new controller method to `PhoneDetailCtrl`:
-
- $scope.hello = function(name) {
- alert('Hello ' + (name || 'world') + '!');
- }
-
- and add:
+<div></div>
- <button ng-click="hello('Elmo')">Hello</button>
-
- to the `phone-detail.html` template.
-
-<div style="display: none">
-TODO!
- The controller methods are inherited between controllers/scopes, so you can use the same snippet
-in the `phone-list.html` template as well.
-
-* Move the `hello` method from `PhoneCatCtrl` to `PhoneListCtrl` and you'll see that the button
-declared in `index.html` will stop working, while the one declared in the `phone-list.html`
-template remains operational.
-</div>
+* Using [Protractor's API][protractor-docs], write a test that verifies that we display 4 thumbnail
+ images on the 'Nexus S' details page.
# Summary
-With the phone image swapper in place, we're ready for {@link step_11 step 11} to
-learn an even better way to fetch data.
+Now that the phone details view is in place, proceed to {@link step_11 step 11} to learn how to
+write your own custom display filter.
<ul doc-tutorial-nav="10"></ul>
+
+
+[protractor-docs]: https://angular.github.io/protractor/#/api
diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc
index 92f4e3519b13..d22809cb658a 100644
--- a/docs/content/tutorial/step_11.ngdoc
+++ b/docs/content/tutorial/step_11.ngdoc
@@ -1,293 +1,176 @@
@ngdoc tutorial
-@name 11 - REST and Custom Services
+@name 11 - Custom Filters
@step 11
@description
<ul doc-tutorial-nav="11"></ul>
-In this step, you will change the way our app fetches data.
+In this step you will learn how to create your own custom display filter.
-* We define a custom service that represents a [RESTful][restful] client. Using this client we
-can make requests to the server for data in an easier way, without having to deal with the
-lower-level {@link ng.$http $http} API, HTTP methods and URLs.
+* In the previous step, the details page displayed either "true" or "false" to indicate whether
+ certain phone features were present or not. In this step, we are using a custom filter to convert
+ those text strings into glyphs: ✓ for "true", and ✘ for "false".
+
+Let's see what the filter code looks like.
<div doc-tutorial-reset="11"></div>
-## Dependencies
-The RESTful functionality is provided by Angular in the `ngResource` module, which is distributed
-separately from the core Angular framework.
+## The `checkmark` Filter
-We are using [Bower][bower] to install client side dependencies. This step updates the
-`bower.json` configuration file to include the new dependency:
+Since this filter is generic (i.e. it is not specific to any view or component), we are going to
+register it in a `core` module, which contains "application-wide" features.
-```
-{
- "name": "angular-seed",
- "description": "A starter project for AngularJS",
- "version": "0.0.0",
- "homepage": "https://github.com/angular/angular-seed",
- "license": "MIT",
- "private": true,
- "dependencies": {
- "angular": "1.4.x",
- "angular-mocks": "1.4.x",
- "jquery": "~2.2.3",
- "bootstrap": "~3.1.1",
- "angular-route": "1.4.x",
- "angular-resource": "1.4.x"
- }
-}
+<br />
+**`app/core/core.module.js`:**
+
+```js
+angular.module('core', []);
```
-The new dependency `"angular-resource": "1.4.x"` tells bower to install a version of the
-angular-resource component that is compatible with version 1.4.x. We must ask bower to download
-and install this dependency. We can do this by running:
+<br />
+**`app/core/checkmark/checkmark.filter.js`:**
+```js
+ angular.
+ module('core').
+ filter('checkmark', function() {
+ return function(input) {
+ return input ? '\u2713' : '\u2718';
+ };
+ });
```
-npm install
-```
-
-<div class="alert alert-warning">
- **Warning:** If a new version of Angular has been released since you last ran `npm install`, then you may have a
- problem with the `bower install` due to a conflict between the versions of angular.js that need to
- be installed. If you get this then simply delete your `app/bower_components` folder before running
- `npm install`.
-</div>
<div class="alert alert-info">
- **Note:** If you have bower installed globally then you can run `bower install` but for this project we have
- preconfigured `npm install` to run bower for us.
+ As you may have noticed, we (unsurprisingly) gave our file a `.filter` suffix.
</div>
+The name of our filter is "checkmark". The `input` evaluates to either `true` or `false`, and we
+return one of the two unicode characters we have chosen to represent true (`\u2713` -> ✓) and false
+(`\u2718` -> ✘).
-## Template
-
-Our custom resource service will be defined in `app/js/services.js` so we need to include this file
-in our layout template. Additionally, we also need to load the `angular-resource.js` file, which
-contains the {@link module:ngResource ngResource} module:
+Now that our filter is ready, we need to register the `core` module as a dependency of our main
+`phonecatApp` module.
-__`app/index.html`.__
+<br />
+**`app/app.module.js`:**
-```html
-...
- <script src="bower_components/angular-resource/angular-resource.js"></script>
- <script src="js/services.js"></script>
-...
+```js
+angular.module('phonecatApp', [
+ ...
+ 'core',
+ ...
+]);
```
-## Service
-We create our own service to provide access to the phone data on the server:
+## Templates
-__`app/js/services.js`.__
+Since we have created two new files (**core.module.js**, **checkmark.filter.js**), we need to
+include them in our layout template.
-```js
-var phonecatServices = angular.module('phonecatServices', ['ngResource']);
+<br />
+**`app/index.html`:**
-phonecatServices.factory('Phone', ['$resource',
- function($resource){
- return $resource('phones/:phoneId.json', {}, {
- query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
- });
- }]);
+```html
+ ...
+ <script src="core/core.module.js"></script>
+ <script src="core/checkmark/checkmark.filter.js"></script>
+ ...
```
-We used the module API to register a custom service using a factory function. We passed in the name
-of the service - 'Phone' - and the factory function. The factory function is similar to a
-controller's constructor in that both can declare dependencies to be injected via function
-arguments. The Phone service declared a dependency on the `$resource` service.
-
-The {@link ngResource.$resource `$resource`} service makes it easy to create a
-[RESTful][restful] client with just a few lines of code. This client can then be used in our
-application, instead of the lower-level {@link ng.$http $http} service.
+The syntax for using filters in Angular templates is as follows:
-__`app/js/app.js`.__
-
-```js
-...
-angular.module('phonecatApp', ['ngRoute', 'phonecatControllers','phonecatFilters', 'phonecatServices']).
-...
```
-
-We need to add the 'phonecatServices' module dependency to 'phonecatApp' module's requires array.
-
-
-## Controller
-
-We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
-lower-level {@link ng.$http $http} service, replacing it with a new service called
-`Phone`. Angular's {@link ngResource.$resource `$resource`} service is easier to
-use than `$http` for interacting with data sources exposed as RESTful resources. It is also easier
-now to understand what the code in our controllers is doing.
-
-__`app/js/controllers.js`.__
-
-```js
-var phonecatControllers = angular.module('phonecatControllers', []);
-
-...
-
-phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
- $scope.phones = Phone.query();
- $scope.orderProp = 'age';
-}]);
-
-phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($scope, $routeParams, Phone) {
- $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
- $scope.mainImageUrl = phone.images[0];
- });
-
- $scope.setImage = function(imageUrl) {
- $scope.mainImageUrl = imageUrl;
- }
-}]);
+{{expression | filter}}
```
-Notice how in `PhoneListCtrl` we replaced:
-
- $http.get('phones/phones.json').success(function(data) {
- $scope.phones = data;
- });
+Let's employ the filter in the phone details template:
-with:
+<br />
+**`app/phone-detail/phone-detail.template.html`:**
- $scope.phones = Phone.query();
-
-This is a simple statement that we want to query for all phones.
-
-An important thing to notice in the code above is that we don't pass any callback functions when
-invoking methods of our Phone service. Although it looks as if the result were returned
-synchronously, that is not the case at all. What is returned synchronously is a "future" — an
-object, which will be filled with data when the XHR response returns. Because of the data-binding
-in Angular, we can use this future and bind it to our template. Then, when the data arrives, the
-view will automatically update.
-
-Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
-we require, so in these cases, we can add a callback to process the server response. The
-`PhoneDetailCtrl` controller illustrates this by setting the `mainImageUrl` in a callback.
-
-
-## Test
-
-Because we're now using the {@link ngResource ngResource} module, it's necessary to
-update the Karma config file with angular-resource so the new tests will pass.
-
-__`test/karma.conf.js`:__
-
-```js
- files : [
- 'app/bower_components/angular/angular.js',
- 'app/bower_components/angular-route/angular-route.js',
- 'app/bower_components/angular-resource/angular-resource.js',
- 'app/bower_components/angular-mocks/angular-mocks.js',
- 'app/js/**/*.js',
- 'test/unit/**/*.js'
- ],
+```html
+ ...
+ <dl>
+ <dt>Infrared</dt>
+ <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
+ <dt>GPS</dt>
+ <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
+ </dl>
+ ...
```
-We have modified our unit tests to verify that our new service is issuing HTTP requests and
-processing them as expected. The tests also check that our controllers are interacting with the
-service correctly.
-The {@link ngResource.$resource $resource} service augments the response object
-with methods for updating and deleting the resource. If we were to use the standard `toEqual`
-matcher, our tests would fail because the test values would not match the responses exactly. To
-solve the problem, we use a newly-defined `toEqualData` [Jasmine matcher][jasmine-matchers]. When
-the `toEqualData` matcher compares two objects, it takes only object properties into account and
-ignores methods.
+# Testing
-__`test/unit/controllersSpec.js`:__
+Filters, like any other code, should be tested. Luckily, these tests are very easy to write.
+<br />
+**`app/core/checkmark/checkmark.filter.spec.js`:**
```js
-describe('PhoneCat controllers', function() {
-
- beforeEach(function(){
- this.addMatchers({
- toEqualData: function(expected) {
- return angular.equals(this.actual, expected);
- }
- });
- });
-
- beforeEach(module('phonecatApp'));
- beforeEach(module('phonecatServices'));
-
-
- describe('PhoneListCtrl', function(){
- var scope, ctrl, $httpBackend;
+describe('checkmark', function() {
- beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
- $httpBackend = _$httpBackend_;
- $httpBackend.expectGET('phones/phones.json').
- respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+ beforeEach(module('core'));
- scope = $rootScope.$new();
- ctrl = $controller('PhoneListCtrl', {$scope: scope});
- }));
+ it('should convert boolean values to unicode checkmark or cross',
+ inject(function(checkmarkFilter) {
+ expect(checkmarkFilter(true)).toBe('\u2713');
+ expect(checkmarkFilter(false)).toBe('\u2718');
+ })
+ );
+});
+```
- it('should create "phones" model with 2 phones fetched from xhr', function() {
- expect(scope.phones).toEqualData([]);
- $httpBackend.flush();
-
- expect(scope.phones).toEqualData(
- [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
- });
+The call to `beforeEach(module('core'))` loads the `core` module (which contains the `checkmark`
+filter) into the injector, before every test.
+Note that we call the helper function `inject(function(checkmarkFilter) {...})`, to get access to
+the filter that we want to test. See also {@link angular.mock.inject angular.mock.inject()}.
- it('should set the default value of orderProp model', function() {
- expect(scope.orderProp).toBe('age');
- });
- });
+<div class="alert alert-info">
+ When injecting a filter, we need to suffix the filter name with 'Filter'. For example, our
+ `checkmark` filter is injected as `checkmarkFilter`.
+ See the [Filters](guide/filter#using-filters-in-controllers-services-and-directives) section of
+ the Developer Guide for more info.
+</div>
+You should now see the following output in the Karma tab:
- describe('PhoneDetailCtrl', function(){
- var scope, $httpBackend, ctrl,
- xyzPhoneData = function() {
- return {
- name: 'phone xyz',
- images: ['image/url1.png', 'image/url2.png']
- }
- };
+```
+Chrome 49.0: Executed 4 of 4 SUCCESS (0.091 secs / 0.075 secs)
+```
- beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
- $httpBackend = _$httpBackend_;
- $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
+# Experiments
- $routeParams.phoneId = 'xyz';
- scope = $rootScope.$new();
- ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
- }));
+<div></div>
+* Let's experiment with some of the {@link api/ng/filter built-in Angular filters}.
+ Add the following bindings to `index.html`:
- it('should fetch phone detail', function() {
- expect(scope.phone).toEqualData({});
- $httpBackend.flush();
+ * `{{'lower cap string' | uppercase}}`
+ * `{{{foo: 'bar', baz: 42} | json}}`
+ * `{{1459461289000 | date}}`
+ * `{{1459461289000 | date:'MM/dd/yyyy @ h:mma'}}`
- expect(scope.phone).toEqualData(xyzPhoneData());
- });
- });
-});
-```
-You should now see the following output in the Karma tab:
+* We can also create a model with an input element, and combine it with a filtered binding.
+ Add the following to `index.html`:
-<pre>Chrome 22.0: Executed 5 of 5 SUCCESS (0.038 secs / 0.01 secs)</pre>
+ ```html
+ <input ng-model="userInput" /> Uppercased: {{userInput | uppercase}}
+ ```
# Summary
-Now that we've seen how to build a custom service as a RESTful client, we're ready for {@link step_12 step 12} (the last step!) to
-learn how to improve this application with animations.
+Now that we have learned how to write and test a custom filter, let's go to {@link step_12 step 12}
+to learn how we can use Angular to enhance the phone details page further.
<ul doc-tutorial-nav="11"></ul>
-
-[restful]: http://en.wikipedia.org/wiki/Representational_State_Transfer
-[jasmine-matchers]: http://jasmine.github.io/1.3/introduction.html#section-Matchers
-[bower]: http://bower.io/
diff --git a/docs/content/tutorial/step_12.ngdoc b/docs/content/tutorial/step_12.ngdoc
index 07a2680d3690..7902e14684f1 100644
--- a/docs/content/tutorial/step_12.ngdoc
+++ b/docs/content/tutorial/step_12.ngdoc
@@ -1,538 +1,185 @@
@ngdoc tutorial
-@name 12 - Applying Animations
+@name 12 - Event Handlers
@step 12
@description
<ul doc-tutorial-nav="12"></ul>
-In this final step, we will enhance our phonecat web application by attaching CSS and JavaScript
-animations on top of the template code we created before.
+In this step, you will add a clickable phone image swapper to the phone details page.
-* We now use the `ngAnimate` module to enable animations throughout the application.
-* We also use common `ng` directives to automatically trigger hooks for animations to tap into.
-* When an animation is found then the animation will run in between the standard DOM operation that
- is being issued on the element at the given time (e.g. inserting and removing nodes on
- {@link ngRepeat `ngRepeat`} or adding and removing classes on
- {@link ngClass `ngClass`}).
+* The phone details view displays one large image of the current phone and several smaller thumbnail
+ images. It would be great if we could replace the large image with any of the thumbnails just by
+ clicking on the desired thumbnail image. Let's have a look at how we can do this with Angular.
-<div doc-tutorial-reset="12"></div>
-
-## Dependencies
-
-The animation functionality is provided by Angular in the `ngAnimate` module, which is distributed
-separately from the core Angular framework. In addition we will use `jQuery` in this project to do
-extra JavaScript animations.
-
-We are using [Bower][bower] to install client side dependencies. This step updates the
-`bower.json` configuration file to include the new dependency:
-
-```
-{
- "name": "angular-seed",
- "description": "A starter project for AngularJS",
- "version": "0.0.0",
- "homepage": "https://github.com/angular/angular-seed",
- "license": "MIT",
- "private": true,
- "dependencies": {
- "angular": "1.4.x",
- "angular-mocks": "1.4.x",
- "jquery": "~2.2.3",
- "bootstrap": "~3.1.1",
- "angular-route": "1.4.x",
- "angular-resource": "1.4.x",
- "angular-animate": "1.4.x"
- }
-}
-```
-
-* `"angular-animate": "1.4.x"` tells bower to install a version of the
-angular-animate component that is compatible with version 1.4.x.
-* `"jquery": "~2.2.3"` tells bower to install the 2.2.3 version of jQuery. Note that this is not an
-Angular library, it is the standard jQuery library. We can use bower to install a wide range of 3rd
-party libraries.
-
-We must ask bower to download and install this dependency. We can do this by running:
-
-```
-npm install
-```
-
-<div class="alert alert-warning">
- **Warning:** If a new version of Angular has been released since you last ran `npm install`, then you may have a
- problem with the `bower install` due to a conflict between the versions of angular.js that need to
- be installed. If you get this then simply delete your `app/bower_components` folder before running
- `npm install`.
-</div>
-
-<div class="alert alert-info">
- **Note:** If you have bower installed globally then you can run `bower install` but for this project we have
- preconfigured `npm install` to run bower for us.
-</div>
-
-
-## How Animations work with `ngAnimate`
-
-To get an idea of how animations work with AngularJS, please read the
-{@link guide/animations AngularJS Animation Guide} first.
-
-
-## Template
-
-The changes required within the HTML template code is to link the asset files which define the animations as
-well as the `angular-animate.js` file. The animation module, known as {@link module:ngAnimate `ngAnimate`}, is
-defined within `angular-animate.js` and contains the code necessary to make your application become animation
-aware.
-
-Here's what needs to be changed in the index file:
-
-__`app/index.html`.__
-```html
-...
- <!-- for CSS Transitions and/or Keyframe Animations -->
- <link rel="stylesheet" href="css/animations.css">
-
- ...
-
- <!-- jQuery is used for JavaScript animations (include this before angular.js) -->
- <script src="bower_components/jquery/dist/jquery.js"></script>
-
- ...
-
- <!-- required module to enable animation support in AngularJS -->
- <script src="bower_components/angular-animate/angular-animate.js"></script>
-
- <!-- for JavaScript Animations -->
- <script src="js/animations.js"></script>
-
-...
-```
-
-<div class="alert alert-error">
- **Important:** Be sure to use jQuery version 2.1 or newer when using Angular 1.4; jQuery 1.x is
- not officially supported.
- Be sure to load jQuery before all AngularJS scripts, otherwise AngularJS won't detect jQuery and
- animations will not work as expected.
-</div>
-
-Animations can now be created within the CSS code (`animations.css`) as well as the JavaScript code (`animations.js`).
-But before we start, let's create a new module which uses the ngAnimate module as a dependency just like we did before
-with `ngResource`.
-
-## Module & Animations
-
-__`app/js/animations.js`.__
+<div doc-tutorial-reset="12"></div>
-```js
-angular.module('phonecatAnimations', ['ngAnimate']);
- // ...
- // this module will later be used to define animations
- // ...
-```
-And now let's attach this module to our application module...
+## Component Controller
-__`app/js/app.js`.__
+<br />
+**`app/phone-detail/phone-detail.component.js`:**
```js
-// ...
-angular.module('phonecatApp', [
- 'ngRoute',
-
- 'phonecatAnimations',
- 'phonecatControllers',
- 'phonecatFilters',
- 'phonecatServices',
-]);
-// ...
+ ...
+ controller: ['$http', '$routeParams',
+ function PhoneDetailController($http, $routeParams) {
+ var self = this;
+
+ self.setImage = function setImage(imageUrl) {
+ self.mainImageUrl = imageUrl;
+ };
+
+ $http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
+ self.phone = response.data;
+ self.setImage(self.phone.images[0]);
+ });
+ }
+ ]
+ ...
```
-Now, the phonecat module is animation aware. Let's make some animations!
+In the `phoneDetail` component's controller, we created the `mainImageUrl` model property and set
+its default value to the first phone image URL.
+We also created a `setImage()` method (to be used as event handler), that will change the value of
+`mainImageUrl`.
-## Animating ngRepeat with CSS Transition Animations
-We'll start off by adding CSS transition animations to our `ngRepeat` directive present on the `phone-list.html` page.
-First let's add an extra CSS class to our repeated element so that we can hook into it with our CSS animation code.
+## Component Template
-__`app/partials/phone-list.html`.__
+<br />
+**`app/phone-detail/phone-detail.template.html`:**
```html
-<!--
- Let's change the repeater HTML to include a new CSS class
- which we will later use for animations:
--->
-<ul class="phones">
- <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
- class="thumbnail phone-listing">
- <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
- <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
- <p>{{phone.snippet}}</p>
+<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" />
+...
+<ul class="phone-thumbs">
+ <li ng-repeat="img in $ctrl.phone.images">
+ <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
</li>
</ul>
-
+...
```
-Notice how we added the `phone-listing` CSS class? This is all we need in our HTML code to get animations working.
-
-Now for the actual CSS transition animation code:
-
-__`app/css/animations.css`__
-
-```css
-.phone-listing.ng-enter,
-.phone-listing.ng-leave,
-.phone-listing.ng-move {
- -webkit-transition: 0.5s linear all;
- -moz-transition: 0.5s linear all;
- -o-transition: 0.5s linear all;
- transition: 0.5s linear all;
-}
-
-.phone-listing.ng-enter,
-.phone-listing.ng-move {
- opacity: 0;
- height: 0;
- overflow: hidden;
-}
-
-.phone-listing.ng-move.ng-move-active,
-.phone-listing.ng-enter.ng-enter-active {
- opacity: 1;
- height: 120px;
-}
-
-.phone-listing.ng-leave {
- opacity: 1;
- overflow: hidden;
-}
-
-.phone-listing.ng-leave.ng-leave-active {
- opacity: 0;
- height: 0;
- padding-top: 0;
- padding-bottom: 0;
-}
-```
+We bound the `ngSrc` directive of the large image to the `$ctrl.mainImageUrl` property.
-As you can see our `phone-listing` CSS class is combined together with the animation hooks that occur when items are
-inserted into and removed from the list:
+We also registered an {@link ng.directive:ngClick ngClick} handler with thumbnail images. When a
+user clicks on one of the thumbnail images, the handler will use the `$ctrl.setImage()` method
+callback to change the value of the `$ctrl.mainImageUrl` property to the URL of the clicked
+thumbnail image.
- * The `ng-enter` class is applied to the element when a new phone is added to the list and rendered on the page.
- * The `ng-move` class is applied when items are moved around in the list.
- * The `ng-leave` class is applied when they're removed from the list.
+<img class="diagram" src="img/tutorial/tutorial_12.png">
-The phone listing items are added and removed depending on the data passed to the `ng-repeat` attribute.
-For example, if the filter data changes, the items will be animated in and out of the repeat list.
-Something important to note is that when an animation occurs, two sets of CSS classes
-are added to the element:
+# Testing
- 1. a "starting" class that represents the style at the beginning of the animation
- 2. an "active" class that represents the style at the end of the animation
+To verify this new feature, we added two E2E tests. One verifies that `mainImageUrl` is set to the
+first phone image URL by default. The second test clicks on several thumbnail images and verifies
+that the main image URL changes accordingly.
-The name of the starting class is the name of the event that is fired (like `enter`, `move` or `leave`) prefixed with
-`ng-`. So an `enter` event will result in a class called `ng-enter`.
+<br />
+**`e2e-tests/scenarios.js`:**
-The active class name is the same as the starting class's but with an `-active` suffix.
-This two-class CSS naming convention allows the developer to craft an animation, beginning to end.
+```js
+ ...
-In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
-list and are collapsed back down to **0 pixels** before being removed from the list.
-There's also a nice fade-in and fade-out effect that occurs at the same time. All of this is handled
-by the CSS transition declarations at the top of the example code above.
+ describe('View: Phone detail', function() {
-Although most modern browsers have good support for [CSS transitions](http://caniuse.com/#feat=css-transitions)
-and [CSS animations](http://caniuse.com/#feat=css-animation), IE9 and earlier do not.
-If you want animations that are backwards-compatible with older browsers, consider using JavaScript-based animations,
-which are described in detail below.
+ ...
+ it('should display the first phone image as the main phone image', function() {
+ var mainImage = element(by.css('img.phone'));
-## Animating `ngView` with CSS Keyframe Animations
+ expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+ });
-Next let's add an animation for transitions between route changes in {@link ngRoute.directive:ngView `ngView`}.
+ it('should swap the main image when clicking on a thumbnail image', function() {
+ var mainImage = element(by.css('img.phone'));
+ var thumbnails = element.all(by.css('.phone-thumbs img'));
-To start, let's add a new CSS class to our HTML like we did in the example above.
-This time, instead of the `ng-repeat` element, let's add it to the element containing the `ng-view` directive.
-In order to do this, we'll have to make some small changes to the HTML code so that we can have more control over our
-animations between view changes.
+ thumbnails.get(2).click();
+ expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
-__`app/index.html`.__
+ thumbnails.get(0).click();
+ expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+ });
-```html
-<div class="view-container">
- <div ng-view class="view-frame"></div>
-</div>
-```
+ });
-With this change, the `ng-view` directive is nested inside a parent element with
-a `view-container` CSS class. This class adds a `position: relative` style so that the positioning of the `ng-view`
-is relative to this parent as it animates transitions.
-
-With this in place, let's add the CSS for this transition animation to our `animations.css` file:
-
-__`app/css/animations.css`.__
-
-```css
-.view-container {
- position: relative;
-}
-
-.view-frame.ng-enter, .view-frame.ng-leave {
- background: white;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
-}
-
-.view-frame.ng-enter {
- -webkit-animation: 0.5s fade-in;
- -moz-animation: 0.5s fade-in;
- -o-animation: 0.5s fade-in;
- animation: 0.5s fade-in;
- z-index: 100;
-}
-
-.view-frame.ng-leave {
- -webkit-animation: 0.5s fade-out;
- -moz-animation: 0.5s fade-out;
- -o-animation: 0.5s fade-out;
- animation: 0.5s fade-out;
- z-index:99;
-}
-
-@keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-@-moz-keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-@-webkit-keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-@keyframes fade-out {
- from { opacity: 1; }
- to { opacity: 0; }
-}
-@-moz-keyframes fade-out {
- from { opacity: 1; }
- to { opacity: 0; }
-}
-@-webkit-keyframes fade-out {
- from { opacity: 1; }
- to { opacity: 0; }
-}
-
-/* don't forget about the vendor-prefixes! */
+ ...
```
-Nothing crazy here! Just a simple fade in and fade out effect between pages. The only out of the
-ordinary thing here is that we're using absolute positioning to position the next page (identified
-via `ng-enter`) on top of the previous page (the one that has the `ng-leave` class) while performing
-a cross fade animation in between. So as the previous page is just about to be removed, it fades out
-while the new page fades in right on top of it.
+You can now rerun the tests with `npm run protractor`.
-Once the leave animation is over then element is removed and once the enter animation is complete
-then the `ng-enter` and `ng-enter-active` CSS classes are removed from the element, causing it to rerender and
-reposition itself with its default CSS code (so no more absolute positioning once the animation is
-over). This works fluidly so that pages flow naturally between route changes without anything
-jumping around.
+We also have to refactor one of our unit tests, because of the addition of the `mainImageUrl` model
+property to the controller. As previously, we will use a mocked response.
-The CSS classes applied (the start and end classes) are much the same as with `ng-repeat`. Each time
-a new page is loaded the `ng-view` directive will create a copy of itself, download the template and
-append the contents. This ensures that all views are contained within a single HTML element which
-allows for easy animation control.
+<br />
+**`app/phone-detail/phone-detail.component.spec.js`:**
-For more on CSS animations, see the
-[Web Platform documentation](http://docs.webplatform.org/wiki/css/properties/animations).
-
-
-## Animating `ngClass` with JavaScript
-
-Let's add another animation to our application. Switching to our `phone-detail.html` page,
-we see that we have a nice thumbnail swapper. By hovering over the thumbnails listed on the page,
-the profile phone image changes. But how can we change this around to add animations?
-
-Let's think about it first. Basically, when you hover over a thumbnail image, you're changing the
-state of the profile image to reflect the newly selected thumbnail image.
-The best way to specify state changes within HTML is to use classes.
-Much like before, how we used a CSS class to specify an animation, this time the animation will
-occur whenever the CSS class itself changes.
-
-Whenever a new phone thumbnail is selected, the state changes and the `.active` CSS class is added
-to the matching profile image and the animation plays.
-
-Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
-have changed the way we display our large image:
+```js
+ ...
-__`app/partials/phone-detail.html`.__
+ describe('controller', function() {
+ var $httpBackend, ctrl
+ var xyzPhoneData = {
+ name: 'phone xyz',
+ images: ['image/url1.png', 'image/url2.png']
+ };
-```html
-<!-- We're only changing the top of the file -->
-<div class="phone-images">
- <img ng-src="{{img}}"
- class="phone"
- ng-repeat="img in phone.images"
- ng-class="{active:mainImageUrl==img}">
-</div>
+ beforeEach(inject(function($componentController, _$httpBackend_, _$routeParams_) {
+ $httpBackend = _$httpBackend_;
+ $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
-<h1>{{phone.name}}</h1>
+ ...
+ }));
-<p>{{phone.description}}</p>
+ it('should fetch phone details', function() {
+ expect(ctrl.phone).toBeUndefined();
-<ul class="phone-thumbs">
- <li ng-repeat="img in phone.images">
- <img ng-src="{{img}}" ng-mouseenter="setImage(img)">
- </li>
-</ul>
-```
-
-Just like with the thumbnails, we're using a repeater to display **all** the profile images as a
-list, however we're not animating any repeat-related animations. Instead, we're keeping our eye on
-the ng-class directive since whenever the `active` class is true then it will be applied to the
-element and will render as visible. Otherwise, the profile image is hidden. In our case, there is
-always one element that has the active class, and, therefore, there will always be one phone profile
-image visible on screen at all times.
-
-When the active class is added to the element, the `active-add` and the `active-add-active` classes
-are added just before to signal AngularJS to fire off an animation. When removed, the
-`active-remove` and the `active-remove-active` classes are applied to the element which in turn
-trigger another animation.
-
-To ensure that the phone images are displayed correctly when the page is first loaded we also tweak
-the detail page CSS styles:
-
-__`app/css/app.css`__
-```css
-.phone-images {
- background-color: white;
- width: 450px;
- height: 450px;
- overflow: hidden;
- position: relative;
- float: left;
-}
+ $httpBackend.flush();
+ expect(ctrl.phone).toEqual(xyzPhoneData);
+ });
-...
+ });
-img.phone {
- float: left;
- margin-right: 3em;
- margin-bottom: 2em;
- background-color: white;
- padding: 2em;
- height: 400px;
- width: 400px;
- display: none;
-}
-
-img.phone:first-child {
- display: block;
- }
+ ...
```
+Our unit tests should now be passing again.
-You may be thinking that we're just going to create another CSS-enabled animation.
-Although we could do that, let's take the opportunity to learn how to create JavaScript-enabled
-animations with the `animation()` module method.
-__`app/js/animations.js`.__
+# Experiments
-```js
-var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);
-
-phonecatAnimations.animation('.phone', function() {
-
- var animateUp = function(element, className, done) {
- if(className != 'active') {
- return;
- }
- element.css({
- position: 'absolute',
- top: 500,
- left: 0,
- display: 'block'
- });
+<div></div>
- jQuery(element).animate({
- top: 0
- }, done);
+* Similar to the `ngClick` directive, which binds an Angular expression to the `click` event, there
+ are built-in directives for all native events, such as `dblclick`, `focus`/`blur`, mouse and key
+ events, etc.
- return function(cancel) {
- if(cancel) {
- element.stop();
- }
- };
- }
-
- var animateDown = function(element, className, done) {
- if(className != 'active') {
- return;
- }
- element.css({
- position: 'absolute',
- left: 0,
- top: 0
- });
-
- jQuery(element).animate({
- top: -500
- }, done);
-
- return function(cancel) {
- if(cancel) {
- element.stop();
- }
- };
- }
+ Let's add a new controller method to the `phoneDetail` component's controller:
- return {
- addClass: animateUp,
- removeClass: animateDown
+ ```js
+ self.onDblclick = function onDblclick(imageUrl) {
+ alert('You double-clicked image: ' + imageUrl);
};
-});
-```
-
-Note that we're using [jQuery](http://jquery.com/) to implement the animation. jQuery
-isn't required to do JavaScript animations with AngularJS, but we're going to use it because writing
-your own JavaScript animation library is beyond the scope of this tutorial. For more on
-`jQuery.animate`, see the [jQuery documentation](http://api.jquery.com/animate/).
-
-The `addClass` and `removeClass` callback functions are called whenever a class is added or removed
-on the element that contains the class we registered, which is in this case `.phone`. When the `.active`
-class is added to the element (via the `ng-class` directive) the `addClass` JavaScript callback will
-be fired with `element` passed in as a parameter to that callback. The last parameter passed in is the
-`done` callback function. The purpose of `done` is so you can let Angular know when the JavaScript
-animation has ended by calling it.
+ ```
-The `removeClass` callback works the same way, but instead gets triggered when a class is removed
-from the element.
+ and add the following to the `<img>` element in `phone-detail.template.html`:
-Within your JavaScript callback, you create the animation by manipulating the DOM. In the code above,
-that's what the `element.css()` and the `element.animate()` are doing. The callback positions the next
-element with an offset of `500 pixels` and animates both the previous and the new items together by
-shifting each item up `500 pixels`. This results in a conveyor-belt like animation. After the `animate`
-function does its business, it calls `done`.
+ ```html
+ <img ... ng-dblclick="$ctrl.onDblclick(img)" />
+ ```
-Notice that `addClass` and `removeClass` each return a function. This is an **optional** function that's
-called when the animation is cancelled (when another animation takes place on the same element)
-as well as when the animation has completed. A boolean parameter is passed into the function which
-lets the developer know if the animation was cancelled or not. This function can be used to
-do any cleanup necessary for when the animation finishes.
+ Now, whenever you double-click on a thumbnail, an alert pops-up. Pretty annoying!
# Summary
-There you have it! We have created a web app in a relatively short amount of time. In the {@link
-the_end closing notes} we'll cover where to go from here.
+With the phone image swapper in place, we are ready for {@link step_13 step 13} to learn an even
+better way to fetch data.
-<ul doc-tutorial-nav="12"></ul>
-[bower]: http://bower.io/
+<ul doc-tutorial-nav="12"></ul>
diff --git a/docs/content/tutorial/step_13.ngdoc b/docs/content/tutorial/step_13.ngdoc
new file mode 100644
index 000000000000..a15c75963d06
--- /dev/null
+++ b/docs/content/tutorial/step_13.ngdoc
@@ -0,0 +1,321 @@
+@ngdoc tutorial
+@name 13 - REST and Custom Services
+@step 13
+@description
+
+<ul doc-tutorial-nav="13"></ul>
+
+
+In this step, we will change the way our application fetches data.
+
+* We define a custom service that represents a [RESTful][restful] client. Using this client we can
+ make requests for data to the server in an easier way, without having to deal with the lower-level
+ {@link ng.$http $http} API, HTTP methods and URLs.
+
+
+<div doc-tutorial-reset="13"></div>
+
+
+## Dependencies
+
+The RESTful functionality is provided by Angular in the {@link ngResource ngResource} module, which
+is distributed separately from the core Angular framework.
+
+Since we are using [Bower][bower] to install client-side dependencies, this step updates the
+`bower.json` configuration file to include the new dependency:
+
+<br />
+**`bower.json`:**
+
+```
+{
+ "name": "angular-phonecat",
+ "description": "A starter project for AngularJS",
+ "version": "0.0.0",
+ "homepage": "https://github.com/angular/angular-phonecat",
+ "license": "MIT",
+ "private": true,
+ "dependencies": {
+ "angular": "1.5.x",
+ "angular-mocks": "1.5.x",
+ "angular-resource": "1.5.x",
+ "angular-route": "1.5.x",
+ "bootstrap": "3.3.x"
+ }
+}
+```
+
+The new dependency `"angular-resource": "1.5.x"` tells bower to install a version of the
+angular-resource module that is compatible with version 1.5.x of Angular. We must tell bower to
+download and install this dependency.
+
+```
+npm install
+```
+
+<div class="alert alert-info">
+ **Note:** If you have bower installed globally, you can run `bower install`, but for this project
+ we have preconfigured `npm install` to run bower for us.
+</div>
+
+<div class="alert alert-warning">
+ **Warning:** If a new version of Angular has been released since you last ran `npm install`, then
+ you may have a problem with the `bower install` due to a conflict between the versions of
+ angular.js that need to be installed. If you run into this issue, simply delete your
+ `app/bower_components` directory and then run `npm install`.
+</div>
+
+
+## Service
+
+We create our own service to provide access to the phone data on the server. We will put the service
+in its own module, under `core`, so we can explicitly declare its dependency on `ngResource`:
+
+<br />
+**`app/core/phone/phone.module.js`:**
+
+```js
+angular.module('core.phone', ['ngResource']);
+```
+
+<br />
+**`app/core/phone/phone.service.js`:**
+
+```js
+ angular.
+ module('core.phone').
+ factory('Phone', ['$resource',
+ function($resource) {
+ return $resource('phones/:phoneId.json', {}, {
+ query: {
+ method: 'GET',
+ params: {phoneId: 'phones'},
+ isArray: true
+ }
+ });
+ }
+ ]);
+```
+
+We used the {@link angular.Module module API} to register a custom service using a factory function.
+We passed in the name of the service — `'Phone'` — and the factory function. The factory
+function is similar to a controller's constructor in that both can declare dependencies to be
+injected via function arguments. The `Phone` service declares a dependency on the `$resource`
+service, provided by the `ngResource` module.
+
+The {@link ngResource.$resource $resource} service makes it easy to create a [RESTful][restful]
+client with just a few lines of code. This client can then be used in our application, instead of
+the lower-level {@link ng.$http $http} service.
+
+<br />
+**`app/core/core.module.js`:**
+
+```js
+angular.module('core', ['core.phone']);
+```
+
+We need to add the `core.phone` module as a dependency of the `core` module.
+
+
+## Template
+
+Our custom resource service will be defined in `app/core/phone/phone.service.js`, so we need to
+include this file and the associated `.module.js` file in our layout template. Additionally, we also
+need to load the `angular-resource.js` file, which contains the `ngResource` module:
+
+<br />
+**`app/index.html`:**
+
+```html
+<head>
+ ...
+ <script src="bower_components/angular-resource/angular-resource.js"></script>
+ ...
+ <script src="core/phone/phone.module.js"></script>
+ <script src="core/phone/phone.service.js"></script>
+ ...
+</head>
+```
+
+
+## Component Controllers
+
+We can now simplify our component controllers (`PhoneListController` and `PhoneDetailController`) by
+factoring out the lower-level `$http` service, replacing it with the new `Phone` service. Angular's
+`$resource` service is easier to use than `$http` for interacting with data sources exposed as
+RESTful resources. It is also easier now to understand what the code in our controllers is doing.
+
+<br />
+**`app/phone-list/phone-list.module.js`:**
+
+```js
+angular.module('phoneList', ['core.phone']);
+```
+
+<br />
+**`app/phone-list/phone-list.component.js`:**
+
+```js
+ angular.
+ module('phoneList').
+ component('phoneList', {
+ templateUrl: 'phone-list/phone-list.template.html',
+ controller: ['Phone',
+ function PhoneListController(Phone) {
+ this.phones = Phone.query();
+ this.orderProp = 'age';
+ }
+ ]
+ });
+```
+
+<br />
+**`app/phone-detail/phone-detail.module.js`:**
+
+```js
+angular.module('phoneDetail', ['core.phone']);
+```
+
+<br />
+**`app/phone-detail/phone-detail.component.js`:**
+
+```js
+ angular.
+ module('phoneDetail').
+ component('phoneDetail', {
+ templateUrl: 'phone-detail/phone-detail.template.html',
+ controller: ['$routeParams', 'Phone',
+ function PhoneDetailController($routeParams, Phone) {
+ var self = this;
+ self.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+ self.setImage(phone.images[0]);
+ });
+
+ self.setImage = function setImage(imageUrl) {
+ self.mainImageUrl = imageUrl;
+ };
+ }
+ ]
+ });
+```
+
+Notice how in `PhoneListController` we replaced:
+
+```js
+$http.get('phones/phones.json').then(function(response) {
+ self.phones = response.data;
+});
+```
+
+with just:
+
+```js
+this.phones = Phone.query();
+```
+
+This is a simple and declarative statement that we want to query for all phones.
+
+An important thing to notice in the code above is that we don't pass any callback functions, when
+invoking methods of our `Phone` service. Although it looks as if the results were returned
+synchronously, that is not the case at all. What is returned synchronously is a "future" — an
+object, which will be filled with data, when the XHR response is received. Because of the
+data-binding in Angular, we can use this future and bind it to our template. Then, when the data
+arrives, the view will be updated automatically.
+
+Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
+we require, so in these cases, we can add a callback to process the server response. The
+`phoneDetail` component's controller illustrates this by setting the `mainImageUrl` in a callback.
+
+
+## Testing
+
+Because we are now using the {@link ngResource ngResource} module, it is necessary to update the
+Karma configuration file with angular-resource.
+
+<br />
+**`karma.conf.js`:**
+
+```js
+ files: [
+ 'bower_components/angular/angular.js',
+ 'bower_components/angular-resource/angular-resource.js',
+ ...
+ ],
+```
+
+We have added a unit test to verify that our new service is issuing HTTP requests and returns the
+expected "future" objects/arrays.
+
+The {@link ngResource.$resource $resource} service augments the response object with extra methods
+— e.g. for updating and deleting the resource — and properties (some of which are only
+meant to be accessed by Angular). If we were to use Jasmine's standard `.toEqual()` matcher, our
+tests would fail, because the test values would not match the responses exactly.
+
+To solve the problem, we instruct Jasmine to use a [custom equality tester][jasmine-equality] for
+comparing objects. We specify {@link angular.equals angular.equals} as our equality tester, which
+ignores functions and `$`-prefixed properties, such as those added by the `$resource` service.<br />
+(Remember that Angular uses the `$` prefix for its proprietary API.)
+
+<br />
+**`app/core/phone/phone.service.spec.js`:**
+
+```js
+describe('Phone', function() {
+ ...
+ var phonesData = [...];
+
+ // Add a custom equality tester before each test
+ beforeEach(function() {
+ jasmine.addCustomEqualityTester(angular.equals);
+ });
+
+ // Load the module that contains the `Phone` service before each test
+ ...
+
+ // Instantiate the service and "train" `$httpBackend` before each test
+ ...
+
+ // Verify that there are no outstanding expectations or requests after each test
+ afterEach(function () {
+ $httpBackend.verifyNoOutstandingExpectation();
+ $httpBackend.verifyNoOutstandingRequest();
+ });
+
+ it('should fetch the phones data from `/phones/phones.json`', function() {
+ var phones = Phone.query();
+
+ expect(phones).toEqual([]);
+
+ $httpBackend.flush();
+ expect(phones).toEqual(phonesData);
+ });
+
+});
+```
+
+Here we are using `$httpBackend`'s
+{@link ngMock.$httpBackend#verifyNoOutstandingExpectation verifyNoOutstandingExpectation()} and
+{@link ngMock.$httpBackend#verifyNoOutstandingExpectation verifyNoOutstandingRequest()} methods to
+verify that all expected requests have been sent and that no extra request is scheduled for later.
+
+Note that we have also modified our component tests to use the custom matcher when appropriate.
+
+You should now see the following output in the Karma tab:
+
+```
+Chrome 49.0: Executed 5 of 5 SUCCESS (0.123 secs / 0.104 secs)
+```
+
+
+# Summary
+
+Now that we have seen how to build a custom service as a RESTful client, we are ready for
+{@link step_14 step 14} to learn how to enhance the user experience with animations.
+
+
+<ul doc-tutorial-nav="13"></ul>
+
+
+[bower]: http://bower.io/
+[jasmine-equality]: https://jasmine.github.io/2.4/custom_equality.html
+[restful]: https://en.wikipedia.org/wiki/Representational_State_Transfer
diff --git a/docs/content/tutorial/step_14.ngdoc b/docs/content/tutorial/step_14.ngdoc
new file mode 100644
index 000000000000..378b6f0ffbfe
--- /dev/null
+++ b/docs/content/tutorial/step_14.ngdoc
@@ -0,0 +1,564 @@
+@ngdoc tutorial
+@name 14 - Animations
+@step 14
+@description
+
+<ul doc-tutorial-nav="14"></ul>
+
+
+In this step, we will enhance our web application by adding CSS and JavaScript animations on top of
+the template code we created earlier.
+
+* We now use the {@link ngAnimate ngAnimate} module to enable animations throughout the application.
+* We also rely on built-in directives to automatically trigger hooks for animations to tap into.
+* When an animation is found, it will run along with the actual DOM operation that is being issued
+ on the element at the given time (e.g. inserting/removing nodes on {@link ngRepeat ngRepeat} or
+ adding/removing classes on {@link ngClass ngClass}).
+
+
+<div doc-tutorial-reset="14"></div>
+
+
+## Dependencies
+
+The animation functionality is provided by Angular in the `ngAnimate` module, which is distributed
+separately from the core Angular framework. In addition we will use [jQuery][jquery] in this project
+to do extra JavaScript animations.
+
+Since we are using [Bower][bower] to install client-side dependencies, this step updates the
+`bower.json` configuration file to include the new dependencies:
+
+<br />
+**`bower.json`:**
+
+```
+{
+ "name": "angular-phonecat",
+ "description": "A starter project for AngularJS",
+ "version": "0.0.0",
+ "homepage": "https://github.com/angular/angular-phonecat",
+ "license": "MIT",
+ "private": true,
+ "dependencies": {
+ "angular": "1.5.x",
+ "angular-animate": "1.5.x",
+ "angular-mocks": "1.5.x",
+ "angular-resource": "1.5.x",
+ "angular-route": "1.5.x",
+ "bootstrap": "3.3.x",
+ "jquery": "2.2.x"
+ }
+}
+```
+
+* `"angular-animate": "1.5.x"` tells bower to install a version of the angular-animate module that
+ is compatible with version 1.5.x of Angular.
+* `"jquery": "2.2.x"` tells bower to install the latest patch release of the 2.2 version of jQuery.
+ Note that this is not an Angular library; it is the standard jQuery library. We can use bower to
+ install a wide range of 3rd party libraries.
+
+Now, we must tell bower to download and install these dependencies.
+
+```
+npm install
+```
+
+<div class="alert alert-info">
+ **Note:** If you have bower installed globally, you can run `bower install`, but for this project
+ we have preconfigured `npm install` to run bower for us.
+</div>
+
+<div class="alert alert-warning">
+ **Warning:** If a new version of Angular has been released since you last ran `npm install`, then
+ you may have a problem with the `bower install` due to a conflict between the versions of
+ angular.js that need to be installed. If you run into this issue, simply delete your
+ `app/bower_components` directory and then run `npm install`.
+</div>
+
+
+## How Animations work with `ngAnimate`
+
+To get an idea of how animations work with AngularJS, you might want to read the
+[Animations](guide/animations) section of the Developer Guide first.
+
+
+## Template
+
+In order to enable animations, we need to update `index.html`, loading the necessary dependencies
+(**angular-animate.js** and **jquery.js**) and the files that contain the CSS and JavaScript code
+used in CSS/JavaScript animations. The animation module, {@link ngAnimate ngAnimate}, contains the
+code necessary to make your application "animation aware".
+
+<br />
+**`app/index.html`:**
+
+```html
+ ...
+
+ <!-- Defines CSS necessary for animations -->
+ <link rel="stylesheet" href="app.animations.css" />
+
+ ...
+
+ <!-- Used for JavaScript animations (include this before angular.js) -->
+ <script src="bower_components/jquery/dist/jquery.js"></script>
+
+ ...
+
+ <!-- Adds animation support in AngularJS -->
+ <script src="bower_components/angular-animate/angular-animate.js"></script>
+
+ <!-- Defines JavaScript animations -->
+ <script src="app.animations.js"></script>
+
+ ...
+```
+
+<div class="alert alert-error">
+ **Important:** Be sure to use jQuery version 2.1 or newer, when using Angular 1.5; jQuery 1.x is
+ not officially supported.
+ In order for Angular to detect jQuery and take advantage of it, make sure to include `jquery.js`
+ before `angular.js`.
+</div>
+
+Animations can now be created within the CSS code (`app.animations.css`) as well as the JavaScript
+code (`app.animations.js`).
+
+
+## Dependencies
+
+We need to add a dependency on `ngAnimate` to our main module first:
+
+<br />
+**`app/app.module.js`:**
+
+```js
+ angular.
+ module('phonecatApp', [
+ 'ngAnimate',
+ ...
+ ]);
+```
+
+Now that our application is "animation aware", let's create some fancy animations!
+
+
+## CSS Transition Animations: Animating `ngRepeat`
+
+We will start off by adding CSS transition animations to our `ngRepeat` directive present on the
+`phoneList` component's template. We need to add an extra CSS class to our repeated element, in
+order to be able to hook into it with our CSS animation code.
+
+<br />
+**`app/phone-list/phone-list.template.html`:**
+
+```html
+...
+<ul class="phones">
+ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
+ class="thumbnail phone-list-item">
+ <a href="#!/phones/{{phone.id}}" class="thumb">
+ <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
+ </a>
+ <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
+ <p>{{phone.snippet}}</p>
+ </li>
+</ul>
+...
+```
+
+Did you notice the added `phone-list-item` CSS class? This is all we need in our HTML code to get
+animations working.
+
+Now for the actual CSS transition animation code:
+
+<br />
+**`app/app.animations.css`:**
+
+```css
+.phone-list-item.ng-enter,
+.phone-list-item.ng-leave,
+.phone-list-item.ng-move {
+ transition: 0.5s linear all;
+}
+
+.phone-list-item.ng-enter,
+.phone-list-item.ng-move {
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
+}
+
+.phone-list-item.ng-enter.ng-enter-active,
+.phone-list-item.ng-move.ng-move-active {
+ height: 120px;
+ opacity: 1;
+}
+
+.phone-list-item.ng-leave {
+ opacity: 1;
+ overflow: hidden;
+}
+
+.phone-list-item.ng-leave.ng-leave-active {
+ height: 0;
+ opacity: 0;
+ padding-bottom: 0;
+ padding-top: 0;
+}
+```
+
+As you can see, our `phone-list-item` CSS class is combined together with the animation hooks that
+occur when items are inserted into and removed from the list:
+
+* The `ng-enter` class is applied to the element when a new phone is added to the list and rendered
+ on the page.
+* The `ng-move` class is applied to the element when a phone's relative position in the list
+ changes.
+* The `ng-leave` class is applied to the element when a phone is removed from the list.
+
+The phone list items are added and removed based on the data passed to the `ngRepeat` directive.
+For example, if the filter data changes, the items will be animated in and out of the repeat list.
+
+Something important to note is that, when an animation occurs, two sets of CSS classes are added to
+the element:
+
+1. A "starting" class that represents the style at the beginning of the animation.
+2. An "active" class that represents the style at the end of the animation.
+
+The name of the starting class is the name of the event that is fired (like `enter`, `move` or
+`leave`) prefixed with `ng-`. So an `enter` event will result in adding the `ng-enter` class.
+
+The active class name is derived from the starting class by appending an `-active` suffix.
+This two-class CSS naming convention allows the developer to craft an animation, beginning to end.
+
+In the example above, animated elements are expanded from a height of **0px** to **120px** when they
+are added to the list and are collapsed back down to **0px** before being removed from the list.
+There is also a catchy fade-in/fade-out effect that occurs at the same time. All this is handled by
+the CSS transition declaration at the top of the CSS file.
+
+<div class="alert alert-warning">
+ Although all modern browsers have good support for [CSS transitions][caniuse-css-transitions] and
+ [CSS animations][caniuse-css-animation], IE9 and earlier IE versions do not.
+ If you want animations that are backwards-compatible with older browsers, consider using
+ JavaScript-based animations, which are demonstrated below.
+</div>
+
+
+## CSS Keyframe Animations: Animating `ngView`
+
+Next, let's add an animation for transitions between route changes in
+{@link ngRoute.directive:ngView ngView}.
+
+Again, we need to prepare our HTML template by adding a new CSS class, this time to the `ng-view`
+element. In order to gain more "expressive power" for our animations, we will also wrap the
+`[ng-view]` element in a container element.
+
+<br />
+**`app/index.html`:**
+
+```html
+<div class="view-container">
+ <div ng-view class="view-frame"></div>
+</div>
+```
+
+We have applied a `position: relative` CSS style to the `.view-container` wrapper, so that it is
+easier for us to manage the `.view-frame` element's positioning during the animation.
+
+With our preparation code in place, let's move on to the actual CSS styles for this transition
+animation.
+
+<br />
+**`app/app.animations.css`:**
+
+```css
+...
+
+.view-container {
+ position: relative;
+}
+
+.view-frame.ng-enter,
+.view-frame.ng-leave {
+ background: white;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.view-frame.ng-enter {
+ animation: 1s fade-in;
+ z-index: 100;
+}
+
+.view-frame.ng-leave {
+ animation: 1s fade-out;
+ z-index: 99;
+}
+
+@keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes fade-out {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
+/* Older browsers might need vendor-prefixes for keyframes and animation! */
+```
+
+Nothing fancy here! Just a simple fade-in/fade-out effect between pages. The only thing out of the
+ordinary here is that we are using absolute positioning to position the entering page (identified
+by the `ng-enter` class) on top of the leaving page (identified by the `ng-leave` class). At the
+same time a cross-fade animation is performed. So, as the previous page is just about to be removed,
+it fades out, while the new page fades in right on top of it.
+
+Once the `leave` animation is over, the element is removed from the DOM. Likewise, once the `enter`
+animation is complete, the `ng-enter` and `ng-enter-active` CSS classes are removed from the
+element, causing it to rerender and reposition itself with its default CSS styles (so no more
+absolute positioning once the animation is over). This works fluidly and the pages flow naturally
+between route changes, without anything jumping around.
+
+The applied CSS classes are much the same as with `ngRepeat`. Each time a new page is loaded the
+`ngView` directive will create a copy of itself, download the template and append the contents. This
+ensures that all views are contained within a single HTML element, which allows for easy animation
+control.
+
+For more on CSS animations, see the [Web Platform documentation][webplatform-animations].
+
+
+## Animating `ngClass` with JavaScript
+
+Let's add another animation to our application. On our `phone-detail.template.html` view, we have a
+nice thumbnail swapper. By clicking on the thumbnails listed on the page, the profile phone image
+changes. But how can we incorporate animations?
+
+Let's give it some thought first. Basically, when a user clicks on a thumbnail image, they are
+changing the state of the profile image to reflect the newly selected thumbnail image. The best way
+to specify state changes within HTML is to use classes. Much like before — when we used a CSS
+class to drive the animation — this time the animation will occur when the CSS class itself
+changes.
+
+Every time a phone thumbnail is selected, the state changes and the `.selected` CSS class is added
+to the matching profile image. This will trigger the animation.
+
+We will start by tweaking our HTML code in `phone-detail.template.html`. Notice that we have changed
+the way we display our large image:
+
+<br />
+**`app/phone-detail/phone-detail.template.html`:**
+
+```html
+<div class="phone-images">
+ <img ng-src="{{img}}" class="phone"
+ ng-class="{selected: img === $ctrl.mainImageUrl}"
+ ng-repeat="img in $ctrl.phone.images" />
+</div>
+
+...
+```
+
+Just like with the thumbnails, we are using a repeater to display **all** the profile images as a
+list, however we're not animating any repeat-related transitions. Instead, we will be keeping our
+eye on each element's classes and especially the `selected` class, since its presence or absence
+will determine if the element is visible or hidden. The addition/removal of the `selected` class is
+managed by the {@link ngClass ngClass} directive, based on the specified condition
+(`img === $ctrl.mainImageUrl`).
+In our case, there is always exactly one element that has the `selected` class, and therefore there
+will be exactly one phone profile image visible on the screen at all times.
+
+When the `selected` class is added to an element, the `selected-add` and `selected-add-active`
+classes are added just before to signal AngularJS to fire off an animation. When the `selected`
+class is removed from an element, the `selected-remove` and `selected-remove-active` classes are
+applied to the element, triggering another animation.
+
+Finally, in order to ensure that the phone images are displayed correctly when the page is first
+loaded, we also tweak the detail page CSS styles:
+
+<br />
+**`app/app.css`:**
+
+```css
+...
+
+.phone {
+ background-color: white;
+ display: none;
+ float: left;
+ height: 400px;
+ margin-bottom: 2em;
+ margin-right: 3em;
+ padding: 2em;
+ width: 400px;
+}
+
+.phone:first-child {
+ display: block;
+}
+
+.phone-images {
+ background-color: white;
+ float: left;
+ height: 450px;
+ overflow: hidden;
+ position: relative;
+ width: 450px;
+}
+
+...
+```
+
+You may be thinking that we are just going to create another CSS-based animation. Although we could
+do that, let's take the opportunity to learn how to create JavaScript-based animations with the
+{@link ng.angular.Module#animation .animation()} module method.
+
+<br />
+**`app/app.animations.js`:**
+
+```js
+ angular.
+ module('phonecatApp').
+ animation('.phone', function phoneAnimationFactory() {
+ return {
+ addClass: animateIn,
+ removeClass: animateOut
+ };
+
+ function animateIn(element, className, done) {
+ if (className !== 'selected') return;
+
+ element.
+ css({
+ display: 'block',
+ position: 'absolute',
+ top: 500,
+ left: 0
+ }).
+ animate({
+ top: 0
+ }, done);
+
+ return function animateInEnd(wasCanceled) {
+ if (wasCanceled) element.stop();
+ };
+ }
+
+ function animateOut(element, className, done) {
+ if (className !== 'selected') return;
+
+ element.
+ css({
+ position: 'absolute',
+ top: 0,
+ left: 0
+ }).
+ animate({
+ top: -500
+ }, done);
+
+ return function animateOutEnd(wasCanceled) {
+ if (wasCanceled) element.stop();
+ };
+ }
+ });
+```
+
+We are creating a custom animation by specifying the target elements via a CSS class selector (here
+`.phone`) and an animation _factory_ function (here `phoneAnimationFactory()`). The factory function
+returns an object associating specific _events_ (object keys) to animation _callbacks_ (object
+values). The _events_ correspond to DOM actions that `ngAnimate` recognizes and can hook into, such
+as `addClass`/`removeClass`/`setClass`, `enter`/`move`/`leave` and `animate`. The associated
+callbacks are called by `ngAnimate` at appropriate times.
+
+For more info on animation factories, check out the
+{@link ng.$animateProvider#register API Reference}.
+
+In this case, we are interested in a class getting added to/removed from a `.phone` element, thus we
+specify callbacks for the `addClass` and `removeClass` events. When the `selected` class is added to
+an element (via the `ngClass` directive), the `addClass` JavaScript callback will be executed with
+`element` passed in as a parameter. The last parameter passed in is the `done` callback function. We
+call `done()` to let Angular know that our custom JavaScript animation has ended. The `removeClass`
+callback works the same way, but instead gets executed when a class is removed.
+
+Note that we are using [jQuery][jquery]'s `animate()` helper to implement the animation. jQuery
+isn't required to do JavaScript animations with AngularJS, but we use it here anyway in order to
+keep the example simple. More info on `jQuery.animate()` can be found in the
+[jQuery documentation][jquery-animate].
+
+Within the event callbacks, we create the animation by manipulating the DOM. In the code above,
+this is achieved using `element.css()` and `element.animate()`. As a result the new element is
+positioned with an offset of **500px** and then both elements — the previous and the new
+— are animated together by shifting each one up by **500px**. The outcome is a conveyor-belt
+like animation. After the `animate()` function has completed the animation, it calls `done` to
+notify Angular.
+
+You may have noticed that each animation callback returns a function. This is an **optional**
+function, which (if provided) will be called when the animation ends, either because it ran to
+completion or because it was canceled (for example another animation took place on the same
+element). A boolean parameter (`wasCanceled`) is passed to the function, letting the developer know
+if the animation was canceled or not. Use this function to do any necessary clean-up.
+
+
+# Experiments
+
+<div></div>
+
+* Reverse the animation, so that the elements animate downwards.
+
+* Make the animation run faster or slower, by passing a `duration` argument to `.animate()`:
+
+ ```js
+ element.css({...}).animate({...}, 1000 /* 1 second */, done);
+ ```
+
+* Make the animations "asymmetrical". For example, have the previous element fade out, while the new
+ element zooms in:
+
+ ```js
+ // animateIn()
+ element.css({
+ display: 'block',
+ opacity: 1,
+ position: 'absolute',
+ width: 0,
+ height: 0,
+ top: 200,
+ left: 200
+ }).animate({
+ width: 400,
+ height: 400,
+ top: 0,
+ left: 0
+ }, done);
+
+ // animateOut()
+ element.animate({
+ opacity: 0
+ }, done);
+ ```
+
+* Go crazy and come up with your own funky animations!
+
+
+# Summary
+
+Our application is now much more pleasant to use, thanks to the smooth transitions between pages
+and UI states.
+
+There you have it! We have created a web application in a relatively short amount of time. In the
+{@link the_end closing notes} we will cover where to go from here.
+
+
+<ul doc-tutorial-nav="14"></ul>
+
+
+[bower]: http://bower.io/
+[caniuse-css-animation]: http://caniuse.com/#feat=css-animation
+[caniuse-css-transitions]: http://caniuse.com/#feat=css-transitions
+[jquery]: https://jquery.com/
+[jquery-animate]: https://api.jquery.com/animate/
+[webplatform-animations]: https://docs.webplatform.org/wiki/css/properties/animations
diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc
index 0c7a899eb375..e555f5f9d63e 100644
--- a/docs/content/tutorial/the_end.ngdoc
+++ b/docs/content/tutorial/the_end.ngdoc
@@ -9,11 +9,18 @@ previous steps using the `git checkout` command.
For more details and examples of the Angular concepts we touched on in this tutorial, see the
{@link guide/ Developer Guide}.
-When you are ready to start developing a project using Angular, we recommend that you bootstrap
-your development with the [angular-seed](https://github.com/angular/angular-seed) project.
+When you are ready to start developing a project using AngularJS, we recommend that you bootstrap
+your development with the [angular-seed project][angular-seed].
-We hope this tutorial was useful to you and that you learned enough about Angular to make you want
-to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
-own, and that you might be interested in {@link misc/contribute contributing} to Angular.
+We hope this tutorial was useful to you and that you learned enough about AngularJS to make you want
+to learn more. We especially hope you are inspired to go out and develop Angular web applications of
+your own, and that you might be interested in {@link misc/contribute contributing} to AngularJS.
-If you have questions or feedback or just want to say "hi", please post a message at (https://groups.google.com/forum/#!forum/angular).
+If you have questions or feedback or just want to say "hi", please post a message to the
+[mailing list][mailing-list]. You can also find us on [IRC][irc] or [Gitter][gitter].
+
+
+[angular-seed]: https://github.com/angular/angular-seed
+[gitter]: https://gitter.im/angular/angular.js
+[irc]: http://webchat.freenode.net/?channels=angularjs&uio=d4
+[mailing-list]: https://groups.google.com/forum/#!forum/angular
diff --git a/docs/img/tutorial/tutorial_00_final.png b/docs/img/tutorial/tutorial_00_final.png
deleted file mode 100644
index 838a094483e6..000000000000
Binary files a/docs/img/tutorial/tutorial_00_final.png and /dev/null differ
diff --git a/docs/img/tutorial/tutorial_02.png b/docs/img/tutorial/tutorial_02.png
index b4c1cab16d95..95e3b4825636 100644
Binary files a/docs/img/tutorial/tutorial_02.png and b/docs/img/tutorial/tutorial_02.png differ
diff --git a/docs/img/tutorial/tutorial_03.png b/docs/img/tutorial/tutorial_03.png
index 3e432a352e6f..e71d001f5c81 100644
Binary files a/docs/img/tutorial/tutorial_03.png and b/docs/img/tutorial/tutorial_03.png differ
diff --git a/docs/img/tutorial/tutorial_04.png b/docs/img/tutorial/tutorial_04.png
deleted file mode 100644
index 3d028771dc24..000000000000
Binary files a/docs/img/tutorial/tutorial_04.png and /dev/null differ
diff --git a/docs/img/tutorial/tutorial_05.png b/docs/img/tutorial/tutorial_05.png
index be3021742731..97ce61472b12 100644
Binary files a/docs/img/tutorial/tutorial_05.png and b/docs/img/tutorial/tutorial_05.png differ
diff --git a/docs/img/tutorial/tutorial_05.pptx b/docs/img/tutorial/tutorial_05.pptx
deleted file mode 100644
index 1afe4c3df5b1..000000000000
Binary files a/docs/img/tutorial/tutorial_05.pptx and /dev/null differ
diff --git a/docs/img/tutorial/tutorial_06.png b/docs/img/tutorial/tutorial_06.png
new file mode 100644
index 000000000000..1a2403480f35
Binary files /dev/null and b/docs/img/tutorial/tutorial_06.png differ
diff --git a/docs/img/tutorial/tutorial_07_final.png b/docs/img/tutorial/tutorial_07_final.png
deleted file mode 100644
index 3e7776c4601e..000000000000
Binary files a/docs/img/tutorial/tutorial_07_final.png and /dev/null differ
diff --git a/docs/img/tutorial/tutorial_08-09_final.png b/docs/img/tutorial/tutorial_08-09_final.png
deleted file mode 100644
index 02601d241bc7..000000000000
Binary files a/docs/img/tutorial/tutorial_08-09_final.png and /dev/null differ
diff --git a/docs/img/tutorial/tutorial_09.png b/docs/img/tutorial/tutorial_09.png
new file mode 100644
index 000000000000..cd6bd000cb2b
Binary files /dev/null and b/docs/img/tutorial/tutorial_09.png differ
diff --git a/docs/img/tutorial/tutorial_10-11_final.png b/docs/img/tutorial/tutorial_10-11_final.png
deleted file mode 100644
index 55a821ad188a..000000000000
Binary files a/docs/img/tutorial/tutorial_10-11_final.png and /dev/null differ
diff --git a/docs/img/tutorial/tutorial_10.png b/docs/img/tutorial/tutorial_10.png
new file mode 100644
index 000000000000..6119dd0f9ffd
Binary files /dev/null and b/docs/img/tutorial/tutorial_10.png differ
diff --git a/docs/img/tutorial/tutorial_12.png b/docs/img/tutorial/tutorial_12.png
new file mode 100644
index 000000000000..8f9c20496737
Binary files /dev/null and b/docs/img/tutorial/tutorial_12.png differ
diff --git a/docs/img/tutorial/xhr_service_final.png b/docs/img/tutorial/xhr_service_final.png
deleted file mode 100644
index b7250e3e3046..000000000000
Binary files a/docs/img/tutorial/xhr_service_final.png and /dev/null differ
diff --git a/images/docs/tutorial/tutorial_02.svg/image11.png b/images/docs/tutorial/tutorial_02.svg/image11.png
index 30541dc6a02c..b661c139b65a 100644
Binary files a/images/docs/tutorial/tutorial_02.svg/image11.png and b/images/docs/tutorial/tutorial_02.svg/image11.png differ
diff --git a/images/docs/tutorial/tutorial_02.svg/tutorial_02.svg b/images/docs/tutorial/tutorial_02.svg/tutorial_02.svg
index a1f7e3ae57b6..c1e8fe241cfc 100644
--- a/images/docs/tutorial/tutorial_02.svg/tutorial_02.svg
+++ b/images/docs/tutorial/tutorial_02.svg/tutorial_02.svg
@@ -1,3 +1,1352 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(381 12.5) rotate(90) scale(39)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(38 21) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_3" gradientTransform="translate(51 305.211) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_3" gradientTransform="translate(41 336.711) rotate(90) scale(22)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Courier New" font-size="12" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_3" gradientTransform="translate(80 99.789) rotate(90) scale(39)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_6" xl:href="#Gradient" gradientTransform="translate(381.458 76) rotate(90) scale(87.2524)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_3" gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)"/><linearGradient id="Obj_Gradient_8" xl:href="#Gradient_3" gradientTransform="translate(145.5 211) rotate(90) scale(54)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_9" xl:href="#Gradient" gradientTransform="translate(408.25 189) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_a" xl:href="#Gradient" gradientTransform="translate(417.25 198) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_b" xl:href="#Gradient" gradientTransform="translate(426.25 207) rotate(90) scale(76)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#2fff41"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#38ff41"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#45ff51"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_7" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#36ff37"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_c" xl:href="#Gradient_3" gradientTransform="translate(50 273.836) rotate(90) scale(22.3284)"/><font-face font-family="Courier New" font-size="12" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_8" viewBox="-9 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M -8 0 L 0 3 L 0 -3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id390_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id186_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id185_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id485_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id490_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id491_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id542_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id553_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id554_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/></g><g id="id390_Graphic"><rect x="269" y="6" width="227" height="388" stroke="#4fff75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id427_Graphic"><rect x="5" y="6" width="251" height="388" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(346.5 365.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><ellipse cx="381" cy="32" rx="50.50008" ry="19.500031" fill="url(#Obj_Gradient)"/><ellipse cx="381" cy="32" rx="50.50008" ry="19.500031" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(354.512 17.33585)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.784972" y="11" textLength="28.68164">Root </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="12.446105" y="25" textLength="34.02539">Scope</tspan></text><g id="id192_Graphic"><rect x="14" y="21" width="48" height="22" fill="url(#Obj_Gradient_2)"/><rect x="14" y="21" width="48" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 26.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><html></tspan></text></g><g id="id186_Graphic"><rect x="24" y="305.211" width="54" height="22" fill="url(#Obj_Gradient_3)"/><rect x="24" y="305.211" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(29 310.711)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id185_Graphic"><rect x="14" y="336.711" width="54" height="22" fill="url(#Obj_Gradient_4)"/><rect x="14" y="336.711" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 342.211)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></html></tspan></text></g><text transform="translate(102 365.423)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><line x1="62.5" y1="32" x2="320.09997" y2="32" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id485_Graphic"><text transform="translate(163 17.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="20.896484" y="10" textLength="43.20703">ng-app</tspan></text></g><g id="id423_Graphic"><rect x="23" y="99.789" width="114" height="39" fill="url(#Obj_Gradient_5)"/><rect x="23" y="99.789" width="114" height="39" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(28 104.789)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="90.01465"> ng-controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="102.0166"> "PhoneListCtrl"></tspan></text></g><line x1="9" y1="406" x2="742" y2="407" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><ellipse cx="381.458" cy="119.6262" rx="69.79211" ry="43.62627" fill="url(#Obj_Gradient_6)"/><ellipse cx="381.458" cy="119.6262" rx="69.79211" ry="43.62627" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(346.867 98.72965)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="1.9977719" y="11" textLength="75.36914">PhoneListCtrl </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="21.002655" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(340.666 135)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phones: Array</tspan></text><line x1="137.5" y1="119.353325" x2="298.26608" y2="119.53317" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke-dasharray="4,4"/><g id="id490_Graphic"><rect x="32" y="179.836" width="36" height="22.3284" fill="url(#Obj_Gradient_7)"/><rect x="32" y="179.836" width="36" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(37 185.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="24.003906"><ul></tspan></text></g><g id="id491_Graphic"><rect x="41" y="211" width="209" height="54" fill="url(#Obj_Gradient_8)"/><rect x="41" y="211" width="209" height="54" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(46 216)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="192.03125"><li ng-repeat="phone in phones"></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="96.015625"> {{phone.name}}</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="156.02539"> <p>{{phone.snippet}}</p></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="41" textLength="30.004883"></li></tspan></text></g><line x1="290.25" y1="426.874" x2="325.35" y2="426.874" marker-end="url(#FilledArrow_Marker_3)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="345.25" y="418.748" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(350.25 420.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><ellipse cx="408.25" cy="227" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_9)"/><ellipse cx="408.25" cy="227" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(369.435 205.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.72461">phone scope</tspan></text><text transform="translate(369.5 230.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="417.25" cy="236" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_a)"/><ellipse cx="417.25" cy="236" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(378.435 214.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.72461">phone scope</tspan></text><text transform="translate(378.5 239.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="426.25" cy="245" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_b)"/><ellipse cx="426.25" cy="245" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(387.435 216.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="13.817383" y="11" textLength="52.69922">Repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="21.487305" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(387.5 253.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><line x1="250.49956" y1="233.60421" x2="332.75668" y2="230.16053" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke-dasharray="4,4"/><line x1="250.49999" y1="237.22725" x2="341.60483" y2="236.55676" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke-dasharray="4,4"/><line x1="250.49984" y1="240.618" x2="350.65567" y2="243.11523" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke-dasharray="4,4"/><line x1="381.22746" y1="75.500216" x2="381.1564" y2="61.89983" marker-end="url(#FilledArrow_Marker_4)" stroke="#2fff41" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="412.8158" y1="207.3973" x2="400.17048" y2="172.00271" marker-end="url(#FilledArrow_Marker_5)" stroke="#38ff41" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="405.61535" y1="198.17106" x2="397.69308" y2="172.41257" marker-end="url(#FilledArrow_Marker_6)" stroke="#45ff51" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="398.7548" y1="188.94566" x2="394.73238" y2="172.82481" marker-end="url(#FilledArrow_Marker_7)" stroke="#36ff37" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id542_Graphic"><rect x="32" y="273.836" width="36" height="22.3284" fill="url(#Obj_Gradient_c)"/><rect x="32" y="273.836" width="36" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(37 279.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="24.003906"><ul></tspan></text></g><g id="id553_Graphic"><text transform="translate(153 104.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="10" textLength="93.615234">ng-controller</tspan></text></g><g id="id554_Graphic"><rect x="508" y="6" width="235.75" height="388" stroke="#1e23ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(598 365.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.150879" y="18" textLength="12.0058594">V</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="26.840332" y="18" textLength="27.008789">iew</tspan></text><rect x="520" y="28" width="216" height="171" id="path"/><clipPath id="clip_path"><use xl:href="#path"/></clipPath><g clip-path="url(#clip_path)"><image xl:href="image11.png" width="216" height="171" transform="translate(520 28)"/></g><line x1="437" y1="207" x2="515.18482" y2="164.1949" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="8" y1="426.748" x2="46.1" y2="426.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><rect x="64.6242" y="418.748" width="157.376" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(69.6242 420.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text><line x1="431.5" y1="199" x2="517.47383" y2="111.216195" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="423" y1="190" x2="519.5832" y2="52.554673" marker-end="url(#FilledArrow_Marker_2)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id607_Graphic"><text transform="translate(266.5 211.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="2.5947266" y="10" textLength="64.810547">ng-repeat</tspan></text></g><line x1="544.9" y1="435" x2="573.1" y2="435" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_8)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><rect x="586" y="422" width="157.75" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(591 423.62685)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.9433594" y="11" textLength="50.689453">Model / V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.421875" y="11" textLength="89.384766">iew Data-binding</tspan></text><line x1="535" y1="426" x2="573.1" y2="426" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g></g></svg>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_02.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_02.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="472.5"
+ inkscape:cy="353.97843"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,87.2524,-87.2524,0,381.458,80.8)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,193.8)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,202.8)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,211.8)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient4781"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.73313675,0,0,2.6042886,130.99791,-416.07607)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient4889"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.2381057,0,0,2.2987578,280.21087,-376.09611)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5160"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.7989586,0,0,2.5951043,471.04482,-437.07075)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5236"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526331,287.08128,-156.32299)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5255"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526324,385.77295,-156.77298)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5273"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526049,212.86878,-1.2413087)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5295"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526049,212.86878,-1.2413087)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff" />
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_02.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="#1e23ff" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="translate(0,1.6)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="url(#clip_path)"
+ id="g3648"
+ transform="translate(-3.2,-14.4)">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_02.svg\image11.png"
+ xlink:href="image11.png"
+ width="216"
+ height="171"
+ transform="translate(520,28)"
+ id="image3650" />
+ </g>
+ <g
+ id="g5349">
+ <g
+ id="g5116">
+ <line
+ x1="394.68604"
+ y1="193.69986"
+ x2="390.66364"
+ y2="177.57901"
+ id="line3619"
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)" />
+ <ellipse
+ cx="408.25"
+ cy="231.80002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3569"
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1" />
+ </g>
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3664"
+ y2="57.354668"
+ x2="519.58319"
+ y1="194.80002"
+ x1="423" />
+ </g>
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="#f9ff29" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="348.10001"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="358.08731"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="86.000015"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="92.981461"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="101.98145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <line
+ x1="9"
+ y1="406"
+ x2="742"
+ y2="407"
+ id="line3519"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="2"
+ stroke="black" />
+ <line
+ x1="290.25"
+ y1="426.874"
+ x2="325.35"
+ y2="426.874"
+ id="line3561"
+ marker-end="url(#FilledArrow_Marker_3)"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="2"
+ stroke="#17ff1b" />
+ <rect
+ x="345.25"
+ y="418.748"
+ width="117"
+ height="17.2537"
+ id="rect3563"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="black" />
+ <text
+ transform="translate(350.25 420.37485)"
+ id="text3565"
+ fill="black">
+ <tspan
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567"
+ font-family="Helvetica"> Scope Inheritance</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <clipPath
+ id="clip_path">
+ <use
+ xlink:href="#path"
+ id="use3646" />
+ </clipPath>
+ <line
+ x1="8"
+ y1="426.748"
+ x2="46.1"
+ y2="426.748"
+ id="line3654"
+ stroke-dasharray="4,4"
+ marker-end="url(#FilledArrow_Marker)"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="black" />
+ <rect
+ x="64.6242"
+ y="418.748"
+ width="157.376"
+ height="17.2537"
+ id="rect3656"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="black" />
+ <text
+ transform="translate(69.6242 420.37485)"
+ id="text3658"
+ fill="black">
+ <tspan
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660"
+ font-family="Helvetica"> Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ x1="544.9"
+ y1="435"
+ x2="573.1"
+ y2="435"
+ id="line3671"
+ marker-end="url(#FilledArrow_Marker)"
+ marker-start="url(#FilledArrow_Marker_8)"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="black" />
+ <rect
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="black" />
+ <text
+ transform="translate(591 423.62685)"
+ id="text3675"
+ fill="black">
+ <tspan
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677"
+ font-family="Helvetica">Model / V</tspan>
+ <tspan
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679"
+ font-family="Helvetica">iew Data-binding</tspan>
+ </text>
+ <line
+ x1="535"
+ y1="426"
+ x2="573.1"
+ y2="426"
+ id="line3681"
+ marker-end="url(#FilledArrow_Marker)"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="black" />
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:125%;letter-spacing:0px;word-spacing:0px;"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px;" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g4874">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient4781);fill-opacity:1;stroke:#000000;stroke-width:1.31046247;stroke-opacity:1"
+ y="-225.96269"
+ x="25.426043"
+ height="208.34314"
+ width="23.46034"
+ id="rect4773" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4855"
+ y="40.308334"
+ x="24.045816"
+ style="font-style:normal;font-weight:normal;font-size:11px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;-inkscape-font-specification:'sans-serif, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;"
+ xml:space="preserve"><tspan
+ style="-inkscape-font-specification:'Courier New';font-family:'Courier New';font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:12px"
+ id="tspan4861"
+ sodipodi:role="line"><html <tspan
+ id="tspan4872"
+ style="-inkscape-font-specification:'Courier New Bold';font-family:'Courier New';font-weight:bold;font-style:normal;font-stretch:normal;font-variant:normal">ng-app="phonecatApp"</tspan>></tspan></text>
+ </g>
+ <g
+ id="g5073">
+ <line
+ style="stroke:#000000;stroke-width:1.98176777;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353673, 3.96353673;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="122.77953"
+ x2="298.62021"
+ y1="122.50909"
+ x1="209.49088" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="115.83334"
+ x="212.31879"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="115.83334"
+ x="212.31879"
+ id="tspan4964"
+ sodipodi:role="line">ng-controller</tspan></text>
+ </g>
+ <g
+ id="g5065">
+ <g
+ id="g4863">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient4889);fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ y="-208.28679"
+ x="101.92364"
+ height="183.90063"
+ width="39.619385"
+ id="rect4881" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="30.4"
+ y="117.8"
+ id="text5037"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5039"
+ x="30.4"
+ y="117.8"
+ style="font-size:12px"><body <tspan
+ style="font-weight:bold;font-size:12px"
+ id="tspan5043">ng-controller=</tspan></tspan><tspan
+ sodipodi:role="line"
+ x="30.4"
+ y="132.8"
+ id="tspan5041"
+ style="font-size:12px"><tspan
+ style="font-weight:bold;font-size:12px"
+ id="tspan5045"> "PhoneListController"</tspan>></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401">
+ <rect
+ transform="matrix(0,1,-1,0,1.6,0)"
+ style="fill:url(#linearGradient5160);fill-opacity:1;stroke:#000000;stroke-width:0.94374067;stroke-opacity:1"
+ y="-247.62813"
+ x="211.9948"
+ height="207.60834"
+ width="57.566677"
+ id="rect5152" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="47.227081"
+ y="224.94374"
+ id="text5134"
+ sodipodi:linespacing="125%"
+ transform="translate(1.6,0)"><tspan
+ sodipodi:role="line"
+ id="tspan5136"
+ x="47.227081"
+ y="224.94374"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"><li <tspan
+ style="font-weight:bold"
+ id="tspan5194">ng-repeat="phone in phones"</tspan>></tspan><tspan
+ sodipodi:role="line"
+ x="47.227081"
+ y="237.44374"
+ id="tspan5138"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <span><tspan
+ style="font-weight:bold"
+ id="tspan5192">{{phone.name}}</tspan></span></tspan><tspan
+ sodipodi:role="line"
+ x="47.227081"
+ y="249.94374"
+ id="tspan5142"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <p><tspan
+ style="font-weight:bold"
+ id="tspan5190">{{phone.snippet}}</tspan></p></tspan><tspan
+ sodipodi:role="line"
+ x="47.227081"
+ y="262.44373"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5188"></li></tspan></text>
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5236);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-97.538773"
+ x="179.85938"
+ height="64.421059"
+ width="23.827093"
+ id="rect5228" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5230"
+ y="194.925"
+ x="50.927048"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="194.925"
+ x="50.927048"
+ id="tspan5232"
+ sodipodi:role="line"><ul></tspan></text>
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5255);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-97.988762"
+ x="278.55103"
+ height="64.421059"
+ width="23.827093"
+ id="rect5249" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5251"
+ y="293.61667"
+ x="46.577053"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="293.61667"
+ x="46.577053"
+ id="tspan5253"
+ sodipodi:role="line"></ul></tspan></text>
+ </g>
+ <g
+ id="g5282"
+ transform="translate(139.07292,237.32083)">
+ <rect
+ id="rect5267"
+ width="23.827093"
+ height="64.420837"
+ x="105.64687"
+ y="57.542709"
+ style="fill:url(#linearGradient5273);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="-115.35419"
+ y="120.71252"
+ id="text5269"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="-115.35419"
+ y="120.71252"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan5297"></html></tspan></text>
+ </g>
+ <g
+ id="g5287"
+ transform="translate(147.25625,205.27292)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5295);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="57.542709"
+ x="105.64687"
+ height="64.420837"
+ width="23.827093"
+ id="rect5289" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5291"
+ y="120.71252"
+ x="-115.35419"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="120.71252"
+ x="-115.35419"
+ sodipodi:role="line"
+ id="tspan5293"></body></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g5130">
+ <g
+ id="g5931">
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3662"
+ y2="101.87585"
+ x2="519.04675"
+ y1="204.45663"
+ x1="431.42535" />
+ <line
+ x1="406.43829"
+ y1="203.06274"
+ x2="398.51602"
+ y2="177.30424"
+ id="line3617"
+ style="stroke:#45ff51;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)" />
+ <ellipse
+ cx="417.25"
+ cy="240.80002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3581"
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1" />
+ </g>
+ </g>
+ <g
+ id="g4948">
+ <ellipse
+ style="fill:url(#Obj_Gradient);stroke:#000000;stroke-opacity:1"
+ id="ellipse3456"
+ ry="19.500031"
+ rx="50.50008"
+ cy="36.799995"
+ cx="381" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3736"
+ y="32.779163"
+ x="382.65625"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="32.779163"
+ x="382.65625"
+ id="tspan3738"
+ sodipodi:role="line">Root</tspan><tspan
+ id="tspan3740"
+ y="47.779163"
+ x="382.65625"
+ sodipodi:role="line">Scope</tspan></text>
+ </g>
+ <g
+ id="g5085">
+ <line
+ style="stroke:#2fff41;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_4)"
+ id="line3613"
+ y2="66.699829"
+ x2="381.1564"
+ y1="80.300209"
+ x1="381.22745" />
+ <ellipse
+ id="ellipse3521"
+ ry="43.62627"
+ rx="69.792107"
+ cy="124.42619"
+ cx="381.45801"
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-opacity:1" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3746"
+ y="114.20209"
+ x="381.01041"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan3772"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="114.20209"
+ x="381.01041"
+ sodipodi:role="line">PhoneListController</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="129.20209"
+ x="381.01041"
+ sodipodi:role="line"
+ id="tspan3830">Scope</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="140.06589"
+ x="382.41666"
+ sodipodi:role="line"
+ id="tspan3838" /><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="150.97992"
+ x="381.01041"
+ sodipodi:role="line"
+ id="tspan3836">phones: Array</tspan></text>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <g
+ id="g5121">
+ <g
+ id="g5946">
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3652"
+ y2="144.39316"
+ x2="518.27075"
+ y1="213.98273"
+ x1="436.84396" />
+ <line
+ x1="419.3533"
+ y1="211.46603"
+ x2="406.70798"
+ y2="176.07147"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="249.80002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ </g>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3808"
+ y="235.26251"
+ x="427.09375"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="235.26251"
+ x="427.09375"
+ id="tspan3810"
+ sodipodi:role="line">Repeater</tspan><tspan
+ id="tspan3812"
+ y="250.26251"
+ x="427.09375"
+ sodipodi:role="line">Scope</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan3816"
+ y="265.26251"
+ x="427.09375"
+ sodipodi:role="line" /><tspan
+ id="tspan3824"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ y="277.04034"
+ x="427.09375"
+ sodipodi:role="line">phone: Object</tspan></text>
+ </g>
+ <g
+ id="g5768">
+ <line
+ style="stroke:#000000;stroke-width:1.78409266;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:3.56818574, 3.56818574;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3499"
+ y2="36.799995"
+ x2="318.72687"
+ y1="36.799995"
+ x1="226.25697" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4869"
+ y="29.426964"
+ x="251.40479"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="29.426964"
+ x="251.40479"
+ id="tspan4871"
+ sodipodi:role="line">ng-app</tspan></text>
+ </g>
+ <g
+ id="g5219">
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker_2)"
+ x1="250.49956"
+ y1="233.60422"
+ x2="332.75668"
+ y2="230.16052"
+ id="line3607"
+ transform="translate(0,4.8)" />
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker_2)"
+ x1="250.49998"
+ y1="237.22725"
+ x2="341.60483"
+ y2="236.55676"
+ id="line3609"
+ transform="translate(0,4.8)" />
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker_2)"
+ x1="250.49985"
+ y1="240.618"
+ x2="350.65567"
+ y2="243.11523"
+ id="line3611"
+ transform="translate(0,4.8)" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5212"
+ y="227.43333"
+ x="270.10837"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="227.43333"
+ x="270.10837"
+ id="tspan5214"
+ sodipodi:role="line">ng-repeat</tspan></text>
+ </g>
+ </g>
+</svg>
diff --git a/images/docs/tutorial/tutorial_03.svg/image11.png b/images/docs/tutorial/tutorial_03.svg/image11.png
new file mode 100644
index 000000000000..b661c139b65a
Binary files /dev/null and b/images/docs/tutorial/tutorial_03.svg/image11.png differ
diff --git a/images/docs/tutorial/tutorial_03.svg/image13.png b/images/docs/tutorial/tutorial_03.svg/image13.png
deleted file mode 100644
index 6a467a14149f..000000000000
Binary files a/images/docs/tutorial/tutorial_03.svg/image13.png and /dev/null differ
diff --git a/images/docs/tutorial/tutorial_03.svg/tutorial_03.svg b/images/docs/tutorial/tutorial_03.svg/tutorial_03.svg
index ef4a58ee2119..69961d5fc3db 100644
--- a/images/docs/tutorial/tutorial_03.svg/tutorial_03.svg
+++ b/images/docs/tutorial/tutorial_03.svg/tutorial_03.svg
@@ -1,3 +1,1377 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:30:36 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(381 11.5) rotate(90) scale(39)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(38 20) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_3" gradientTransform="translate(51 340.211) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_3" gradientTransform="translate(41 370.711) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="12" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_3" gradientTransform="translate(80 116.789) rotate(90) scale(39)"/><linearGradient id="Obj_Gradient_6" xl:href="#Gradient" gradientTransform="translate(382.1625 88) rotate(90) scale(92.2524)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_3" gradientTransform="translate(47 214.836) rotate(90) scale(22.3284)"/><linearGradient id="Obj_Gradient_8" xl:href="#Gradient_3" gradientTransform="translate(143.5 246) rotate(90) scale(54)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_9" xl:href="#Gradient" gradientTransform="translate(403.25 224) rotate(90) scale(76)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_a" xl:href="#Gradient" gradientTransform="translate(412.25 233) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_b" xl:href="#Gradient" gradientTransform="translate(421.25 242) rotate(90) scale(76)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#2fff41"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#38ff41"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#45ff51"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#36ff37"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_c" xl:href="#Gradient_3" gradientTransform="translate(47 305.836) rotate(90) scale(22.3284)"/><linearGradient id="Obj_Gradient_d" xl:href="#Gradient_3" gradientTransform="translate(115 170.836) rotate(90) scale(33.164)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_7" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_8" viewBox="-6 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M -4.8 0 L 0 1.8 L 0 -1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_9" viewBox="-9 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M -8 0 L 0 3 L 0 -3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id390_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id186_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id185_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id606_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id490_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id491_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id542_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id604_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id554_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id614_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/></g><g id="id390_Graphic"><rect x="265.164" y="5" width="227" height="427" stroke="#4fff75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id427_Graphic"><rect x="4.328" y="5" width="251" height="427" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(346.5 405.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><ellipse cx="381" cy="31" rx="50.50008" ry="19.500031" fill="url(#Obj_Gradient)"/><ellipse cx="381" cy="31" rx="50.50008" ry="19.500031" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(354.512 16.33585)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.784972" y="11" textLength="28.68164">Root </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="12.446105" y="25" textLength="34.02539">Scope</tspan></text><line x1="6" y1="465.748" x2="42.0636" y2="465.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><rect x="59.6242" y="457.748" width="157.376" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(64.6242 459.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text><g id="id192_Graphic"><rect x="14" y="20" width="48" height="22" fill="url(#Obj_Gradient_2)"/><rect x="14" y="20" width="48" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 25.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><html></tspan></text></g><g id="id186_Graphic"><rect x="24" y="340.211" width="54" height="22" fill="url(#Obj_Gradient_3)"/><rect x="24" y="340.211" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(29 345.711)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id185_Graphic"><rect x="14" y="370.711" width="54" height="22" fill="url(#Obj_Gradient_4)"/><rect x="14" y="370.711" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 376.211)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></html></tspan></text></g><text transform="translate(102 405.423)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><line x1="62.5" y1="31" x2="320.09997" y2="31" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id606_Graphic"><text transform="translate(163 16.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="20.896484" y="10" textLength="43.20703">ng-app</tspan></text></g><g id="id423_Graphic"><rect x="23" y="116.789" width="114" height="39" fill="url(#Obj_Gradient_5)"/><rect x="23" y="116.789" width="114" height="39" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(28 121.789)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="90.01465"> ng-controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="102.0166"> "PhoneListCtrl"></tspan></text></g><line x1="6" y1="445" x2="737.75" y2="445" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><ellipse cx="382.1625" cy="134.1262" rx="69.83761" ry="46.126274" fill="url(#Obj_Gradient_6)"/><ellipse cx="382.1625" cy="134.1262" rx="69.83761" ry="46.126274" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(345.001 102.6051)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.0258219" y="11" textLength="75.36914">PhoneListCtrl </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="21.030705" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(338.666 155.746)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phones: Array</tspan></text><line x1="137.49999" y1="135.87744" x2="301.9293" y2="134.70051" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id490_Graphic"><rect x="29" y="214.836" width="36" height="22.3284" fill="url(#Obj_Gradient_7)"/><rect x="29" y="214.836" width="36" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 220.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="24.003906"><ul></tspan></text></g><g id="id491_Graphic"><rect x="39" y="246" width="209" height="54" fill="url(#Obj_Gradient_8)"/><rect x="39" y="246" width="209" height="54" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(44 251)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="192.03125"><li ng-repeat="phone in phones"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="96.015625"> {{phone.name}}</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="156.02539"> <p>{{phone.snippet}}</p></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="41" textLength="30.004883"></li></tspan></text></g><line x1="288.25" y1="465.874" x2="323.35" y2="465.874" marker-end="url(#FilledArrow_Marker_2)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="343.25" y="457.748" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(348.25 459.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><ellipse cx="403.25" cy="262" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_9)"/><ellipse cx="403.25" cy="262" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(364.435 240.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.72461">phone scope</tspan></text><text transform="translate(364.5 265.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="412.25" cy="271" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_a)"/><ellipse cx="412.25" cy="271" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(373.435 249.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.72461">phone scope</tspan></text><text transform="translate(373.5 274.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="421.25" cy="280" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_b)"/><ellipse cx="421.25" cy="280" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(382.435 251.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="13.817383" y="11" textLength="52.69922">Repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="21.487305" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(382.5 287.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><line x1="248.49955" y1="268.55343" x2="330.75762" y2="265.06993" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="248.49999" y1="272.21861" x2="339.60485" y2="271.54063" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="248.49984" y1="275.64627" x2="348.65593" y2="278.17047" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="381.63687" y1="87.50128" x2="381.33696" y2="60.899166" marker-end="url(#FilledArrow_Marker_3)" stroke="#2fff41" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="411.07115" y1="242.01259" x2="397.02598" y2="189.5961" marker-end="url(#FilledArrow_Marker_4)" stroke="#38ff41" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="403.86331" y1="232.84724" x2="394.4302" y2="189.93406" marker-end="url(#FilledArrow_Marker_5)" stroke="#45ff51" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="396.93344" y1="223.69659" x2="391.41686" y2="190.24425" marker-end="url(#FilledArrow_Marker_6)" stroke="#36ff37" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id542_Graphic"><rect x="29" y="305.836" width="36" height="22.3284" fill="url(#Obj_Gradient_c)"/><rect x="29" y="305.836" width="36" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 311.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="24.003906"><ul></tspan></text></g><g id="id604_Graphic"><text transform="translate(153 121.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="0" y="10" textLength="93.615234">ng-controller</tspan></text></g><g id="id554_Graphic"><rect x="502" y="5" width="235.75" height="427" stroke="#1e23ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(598 405.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.150879" y="18" textLength="12.0058594">V</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="26.840332" y="18" textLength="27.008789">iew</tspan></text><g id="id614_Graphic"><rect x="29" y="170.836" width="172" height="33.164" fill="url(#Obj_Gradient_d)"/><rect x="29" y="170.836" width="172" height="33.164" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 175.836)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="102.0166">Fulltext Search: </tspan></text></g><text transform="translate(49.3198 187.718)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="144.02344"><input ng-model="query"></tspan></text><text transform="translate(337.666 144)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">query: String</tspan></text><rect x="516" y="15" width="216" height="233" id="path"/><clipPath id="clip_path"><use xl:href="#path"/></clipPath><g clip-path="url(#clip_path)"><image xl:href="image13.png" width="216" height="233" transform="translate(516 15)"/></g><line x1="451.328" y1="241" x2="531.1649" y2="164.83375" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="434.88508" y1="143.8232" x2="606.11492" y2="34.922796" marker-end="url(#FilledArrow_Marker_7)" marker-start="url(#FilledArrow_Marker_8)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id607_Graphic"><text transform="translate(266 249.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="2.5947266" y="10" textLength="64.810547">ng-repeat</tspan></text></g><line x1="465.164" y1="254" x2="530.76343" y2="215.9657" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="437.328" y1="230" x2="532.16587" y2="110.748426" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="538.025" y1="470.748" x2="566.225" y2="470.748" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><rect x="579.125" y="457.748" width="157.75" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(584.125 459.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.9433594" y="11" textLength="50.689453">Model / V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.421875" y="11" textLength="89.384766">iew Data-binding</tspan></text><line x1="528.125" y1="461.748" x2="566.225" y2="461.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g></g></svg>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_03.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="318.71745"
+ inkscape:cy="345.625"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-nodes="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,102.88779,-103.19865,0,394.21319,80.800018)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,225.8)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,234.8)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,243.8)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient4781"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.73313675,0,0,2.6042886,130.99791,-416.07607)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5160"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.7989586,0,0,2.9859898,471.04482,-498.47623)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5236"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526331,287.08128,-156.32299)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5255"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526324,385.77295,-156.77298)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5273"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526049,212.86878,-1.2413087)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5295"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient6524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient7626"
+ gradientTransform="matrix(0,61.742024,-90.853164,0,394.05902,114.66875)" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66" />
+ <g
+ id="g8412">
+ <rect
+ y="146.47916"
+ x="20.572918"
+ height="159.64584"
+ width="260.86456"
+ id="rect8405"
+ style="fill:#deffff;fill-opacity:1;stroke:#800080;stroke-width:1.20000005;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:2.4, 2.4;stroke-dashoffset:0;stroke-opacity:1" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8407"
+ y="162.03207"
+ x="133.79451"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'"
+ y="162.03207"
+ x="133.79451"
+ id="tspan8409"
+ sodipodi:role="line">Component template</tspan></text>
+ </g>
+ <g
+ id="g7634"
+ transform="translate(0,12.8)" />
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_02.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="#1e23ff" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="matrix(0.86586821,0,0,1,66.529369,2.6627312e-4)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1.07466745;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="url(#clip_path)"
+ id="g3648"
+ transform="translate(-3.2,17.6)">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_03.svg\image11.png"
+ xlink:href="image11.png"
+ width="216"
+ height="171"
+ transform="translate(520,28)"
+ id="image3650" />
+ </g>
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic"
+ transform="matrix(1.1180279,0,0,1,-0.59013944,0)">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ style="stroke:#f9ff29;stroke-width:0.94574422;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="359.30005"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="369.28735"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="98.800003"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="105.78145"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="114.78145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <clipPath
+ id="clip_path">
+ <use
+ xlink:href="#path"
+ id="use3646" />
+ </clipPath>
+ <g
+ id="g8463">
+ <line
+ id="line3519"
+ y2="407"
+ x2="742"
+ y1="406"
+ x1="9"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+ <g
+ id="g8447">
+ <line
+ style="stroke:#17ff1b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_3)"
+ x1="290.25"
+ y1="426.87399"
+ x2="325.35001"
+ y2="426.87399"
+ id="line3561" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="345.25"
+ y="418.74799"
+ width="117"
+ height="17.2537"
+ id="rect3563" />
+ <text
+ style="fill:#000000"
+ transform="translate(350.25,420.37485)"
+ id="text3565">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567">Scope Inheritance</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker)"
+ x1="8"
+ y1="426.74799"
+ x2="46.099998"
+ y2="426.74799"
+ id="line3654" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="64.624199"
+ y="418.74799"
+ width="157.37601"
+ height="17.2537"
+ id="rect3656" />
+ <text
+ style="fill:#000000"
+ transform="translate(69.6242,420.37485)"
+ id="text3658">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660">Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ x1="544.90002"
+ y1="435"
+ x2="573.09998"
+ y2="435"
+ id="line3671" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673" />
+ <text
+ style="fill:#000000"
+ transform="translate(591,423.62685)"
+ id="text3675">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677">Model / V</tspan>
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679">iew Data-binding</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker)"
+ x1="535"
+ y1="426"
+ x2="573.09998"
+ y2="426"
+ id="line3681" />
+ </g>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:125%;letter-spacing:0px;word-spacing:0px;"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px;" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g4874"
+ transform="translate(-4.8,0)">
+ <g
+ id="g6499">
+ <rect
+ id="rect4773"
+ width="23.46034"
+ height="208.34314"
+ x="25.426043"
+ y="-225.96269"
+ style="fill:url(#linearGradient4781);fill-opacity:1;stroke:#000000;stroke-width:1.31046247;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="24.045816"
+ y="40.308334"
+ id="text4855"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4861"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ x="24.045816"
+ y="40.308334"><html ng-app="phonecatApp"></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g7346"
+ transform="translate(0,8)">
+ <line
+ style="stroke:#000000;stroke-width:1.98176777;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353671, 3.96353671;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="122.77953"
+ x2="297.94241"
+ y1="122.50909"
+ x1="129.81679" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="115.83334"
+ x="149.91855"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="115.83334"
+ x="149.91855"
+ id="tspan4964"
+ sodipodi:role="line">phoneList component</tspan></text>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401"
+ transform="translate(-4.8,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5160);fill-opacity:1;stroke:#000000;stroke-width:0.94374067;stroke-opacity:1"
+ y="-280.49896"
+ x="211.9948"
+ height="238.87918"
+ width="57.566677"
+ id="rect5152" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="47.227081"
+ y="224.94374"
+ id="text5134"
+ sodipodi:linespacing="125%"
+ transform="translate(1.6,0)"><tspan
+ sodipodi:role="line"
+ id="tspan5136"
+ x="47.227081"
+ y="224.94374"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"><li ng-repeat="phone in <tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan7223">$ctrl.phones</tspan>"></tspan><tspan
+ sodipodi:role="line"
+ x="47.227081"
+ y="237.44374"
+ id="tspan5138"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <span>{{phone.name}}</span></tspan><tspan
+ sodipodi:role="line"
+ x="47.227081"
+ y="249.94374"
+ id="tspan5142"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <p>{{phone.snippet}}</p></tspan><tspan
+ sodipodi:role="line"
+ x="47.227081"
+ y="262.44373"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5188"></li></tspan></text>
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5236);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-97.538773"
+ x="179.85938"
+ height="64.421059"
+ width="23.827093"
+ id="rect5228" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5230"
+ y="194.925"
+ x="50.927048"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="194.925"
+ x="50.927048"
+ id="tspan5232"
+ sodipodi:role="line"><ul></tspan></text>
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5255);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-97.988762"
+ x="278.55103"
+ height="64.421059"
+ width="23.827093"
+ id="rect5249" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5251"
+ y="293.61667"
+ x="46.577053"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="293.61667"
+ x="46.577053"
+ id="tspan5253"
+ sodipodi:role="line"></ul></tspan></text>
+ </g>
+ <g
+ id="g5282"
+ transform="translate(134.27292,237.32083)">
+ <rect
+ id="rect5267"
+ width="23.827093"
+ height="64.420837"
+ x="105.64687"
+ y="57.542709"
+ style="fill:url(#linearGradient5273);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="-115.35419"
+ y="120.71252"
+ id="text5269"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="-115.35419"
+ y="120.71252"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan5297"></html></tspan></text>
+ </g>
+ <g
+ id="g6511"
+ transform="translate(-4.8,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5295);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-132.5052"
+ x="310.9198"
+ height="107.2125"
+ width="23.827093"
+ id="rect5289" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5291"
+ y="325.98544"
+ x="31.902063"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan6507"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="31.902063"
+ sodipodi:role="line"></phone-list></tspan></text>
+ </g>
+ <g
+ id="g6516"
+ transform="translate(-3.2,-193.6)">
+ <g
+ id="g6526"
+ transform="translate(-1.6,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient6524);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-132.5052"
+ x="310.9198"
+ height="107.2125"
+ width="23.827093"
+ id="rect6518" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text6520"
+ y="325.98544"
+ x="35.102062"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan6522"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="35.102062"
+ sodipodi:role="line"><phone-list></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g7689">
+ <line
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)"
+ id="line3619"
+ y2="194.15622"
+ x2="390.66364"
+ y1="228.27219"
+ x1="394.68604" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1"
+ id="ellipse3569"
+ ry="38.000061"
+ rx="62.250099"
+ cy="263.80002"
+ cx="408.25" />
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3664"
+ y2="89.354668"
+ x2="519.58319"
+ y1="226.80002"
+ x1="423" />
+ </g>
+ </g>
+ <g
+ id="g7694">
+ <line
+ x1="431.42535"
+ y1="236.45663"
+ x2="519.04675"
+ y2="133.87585"
+ id="line3662"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ style="stroke:#45ff51;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)"
+ id="line3617"
+ y2="192.60309"
+ x2="396.98181"
+ y1="236.71809"
+ x1="407.2153" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1"
+ id="ellipse3581"
+ ry="38.000061"
+ rx="62.250099"
+ cy="272.80002"
+ cx="417.25" />
+ </g>
+ <g
+ id="g4948">
+ <ellipse
+ style="fill:url(#Obj_Gradient);stroke:#000000;stroke-opacity:1"
+ id="ellipse3456"
+ ry="19.500031"
+ rx="50.50008"
+ cy="36.799995"
+ cx="381" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3736"
+ y="32.779163"
+ x="382.65625"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="32.779163"
+ x="382.65625"
+ id="tspan3738"
+ sodipodi:role="line">Root</tspan><tspan
+ id="tspan3740"
+ y="47.779163"
+ x="382.65625"
+ sodipodi:role="line">Scope</tspan></text>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <g
+ id="g7699">
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3652"
+ y2="176.39316"
+ x2="518.27075"
+ y1="245.98273"
+ x1="436.84396" />
+ <line
+ x1="420.08658"
+ y1="244.66832"
+ x2="404.3446"
+ y2="191.15108"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="281.80002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3808"
+ y="267.26251"
+ x="427.09375"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="267.26251"
+ x="427.09375"
+ id="tspan3810"
+ sodipodi:role="line">Repeater</tspan><tspan
+ id="tspan3812"
+ y="282.26251"
+ x="427.09375"
+ sodipodi:role="line">Scope</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan3816"
+ y="297.26251"
+ x="427.09375"
+ sodipodi:role="line" /><tspan
+ id="tspan3824"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="309.04034"
+ x="427.09375"
+ sodipodi:role="line">phone: Object</tspan></text>
+ </g>
+ <g
+ id="g7338">
+ <line
+ style="stroke:#000000;stroke-width:1.78409266;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:3.5681858, 3.5681858;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3499"
+ y2="36.799995"
+ x2="318.37701"
+ y1="36.799995"
+ x1="222.99382" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4869"
+ y="29.426964"
+ x="251.40479"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="29.426964"
+ x="251.40479"
+ id="tspan4871"
+ sodipodi:role="line">ng-app</tspan></text>
+ </g>
+ <g
+ id="g8326">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.00000008, 4.00000008;marker-end:url(#FilledArrow_Marker_2)"
+ x1="276.12057"
+ y1="237.6172"
+ x2="335.293"
+ y2="250.94875"
+ id="line3607" />
+ <line
+ style="stroke:#000000;stroke-width:1.99999976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999995, 3.99999995;marker-end:url(#FilledArrow_Marker_2)"
+ x1="275.87503"
+ y1="237.94217"
+ x2="343.74875"
+ y2="261.64017"
+ id="line3609" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:4.00000007, 4.00000007;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ x1="276.52792"
+ y1="238.19859"
+ x2="352.4332"
+ y2="275.70544"
+ id="line3611" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5212"
+ y="233.83336"
+ x="281.30841"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="233.83336"
+ x="281.30841"
+ id="tspan5214"
+ sodipodi:role="line">ng-repeat</tspan></text>
+ </g>
+ <g
+ id="g7188"
+ transform="matrix(1.5939525,0,0,1.6153098,529.66665,-46.268913)" />
+ <g
+ id="g8428"
+ transform="translate(-1.3938144,-0.9814433)" />
+ <g
+ id="g8434">
+ <ellipse
+ id="ellipse3521"
+ ry="51.443981"
+ rx="82.54731"
+ cy="132.24391"
+ cx="394.2132"
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-width:1;stroke-opacity:1" />
+ <ellipse
+ id="ellipse7624"
+ ry="30.871063"
+ rx="72.67231"
+ cy="145.5401"
+ cx="394.05789"
+ style="fill:url(#linearGradient7626);stroke:#000000;stroke-width:1;stroke-opacity:1" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="393.35413"
+ y="139.02505"
+ id="text3746"
+ sodipodi:linespacing="125%"><tspan
+ id="tspan3838"
+ sodipodi:role="line"
+ x="393.35413"
+ y="139.02505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">PhoneListController</tspan><tspan
+ sodipodi:role="line"
+ x="393.35413"
+ y="154.02505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ id="tspan6556" /><tspan
+ id="tspan7381"
+ sodipodi:role="line"
+ x="393.35413"
+ y="165.80289"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle">phones: Array</tspan></text>
+ <line
+ style="stroke:#2fff41;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_4)"
+ id="line3613"
+ y2="66.074188"
+ x2="385.45029"
+ y1="80.168762"
+ x1="388.44269" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path7194"
+ d="m 379.95926,68.99198 18.42235,18.199224"
+ style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f10000;stroke-width:2.4000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ sodipodi:nodetypes="cc"
+ transform="translate(-1.3938144,-0.98144328)" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path6572"
+ d="M 398.3816,68.99198 379.95925,87.191204"
+ style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f10000;stroke-width:2.4000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ sodipodi:nodetypes="cc"
+ transform="translate(-1.3938144,-0.98144328)" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text7630"
+ y="103.45833"
+ x="343.66037"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="103.45833"
+ x="343.66037"
+ id="tspan7632"
+ sodipodi:role="line">phoneList Scope</tspan></text>
+ </g>
+ </g>
+</svg>
diff --git a/images/docs/tutorial/tutorial_04.svg/image15.png b/images/docs/tutorial/tutorial_04.svg/image15.png
deleted file mode 100644
index e30bc5182f23..000000000000
Binary files a/images/docs/tutorial/tutorial_04.svg/image15.png and /dev/null differ
diff --git a/images/docs/tutorial/tutorial_04.svg/tutorial_04.svg b/images/docs/tutorial/tutorial_04.svg/tutorial_04.svg
deleted file mode 100644
index c5ccc0a9864c..000000000000
--- a/images/docs/tutorial/tutorial_04.svg/tutorial_04.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-12 09:25:54 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(381 13.5) rotate(90) scale(39)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(61.5 22) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_3" gradientTransform="translate(51 342.211) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_3" gradientTransform="translate(41 372.711) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="12" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_3" gradientTransform="translate(80 100.789) rotate(90) scale(39)"/><linearGradient id="Obj_Gradient_6" xl:href="#Gradient" gradientTransform="translate(382.4125 72) rotate(90) scale(92.2524)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_3" gradientTransform="translate(47 216.836) rotate(90) scale(22.3284)"/><linearGradient id="Obj_Gradient_8" xl:href="#Gradient_3" gradientTransform="translate(143.5 248) rotate(90) scale(54)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_9" xl:href="#Gradient" gradientTransform="translate(403.25 226) rotate(90) scale(76)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_a" xl:href="#Gradient" gradientTransform="translate(412.25 235) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_b" xl:href="#Gradient" gradientTransform="translate(421.25 244) rotate(90) scale(76)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#2fff41"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#38ff41"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#45ff51"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#36ff37"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_c" xl:href="#Gradient_3" gradientTransform="translate(47 307.836) rotate(90) scale(22.3284)"/><linearGradient id="Obj_Gradient_d" xl:href="#Gradient_3" gradientTransform="translate(116.775 176.836) rotate(90) scale(33.164)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_7" viewBox="-9 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M -8 0 L 0 3 L 0 -3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_e" xl:href="#Gradient_3" gradientTransform="translate(122.0875 145.836) rotate(90) scale(27.211)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_8" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_9" viewBox="-6 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M -4.8 0 L 0 1.8 L 0 -1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id390_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id589_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id186_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id185_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id606_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id490_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id491_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id542_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id604_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id554_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id560_Graphic" filter="url(#Shadow)"/></g><rect x="512.825" y="17" width="216" height="124" id="path"/><clipPath id="clip_path"><use xl:href="#path"/></clipPath><g clip-path="url(#clip_path)"><image xl:href="image15.png" width="216" height="124" transform="translate(512.825 17)"/></g><g id="id390_Graphic"><rect x="264.5" y="7.00002" width="227" height="415" stroke="#4fff75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id427_Graphic"><rect x="4" y="7.00002" width="251" height="415" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(346.5 394.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><ellipse cx="381" cy="33" rx="50.50008" ry="19.500031" fill="url(#Obj_Gradient)"/><ellipse cx="381" cy="33" rx="50.50008" ry="19.500031" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(354.512 18.33585)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.784972" y="11" textLength="28.68164">Root </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="12.446105" y="25" textLength="34.02539">Scope</tspan></text><line x1="6" y1="454.748" x2="42.0636" y2="454.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id589_Graphic"><rect x="59.6242" y="446.748" width="157.376" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(64.6242 448.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text></g><g id="id192_Graphic"><rect x="14" y="22" width="95" height="22" fill="url(#Obj_Gradient_2)"/><rect x="14" y="22" width="95" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 27.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="78.012695"><html ng-app></tspan></text></g><g id="id186_Graphic"><rect x="24" y="342.211" width="54" height="22" fill="url(#Obj_Gradient_3)"/><rect x="24" y="342.211" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(29 347.711)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id185_Graphic"><rect x="14" y="372.711" width="54" height="22" fill="url(#Obj_Gradient_4)"/><rect x="14" y="372.711" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 378.211)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></html></tspan></text></g><text transform="translate(102 394.423)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><line x1="109.5" y1="33" x2="320.09997" y2="33" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id606_Graphic"><text transform="translate(163 18.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="20.896484" y="10" textLength="43.20703">ng-app</tspan></text></g><g id="id423_Graphic"><rect x="23" y="100.789" width="114" height="39" fill="url(#Obj_Gradient_5)"/><rect x="23" y="100.789" width="114" height="39" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(28 105.789)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="90.01465"> ng-controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="102.0166"> "PhoneListCtrl"></tspan></text></g><line x1="6" y1="434" x2="737.75" y2="434" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><ellipse cx="382.4125" cy="118.1262" rx="92.087647" ry="46.126274" fill="url(#Obj_Gradient_6)"/><ellipse cx="382.4125" cy="118.1262" rx="92.087647" ry="46.126274" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(331.819 84.6051)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="15.739422" y="11" textLength="75.36914">PhoneListCtrl </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="34.744305" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(328.666 117)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phones: Array</tspan></text><line x1="137.49999" y1="119.87776" x2="279.93455" y2="118.859074" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id490_Graphic"><rect x="29" y="216.836" width="36" height="22.3284" fill="url(#Obj_Gradient_7)"/><rect x="29" y="216.836" width="36" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 222.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="24.003906"><ul></tspan></text></g><g id="id491_Graphic"><rect x="39" y="248" width="209" height="54" fill="url(#Obj_Gradient_8)"/><rect x="39" y="248" width="209" height="54" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(44 253)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="192.03125"><li ng-repeat="phone in phones"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="96.015625"> {{phone.name}}</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="156.02539"> <p>{{phone.snippet}}</p></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="41" textLength="30.004883"></li></tspan></text></g><line x1="288.25" y1="454.874" x2="323.35" y2="454.874" marker-end="url(#FilledArrow_Marker_2)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="343.25" y="446.748" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(348.25 448.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><ellipse cx="403.25" cy="264" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_9)"/><ellipse cx="403.25" cy="264" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(364.435 242.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.72461">phone scope</tspan></text><text transform="translate(364.5 267.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="412.25" cy="273" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_a)"/><ellipse cx="412.25" cy="273" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(373.435 251.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.72461">phone scope</tspan></text><text transform="translate(373.5 276.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="421.25" cy="282" rx="62.2501" ry="38.00006" fill="url(#Obj_Gradient_b)"/><ellipse cx="421.25" cy="282" rx="62.2501" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(382.435 253.6023)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="13.817383" y="11" textLength="52.69922">Repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="21.487305" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(382.5 289.2112)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><line x1="248.49955" y1="270.55343" x2="330.75762" y2="267.06993" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="248.49999" y1="274.21861" x2="339.60485" y2="273.54063" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="248.49984" y1="277.64627" x2="348.65593" y2="280.17047" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="381.6389" y1="71.50163" x2="381.49615" y2="62.89818" marker-end="url(#FilledArrow_Marker_3)" stroke="#2fff41" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="412.2211" y1="243.90274" x2="395.66684" y2="174.05239" marker-end="url(#FilledArrow_Marker_4)" stroke="#38ff41" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="404.88427" y1="234.76757" x2="393.22568" y2="174.25262" marker-end="url(#FilledArrow_Marker_5)" stroke="#45ff51" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="397.7715" y1="225.64779" x2="390.45534" y2="174.43101" marker-end="url(#FilledArrow_Marker_6)" stroke="#36ff37" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id542_Graphic"><rect x="29" y="307.836" width="36" height="22.3284" fill="url(#Obj_Gradient_c)"/><rect x="29" y="307.836" width="36" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 313.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="24.003906"><ul></tspan></text></g><g id="id604_Graphic"><text transform="translate(153 105.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="0" y="10" textLength="93.615234">ng-controller</tspan></text></g><g id="id554_Graphic"><rect x="502" y="7.00002" width="235.75" height="415" stroke="#1e23ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(598 394.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.150879" y="18" textLength="12.0058594">V</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="26.840332" y="18" textLength="27.008789">iew</tspan></text><rect x="29" y="176.836" width="175.55" height="33.164" fill="url(#Obj_Gradient_d)"/><rect x="29" y="176.836" width="175.55" height="33.164" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 181.836)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="102.0166">Fulltext Search: </tspan></text><text transform="translate(50.1518 193.718)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="144.02344"><input ng-model="query"></tspan></text><text transform="translate(327.666 127)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">query: String</tspan></text><line x1="451.328" y1="243" x2="597.27637" y2="85.266553" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="422.57" y1="126.06999" x2="509.43" y2="40.930007" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_7)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id607_Graphic"><text transform="translate(266 251.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="2.5947266" y="10" textLength="64.810547">ng-repeat</tspan></text></g><line x1="465.164" y1="256" x2="596.90228" y2="127.90162" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="437.328" y1="232" x2="597.66205" y2="39.60529" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id560_Graphic"><rect x="30" y="145.836" width="184.175" height="27.211" fill="url(#Obj_Gradient_e)"/><rect x="30" y="145.836" width="184.175" height="27.211" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(35 148.4415)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="168.02734"><select ng-model="orderProp"</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="36.00586"> ...></tspan></text></g><text transform="translate(328.666 137.123)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="112.21826">orderProp: String</tspan></text><line x1="451.56485" y1="134.82184" x2="513.43515" y2="72.178157" marker-end="url(#FilledArrow_Marker_8)" marker-start="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="538.725" y1="459.748" x2="566.925" y2="459.748" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_7)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><rect x="579.825" y="446.748" width="157.75" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(584.825 448.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.9433594" y="11" textLength="50.689453">Model / V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.421875" y="11" textLength="89.384766">iew Data-binding</tspan></text><line x1="528.825" y1="450.748" x2="566.925" y2="450.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g></g></svg>
diff --git a/images/docs/tutorial/tutorial_03.graffle/QuickLook/Preview.pdf b/images/docs/tutorial/tutorial_05.graffle/QuickLook/Preview.pdf
similarity index 100%
rename from images/docs/tutorial/tutorial_03.graffle/QuickLook/Preview.pdf
rename to images/docs/tutorial/tutorial_05.graffle/QuickLook/Preview.pdf
diff --git a/images/docs/tutorial/tutorial_03.graffle/QuickLook/Thumbnail.tiff b/images/docs/tutorial/tutorial_05.graffle/QuickLook/Thumbnail.tiff
similarity index 100%
rename from images/docs/tutorial/tutorial_03.graffle/QuickLook/Thumbnail.tiff
rename to images/docs/tutorial/tutorial_05.graffle/QuickLook/Thumbnail.tiff
diff --git a/images/docs/tutorial/tutorial_03.graffle/data.plist b/images/docs/tutorial/tutorial_05.graffle/data.plist
similarity index 100%
rename from images/docs/tutorial/tutorial_03.graffle/data.plist
rename to images/docs/tutorial/tutorial_05.graffle/data.plist
diff --git a/images/docs/tutorial/tutorial_03.graffle/image13.png b/images/docs/tutorial/tutorial_05.graffle/image13.png
similarity index 100%
rename from images/docs/tutorial/tutorial_03.graffle/image13.png
rename to images/docs/tutorial/tutorial_05.graffle/image13.png
diff --git a/images/docs/tutorial/tutorial_05.svg/image13.png b/images/docs/tutorial/tutorial_05.svg/image13.png
new file mode 100644
index 000000000000..d73301a02d12
Binary files /dev/null and b/images/docs/tutorial/tutorial_05.svg/image13.png differ
diff --git a/images/docs/tutorial/tutorial_05.svg/tutorial_05.svg b/images/docs/tutorial/tutorial_05.svg/tutorial_05.svg
new file mode 100644
index 000000000000..f8ad51db55b3
--- /dev/null
+++ b/images/docs/tutorial/tutorial_05.svg/tutorial_05.svg
@@ -0,0 +1,1569 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_05.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="472.5"
+ inkscape:cy="345.625"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-nodes="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14870"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path14872"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14254"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g14256"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path14258"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14260"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14262"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14264"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14266"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14268"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="DotL"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DotL"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8587"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="CurveOut"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="CurveOut"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8713"
+ d="M -5.4129913,-5.0456926 C -2.6529913,-5.0456926 -0.41299131,-2.8056926 -0.41299131,-0.045692580 C -0.41299131,2.7143074 -2.6529913,4.9543074 -5.4129913,4.9543074"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path8553"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) rotate(180) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker12288"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path12290"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8544"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(1.1) translate(1,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11424"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path11426"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8526"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Tail"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g8562"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path8564"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8566"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8568"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8570"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8572"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8574"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9862"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9864"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9564"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9566"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8532"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9024"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9026"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8550"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,102.88779,-103.19865,0,394.21319,16.800018)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,225.8)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,234.8)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,243.8)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5160"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.1847006,0,0,2.9859898,532.99165,-493.67623)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5236"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526331,293.48128,-151.52299)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5255"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526324,404.97295,-151.97298)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5295"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient6524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient7626"
+ gradientTransform="matrix(0,67.502431,-90.853164,0,394.05902,44.908307)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient19840"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.1817711,0,0,3.016852,303.63441,-489.89605)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_05.png"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66" />
+ <g
+ id="g8412"
+ transform="translate(0,-12.8)">
+ <rect
+ y="97.927071"
+ x="20.572918"
+ height="233.70833"
+ width="260.86456"
+ id="rect8405"
+ style="fill:#deffff;fill-opacity:1;stroke:#800080;stroke-width:1.20000005;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:2.39999997, 2.39999997;stroke-dashoffset:0;stroke-opacity:1" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8407"
+ y="114.03195"
+ x="133.79451"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'"
+ y="114.03195"
+ x="133.79451"
+ id="tspan8409"
+ sodipodi:role="line">Component template</tspan></text>
+ </g>
+ <g
+ id="g7634"
+ transform="translate(0,12.8)" />
+ <g
+ id="g8492">
+ <ellipse
+ id="ellipse3521"
+ ry="51.443981"
+ rx="82.54731"
+ cy="68.243912"
+ cx="394.2132"
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-width:1;stroke-opacity:1" />
+ <ellipse
+ id="ellipse7624"
+ ry="33.75127"
+ rx="72.67231"
+ cy="78.659889"
+ cx="394.05789"
+ style="fill:url(#linearGradient7626);stroke:#000000;stroke-width:1;stroke-opacity:1" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="393.35413"
+ y="68.625061"
+ id="text3746"
+ sodipodi:linespacing="125%"><tspan
+ id="tspan3838"
+ sodipodi:role="line"
+ x="393.35413"
+ y="68.625061"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0">PhoneListController</tspan><tspan
+ sodipodi:role="line"
+ x="394.40881"
+ y="79.179901"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ id="tspan8509"> </tspan><tspan
+ id="tspan7381"
+ sodipodi:role="line"
+ x="393.35413"
+ y="89.921165"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle">query: String</tspan><tspan
+ sodipodi:role="line"
+ x="393.35413"
+ y="102.42117"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ id="tspan8505">phones: Array</tspan></text>
+ <text
+ sodipodi:linespacing="125%"
+ id="text7630"
+ y="39.458328"
+ x="343.66037"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="39.458328"
+ x="343.66037"
+ id="tspan7632"
+ sodipodi:role="line">phoneList Scope</tspan></text>
+ </g>
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_05.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="#1e23ff" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="matrix(0.86586821,0,0,1,66.529369,2.6627312e-4)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1.07466745;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="url(#clip_path)"
+ id="g3648"
+ transform="translate(-3.2,17.6)">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_05.svg\image13.png"
+ xlink:href="image13.png"
+ id="image3650"
+ transform="translate(520,28)"
+ height="171"
+ width="216" />
+ </g>
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic"
+ transform="matrix(1.1180279,0,0,1,-0.59013944,0)">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ style="stroke:#f9ff29;stroke-width:0.94574422;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="359.30005"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="369.28735"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="98.800003"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="105.78145"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="114.78145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <clipPath
+ id="clip_path">
+ <use
+ xlink:href="#path"
+ id="use3646" />
+ </clipPath>
+ <g
+ id="g8463">
+ <line
+ id="line3519"
+ y2="407"
+ x2="742"
+ y1="406"
+ x1="9"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+ <g
+ id="g8447">
+ <line
+ style="stroke:#17ff1b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_3)"
+ x1="290.25"
+ y1="426.87399"
+ x2="325.35001"
+ y2="426.87399"
+ id="line3561" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="345.25"
+ y="418.74799"
+ width="117"
+ height="17.2537"
+ id="rect3563" />
+ <text
+ style="fill:#000000"
+ transform="translate(350.25,420.37485)"
+ id="text3565">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567">Scope Inheritance</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker)"
+ x1="8"
+ y1="426.74799"
+ x2="46.099998"
+ y2="426.74799"
+ id="line3654" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="64.624199"
+ y="418.74799"
+ width="157.37601"
+ height="17.2537"
+ id="rect3656" />
+ <text
+ style="fill:#000000"
+ transform="translate(69.6242,420.37485)"
+ id="text3658">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660">Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ x1="544.90002"
+ y1="435"
+ x2="573.09998"
+ y2="435"
+ id="line3671" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673" />
+ <text
+ style="fill:#000000"
+ transform="translate(591,423.62685)"
+ id="text3675">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677">Model / V</tspan>
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679">iew Data-binding</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker)"
+ x1="535"
+ y1="426"
+ x2="573.09998"
+ y2="426"
+ id="line3681" />
+ </g>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:125%;letter-spacing:0px;word-spacing:0px;"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px;" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g7346"
+ transform="translate(0,-56)">
+ <line
+ style="stroke:#000000;stroke-width:1.98176777;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353671, 3.96353671;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="122.77953"
+ x2="297.94241"
+ y1="122.50909"
+ x1="129.81679" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="115.83334"
+ x="149.91855"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="115.83334"
+ x="149.91855"
+ id="tspan4964"
+ sodipodi:role="line">phoneList component</tspan></text>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401"
+ transform="translate(-4.8,0)" />
+ <g
+ id="g6511"
+ transform="translate(-4.8,16)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5295);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-132.5052"
+ x="310.9198"
+ height="107.2125"
+ width="23.827093"
+ id="rect5289" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5291"
+ y="325.98544"
+ x="31.902063"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan6507"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="31.902063"
+ sodipodi:role="line"></phone-list></tspan></text>
+ </g>
+ <g
+ id="g6516"
+ transform="translate(-3.2,-257.6)">
+ <g
+ id="g6526"
+ transform="translate(-1.6,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient6524);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-132.5052"
+ x="310.9198"
+ height="107.2125"
+ width="23.827093"
+ id="rect6518" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text6520"
+ y="325.98544"
+ x="35.102062"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan6522"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="35.102062"
+ sodipodi:role="line"><phone-list></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g8517">
+ <line
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)"
+ id="line3619"
+ y2="129.32898"
+ x2="390.66364"
+ y1="233.02008"
+ x1="394.68604" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1"
+ id="ellipse3569"
+ ry="38.000061"
+ rx="62.250099"
+ cy="263.80002"
+ cx="408.25" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3664"
+ y2="117.03761"
+ x2="538.03778"
+ y1="226.01949"
+ x1="422.24988" />
+ </g>
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.36000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ d="M 450.3639,86.406248 556.06318,77.354166"
+ id="path19634"
+ inkscape:connector-curvature="0" />
+ <g
+ id="g19876"
+ transform="translate(0,-14.4)">
+ <rect
+ id="rect5152"
+ width="69.910423"
+ height="238.87918"
+ x="218.39481"
+ y="-275.69897"
+ style="fill:url(#linearGradient5160);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5134"
+ y="231.34377"
+ x="44.027081"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="231.34377"
+ x="44.027081"
+ id="tspan5136"
+ sodipodi:role="line"><li ng-repeat="phone in $ctrl.phones</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="243.84377"
+ x="44.027081"
+ sodipodi:role="line"
+ id="tspan3590"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan3592"> | filter:$ctrl.query</tspan>"></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5138"
+ y="256.34375"
+ x="44.027081"
+ sodipodi:role="line"> <span>{{phone.name}}</span></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5142"
+ y="268.84375"
+ x="44.027081"
+ sodipodi:role="line"> <p>{{phone.snippet}}</p></tspan><tspan
+ id="tspan5188"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="281.34375"
+ x="44.027081"
+ sodipodi:role="line"></li></tspan></text>
+ <rect
+ id="rect5228"
+ width="23.827093"
+ height="64.421059"
+ x="186.2594"
+ y="-92.73877"
+ style="fill:url(#linearGradient5236);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="46.127048"
+ y="201.32503"
+ id="text5230"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5232"
+ x="46.127048"
+ y="201.32503"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"><ul></tspan></text>
+ <rect
+ id="rect5249"
+ width="23.827093"
+ height="64.421059"
+ x="297.7511"
+ y="-93.188759"
+ style="fill:url(#linearGradient5255);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="41.777054"
+ y="312.81674"
+ id="text5251"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5253"
+ x="41.777054"
+ y="312.81674"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"></ul></tspan></text>
+ <g
+ id="g19858">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient19840);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-269.66586"
+ x="133.45938"
+ height="241.34814"
+ width="37.816677"
+ id="rect19826" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text19828"
+ y="146.925"
+ x="33.327061"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="146.925"
+ x="33.327061"
+ id="tspan19830"
+ sodipodi:role="line">Search:</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="161.925"
+ x="33.327061"
+ sodipodi:role="line"
+ id="tspan19856"><input ng-model="$ctrl.query" /></tspan></text>
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="260"
+ y="223.39999"
+ id="text3584"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3586"
+ x="260"
+ y="223.39999"></tspan><tspan
+ sodipodi:role="line"
+ x="260"
+ y="238.39999"
+ id="tspan3588" /></text>
+ </g>
+ </g>
+ <g
+ id="g7694">
+ <line
+ x1="430.58273"
+ y1="235.62433"
+ x2="537.27631"
+ y2="155.10843"
+ id="line3662"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ style="stroke:#45ff51;stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)"
+ id="line3617"
+ y2="129.35403"
+ x2="396.98181"
+ y1="240.31607"
+ x1="407.2153" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1"
+ id="ellipse3581"
+ ry="38.000061"
+ rx="62.250099"
+ cy="272.80002"
+ cx="417.25" />
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <g
+ id="g7699">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3652"
+ y2="192.08574"
+ x2="535.36487"
+ y1="245.05835"
+ x1="435.99106" />
+ <line
+ x1="420.08658"
+ y1="247.57582"
+ x2="404.3446"
+ y2="129.64087"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:0.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="281.80002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3808"
+ y="267.26251"
+ x="427.09375"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="267.26251"
+ x="427.09375"
+ id="tspan3810"
+ sodipodi:role="line">Repeater</tspan><tspan
+ id="tspan3812"
+ y="282.26251"
+ x="427.09375"
+ sodipodi:role="line">Scope</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan3816"
+ y="297.26251"
+ x="427.09375"
+ sodipodi:role="line" /><tspan
+ id="tspan3824"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="309.04034"
+ x="427.09375"
+ sodipodi:role="line">phone: Object</tspan></text>
+ </g>
+ <g
+ id="g8326">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.00000008, 4.00000008;marker-end:url(#FilledArrow_Marker_2)"
+ x1="276.12057"
+ y1="237.6172"
+ x2="335.293"
+ y2="250.94875"
+ id="line3607" />
+ <line
+ style="stroke:#000000;stroke-width:1.99999976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999995, 3.99999995;marker-end:url(#FilledArrow_Marker_2)"
+ x1="275.87503"
+ y1="237.94217"
+ x2="343.74875"
+ y2="261.64017"
+ id="line3609" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:4.00000007, 4.00000007;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ x1="276.52792"
+ y1="238.19859"
+ x2="352.4332"
+ y2="275.70544"
+ id="line3611" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5212"
+ y="233.83336"
+ x="286.10843"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="233.83336"
+ x="286.10843"
+ id="tspan5214"
+ sodipodi:role="line">ng-repeat</tspan></text>
+ </g>
+ <g
+ id="g7188"
+ transform="matrix(1.5939525,0,0,1.6153098,529.66665,-46.268913)" />
+ <g
+ id="g8428"
+ transform="translate(-1.3938144,-0.9814433)" />
+ </g>
+</svg>
diff --git a/images/docs/tutorial/tutorial_04.graffle/QuickLook/Preview.pdf b/images/docs/tutorial/tutorial_06.graffle/QuickLook/Preview.pdf
similarity index 100%
rename from images/docs/tutorial/tutorial_04.graffle/QuickLook/Preview.pdf
rename to images/docs/tutorial/tutorial_06.graffle/QuickLook/Preview.pdf
diff --git a/images/docs/tutorial/tutorial_04.graffle/QuickLook/Thumbnail.tiff b/images/docs/tutorial/tutorial_06.graffle/QuickLook/Thumbnail.tiff
similarity index 100%
rename from images/docs/tutorial/tutorial_04.graffle/QuickLook/Thumbnail.tiff
rename to images/docs/tutorial/tutorial_06.graffle/QuickLook/Thumbnail.tiff
diff --git a/images/docs/tutorial/tutorial_04.graffle/data.plist b/images/docs/tutorial/tutorial_06.graffle/data.plist
similarity index 100%
rename from images/docs/tutorial/tutorial_04.graffle/data.plist
rename to images/docs/tutorial/tutorial_06.graffle/data.plist
diff --git a/images/docs/tutorial/tutorial_04.graffle/image15.png b/images/docs/tutorial/tutorial_06.graffle/image15.png
similarity index 100%
rename from images/docs/tutorial/tutorial_04.graffle/image15.png
rename to images/docs/tutorial/tutorial_06.graffle/image15.png
diff --git a/images/docs/tutorial/tutorial_06.svg/image15.png b/images/docs/tutorial/tutorial_06.svg/image15.png
new file mode 100644
index 000000000000..c712f85d6695
Binary files /dev/null and b/images/docs/tutorial/tutorial_06.svg/image15.png differ
diff --git a/images/docs/tutorial/tutorial_06.svg/tutorial_06.svg b/images/docs/tutorial/tutorial_06.svg/tutorial_06.svg
new file mode 100644
index 000000000000..97b950c23cb8
--- /dev/null
+++ b/images/docs/tutorial/tutorial_06.svg/tutorial_06.svg
@@ -0,0 +1,1625 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_06.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="472.5"
+ inkscape:cy="345.625"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-nodes="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14870"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path14872"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14254"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g14256"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path14258"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14260"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14262"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14264"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14266"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14268"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="DotL"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DotL"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8587"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="CurveOut"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="CurveOut"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8713"
+ d="M -5.4129913,-5.0456926 C -2.6529913,-5.0456926 -0.41299131,-2.8056926 -0.41299131,-0.045692580 C -0.41299131,2.7143074 -2.6529913,4.9543074 -5.4129913,4.9543074"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path8553"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) rotate(180) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker12288"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path12290"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8544"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(1.1) translate(1,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11424"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path11426"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8526"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Tail"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g8562"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path8564"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8566"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8568"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8570"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8572"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8574"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9862"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9864"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9564"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9566"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8532"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9024"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9026"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8550"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,119.34609,-103.19865,0,394.21319,16.800031)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,225.8)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,234.8)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,243.8)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5160"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.1847006,0,0,2.9859898,537.79165,-493.67623)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5236"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526331,299.88128,-151.52299)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5255"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526324,406.57295,-151.97298)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5295"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient6524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient7626"
+ gradientTransform="matrix(0,84.783654,-90.853164,0,394.05902,44.908228)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient19840"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.1817711,0,0,3.016852,303.63441,-489.89605)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient4249"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.1817711,0,0,3.016852,303.63441,-489.89605)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_06.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65" />
+ <g
+ id="g8412"
+ transform="translate(0,-12.8)">
+ <rect
+ y="97.927071"
+ x="20.572918"
+ height="250.16666"
+ width="260.86456"
+ id="rect8405"
+ style="fill:#deffff;fill-opacity:1;stroke:#800080;stroke-width:1.20000005;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:2.39999993, 2.39999993;stroke-dashoffset:0;stroke-opacity:1" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8407"
+ y="114.03195"
+ x="133.79451"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'"
+ y="114.03195"
+ x="133.79451"
+ id="tspan8409"
+ sodipodi:role="line">Component template</tspan></text>
+ </g>
+ <g
+ id="g7634"
+ transform="translate(0,12.8)" />
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_05.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="#1e23ff" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="matrix(0.86586821,0,0,1,66.529369,2.6627312e-4)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1.07466745;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="url(#clip_path)"
+ id="g3648"
+ transform="translate(-1.6,6.4)"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_06.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_06.svg\image15.png"
+ xlink:href="image15.png"
+ transform="translate(520,28)"
+ id="image3650"
+ height="200"
+ width="217" />
+ </g>
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic"
+ transform="matrix(1.1180279,0,0,1,-0.59013944,0)">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ style="stroke:#f9ff29;stroke-width:0.94574422;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="359.30005"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="369.28735"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="98.800003"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="105.78145"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="114.78145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <clipPath
+ id="clip_path">
+ <use
+ xlink:href="#path"
+ id="use3646" />
+ </clipPath>
+ <g
+ id="g8463">
+ <line
+ id="line3519"
+ y2="407"
+ x2="742"
+ y1="406"
+ x1="9"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+ <g
+ id="g8447">
+ <line
+ style="stroke:#17ff1b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_3)"
+ x1="290.25"
+ y1="426.87399"
+ x2="325.35001"
+ y2="426.87399"
+ id="line3561" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="345.25"
+ y="418.74799"
+ width="117"
+ height="17.2537"
+ id="rect3563" />
+ <text
+ style="fill:#000000"
+ transform="translate(350.25,420.37485)"
+ id="text3565">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567">Scope Inheritance</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker)"
+ x1="8"
+ y1="426.74799"
+ x2="46.099998"
+ y2="426.74799"
+ id="line3654" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="64.624199"
+ y="418.74799"
+ width="157.37601"
+ height="17.2537"
+ id="rect3656" />
+ <text
+ style="fill:#000000"
+ transform="translate(69.6242,420.37485)"
+ id="text3658">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660">Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ x1="544.90002"
+ y1="435"
+ x2="573.09998"
+ y2="435"
+ id="line3671" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673" />
+ <text
+ style="fill:#000000"
+ transform="translate(591,423.62685)"
+ id="text3675">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677">Model / V</tspan>
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679">iew Data-binding</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker)"
+ x1="535"
+ y1="426"
+ x2="573.09998"
+ y2="426"
+ id="line3681" />
+ </g>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:125%;letter-spacing:0px;word-spacing:0px;"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px;" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g7346"
+ transform="translate(0,-56)">
+ <line
+ style="stroke:#000000;stroke-width:1.98176777;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353671, 3.96353671;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="122.77953"
+ x2="297.94241"
+ y1="122.50909"
+ x1="129.81679" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="115.83334"
+ x="149.91855"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="115.83334"
+ x="149.91855"
+ id="tspan4964"
+ sodipodi:role="line">phoneList component</tspan></text>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401"
+ transform="translate(-4.8,0)" />
+ <g
+ id="g6511"
+ transform="translate(-4.8,32)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5295);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-132.5052"
+ x="310.9198"
+ height="107.2125"
+ width="23.827093"
+ id="rect5289" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5291"
+ y="325.98544"
+ x="31.902063"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan6507"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="31.902063"
+ sodipodi:role="line"></phone-list></tspan></text>
+ </g>
+ <g
+ id="g6516"
+ transform="translate(-3.2,-257.6)">
+ <g
+ id="g6526"
+ transform="translate(-1.6,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient6524);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-132.5052"
+ x="310.9198"
+ height="107.2125"
+ width="23.827093"
+ id="rect6518" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text6520"
+ y="325.98544"
+ x="35.102062"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan6522"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="35.102062"
+ sodipodi:role="line"><phone-list></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g8517"
+ transform="translate(0,16)">
+ <line
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)"
+ id="line3619"
+ y2="129.32898"
+ x2="390.66364"
+ y1="233.02008"
+ x1="394.68604" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1"
+ id="ellipse3569"
+ ry="38.000061"
+ rx="62.250099"
+ cy="263.80002"
+ cx="408.25" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3664"
+ y2="117.03761"
+ x2="538.03778"
+ y1="226.01949"
+ x1="422.24988" />
+ </g>
+ <g
+ id="g19876"
+ transform="translate(0,6.4)">
+ <rect
+ id="rect5152"
+ width="69.910423"
+ height="238.87918"
+ x="223.19482"
+ y="-275.69897"
+ style="fill:url(#linearGradient5160);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5134"
+ y="234.54378"
+ x="44.027081"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="234.54378"
+ x="44.027081"
+ id="tspan5136"
+ sodipodi:role="line"><li ng-repeat="...</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="247.04378"
+ x="44.027081"
+ sodipodi:role="line"
+ id="tspan3590"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan3592"> | orderBy:$ctrl.orderProp</tspan>"></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5138"
+ y="259.54376"
+ x="44.027081"
+ sodipodi:role="line"> <span>{{phone.name}}</span></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5142"
+ y="272.04376"
+ x="44.027081"
+ sodipodi:role="line"> <p>{{phone.snippet}}</p></tspan><tspan
+ id="tspan5188"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="284.54376"
+ x="44.027081"
+ sodipodi:role="line"></li></tspan></text>
+ <rect
+ id="rect5228"
+ width="23.827093"
+ height="64.421059"
+ x="192.65942"
+ y="-92.73877"
+ style="fill:url(#linearGradient5236);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="46.127048"
+ y="207.72505"
+ id="text5230"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5232"
+ x="46.127048"
+ y="207.72505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"><ul></tspan></text>
+ <rect
+ id="rect5249"
+ width="23.827093"
+ height="64.421059"
+ x="299.3511"
+ y="-93.188759"
+ style="fill:url(#linearGradient5255);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="41.777054"
+ y="314.41675"
+ id="text5251"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5253"
+ x="41.777054"
+ y="314.41675"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"></ul></tspan></text>
+ <g
+ id="g19858"
+ transform="translate(0,-30.4)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient19840);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-269.66586"
+ x="133.45938"
+ height="241.34814"
+ width="37.816677"
+ id="rect19826" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text19828"
+ y="146.925"
+ x="33.327061"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="146.925"
+ x="33.327061"
+ id="tspan19830"
+ sodipodi:role="line">Search:</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="161.925"
+ x="33.327061"
+ sodipodi:role="line"
+ id="tspan19856"><input ng-model="$ctrl.query" /></tspan></text>
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="260"
+ y="223.39999"
+ id="text3584"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3586"
+ x="260"
+ y="223.39999" /><tspan
+ sodipodi:role="line"
+ x="260"
+ y="238.39999"
+ id="tspan3588" /></text>
+ <g
+ id="g4239"
+ transform="translate(0,14.4)">
+ <rect
+ id="rect4241"
+ width="37.816677"
+ height="241.34814"
+ x="133.45938"
+ y="-269.66586"
+ style="fill:url(#linearGradient4249);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="33.327061"
+ y="146.925"
+ id="text4243"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4245"
+ x="33.327061"
+ y="146.925"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start">Sort by:</tspan><tspan
+ id="tspan4247"
+ sodipodi:role="line"
+ x="33.327061"
+ y="161.00636"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"><select ng-model="$ctrl.orderProp"></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g4224">
+ <g
+ id="g8492">
+ <ellipse
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="394.2132"
+ cy="76.473076"
+ rx="82.54731"
+ ry="59.673145"
+ id="ellipse3521" />
+ <ellipse
+ style="fill:url(#linearGradient7626);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="394.05789"
+ cy="87.300514"
+ rx="72.67231"
+ ry="42.391895"
+ id="ellipse7624" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3746"
+ y="71.825058"
+ x="393.35413"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="71.825058"
+ x="393.35413"
+ sodipodi:role="line"
+ id="tspan3838">PhoneListController</tspan><tspan
+ id="tspan8509"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="82.379898"
+ x="394.40881"
+ sodipodi:role="line"> </tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="93.121162"
+ x="393.35413"
+ sodipodi:role="line"
+ id="tspan7381">query: String</tspan><tspan
+ id="tspan4205"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="105.62116"
+ x="393.35413"
+ sodipodi:role="line">orderProp: String</tspan><tspan
+ id="tspan8505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="118.12116"
+ x="393.35413"
+ sodipodi:role="line">phones: Array</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="343.66037"
+ y="39.458328"
+ id="text7630"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan7632"
+ x="343.66037"
+ y="39.458328">phoneList Scope</tspan></text>
+ </g>
+ <path
+ inkscape:connector-curvature="0"
+ id="path19634"
+ d="M 449.49402,87.785327 553.00179,65.918865"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.36000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.36000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ d="m 462.23395,100.238 88.8154,-8.371854"
+ id="path4211"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ <g
+ id="g7694"
+ transform="translate(0,16)">
+ <line
+ x1="430.58273"
+ y1="235.62433"
+ x2="537.27631"
+ y2="155.10843"
+ id="line3662"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ style="stroke:#45ff51;stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)"
+ id="line3617"
+ y2="129.35403"
+ x2="396.98181"
+ y1="240.31607"
+ x1="407.2153" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1"
+ id="ellipse3581"
+ ry="38.000061"
+ rx="62.250099"
+ cy="272.80002"
+ cx="417.25" />
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <g
+ id="g7699"
+ transform="translate(0,16)">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3652"
+ y2="192.08574"
+ x2="535.36487"
+ y1="245.05835"
+ x1="435.99106" />
+ <line
+ x1="420.08658"
+ y1="247.57582"
+ x2="404.3446"
+ y2="129.64087"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:0.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="281.80002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3808"
+ y="267.26251"
+ x="427.09375"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="267.26251"
+ x="427.09375"
+ id="tspan3810"
+ sodipodi:role="line">Repeater</tspan><tspan
+ id="tspan3812"
+ y="282.26251"
+ x="427.09375"
+ sodipodi:role="line">Scope</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan3816"
+ y="297.26251"
+ x="427.09375"
+ sodipodi:role="line" /><tspan
+ id="tspan3824"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="309.04034"
+ x="427.09375"
+ sodipodi:role="line">phone: Object</tspan></text>
+ </g>
+ <line
+ id="line3607"
+ y2="267.4028"
+ x2="335.34192"
+ y1="264.72818"
+ x1="276.55814"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.00000007, 4.00000007;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ id="line3609"
+ y2="277.7692"
+ x2="343.88187"
+ y1="265.55438"
+ x1="277.1658"
+ style="stroke:#000000;stroke-width:1.99999976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999995, 3.99999995;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ id="line3611"
+ y2="292.00162"
+ x2="352.43692"
+ y1="265.2821"
+ x1="276.52609"
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:4.00000005, 4.00000005;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="286.10843"
+ y="249.83336"
+ id="text5212"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5214"
+ x="286.10843"
+ y="249.83336">ng-repeat</tspan></text>
+ <g
+ id="g7188"
+ transform="matrix(1.5939525,0,0,1.6153098,529.66665,-46.268913)" />
+ <g
+ id="g8428"
+ transform="translate(-1.3938144,-0.9814433)" />
+ </g>
+</svg>
diff --git a/images/docs/tutorial/tutorial_07.svg/image9.png b/images/docs/tutorial/tutorial_07.svg/image9.png
deleted file mode 100644
index 96782d0fb4d5..000000000000
Binary files a/images/docs/tutorial/tutorial_07.svg/image9.png and /dev/null differ
diff --git a/images/docs/tutorial/tutorial_07.svg/tutorial_07.svg b/images/docs/tutorial/tutorial_07.svg/tutorial_07.svg
deleted file mode 100644
index c2a85a091919..000000000000
--- a/images/docs/tutorial/tutorial_07.svg/tutorial_07.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2011-05-10 18:31:49 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(88.5 137.836) rotate(90) scale(22.3284)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(38 21) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_3" xl:href="#Gradient" gradientTransform="translate(45 336.001) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient" gradientTransform="translate(41 366.501) rotate(90) scale(22)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient id="Obj_Gradient_5" xl:href="#Gradient" gradientTransform="translate(71.5 73.789) rotate(90) scale(54.211)"/><linearGradient id="Obj_Gradient_6" xl:href="#Gradient" gradientTransform="translate(120.5 199.775) rotate(90) scale(128.225)"/><font-face font-family="Courier New" font-size="12" panose-1="2 7 6 9 2 2 5 9 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="-1e3" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-style="italic" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldItalicMT"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_3" gradientTransform="translate(382 66.9178) rotate(90) scale(72.1644)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_8" xl:href="#Gradient_3" gradientTransform="translate(376.5 159.193) rotate(90) scale(90.6976)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_9" xl:href="#Gradient_3" gradientTransform="translate(381.546 14) rotate(90) scale(39)"/><linearGradient id="Obj_Gradient_a" xl:href="#Gradient_3" gradientTransform="translate(366.796 272.252) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_b" xl:href="#Gradient_3" gradientTransform="translate(375.796 281.252) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_c" xl:href="#Gradient_3" gradientTransform="translate(384.796 290.252) rotate(90) scale(76)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#5aff7b"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#53ff6f"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#4cff68"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#49ff64"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_7" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#4aff6d"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_8" viewBox="-1 -4 9 8" markerWidth="9" markerHeight="8" color="black"><g><path d="M 6.3999996 0 L 0 -2.3999999 L 0 2.3999999 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_9" viewBox="-9 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M -8 0 L 0 3 L 0 -3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_a" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 7.2 0 L 0 -2.7 L 0 2.7 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Courier New" font-size="12" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><font-face font-family="Courier New" font-size="12" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_b" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id390_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id380_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id544_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id186_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id185_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id589_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id591_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id485_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id703_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id704_Graphic" filter="url(#Shadow)"/></g><g id="id427_Graphic"><rect x="7.99999" y="8.64203" width="249" height="398.61" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id390_Graphic"><rect x="270.796" y="8.64203" width="208.75" height="398.61" stroke="#4fff75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id380_Graphic"><rect x="490" y="7" width="253" height="398.61" stroke="#2221ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><rect x="502" y="118.518" width="238" height="189" id="path"/><clipPath id="clip_path"><use xl:href="#path"/></clipPath><g clip-path="url(#clip_path)"><image xl:href="image9.png" width="238" height="189" transform="translate(502 118.518)"/></g><g id="id544_Graphic"><rect x="19" y="137.836" width="139" height="22.3284" fill="url(#Obj_Gradient)"/><rect x="19" y="137.836" width="139" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(24 143.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="126.02051"><ng:view> </ng:view></tspan></text></g><text transform="translate(339.5 382.4452)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><line x1="8" y1="440.002" x2="46.1" y2="440.002" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><text transform="translate(595 381.8007)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="4.650879" y="18" textLength="12.0058594">V</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="16.340332" y="18" textLength="27.008789">iew</tspan></text><g id="id192_Graphic"><rect x="14" y="21" width="48" height="22" fill="url(#Obj_Gradient_2)"/><rect x="14" y="21" width="48" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 26.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><html></tspan></text></g><g id="id186_Graphic"><rect x="18" y="336.001" width="54" height="22" fill="url(#Obj_Gradient_3)"/><rect x="18" y="336.001" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(23 341.501)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id185_Graphic"><rect x="14" y="366.501" width="54" height="22" fill="url(#Obj_Gradient_4)"/><rect x="14" y="366.501" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 372.001)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></html></tspan></text></g><text transform="translate(88.5 381.874)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><line x1="294.75" y1="440.002" x2="329.85" y2="440.002" marker-end="url(#FilledArrow_Marker_2)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="350.75" y="432.002" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(355.75 433.62885)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><line x1="8" y1="420" x2="745" y2="419" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id589_Graphic"><rect x="64.6242" y="431.748" width="157.376" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(69.6242 433.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text></g><g id="id423_Graphic"><rect x="16" y="73.789" width="111" height="54.211" fill="url(#Obj_Gradient_5)"/><rect x="16" y="73.789" width="111" height="54.211" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(21 84.3945)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="90.01465"> ng:controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="96.015625"> "PhoneCatCtrl"></tspan></text></g><rect x="19" y="199.775" width="203" height="128.225" fill="url(#Obj_Gradient_6)"/><rect x="19" y="199.775" width="203" height="128.225" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(24 204.775)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836">Search:</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="120.01953"><input name="query"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="48.007812">Sort by:</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="41" textLength="78.012695"><select name=</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="52" textLength="78.012695"> "orderProp"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="63" textLength="24.003906"><ul></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="74" textLength="192.03125"><li ng:repeat="phone in phones"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="85" textLength="96.015625"> {{phone.name}}</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="96" textLength="156.02539"> <p>{{phone.snippet}}</p></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="107" textLength="30.004883"></li></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="30.004883" y="107" textLength="18.00293">...</tspan></text><rect x="19.4339" y="186.391" width="142.936" height="14.8269" fill="#fffd47"/><text transform="translate(24.4339 187.7179)" fill="black"><tspan font-family="Courier New" font-size="12" font-style="italic" font-weight="bold" x="12.459211" y="10" textLength="108.01758">phone-list.html</tspan></text><line x1="162" y1="187.605" x2="87.8266" y2="147.044" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="2,2"/><line x1="20" y1="186.725" x2="78.4388" y2="146.164" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="2,2"/><rect x="78.4387" y="146.919" width="9.38776" height="5.28411" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><ellipse cx="382" cy="103" rx="67.500108" ry="36.082258" fill="url(#Obj_Gradient_7)"/><ellipse cx="382" cy="103" rx="67.500108" ry="36.082258" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(349.137 77.6258)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".24557188" y="11" textLength="72.035156">PhoneCatCtrl</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="19.250455" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(339.046 112.665)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="92.41504">params: Object</tspan></text><g id="id591_Graphic"><ellipse cx="376.5" cy="204.5418" rx="75.00012" ry="45.348872" fill="url(#Obj_Gradient_8)"/><ellipse cx="376.5" cy="204.5418" rx="75.00012" ry="45.348872" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(342.561 169.107)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".49402188" y="11" textLength="75.36914">PhoneListCtrl </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="19.498905" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(335.709 226.131)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phones: Array</tspan></text><text transform="translate(330.709 203.01)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">query: String</tspan></text><text transform="translate(325.709 214.264)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="112.21826">orderProp: String</tspan></text><ellipse cx="381.546" cy="33.5" rx="39.500063" ry="19.500031" fill="url(#Obj_Gradient_9)"/><ellipse cx="381.546" cy="33.5" rx="39.500063" ry="19.500031" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(361.917 18.83585)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.279122" y="11" textLength="28.68164">Root </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="4.9402547" y="25" textLength="34.02539">Scope</tspan></text><ellipse cx="366.796" cy="310.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_a)"/><ellipse cx="366.796" cy="310.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(331.148 281.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(328.209 317.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="375.796" cy="319.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_b)"/><ellipse cx="375.796" cy="319.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(340.148 290.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(337.209 326.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="384.796" cy="328.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_c)"/><ellipse cx="384.796" cy="328.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(349.148 299.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="10.672833" y="11" textLength="52.69922">Repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(346.209 335.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><line x1="62.499995" y1="32.106973" x2="331.64761" y2="33.282133" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="370.03093" y1="271.81151" x2="371.01078" y2="260.16802" marker-end="url(#FilledArrow_Marker_3)" stroke="#5aff7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="375.94754" y1="280.75211" x2="376.02809" y2="260.28979" marker-end="url(#FilledArrow_Marker_4)" stroke="#53ff6f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="382.21672" y1="289.78981" x2="380.23445" y2="260.23031" marker-end="url(#FilledArrow_Marker_5)" stroke="#4cff68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="378.98291" y1="158.71788" x2="379.48497" y2="149.45198" marker-end="url(#FilledArrow_Marker_6)" stroke="#49ff64" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="381.76115" y1="66.41801" x2="381.74144" y2="63.399687" marker-end="url(#FilledArrow_Marker_7)" stroke="#4aff6d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="411.33537" y1="201.14953" x2="496.30436" y2="138.904936" marker-end="url(#FilledArrow_Marker_8)" marker-start="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="433.08302" y1="210.31647" x2="504.52602" y2="160.22425" marker-end="url(#FilledArrow_Marker_a)" marker-start="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="434.17" y1="308" x2="582.84186" y2="262.65478" marker-end="url(#FilledArrow_Marker_a)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id485_Graphic"><text transform="translate(160 20.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="2.8935547" y="10" textLength="79.21289">ng:autobind</tspan></text></g><g id="id703_Graphic"><text transform="translate(158 88.8889)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="0" y="10" textLength="93.615234">ng:controller</tspan></text></g><g id="id607_Graphic"><text transform="translate(235.023 272.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="2.5947266" y="10" textLength="64.810547">ng:repeat</tspan></text></g><g id="id704_Graphic"><text transform="translate(192.53 144.693)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="4.0917969" y="10" textLength="100.816406">ng:view/$route</tspan></text></g><line x1="542.9" y1="444.748" x2="571.1" y2="444.748" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><rect x="584" y="431.748" width="157.75" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(589 433.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.9433594" y="11" textLength="50.689453">Model / V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.421875" y="11" textLength="89.384766">iew Data-binding</tspan></text><line x1="533" y1="435.748" x2="571.1" y2="435.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="127.49999" y1="101.274237" x2="304.1056" y2="102.4718" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="222.49137" y1="283.08712" x2="301.04281" y2="297.87423" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="222.48864" y1="286.00516" x2="310.77243" y2="305.15073" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="222.4858" y1="288.72431" x2="320.51853" y2="312.59842" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="421.15854" y1="295.13147" x2="583.8049" y2="208.64789" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="407.08943" y1="282.48478" x2="577.84817" y2="164.81063" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="158" y1="148" x2="294.55811" y2="183.33749" marker-end="url(#FilledArrow_Marker_b)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke-dasharray="4,4"/></g></g></svg>
diff --git a/images/docs/tutorial/tutorial_08-09.svg/tutorial_08-09.svg b/images/docs/tutorial/tutorial_08-09.svg/tutorial_08-09.svg
deleted file mode 100644
index 6795797a07b2..000000000000
--- a/images/docs/tutorial/tutorial_08-09.svg/tutorial_08-09.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2011-05-10 21:43:55 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(350.023 283.252) rotate(90) scale(76)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><font-face font-family="Courier New" font-size="11" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(83.5 144.836) rotate(90) scale(22.3284)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_3" gradientTransform="translate(38 23) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_2" gradientTransform="translate(43 329.001) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_2" gradientTransform="translate(41 359.501) rotate(90) scale(22)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_6" xl:href="#Gradient_2" gradientTransform="translate(69.5 82.789) rotate(90) scale(54.211)"/><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_2" gradientTransform="translate(111 206.452) rotate(90) scale(115.549)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><font-face font-family="Courier New" font-size="12" panose-1="2 7 6 9 2 2 5 9 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="-1e3" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-style="italic" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldItalicMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_8" xl:href="#Gradient" gradientTransform="translate(373.227 75.9178) rotate(90) scale(72.1644)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_9" xl:href="#Gradient" gradientTransform="translate(371.727 168.193) rotate(90) scale(90.6976)"/><linearGradient id="Obj_Gradient_a" xl:href="#Gradient" gradientTransform="translate(370.773 16) rotate(90) scale(39)"/><linearGradient id="Obj_Gradient_b" xl:href="#Gradient" gradientTransform="translate(359.023 292.252) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_c" xl:href="#Gradient" gradientTransform="translate(368.023 301.252) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_d" xl:href="#Gradient" gradientTransform="translate(378.023 310.252) rotate(90) scale(76)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#5aff7b"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#53ff6f"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#4cff68"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#49ff64"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_7" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#4aff6d"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Courier New" font-size="12" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_8" viewBox="-9 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M -8 0 L 0 3 L 0 -3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_9" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id390_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id544_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id380_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id186_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id185_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id589_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id662_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id591_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id485_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id703_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id701_Graphic" filter="url(#Shadow)"/></g><g id="id390_Graphic"><rect x="255.057" y="8" width="216" height="404.61" stroke="#4fff75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><ellipse cx="350.023" cy="321.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient)"/><ellipse cx="350.023" cy="321.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(314.375 292.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(311.436 328.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><g id="id544_Graphic"><rect x="14" y="144.836" width="139" height="22.3284" fill="url(#Obj_Gradient_2)"/><rect x="14" y="144.836" width="139" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 150.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="126.02051"><ng:view> </ng:view></tspan></text></g><g id="id427_Graphic"><rect x="8" y="7.99944" width="238.113" height="404.752" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(330.727 307.4452)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><line x1="8" y1="446.002" x2="46.1" y2="446.002" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id380_Graphic"><rect x="481" y="8" width="262" height="404.609" stroke="#2221ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(589 389.8007)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="4.650879" y="18" textLength="12.0058594">V</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="16.340332" y="18" textLength="27.008789">iew</tspan></text><g id="id192_Graphic"><rect x="14" y="23" width="48" height="22" fill="url(#Obj_Gradient_3)"/><rect x="14" y="23" width="48" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 28.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><html></tspan></text></g><g id="id186_Graphic"><rect x="16" y="329.001" width="54" height="22" fill="url(#Obj_Gradient_4)"/><rect x="16" y="329.001" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(21 334.501)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id185_Graphic"><rect x="14" y="359.501" width="54" height="22" fill="url(#Obj_Gradient_5)"/><rect x="14" y="359.501" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 365.001)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></html></tspan></text></g><text transform="translate(99.5 390.874)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><line x1="285" y1="445.748" x2="320.1" y2="445.748" marker-end="url(#FilledArrow_Marker_2)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="341" y="437.748" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(346 439.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><line x1="8" y1="426" x2="745" y2="425" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id589_Graphic"><rect x="64.6242" y="437.748" width="157.376" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(69.6242 439.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text></g><g id="id423_Graphic"><rect x="14" y="82.789" width="111" height="54.211" fill="url(#Obj_Gradient_6)"/><rect x="14" y="82.789" width="111" height="54.211" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 93.3945)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="90.01465"> ng:controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="96.015625"> "PhoneCatCtrl"></tspan></text></g><rect x="15" y="206.452" width="192" height="115.549" fill="url(#Obj_Gradient_7)"/><rect x="15" y="206.452" width="192" height="115.549" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(20 211.452)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="168.02734">img ng:src="{{phone.images}}</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="162.02637"><h1> {{phone.name}} </h1></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="18.00293">...</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="41" textLength="108.01758"><ul class="specs"></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="52" textLength="138.02246"> <li ng:repeat="img in </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="63" textLength="180.0293"> phone.images"></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="74" textLength="150.02441"> <img ng:src="{{img}}"/></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="85" textLength="36.00586"> </li></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="96" textLength="30.004883"></ul></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="107" textLength="18.00293">...</tspan></text><rect x="15.4083" y="194.391" width="142.813" height="13.3611" fill="#fffd47"/><text transform="translate(20.4083 194.2521)" fill="black"><tspan font-family="Courier New" font-size="12" font-style="italic" font-weight="bold" x="5.196539" y="10" textLength="122.41992">phone-detail.html</tspan></text><line x1="158" y1="195.605" x2="83.8266" y2="155.044" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="2,2"/><line x1="16" y1="194.725" x2="74.4388" y2="154.164" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="2,2"/><g id="id662_Graphic"><rect x="74.4387" y="154.919" width="9.38776" height="5.28411" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><ellipse cx="373.227" cy="112" rx="67.500108" ry="36.082258" fill="url(#Obj_Gradient_8)"/><ellipse cx="373.227" cy="112" rx="67.500108" ry="36.082258" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(340.364 86.6258)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".24557188" y="11" textLength="72.035156">PhoneCatCtrl</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="19.250455" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(330.273 121.665)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="92.41504">params: Object</tspan></text><g id="id591_Graphic"><ellipse cx="371.727" cy="213.5418" rx="75.00012" ry="45.348872" fill="url(#Obj_Gradient_9)"/><ellipse cx="371.727" cy="213.5418" rx="75.00012" ry="45.348872" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(329.137 186.107)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="1.8166922" y="11" textLength="87.375">PhoneDetailCtrl </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="26.824505" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(327.936 217.131)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="370.773" cy="35.5" rx="39.500063" ry="19.500031" fill="url(#Obj_Gradient_a)"/><ellipse cx="370.773" cy="35.5" rx="39.500063" ry="19.500031" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(351.144 20.83585)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.279122" y="11" textLength="28.68164">Root </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="4.9402547" y="25" textLength="34.02539">Scope</tspan></text><ellipse cx="359.023" cy="330.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_b)"/><ellipse cx="359.023" cy="330.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(323.375 301.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(320.436 337.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="368.023" cy="339.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_c)"/><ellipse cx="368.023" cy="339.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(332.375 310.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(329.436 346.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="378.023" cy="348.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_d)"/><ellipse cx="378.023" cy="348.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(342.375 319.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="10.672833" y="11" textLength="52.69922">Repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(339.436 355.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="72.611816">img: Object</tspan></text><line x1="62.499995" y1="34.110436" x2="320.87472" y2="35.27508" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="363.20837" y1="291.85168" x2="365.6846" y2="269.1325" marker-end="url(#FilledArrow_Marker_3)" stroke="#5aff7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="369.15799" y1="300.7593" x2="370.08621" y2="269.27897" marker-end="url(#FilledArrow_Marker_4)" stroke="#53ff6f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="376.22376" y1="309.77039" x2="374.32972" y2="269.26132" marker-end="url(#FilledArrow_Marker_5)" stroke="#4cff68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="372.4057" y1="167.69484" x2="372.5421" y2="158.47997" marker-end="url(#FilledArrow_Marker_6)" stroke="#49ff64" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="372.05379" y1="75.42331" x2="371.73203" y2="65.392233" marker-end="url(#FilledArrow_Marker_7)" stroke="#4aff6d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(341.773 390.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><g id="id485_Graphic"><text transform="translate(132 19.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="2.8935547" y="10" textLength="79.21289">ng:autobind</tspan></text></g><g id="id703_Graphic"><text transform="translate(147.113 96.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="0" y="10" textLength="93.615234">ng:controller</tspan></text></g><g id="id607_Graphic"><text transform="translate(227 275.7517)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="2.5947266" y="10" textLength="64.810547">ng:repeat</tspan></text></g><g id="id701_Graphic"><text transform="translate(185.214 154.753)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="4.0917969" y="10" textLength="100.816406">ng:view/$route</tspan></text></g><line x1="544.725" y1="450.748" x2="572.925" y2="450.748" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_8)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><rect x="585.825" y="437.748" width="157.75" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(590.825 439.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.9433594" y="11" textLength="50.689453">Model / V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.421875" y="11" textLength="89.384766">iew Data-binding</tspan></text><line x1="534.825" y1="441.748" x2="572.925" y2="441.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="125.49999" y1="110.28271" x2="295.33286" y2="111.46004" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.48635" y1="287.24596" x2="285.60247" y2="305.8827" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.48317" y1="289.91099" x2="295.42437" y2="313.32154" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.47997" y1="292.38922" x2="305.23651" y2="320.92457" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.47694" y1="294.58538" x2="315.9894" y2="328.73153" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="153.5" y1="156" x2="292.90482" y2="192.75807" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><rect x="492" y="67" width="238.113" height="288" id="path"/><clipPath id="clip_path"><use xl:href="#path"/></clipPath><g clip-path="url(#clip_path)"><image xl:href="image10.png" width="252" height="288" transform="matrix(.94489286 0 0 1 492 67)"/></g><path d="M 492 67 L 730.113 67 L 730.113 355 L 492 355 Z" stroke="#5b61ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="643.587" y1="262" x2="682.2785" y2="249.86149" marker-end="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="419.7901" y1="321.6095" x2="492" y2="297" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="410.07654" y1="311.72673" x2="492" y2="282" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="399.63744" y1="301.09755" x2="631.63546" y2="206.85497" marker-end="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="432.587" y1="332" x2="491.026" y2="313" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="581" y1="264.891" x2="633.89197" y2="245.45035" marker-end="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="543" y1="259" x2="680.9413" y2="206.58231" marker-end="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="418.773" y1="224" x2="484.873" y2="224" marker-end="url(#FilledArrow_Marker_9)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></svg>
diff --git a/images/docs/tutorial/tutorial_07.graffle/QuickLook/Preview.pdf b/images/docs/tutorial/tutorial_09.graffle/QuickLook/Preview.pdf
similarity index 100%
rename from images/docs/tutorial/tutorial_07.graffle/QuickLook/Preview.pdf
rename to images/docs/tutorial/tutorial_09.graffle/QuickLook/Preview.pdf
diff --git a/images/docs/tutorial/tutorial_07.graffle/QuickLook/Thumbnail.tiff b/images/docs/tutorial/tutorial_09.graffle/QuickLook/Thumbnail.tiff
similarity index 100%
rename from images/docs/tutorial/tutorial_07.graffle/QuickLook/Thumbnail.tiff
rename to images/docs/tutorial/tutorial_09.graffle/QuickLook/Thumbnail.tiff
diff --git a/images/docs/tutorial/tutorial_07.graffle/data.plist b/images/docs/tutorial/tutorial_09.graffle/data.plist
similarity index 100%
rename from images/docs/tutorial/tutorial_07.graffle/data.plist
rename to images/docs/tutorial/tutorial_09.graffle/data.plist
diff --git a/images/docs/tutorial/tutorial_07.graffle/image9.png b/images/docs/tutorial/tutorial_09.graffle/image9.png
similarity index 100%
rename from images/docs/tutorial/tutorial_07.graffle/image9.png
rename to images/docs/tutorial/tutorial_09.graffle/image9.png
diff --git a/images/docs/tutorial/tutorial_09.svg/image9.png b/images/docs/tutorial/tutorial_09.svg/image9.png
new file mode 100644
index 000000000000..a903171417e6
Binary files /dev/null and b/images/docs/tutorial/tutorial_09.svg/image9.png differ
diff --git a/images/docs/tutorial/tutorial_09.svg/tutorial_09.svg b/images/docs/tutorial/tutorial_09.svg/tutorial_09.svg
new file mode 100644
index 000000000000..9cd633991feb
--- /dev/null
+++ b/images/docs/tutorial/tutorial_09.svg/tutorial_09.svg
@@ -0,0 +1,1727 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_09.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="470.44271"
+ inkscape:cy="345.625"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-nodes="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14870"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path14872"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14254"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g14256"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path14258"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14260"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14262"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14264"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14266"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14268"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="DotL"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DotL"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8587"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="CurveOut"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="CurveOut"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8713"
+ d="M -5.4129913,-5.0456926 C -2.6529913,-5.0456926 -0.41299131,-2.8056926 -0.41299131,-0.045692580 C -0.41299131,2.7143074 -2.6529913,4.9543074 -5.4129913,4.9543074"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path8553"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) rotate(180) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker12288"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path12290"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8544"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(1.1) translate(1,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11424"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path11426"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8526"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Tail"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g8562"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path8564"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8566"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8568"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8570"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8572"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8574"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9862"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9864"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9564"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9566"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8532"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9024"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9026"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8550"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,83.137818,-103.19865,0,394.21319,41.808335)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,225.8)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,234.8)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,261.4)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5160"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.1847006,0,0,2.8214065,537.79165,-468.49498)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5236"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526331,299.88128,-151.52299)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5255"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,0.80526324,406.57295,-151.97298)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5295"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,418.1417,-230.33662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient6524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.3401563,251.7417,-233.53662)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient7626"
+ gradientTransform="matrix(0,36.231649,-90.853164,0,394.05902,76.133452)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient4031"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,2.1219271,418.1417,-349.94755)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient5618"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,2.6876823,418.1417,-428.5081)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient5872"
+ gradientTransform="matrix(0,26.62508,-97.600707,0,397.85939,10.885337)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient5895"
+ gradientTransform="matrix(0,26.62508,-97.600707,0,397.85939,49.285337)" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_09.png"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="133.79451"
+ y="155.6321"
+ id="text8407"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan8409"
+ x="133.79451"
+ y="155.6321"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'" /></text>
+ <g
+ id="g7634"
+ transform="translate(0,12.8)" />
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_05.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ stroke-width="1"
+ stroke="#1e23ff" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="matrix(0.86586821,0,0,1,66.529369,2.6627312e-4)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1.07466745;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="none"
+ id="g3648"
+ transform="translate(-1.6,6.4)">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_09.svg\image9.png"
+ xlink:href="image9.png"
+ transform="translate(520,28)"
+ width="217"
+ height="250"
+ id="image3650" />
+ </g>
+ <use
+ id="use3646"
+ xlink:href="#path"
+ transform="translate(-1.6,6.4)"
+ x="0"
+ y="0"
+ width="100%"
+ height="100%" />
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic"
+ transform="matrix(1.1180279,0,0,1,-0.59013944,0)">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ style="stroke:#f9ff29;stroke-width:0.94574422;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="359.30005"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="369.28735"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="98.800003"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="105.78145"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="114.78145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <g
+ id="g8463">
+ <line
+ id="line3519"
+ y2="407"
+ x2="742"
+ y1="406"
+ x1="9"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+ <g
+ id="g8447">
+ <line
+ style="stroke:#17ff1b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_3)"
+ x1="290.25"
+ y1="426.87399"
+ x2="325.35001"
+ y2="426.87399"
+ id="line3561" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="345.25"
+ y="418.74799"
+ width="117"
+ height="17.2537"
+ id="rect3563" />
+ <text
+ style="fill:#000000"
+ transform="translate(350.25,420.37485)"
+ id="text3565">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567">Scope Inheritance</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker)"
+ x1="8"
+ y1="426.74799"
+ x2="46.099998"
+ y2="426.74799"
+ id="line3654" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="64.624199"
+ y="418.74799"
+ width="157.37601"
+ height="17.2537"
+ id="rect3656" />
+ <text
+ style="fill:#000000"
+ transform="translate(69.6242,420.37485)"
+ id="text3658">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660">Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ x1="544.90002"
+ y1="435"
+ x2="573.09998"
+ y2="435"
+ id="line3671" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673" />
+ <text
+ style="fill:#000000"
+ transform="translate(591,423.62685)"
+ id="text3675">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677">Model / V</tspan>
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679">iew Data-binding</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker)"
+ x1="535"
+ y1="426"
+ x2="573.09998"
+ y2="426"
+ id="line3681" />
+ </g>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:125%;letter-spacing:0px;word-spacing:0px;"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px;" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g4571"
+ transform="translate(0,-11.2)">
+ <rect
+ y="134.50208"
+ x="20.572918"
+ height="238.64583"
+ width="260.86456"
+ id="rect8405"
+ style="fill:#deffff;fill-opacity:1;stroke:#800080;stroke-width:1.20000005;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:2.39999997, 2.39999997;stroke-dashoffset:0;stroke-opacity:1" />
+ <rect
+ id="rect5289"
+ width="23.827093"
+ height="107.2125"
+ x="310.9198"
+ y="-132.5052"
+ style="fill:url(#linearGradient5295);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,3.2,32)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="31.902063"
+ y="325.98544"
+ id="text5291"
+ sodipodi:linespacing="125%"
+ transform="translate(3.2,32)"><tspan
+ sodipodi:role="line"
+ x="31.902063"
+ y="325.98544"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan6507"></phone-list></tspan></text>
+ <rect
+ id="rect6518"
+ width="23.827093"
+ height="107.2125"
+ x="144.51987"
+ y="-135.7052"
+ style="fill:url(#linearGradient6524);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="38.302063"
+ y="159.58556"
+ id="text6520"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="38.302063"
+ y="159.58556"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan6522"><phone-list></tspan></text>
+ <g
+ transform="translate(8,6.4)"
+ id="g19876">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5160);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-262.53232"
+ x="223.19482"
+ height="225.71251"
+ width="69.910423"
+ id="rect5152" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="45.627079"
+ y="237.74379"
+ id="text5134"
+ sodipodi:linespacing="125%"><tspan
+ id="tspan3590"
+ sodipodi:role="line"
+ x="45.627079"
+ y="237.74379"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"><li ng-repeat="phone in ..."></tspan><tspan
+ sodipodi:role="line"
+ x="45.627079"
+ y="252.74379"
+ id="tspan5138"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <span>{{phone.name}}</span></tspan><tspan
+ sodipodi:role="line"
+ x="45.627079"
+ y="267.74377"
+ id="tspan5142"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <p>{{phone.snippet}}</p></tspan><tspan
+ sodipodi:role="line"
+ x="45.627079"
+ y="282.74377"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan5188"></li></tspan></text>
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5236);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-92.73877"
+ x="192.65942"
+ height="64.421059"
+ width="23.827093"
+ id="rect5228" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5230"
+ y="207.72505"
+ x="46.127048"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="207.72505"
+ x="46.127048"
+ id="tspan5232"
+ sodipodi:role="line"><ul></tspan></text>
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5255);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-93.188759"
+ x="299.3511"
+ height="64.421059"
+ width="23.827093"
+ id="rect5249" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5251"
+ y="314.41675"
+ x="41.777054"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="314.41675"
+ x="41.777054"
+ id="tspan5253"
+ sodipodi:role="line"></ul></tspan></text>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3584"
+ y="223.39999"
+ x="260"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="223.39999"
+ x="260"
+ id="tspan3586"
+ sodipodi:role="line" /><tspan
+ id="tspan3588"
+ y="238.39999"
+ x="260"
+ sodipodi:role="line" /></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="26.927059"
+ y="178.92494"
+ id="text4298"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4300"
+ x="26.927059"
+ y="178.92494"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start">. . .</tspan></text>
+ </g>
+ </g>
+ <g
+ id="g7346"
+ transform="translate(0,24)">
+ <line
+ style="stroke:#000000;stroke-width:1.98176765;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353671, 3.96353671;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="122.77953"
+ x2="298.23157"
+ y1="122.50909"
+ x1="137.42725" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="115.83334"
+ x="141.91852"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="115.83334"
+ x="141.91852"
+ id="tspan4964"
+ sodipodi:role="line">phoneList component</tspan></text>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401"
+ transform="translate(-4.8,0)" />
+ <g
+ id="g6511"
+ transform="translate(3.2,32)" />
+ <g
+ id="g6516"
+ transform="translate(4.8,-201.6)">
+ <g
+ id="g6526"
+ transform="translate(-1.6,0)" />
+ </g>
+ <g
+ id="g8517"
+ transform="translate(0,17.6)">
+ <line
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)"
+ id="line3619"
+ y2="183.0451"
+ x2="390.66364"
+ y1="232.0296"
+ x1="394.68604" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1"
+ id="ellipse3569"
+ ry="38.000061"
+ rx="62.250099"
+ cy="263.80002"
+ cx="408.25" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3664"
+ y2="117.03761"
+ x2="532.48395"
+ y1="226.01949"
+ x1="422.44305" />
+ </g>
+ <g
+ id="g4224"
+ transform="translate(0,65.6)">
+ <g
+ id="g8492">
+ <ellipse
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="394.2132"
+ cy="83.377251"
+ rx="82.54731"
+ ry="41.568977"
+ id="ellipse3521" />
+ <ellipse
+ style="fill:url(#linearGradient7626);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="394.05789"
+ cy="94.249474"
+ rx="72.67231"
+ ry="18.115854"
+ id="ellipse7624" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3746"
+ y="98.247948"
+ x="395.09161"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="98.247948"
+ x="395.09161"
+ sodipodi:role="line"
+ id="tspan3838">PhoneListController</tspan><tspan
+ id="tspan8505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="98.247948"
+ x="395.09161"
+ sodipodi:role="line"><tspan
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ id="tspan5913"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle" /></tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="343.66037"
+ y="63.458305"
+ id="text7630"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan7632"
+ x="343.66037"
+ y="63.458305">phoneList Scope</tspan></text>
+ </g>
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.3599999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ d="M 443.00582,76.216412 511.02747,3.9710561"
+ id="path4211"
+ inkscape:connector-curvature="0" />
+ </g>
+ <g
+ transform="translate(-3.2,-251.2)"
+ id="g4021">
+ <g
+ transform="translate(-1.6,0)"
+ id="g4023">
+ <rect
+ id="rect4025"
+ width="23.827093"
+ height="169.75417"
+ x="310.9198"
+ y="-195.04686"
+ style="fill:url(#linearGradient4031);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="35.102062"
+ y="325.98544"
+ id="text4027"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="35.102062"
+ y="325.98544"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan4029"><div ng-view> </div></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g5608"
+ transform="translate(-3.2,-294.4)">
+ <g
+ id="g5610"
+ transform="translate(-1.6,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient5618);fill-opacity:1;stroke:#000000;stroke-width:0.94374061;stroke-opacity:1"
+ y="-232.30725"
+ x="310.9198"
+ height="215.01459"
+ width="23.827093"
+ id="rect5612" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5614"
+ y="325.98544"
+ x="35.102062"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan5616"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="325.98544"
+ x="35.102062"
+ sodipodi:role="line"><html ng-app="phonecatApp"></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g5958">
+ <line
+ x1="191.33713"
+ y1="74.509087"
+ x2="304.18274"
+ y2="74.779533"
+ id="line5931"
+ style="stroke:#000000;stroke-width:1.98176754;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353672, 3.96353672;marker-end:url(#FilledArrow_Marker_2)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="196.3187"
+ y="67.833344"
+ id="text5933"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5935"
+ x="196.3187"
+ y="67.833344">ng-view/$route</tspan></text>
+ </g>
+ <g
+ id="g6252">
+ <line
+ style="stroke:#000000;stroke-width:1.98176765;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353673, 3.96353673;marker-end:url(#FilledArrow_Marker_2)"
+ id="line5944"
+ y2="29.979534"
+ x2="304.20975"
+ y1="29.709087"
+ x1="228.72688" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5946"
+ y="23.033344"
+ x="247.51889"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="23.033344"
+ x="247.51889"
+ id="tspan5948"
+ sodipodi:role="line">ng-app</tspan></text>
+ </g>
+ </g>
+ <g
+ id="g7694"
+ transform="translate(0,17.6)">
+ <line
+ x1="430.74985"
+ y1="234.99121"
+ x2="532.60364"
+ y2="167.83167"
+ id="line3662"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ style="stroke:#45ff51;stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)"
+ id="line3617"
+ y2="182.73819"
+ x2="397.56686"
+ y1="238.92197"
+ x1="407.01044" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1"
+ id="ellipse3581"
+ ry="38.000061"
+ rx="62.250099"
+ cy="272.80002"
+ cx="417.25" />
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <g
+ id="g5979">
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3652"
+ y2="247.35492"
+ x2="530.8031"
+ y1="261.68314"
+ x1="436.15277" />
+ <line
+ x1="420.08658"
+ y1="262.22287"
+ x2="404.3446"
+ y2="199.71988"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:0.99999976;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="299.40002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3808"
+ y="296.06256"
+ x="427.09375"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="296.06256"
+ x="427.09375"
+ id="tspan3810"
+ sodipodi:role="line">Repeater</tspan><tspan
+ id="tspan3824"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="311.06256"
+ x="427.09375"
+ sodipodi:role="line"><tspan
+ id="tspan5907"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal'">Scope</tspan></tspan></text>
+ </g>
+ <g
+ id="g5836">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.00000002, 4.00000002;marker-end:url(#FilledArrow_Marker_2)"
+ x1="271.96204"
+ y1="253.39107"
+ x2="334.82513"
+ y2="267.5217"
+ id="line3607" />
+ <line
+ style="stroke:#000000;stroke-width:1.99999976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999998, 3.99999998;marker-end:url(#FilledArrow_Marker_2)"
+ x1="272.21051"
+ y1="253.74553"
+ x2="343.35925"
+ y2="277.38464"
+ id="line3609" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:4.00000008, 4.00000008;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ x1="272.03653"
+ y1="253.62088"
+ x2="352.0293"
+ y2="291.88113"
+ id="line3611" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5212"
+ y="249.83336"
+ x="286.10843"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="249.83336"
+ x="286.10843"
+ id="tspan5214"
+ sodipodi:role="line">ng-repeat</tspan></text>
+ </g>
+ <g
+ id="g7188"
+ transform="matrix(1.5939525,0,0,1.6153098,529.66665,-46.268913)" />
+ <g
+ id="g8428"
+ transform="translate(-1.3938144,-0.9814433)" />
+ <g
+ id="g5857">
+ <rect
+ y="65.833328"
+ x="125.90625"
+ height="10.697917"
+ width="9.875"
+ id="rect5843"
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.20000005;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:1.2, 2.4;stroke-dashoffset:0;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path5845"
+ d="M 20.573201,122.60231 125.70023,76.543534"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.20000005;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.20000001, 2.40000004;stroke-dashoffset:0;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path5849"
+ d="M 135.78125,76.630551 281.4375,122.92674"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.3599999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.35999999, 2.71999997;stroke-dashoffset:0;stroke-opacity:1" />
+ </g>
+ <g
+ id="g5950"
+ transform="translate(0.14547249,5.9635825)">
+ <ellipse
+ id="ellipse5870"
+ ry="13.312562"
+ rx="79.94281"
+ cy="24.197853"
+ cx="397.85941"
+ style="fill:url(#linearGradient5872);stroke:#000000;stroke-width:1;stroke-opacity:1" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5897"
+ y="27.795835"
+ x="363.18121"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="27.795835"
+ x="363.18121"
+ id="tspan5899"
+ sodipodi:role="line">Root Scope</tspan></text>
+ </g>
+ <g
+ id="g5937"
+ transform="translate(0,12.8)">
+ <ellipse
+ style="fill:url(#linearGradient5895);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="397.85941"
+ cy="62.597824"
+ rx="79.94281"
+ ry="13.312562"
+ id="ellipse5893" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="356.78119"
+ y="66.195808"
+ id="text5901"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5903"
+ x="356.78119"
+ y="66.195808">ngView Scope</tspan></text>
+ </g>
+ <line
+ x1="393.45093"
+ y1="61.130924"
+ x2="393.34341"
+ y2="53.554066"
+ id="line5988"
+ style="stroke:#38ff41;stroke-width:0.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ </g>
+</svg>
diff --git a/images/docs/tutorial/tutorial_10-11.graffle/image10.png b/images/docs/tutorial/tutorial_10-11.graffle/image10.png
deleted file mode 100644
index 8b80d67cddd4..000000000000
Binary files a/images/docs/tutorial/tutorial_10-11.graffle/image10.png and /dev/null differ
diff --git a/images/docs/tutorial/tutorial_10-11.svg/image10.png b/images/docs/tutorial/tutorial_10-11.svg/image10.png
deleted file mode 100644
index 8b80d67cddd4..000000000000
Binary files a/images/docs/tutorial/tutorial_10-11.svg/image10.png and /dev/null differ
diff --git a/images/docs/tutorial/tutorial_10-11.svg/tutorial_10-11.svg b/images/docs/tutorial/tutorial_10-11.svg/tutorial_10-11.svg
deleted file mode 100644
index b53110977244..000000000000
--- a/images/docs/tutorial/tutorial_10-11.svg/tutorial_10-11.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2011-05-10 18:21:59 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(350.023 283.252) rotate(90) scale(76)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><font-face font-family="Courier New" font-size="11" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(83.5 144.836) rotate(90) scale(22.3284)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_3" gradientTransform="translate(38 23) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_2" gradientTransform="translate(43 329.001) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_2" gradientTransform="translate(41 359.501) rotate(90) scale(22)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_6" xl:href="#Gradient_2" gradientTransform="translate(69.5 82.789) rotate(90) scale(54.211)"/><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_2" gradientTransform="translate(111 206.452) rotate(90) scale(115.549)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><font-face font-family="Courier New" font-size="12" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_8" xl:href="#Gradient" gradientTransform="translate(373.227 75.9178) rotate(90) scale(72.1644)"/><font-face font-family="Courier New" font-size="11" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_9" xl:href="#Gradient" gradientTransform="translate(371.727 174.193) rotate(90) scale(90.6976)"/><linearGradient id="Obj_Gradient_a" xl:href="#Gradient" gradientTransform="translate(370.773 16) rotate(90) scale(39)"/><linearGradient id="Obj_Gradient_b" xl:href="#Gradient" gradientTransform="translate(359.023 292.252) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_c" xl:href="#Gradient" gradientTransform="translate(368.023 301.252) rotate(90) scale(76)"/><linearGradient id="Obj_Gradient_d" xl:href="#Gradient" gradientTransform="translate(378.023 310.252) rotate(90) scale(76)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#5aff7b"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#53ff6f"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#4cff68"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#49ff64"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_7" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#4aff6d"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Courier New" font-size="12" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_8" viewBox="-9 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M -8 0 L 0 3 L 0 -3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id390_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id544_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id380_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id186_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id185_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id589_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id662_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id591_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id485_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id703_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id701_Graphic" filter="url(#Shadow)"/></g><g id="id390_Graphic"><rect x="256.057" y="8" width="216" height="404.61" stroke="#4fff75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><ellipse cx="350.023" cy="321.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient)"/><ellipse cx="350.023" cy="321.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(314.375 292.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(311.436 328.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><g id="id544_Graphic"><rect x="14" y="144.836" width="139" height="22.3284" fill="url(#Obj_Gradient_2)"/><rect x="14" y="144.836" width="139" height="22.3284" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 150.5002)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="126.02051"><ng:view> </ng:view></tspan></text></g><g id="id427_Graphic"><rect x="8" y="7.99944" width="238.113" height="404.752" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(330.727 307.4452)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><line x1="8" y1="446.002" x2="46.1" y2="446.002" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id380_Graphic"><rect x="482" y="8" width="262" height="404.609" stroke="#2221ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(589 389.8007)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="4.650879" y="18" textLength="12.0058594">V</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="16.340332" y="18" textLength="27.008789">iew</tspan></text><g id="id192_Graphic"><rect x="14" y="23" width="48" height="22" fill="url(#Obj_Gradient_3)"/><rect x="14" y="23" width="48" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 28.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><html></tspan></text></g><g id="id186_Graphic"><rect x="16" y="329.001" width="54" height="22" fill="url(#Obj_Gradient_4)"/><rect x="16" y="329.001" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(21 334.501)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id185_Graphic"><rect x="14" y="359.501" width="54" height="22" fill="url(#Obj_Gradient_5)"/><rect x="14" y="359.501" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 365.001)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="42.006836"></html></tspan></text></g><text transform="translate(99.5 390.874)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><line x1="285" y1="445.748" x2="320.1" y2="445.748" marker-end="url(#FilledArrow_Marker_2)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="341" y="437.748" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(346 439.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><line x1="8" y1="426" x2="745" y2="425" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id589_Graphic"><rect x="64.6242" y="437.748" width="157.376" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(69.6242 439.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text></g><g id="id423_Graphic"><rect x="14" y="82.789" width="111" height="54.211" fill="url(#Obj_Gradient_6)"/><rect x="14" y="82.789" width="111" height="54.211" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(19 93.3945)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="90.01465"> ng:controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="96.015625"> "PhoneCatCtrl"></tspan></text></g><rect x="15" y="206.452" width="192" height="115.549" fill="url(#Obj_Gradient_7)"/><rect x="15" y="206.452" width="192" height="115.549" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(20 211.452)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="8" textLength="168.02734">img ng:src="{{phone.images}}</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="19" textLength="162.02637"><h1> {{phone.name}} </h1></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="30" textLength="18.00293">...</tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="41" textLength="108.01758"><ul class="specs"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="52" textLength="138.02246"> <li ng:repeat="img in </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="63" textLength="180.0293"> phone.images"></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="74" textLength="150.02441"> <img ng:src="{{img}}"/></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="85" textLength="36.00586"> </li></tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="96" textLength="30.004883"></ul></tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="107" textLength="18.00293">...</tspan></text><rect x="15.4083" y="194.391" width="142.813" height="13.3611" fill="#fffd47"/><text transform="translate(20.4083 194.2521)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="500" x="5.196539" y="10" textLength="122.41992">phone-detail.html</tspan></text><line x1="158" y1="195.605" x2="83.8266" y2="155.044" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="2,2"/><line x1="16" y1="194.725" x2="74.4388" y2="154.164" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="2,2"/><g id="id662_Graphic"><rect x="74.4387" y="154.919" width="9.38776" height="5.28411" stroke="#505050" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><ellipse cx="373.227" cy="112" rx="67.500108" ry="36.082258" fill="url(#Obj_Gradient_8)"/><ellipse cx="373.227" cy="112" rx="67.500108" ry="36.082258" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(340.364 86.6258)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".24557188" y="11" textLength="72.035156">PhoneCatCtrl</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="19.250455" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(330.273 121.665)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="92.41504">params: Object</tspan></text><g id="id591_Graphic"><ellipse cx="371.727" cy="219.5418" rx="75.00012" ry="45.348872" fill="url(#Obj_Gradient_9)"/><ellipse cx="371.727" cy="219.5418" rx="75.00012" ry="45.348872" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(329.137 186.107)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="1.8166922" y="11" textLength="87.375">PhoneDetailCtrl </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="26.824505" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(340.936 235.131)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="370.773" cy="35.5" rx="39.500063" ry="19.500031" fill="url(#Obj_Gradient_a)"/><ellipse cx="370.773" cy="35.5" rx="39.500063" ry="19.500031" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(351.144 20.83585)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.279122" y="11" textLength="28.68164">Root </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="4.9402547" y="25" textLength="34.02539">Scope</tspan></text><ellipse cx="359.023" cy="330.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_b)"/><ellipse cx="359.023" cy="330.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(323.375 301.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(320.436 337.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="368.023" cy="339.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_c)"/><ellipse cx="368.023" cy="339.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(332.375 310.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.005841" y="11" textLength="38.033203">Phone </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(329.436 346.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="85.813965">phone: Object</tspan></text><ellipse cx="378.023" cy="348.252" rx="57.750092" ry="38.00006" fill="url(#Obj_Gradient_d)"/><ellipse cx="378.023" cy="348.252" rx="57.750092" ry="38.00006" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(342.375 319.8543)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="10.672833" y="11" textLength="52.69922">Repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.342755" y="25" textLength="34.02539">Scope</tspan></text><text transform="translate(339.436 355.4632)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="500" x="0" y="9" textLength="72.611816">img: Object</tspan></text><line x1="62.499995" y1="34.110436" x2="320.87472" y2="35.27508" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="363.42718" y1="291.8624" x2="365.34853" y2="275.11468" marker-end="url(#FilledArrow_Marker_3)" stroke="#5aff7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="369.21374" y1="300.76004" x2="370.00203" y2="275.27776" marker-end="url(#FilledArrow_Marker_4)" stroke="#53ff6f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="376.14063" y1="309.77213" x2="374.4523" y2="275.2585" marker-end="url(#FilledArrow_Marker_5)" stroke="#4cff68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="372.36604" y1="173.69463" x2="372.5781" y2="158.48021" marker-end="url(#FilledArrow_Marker_6)" stroke="#49ff64" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="372.05546" y1="75.423293" x2="371.73417" y2="65.392226" marker-end="url(#FilledArrow_Marker_7)" stroke="#4aff6d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(341.773 390.5872)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><g id="id485_Graphic"><text transform="translate(132 19.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="2.8935547" y="10" textLength="79.21289">ng:autobind</tspan></text></g><g id="id703_Graphic"><text transform="translate(147.113 96.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="10" textLength="93.615234">ng:controller</tspan></text></g><g id="id607_Graphic"><text transform="translate(226 277.7517)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="2.5947266" y="10" textLength="64.810547">ng:repeat</tspan></text></g><g id="id701_Graphic"><text transform="translate(185.214 154.753)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="4.0917969" y="10" textLength="100.816406">ng:view/$route</tspan></text></g><line x1="544.725" y1="450.748" x2="572.925" y2="450.748" marker-end="url(#FilledArrow_Marker)" marker-start="url(#FilledArrow_Marker_8)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><rect x="585.825" y="437.748" width="157.75" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(590.825 439.37485)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.9433594" y="11" textLength="50.689453">Model / V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.421875" y="11" textLength="89.384766">iew Data-binding</tspan></text><line x1="534.825" y1="441.748" x2="572.925" y2="441.748" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="125.49999" y1="110.28271" x2="295.33286" y2="111.46004" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.48635" y1="287.24596" x2="285.60247" y2="305.8827" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.48317" y1="289.91099" x2="295.42437" y2="313.32154" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.47997" y1="292.38922" x2="305.23651" y2="320.92457" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="207.47694" y1="294.58538" x2="315.9894" y2="328.73153" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="153.5" y1="156" x2="294.15011" y2="196.95351" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><rect x="487" y="67" width="252" height="288" id="path"/><clipPath id="clip_path"><use xl:href="#path"/></clipPath><g clip-path="url(#clip_path)"><image xl:href="image10.png" width="252" height="288" transform="translate(487 67)"/></g><text transform="translate(308.936 223.131)" fill="black"><tspan font-family="Courier New" font-size="11" font-weight="bold" x="0" y="9" textLength="118.819336">setImage: Function</tspan></text><line x1="428.773" y1="241" x2="527.424" y2="163" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="586.825" y1="119" x2="627.06295" y2="87.14496" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="432.587" y1="335" x2="685.21308" y2="249.18427" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="419.3827" y1="321.09872" x2="636.6659" y2="244.29917" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="409.3794" y1="310.91442" x2="683.758" y2="205.54905" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="398.21246" y1="299.6464" x2="635.9664" y2="193.05019" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g></g></svg>
diff --git a/images/docs/tutorial/tutorial_08-09.graffle/QuickLook/Preview.pdf b/images/docs/tutorial/tutorial_10.graffle/QuickLook/Preview.pdf
similarity index 100%
rename from images/docs/tutorial/tutorial_08-09.graffle/QuickLook/Preview.pdf
rename to images/docs/tutorial/tutorial_10.graffle/QuickLook/Preview.pdf
diff --git a/images/docs/tutorial/tutorial_08-09.graffle/QuickLook/Thumbnail.tiff b/images/docs/tutorial/tutorial_10.graffle/QuickLook/Thumbnail.tiff
similarity index 100%
rename from images/docs/tutorial/tutorial_08-09.graffle/QuickLook/Thumbnail.tiff
rename to images/docs/tutorial/tutorial_10.graffle/QuickLook/Thumbnail.tiff
diff --git a/images/docs/tutorial/tutorial_08-09.graffle/data.plist b/images/docs/tutorial/tutorial_10.graffle/data.plist
similarity index 100%
rename from images/docs/tutorial/tutorial_08-09.graffle/data.plist
rename to images/docs/tutorial/tutorial_10.graffle/data.plist
diff --git a/images/docs/tutorial/tutorial_08-09.graffle/image10.png b/images/docs/tutorial/tutorial_10.graffle/image10.png
similarity index 100%
rename from images/docs/tutorial/tutorial_08-09.graffle/image10.png
rename to images/docs/tutorial/tutorial_10.graffle/image10.png
diff --git a/images/docs/tutorial/tutorial_10.svg/image10.png b/images/docs/tutorial/tutorial_10.svg/image10.png
new file mode 100644
index 000000000000..298ab9c5db86
Binary files /dev/null and b/images/docs/tutorial/tutorial_10.svg/image10.png differ
diff --git a/images/docs/tutorial/tutorial_10.svg/tutorial_10.svg b/images/docs/tutorial/tutorial_10.svg/tutorial_10.svg
new file mode 100644
index 000000000000..4504ed6c0d23
--- /dev/null
+++ b/images/docs/tutorial/tutorial_10.svg/tutorial_10.svg
@@ -0,0 +1,1706 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_10.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="318.71745"
+ inkscape:cy="345.625"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-nodes="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14870"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path14872"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14254"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g14256"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path14258"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14260"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14262"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14264"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14266"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14268"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="DotL"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DotL"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8587"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="CurveOut"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="CurveOut"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8713"
+ d="M -5.4129913,-5.0456926 C -2.6529913,-5.0456926 -0.41299131,-2.8056926 -0.41299131,-0.045692580 C -0.41299131,2.7143074 -2.6529913,4.9543074 -5.4129913,4.9543074"
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path8553"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) rotate(180) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker12288"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path12290"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8544"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(1.1) translate(1,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11424"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path11426"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8526"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Tail"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g8562"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path8564"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8566"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8568"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8570"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8572"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8574"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9862"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9864"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9564"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9566"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8532"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9024"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9026"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8550"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,153.08562,-103.19865,0,397.41319,-47.791615)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,243.4)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,252.4)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,261.4)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient6524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.5047396,125.3417,-242.71786)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient7626"
+ gradientTransform="matrix(0,97.950301,-90.853164,0,397.25902,-2.7689169)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient7998"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.5047396,125.3417,-242.71786)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8019"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,3.2225837,167.08128,-513.37294)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8032"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.9819009,0,0,3.2225834,614.18862,-513.87507)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8048"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.081836,0,0,3.2225834,500.57914,-513.87507)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8098"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,3.1608624,167.08128,-503.92959)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8108"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,3.2225811,167.08128,-513.37255)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient8222"
+ gradientTransform="matrix(0,76,-76,0,400.25,235.4)" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_10.png"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="133.79451"
+ y="155.6321"
+ id="text8407"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan8409"
+ x="133.79451"
+ y="155.6321"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'" /></text>
+ <g
+ id="g7634"
+ transform="translate(0,12.8)" />
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_05.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ style="stroke:#1e23ff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="matrix(0.86586821,0,0,1,66.529369,2.6627312e-4)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1.07466745;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="none"
+ id="g3648"
+ transform="translate(-1.6,6.4)">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_10.svg\image10.png"
+ xlink:href="image10.png"
+ id="image3650"
+ height="250"
+ width="217"
+ transform="translate(520,28)" />
+ </g>
+ <use
+ id="use3646"
+ xlink:href="#path"
+ transform="translate(-1.6,6.4)"
+ x="0"
+ y="0"
+ width="100%"
+ height="100%" />
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic"
+ transform="matrix(1.1180279,0,0,1,-0.59013944,0)">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ style="stroke:#f9ff29;stroke-width:0.94574422;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="359.30005"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="369.28735"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="98.800003"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="105.78145"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="114.78145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <g
+ id="g8463">
+ <line
+ id="line3519"
+ y2="407"
+ x2="742"
+ y1="406"
+ x1="9"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+ <g
+ id="g8447">
+ <line
+ style="stroke:#17ff1b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_3)"
+ x1="290.25"
+ y1="426.87399"
+ x2="325.35001"
+ y2="426.87399"
+ id="line3561" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="345.25"
+ y="418.74799"
+ width="117"
+ height="17.2537"
+ id="rect3563" />
+ <text
+ style="fill:#000000"
+ transform="translate(350.25,420.37485)"
+ id="text3565">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567">Scope Inheritance</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker)"
+ x1="8"
+ y1="426.74799"
+ x2="46.099998"
+ y2="426.74799"
+ id="line3654" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="64.624199"
+ y="418.74799"
+ width="157.37601"
+ height="17.2537"
+ id="rect3656" />
+ <text
+ style="fill:#000000"
+ transform="translate(69.6242,420.37485)"
+ id="text3658">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660">Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ x1="544.90002"
+ y1="435"
+ x2="573.09998"
+ y2="435"
+ id="line3671" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673" />
+ <text
+ style="fill:#000000"
+ transform="translate(591,423.62685)"
+ id="text3675">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677">Model / V</tspan>
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679">iew Data-binding</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker)"
+ x1="535"
+ y1="426"
+ x2="573.09998"
+ y2="426"
+ id="line3681" />
+ </g>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="font-style:normal;font-weight:normal;font-size:15px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g7985">
+ <rect
+ id="rect6518"
+ width="23.827093"
+ height="120.37917"
+ x="18.119865"
+ y="-132.87184"
+ style="fill:url(#linearGradient6524);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="22.302065"
+ y="33.18549"
+ id="text6520"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="22.302065"
+ y="33.18549"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan6522"><phone-detail></tspan></text>
+ </g>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3584"
+ y="218.59999"
+ x="268"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="218.59999"
+ x="268"
+ id="tspan3586"
+ sodipodi:role="line" /><tspan
+ id="tspan3588"
+ y="233.59999"
+ x="268"
+ sodipodi:role="line" /></text>
+ <g
+ id="g8196">
+ <line
+ style="stroke:#000000;stroke-width:1.98176765;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353667, 3.96353667;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="31.579533"
+ x2="335.3136"
+ y1="31.309086"
+ x1="133.03603" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="24.633343"
+ x="162.71861"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="24.633343"
+ x="162.71861"
+ id="tspan4964"
+ sodipodi:role="line">phoneList component</tspan></text>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401"
+ transform="translate(-4.8,0)" />
+ <g
+ id="g6511"
+ transform="translate(3.2,32)" />
+ <g
+ id="g6516"
+ transform="translate(4.8,-201.6)">
+ <g
+ id="g6526"
+ transform="translate(-1.6,0)" />
+ </g>
+ <g
+ id="g8253">
+ <line
+ x1="381.89932"
+ y1="242.60425"
+ x2="386.03049"
+ y2="180.06631"
+ id="line8216"
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)" />
+ <line
+ x1="410.4173"
+ y1="235.92316"
+ x2="629.96979"
+ y2="166.54468"
+ id="line8220"
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <ellipse
+ cx="400.25"
+ cy="273.40002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse8218"
+ style="fill:url(#linearGradient8222);stroke:#000000;stroke-opacity:1" />
+ </g>
+ <g
+ id="g8258">
+ <line
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)"
+ id="line3619"
+ y2="181.61078"
+ x2="392.87433"
+ y1="250.86607"
+ x1="391.81387" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3664"
+ y2="166.82674"
+ x2="662.90131"
+ y1="244.246"
+ x1="418.18039" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1"
+ id="ellipse3569"
+ ry="38.000061"
+ rx="62.250099"
+ cy="281.40002"
+ cx="408.25" />
+ </g>
+ <g
+ id="g4224"
+ transform="translate(0,65.6)">
+ <g
+ id="g8201">
+ <ellipse
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="397.41321"
+ cy="28.751209"
+ rx="82.54731"
+ ry="76.542938"
+ id="ellipse3521" />
+ <ellipse
+ style="fill:url(#linearGradient7626);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="397.2579"
+ cy="46.206764"
+ rx="72.67231"
+ ry="48.975231"
+ id="ellipse7624" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3746"
+ y="42.247944"
+ x="396.69162"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan8162"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="42.247944"
+ x="396.69162"
+ sodipodi:role="line">PhoneDetailController</tspan><tspan
+ id="tspan8170"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="60.247944"
+ x="396.69162"
+ sodipodi:role="line" /><tspan
+ id="tspan8172"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:150%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="74.381332"
+ x="396.69162"
+ sodipodi:role="line">phone: Object</tspan><tspan
+ id="tspan8166"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="89.381332"
+ x="396.69162"
+ sodipodi:role="line" /><tspan
+ id="tspan8168"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="104.38133"
+ x="396.69162"
+ sodipodi:role="line" /><tspan
+ id="tspan8505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="119.38133"
+ x="396.69162"
+ sodipodi:role="line" /></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="342.06036"
+ y="-14.941692"
+ id="text7630"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan7632"
+ x="342.06036"
+ y="-14.941692">phoneDetail Scope</tspan></text>
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="384.30206"
+ y="-28.56875"
+ id="text8158"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan8160"
+ x="384.30206"
+ y="-28.56875"></tspan></text>
+ </g>
+ <g
+ id="g7990"
+ transform="translate(0,316.8)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient7998);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-132.87184"
+ x="18.119865"
+ height="120.37917"
+ width="23.827093"
+ id="rect7992" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text7994"
+ y="33.18549"
+ x="19.102064"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan7996"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="33.18549"
+ x="19.102064"
+ sodipodi:role="line"></phone-detail></tspan></text>
+ </g>
+ <g
+ id="g8025"
+ transform="translate(0,-8)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8019);fill-opacity:1;stroke:#000000;stroke-width:0.94374049;stroke-opacity:1"
+ y="-278.12442"
+ x="59.859421"
+ height="257.80667"
+ width="23.827093"
+ id="rect8017" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8021"
+ y="74.925049"
+ x="26.927052"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="74.925049"
+ x="26.927052"
+ id="tspan8023"
+ sodipodi:role="line"><img ng-src="<tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8174">{{$ctrl.phone.images[0]}}</tspan>"/></tspan></text>
+ </g>
+ <g
+ id="g8134"
+ transform="translate(0,-32)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8032);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-278.6264"
+ x="184.79446"
+ height="257.80667"
+ width="95.420837"
+ id="rect8030" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8034"
+ y="198.18124"
+ x="27.293749"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="198.18124"
+ x="27.293749"
+ id="tspan8036"
+ sodipodi:role="line"><ul class="phone-thumbs"></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8038"
+ y="213.18124"
+ x="27.293749"
+ sodipodi:role="line"> <li <tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8180">ng-repeat=</tspan></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="228.18124"
+ x="27.293749"
+ sodipodi:role="line"
+ id="tspan8148"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8182"> "img in $ctrl.phone.images"</tspan>></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8040"
+ y="243.18124"
+ x="27.293749"
+ sodipodi:role="line"> <img ng-src="<tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8188">{{img}}</tspan>" /></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8042"
+ y="258.18124"
+ x="27.293749"
+ sodipodi:role="line"> </li></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8044"
+ y="273.18124"
+ x="27.293749"
+ sodipodi:role="line"></ul></tspan></text>
+ </g>
+ <g
+ id="g8126"
+ transform="translate(0,57.6)">
+ <rect
+ id="rect8046"
+ width="66.618759"
+ height="257.80667"
+ x="200.79446"
+ y="-278.6264"
+ style="fill:url(#linearGradient8048);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="27.293749"
+ y="215.78125"
+ id="text8050"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="27.293749"
+ y="215.78125"
+ id="tspan8060"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"><ul class="specs"></tspan><tspan
+ id="tspan8076"
+ sodipodi:role="line"
+ x="27.293749"
+ y="230.78125"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <li>...</li></tspan><tspan
+ id="tspan8082"
+ sodipodi:role="line"
+ x="27.293749"
+ y="245.78125"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> ...</tspan><tspan
+ id="tspan8080"
+ sodipodi:role="line"
+ x="27.293749"
+ y="260.78125"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"></ul></tspan></text>
+ </g>
+ <g
+ id="g8090"
+ transform="translate(0,25.6)">
+ <g
+ id="g8110"
+ transform="matrix(1.0195267,0,0,1,-0.3967375,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8098);fill-opacity:1;stroke:#000000;stroke-width:0.9346593;stroke-opacity:1"
+ y="-273.18671"
+ x="59.859421"
+ height="252.86897"
+ width="23.827093"
+ id="rect8092" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8094"
+ y="74.925049"
+ x="26.927052"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="74.925049"
+ x="26.927052"
+ id="tspan8096"
+ sodipodi:role="line"><h1><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8176">{{$ctrl.phone.name}}</tspan></h1></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g8120"
+ transform="translate(0,59.2)">
+ <g
+ id="g8115">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8108);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-278.12421"
+ x="59.859421"
+ height="257.80646"
+ width="23.827093"
+ id="rect8102" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8104"
+ y="74.925049"
+ x="26.927052"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="74.925049"
+ x="26.927052"
+ id="tspan8106"
+ sodipodi:role="line"><p><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8178">{{$ctrl.phone.description}}</tspan></p></tspan></text>
+ </g>
+ </g>
+ </g>
+ <g
+ id="g8263">
+ <line
+ x1="427.2605"
+ y1="253.57974"
+ x2="630.82446"
+ y2="199.32182"
+ id="line3662"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <line
+ style="stroke:#45ff51;stroke-width:0.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)"
+ id="line3617"
+ y2="181.60033"
+ x2="400.89682"
+ y1="257.84088"
+ x1="402.78781" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1"
+ id="ellipse3581"
+ ry="38.000061"
+ rx="62.250099"
+ cy="290.40002"
+ cx="417.25" />
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <g
+ id="g8268">
+ <line
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3652"
+ y2="199.55373"
+ x2="663.37903"
+ y1="262.03723"
+ x1="435.70276" />
+ <line
+ x1="415.31683"
+ y1="263.75067"
+ x2="408.1882"
+ y2="180.53865"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:0.9999997;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="299.40002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="427.09375"
+ y="281.66251"
+ id="text3808"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3810"
+ x="427.09375"
+ y="281.66251">Repeater</tspan><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="296.66251"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal'"
+ id="tspan3824">Scope</tspan><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="311.66251"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8244" /><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="323.44034"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8246">img: String</tspan><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="335.94034"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8240" /><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="348.44034"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8242" /></text>
+ <g
+ id="g7188"
+ transform="matrix(1.5939525,0,0,1.6153098,529.66665,-46.268913)" />
+ <g
+ id="g8428"
+ transform="translate(-1.3938144,-0.9814433)" />
+ <g
+ id="g8275">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999994, 3.99999994;marker-end:url(#FilledArrow_Marker_2)"
+ x1="279.47946"
+ y1="195.29387"
+ x2="350.1846"
+ y2="247.36238"
+ id="line3607" />
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999986, 3.99999986;marker-end:url(#FilledArrow_Marker_2)"
+ x1="279.55521"
+ y1="195.51347"
+ x2="353.78091"
+ y2="261.83932"
+ id="line3609" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:4.00000008, 4.00000008;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ x1="279.53458"
+ y1="194.99625"
+ x2="357.2608"
+ y2="280.28912"
+ id="line3611" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5212"
+ y="198.63316"
+ x="294.10846"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="198.63316"
+ x="294.10846"
+ id="tspan5214"
+ sodipodi:role="line">ng-repeat</tspan></text>
+ <line
+ id="line8273"
+ y2="236.45398"
+ x2="350.79077"
+ y1="195.06647"
+ x1="279.71902"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999985, 3.99999985;marker-end:url(#FilledArrow_Marker_2)" />
+ </g>
+ </g>
+</svg>
diff --git a/images/docs/tutorial/tutorial_10-11.graffle/QuickLook/Preview.pdf b/images/docs/tutorial/tutorial_12.graffle/QuickLook/Preview.pdf
similarity index 100%
rename from images/docs/tutorial/tutorial_10-11.graffle/QuickLook/Preview.pdf
rename to images/docs/tutorial/tutorial_12.graffle/QuickLook/Preview.pdf
diff --git a/images/docs/tutorial/tutorial_10-11.graffle/QuickLook/Thumbnail.tiff b/images/docs/tutorial/tutorial_12.graffle/QuickLook/Thumbnail.tiff
similarity index 100%
rename from images/docs/tutorial/tutorial_10-11.graffle/QuickLook/Thumbnail.tiff
rename to images/docs/tutorial/tutorial_12.graffle/QuickLook/Thumbnail.tiff
diff --git a/images/docs/tutorial/tutorial_10-11.graffle/data.plist b/images/docs/tutorial/tutorial_12.graffle/data.plist
similarity index 100%
rename from images/docs/tutorial/tutorial_10-11.graffle/data.plist
rename to images/docs/tutorial/tutorial_12.graffle/data.plist
diff --git a/images/docs/tutorial/tutorial_08-09.svg/image10.png b/images/docs/tutorial/tutorial_12.graffle/image10.png
similarity index 100%
rename from images/docs/tutorial/tutorial_08-09.svg/image10.png
rename to images/docs/tutorial/tutorial_12.graffle/image10.png
diff --git a/images/docs/tutorial/tutorial_12.svg/image10.png b/images/docs/tutorial/tutorial_12.svg/image10.png
new file mode 100644
index 000000000000..298ab9c5db86
Binary files /dev/null and b/images/docs/tutorial/tutorial_12.svg/image10.png differ
diff --git a/images/docs/tutorial/tutorial_12.svg/tutorial_12.svg b/images/docs/tutorial/tutorial_12.svg/tutorial_12.svg
new file mode 100644
index 000000000000..18d1c4cc547b
--- /dev/null
+++ b/images/docs/tutorial/tutorial_12.svg/tutorial_12.svg
@@ -0,0 +1,1844 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ viewBox="0 0 756 553"
+ width="63pc"
+ height="553pt"
+ id="svg3336"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="tutorial_12.svg"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_03.png"
+ inkscape:export-xdpi="65"
+ inkscape:export-ydpi="65">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1458"
+ inkscape:window-height="841"
+ id="namedview3683"
+ showgrid="false"
+ inkscape:zoom="0.9721519"
+ inkscape:cx="327.82637"
+ inkscape:cy="345.625"
+ inkscape:window-x="70"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g3434"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-nodes="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3840" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3338"> Produced by OmniGraffle 6.5.2 <dc:date>2012-04-04 22:31:40 +0000</dc:date>
+<rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+</rdf:RDF>
+</metadata>
+ <defs
+ id="defs3340">
+ <marker
+ inkscape:stockid="Arrow2Sstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Sstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9578"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#800080;stroke-opacity:1;fill:#ff00ff;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.3) translate(-2.3,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotL"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker12177"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9609"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#800080;stroke-width:1pt;stroke-opacity:1;fill:#ff00ff;fill-opacity:1"
+ transform="scale(0.8) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11639"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path11641"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#800080;stroke-width:1pt;stroke-opacity:1;fill:#800080;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11150"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9554"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#800080;stroke-width:1pt;stroke-opacity:1;fill:#800080;fill-opacity:1"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker10649"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g9584"
+ transform="scale(-1.2)"
+ style="stroke:#800080;stroke-opacity:1;fill:#800080;fill-opacity:1">
+ <path
+ id="path9586"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#800080;fill-rule:evenodd;stroke:#800080;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path9588"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#800080;fill-rule:evenodd;stroke:#800080;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path9590"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#800080;fill-rule:evenodd;stroke:#800080;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path9592"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#800080;fill-rule:evenodd;stroke:#800080;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path9594"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#800080;fill-rule:evenodd;stroke:#800080;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path9596"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#800080;fill-rule:evenodd;stroke:#800080;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path9551"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#800080;stroke-width:1pt;stroke-opacity:1;fill:#800080;fill-opacity:1"
+ transform="scale(0.8) rotate(180) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9804"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9548"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#800080;stroke-width:1pt;stroke-opacity:1;fill:#800080;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14870"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path14872"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker14254"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g14256"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path14258"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14260"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14262"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14264"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14266"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path14268"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="DotL"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DotL"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8587"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="CurveOut"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="CurveOut"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8713"
+ d="M -5.4129913,-5.0456926 C -2.6529913,-5.0456926 -0.41299131,-2.8056926 -0.41299131,-0.045692580 C -0.41299131,2.7143074 -2.6529913,4.9543074 -5.4129913,4.9543074"
+ style="fill:#ff00ff;fill-rule:evenodd;stroke:#800080;stroke-width:1pt;stroke-opacity:1;fill-opacity:1"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path8553"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) rotate(180) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker12288"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path12290"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8544"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(1.1) translate(1,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker11424"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path11426"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8526"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Tail"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Tail"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <g
+ id="g8562"
+ transform="scale(-1.2)"
+ style="stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1">
+ <path
+ id="path8564"
+ d="M -3.8048674,-3.9585227 L 0.54352094,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8566"
+ d="M -1.2866832,-3.9585227 L 3.0617053,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8568"
+ d="M 1.3053582,-3.9585227 L 5.6537466,0"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8570"
+ d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8572"
+ d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ <path
+ id="path8574"
+ d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+ style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1;fill-opacity:1" />
+ </g>
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9862"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9864"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9564"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9566"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8532"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="marker9024"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path9026"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mstart"
+ style="overflow:visible"
+ inkscape:isstock="true">
+ <path
+ id="path8550"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) translate(0,0)" />
+ </marker>
+ <filter
+ id="Shadow"
+ filterUnits="userSpaceOnUse">
+ <feGaussianBlur
+ in="SourceAlpha"
+ result="blur"
+ stdDeviation="1.308"
+ id="feGaussianBlur3343" />
+ <feOffset
+ in="blur"
+ result="offset"
+ dx="0"
+ dy="2"
+ id="feOffset3345" />
+ <feFlood
+ flood-color="black"
+ flood-opacity=".5"
+ result="flood"
+ id="feFlood3347" />
+ <feComposite
+ in="flood"
+ in2="offset"
+ operator="in"
+ id="feComposite3349" />
+ </filter>
+ <font-face
+ font-family="Helvetica"
+ font-size="18"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3351">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="white"
+ id="stop3354" />
+ <stop
+ offset=".5"
+ stop-color="#91ea96"
+ id="stop3356" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3358" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,39,-39,0,381,17.3)" />
+ <font-face
+ font-family="Helvetica"
+ font-size="12"
+ units-per-em="1000"
+ underline-position="-75.683594"
+ underline-thickness="49.316406"
+ slope="0"
+ x-height="522.94922"
+ cap-height="717.28516"
+ ascent="770.01953"
+ descent="-229.98047"
+ font-weight="500"
+ id="font-face3361">
+ <font-face-src>
+ <font-face-name
+ name="Helvetica" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_2"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#fff92f"
+ id="stop3364" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3366" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_2"
+ xlink:href="#Gradient_2"
+ gradientTransform="translate(38 21) rotate(90) scale(22)" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3369">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ x1="0"
+ x2="1"
+ id="Gradient_3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ offset="0"
+ stop-color="#f5ff35"
+ id="stop3372" />
+ <stop
+ offset="1"
+ stop-color="#aaa"
+ id="stop3374" />
+ </linearGradient>
+ <linearGradient
+ id="Obj_Gradient_3"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,51,305.211)" />
+ <linearGradient
+ id="Obj_Gradient_4"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22,-22,0,41,336.711)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3379">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3381" />
+ </g>
+ </marker>
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 3 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="41.015625"
+ slope="0"
+ x-height="422.85156"
+ cap-height="571.28906"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="500"
+ id="font-face3383">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPSMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_5"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(80 99.789) rotate(90) scale(39)"
+ x1="23"
+ y1="119.289"
+ x2="137"
+ y2="119.289"
+ gradientUnits="userSpaceOnUse" />
+ <font-face
+ font-family="Courier New"
+ font-size="10"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3386">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <linearGradient
+ id="Obj_Gradient_6"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,179.4189,-103.19865,0,397.41319,-47.791593)" />
+ <font-face
+ font-family="Courier New"
+ font-size="11"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3389">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_2"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="black">
+ <g
+ id="g3392">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3394" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_7"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(50 179.836) rotate(90) scale(22.3284)" />
+ <linearGradient
+ id="Obj_Gradient_8"
+ xlink:href="#Gradient_3"
+ gradientTransform="translate(145.5 211) rotate(90) scale(54)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_3"
+ viewBox="-1 -3 7 6"
+ markerWidth="7"
+ markerHeight="6"
+ color="#17ff1b">
+ <g
+ id="g3399">
+ <path
+ d="M 4.8 0 L 0 -1.8 L 0 1.8 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3401" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_9"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,408.25,243.4)" />
+ <linearGradient
+ id="Obj_Gradient_a"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,417.25,252.4)" />
+ <linearGradient
+ id="Obj_Gradient_b"
+ xlink:href="#Gradient"
+ gradientTransform="matrix(0,76,-76,0,426.25,261.4)" />
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_4"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#2fff41">
+ <g
+ id="g3407">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3409" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_5"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#38ff41">
+ <g
+ id="g3412">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3414" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_6"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#45ff51">
+ <g
+ id="g3417">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3419" />
+ </g>
+ </marker>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_7"
+ viewBox="-1 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="#36ff37">
+ <g
+ id="g3422">
+ <path
+ d="M 8 0 L 0 -3 L 0 3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3424" />
+ </g>
+ </marker>
+ <linearGradient
+ id="Obj_Gradient_c"
+ xlink:href="#Gradient_3"
+ gradientTransform="matrix(0,22.3284,-22.3284,0,50,273.836)" />
+ <font-face
+ font-family="Courier New"
+ font-size="12"
+ panose-1="2 7 6 9 2 2 5 2 4 4"
+ units-per-em="1000"
+ underline-position="-232.91016"
+ underline-thickness="100.097656"
+ slope="0"
+ x-height="443.35938"
+ cap-height="591.79688"
+ ascent="832.51953"
+ descent="-300.29297"
+ font-weight="bold"
+ id="font-face3427">
+ <font-face-src>
+ <font-face-name
+ name="CourierNewPS-BoldMT" />
+ </font-face-src>
+ </font-face>
+ <marker
+ orient="auto"
+ overflow="visible"
+ markerUnits="strokeWidth"
+ id="FilledArrow_Marker_8"
+ viewBox="-9 -4 10 8"
+ markerWidth="10"
+ markerHeight="8"
+ color="black">
+ <g
+ id="g3430">
+ <path
+ d="M -8 0 L 0 3 L 0 -3 Z"
+ fill="currentColor"
+ stroke="currentColor"
+ stroke-width="1"
+ id="path3432" />
+ </g>
+ </marker>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient6524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.5047396,125.3417,-242.71786)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient7626"
+ gradientTransform="matrix(0,127.57525,-90.853164,0,397.25902,-2.769053)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient7998"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,1.5047396,125.3417,-242.71786)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8019"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,3.2225837,167.08128,-513.37294)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8032"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.9819009,0,0,3.2225834,614.18862,-513.87507)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8048"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2.081836,0,0,3.2225834,500.57914,-513.87507)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8098"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,3.1608624,167.08128,-503.92959)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient_3"
+ id="linearGradient8108"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.74459663,0,0,3.2225811,167.08128,-513.37255)"
+ x1="-144"
+ y1="113"
+ x2="-112"
+ y2="113" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#Gradient"
+ id="linearGradient8222"
+ gradientTransform="matrix(0,76,-76,0,400.25,235.4)" />
+ </defs>
+ <g
+ id="g3434"
+ stroke-dasharray="none"
+ stroke-opacity="1"
+ stroke="none"
+ fill-opacity="1"
+ fill="none">
+ <title
+ id="title3436">Canvas 1</title>
+ <rect
+ width="756"
+ height="455.07291"
+ id="rect3438"
+ x="0"
+ y="0"
+ style="fill:#ffffff"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_12.png"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="133.79451"
+ y="155.6321"
+ id="text8407"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan8409"
+ x="133.79451"
+ y="155.6321"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'" /></text>
+ <g
+ id="g7634"
+ transform="translate(0,12.8)" />
+ <g
+ id="g3440"
+ inkscape:export-xdpi="66"
+ inkscape:export-ydpi="66"
+ inkscape:export-filename="C:\Datafiles\Dev\AngularJS\angular.js\docs\img\tutorial\tutorial_05.png">
+ <title
+ id="title3442">Layer 1</title>
+ <g
+ id="id554_Graphic">
+ <rect
+ x="508"
+ y="6"
+ width="235.75"
+ height="388"
+ id="rect3636"
+ style="stroke:#1e23ff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ id="id390_Graphic"
+ transform="matrix(0.86586821,0,0,1,66.529369,2.6627312e-4)">
+ <rect
+ x="269"
+ y="6"
+ width="227"
+ height="388"
+ id="rect3447"
+ style="stroke:#4fff75;stroke-width:1.07466745;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <g
+ clip-path="none"
+ id="g3648"
+ transform="translate(-1.6,6.4)">
+ <image
+ sodipodi:absref="C:\Datafiles\Dev\AngularJS\angular.js\images\docs\tutorial\tutorial_10.svg\image10.png"
+ xlink:href="file:///C:/Datafiles/Dev/AngularJS/angular.js/images/docs/tutorial/tutorial_10.svg/image10.png"
+ transform="translate(520,28)"
+ width="217"
+ height="250"
+ id="image3650" />
+ </g>
+ <use
+ id="use3646"
+ xlink:href="#path"
+ transform="translate(-1.6,6.4)"
+ x="0"
+ y="0"
+ width="100%"
+ height="100%" />
+ <g
+ id="g3444">
+ <xlink:use
+ xlink:href="#id390_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id427_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id192_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id186_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id185_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id485_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id423_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id490_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id491_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id542_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id553_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id554_Graphic"
+ filter="url(#Shadow)" />
+ <xlink:use
+ xlink:href="#id607_Graphic"
+ filter="url(#Shadow)" />
+ </g>
+ <g
+ id="id427_Graphic"
+ transform="matrix(1.1180279,0,0,1,-0.59013944,0)">
+ <rect
+ x="5"
+ y="6"
+ width="251"
+ height="388"
+ id="rect3450"
+ style="stroke:#f9ff29;stroke-width:0.94574422;stroke-linecap:round;stroke-linejoin:round" />
+ </g>
+ <text
+ id="text3452"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="359.30005"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="369.28735"
+ y="383.58719"
+ textLength="49.02539"
+ id="tspan3454"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">Model</tspan>
+ </text>
+ <text
+ id="text3493"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="98.800003"
+ y="365.423">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="105.78145"
+ y="383.423"
+ textLength="10.995117"
+ id="tspan3495"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">T</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="114.78145"
+ y="383.423"
+ textLength="64.03711"
+ id="tspan3497"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">emplate</tspan>
+ </text>
+ <g
+ id="g5207"
+ transform="translate(0,4.8)" />
+ <text
+ id="text3638"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#000000"
+ x="590.00012"
+ y="365.58719">
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="605.151"
+ y="383.58719"
+ textLength="12.0058594"
+ id="tspan3640"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">V</tspan>
+ <tspan
+ font-size="18"
+ font-weight="500"
+ x="616.84045"
+ y="383.58719"
+ textLength="27.008789"
+ id="tspan3642"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18px;font-family:sans-serif;-inkscape-font-specification:sans-serif">iew</tspan>
+ </text>
+ <rect
+ x="520"
+ y="28"
+ width="216"
+ height="171"
+ id="path" />
+ <g
+ id="g8463">
+ <line
+ id="line3519"
+ y2="407"
+ x2="742"
+ y1="406"
+ x1="9"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" />
+ <g
+ id="g8447">
+ <line
+ style="stroke:#17ff1b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_3)"
+ x1="290.25"
+ y1="426.87399"
+ x2="325.35001"
+ y2="426.87399"
+ id="line3561" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="345.25"
+ y="418.74799"
+ width="117"
+ height="17.2537"
+ id="rect3563" />
+ <text
+ style="fill:#000000"
+ transform="translate(350.25,420.37485)"
+ id="text3565">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="100.066406"
+ id="tspan3567">Scope Inheritance</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4, 4;marker-end:url(#FilledArrow_Marker)"
+ x1="8"
+ y1="426.74799"
+ x2="46.099998"
+ y2="426.74799"
+ id="line3654" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="64.624199"
+ y="418.74799"
+ width="157.37601"
+ height="17.2537"
+ id="rect3656" />
+ <text
+ style="fill:#000000"
+ transform="translate(69.6242,420.37485)"
+ id="text3658">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="0"
+ y="11"
+ textLength="142.06055"
+ id="tspan3660">Implicit Scope Declaration</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#FilledArrow_Marker_8);marker-end:url(#FilledArrow_Marker)"
+ x1="544.90002"
+ y1="435"
+ x2="573.09998"
+ y2="435"
+ id="line3671" />
+ <rect
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+ x="586"
+ y="422"
+ width="157.75"
+ height="17.2537"
+ id="rect3673" />
+ <text
+ style="fill:#000000"
+ transform="translate(591,423.62685)"
+ id="text3675">
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="3.9433594"
+ y="11"
+ textLength="50.689453"
+ id="tspan3677">Model / V</tspan>
+ <tspan
+ style="font-weight:500;font-size:12px;font-family:Helvetica"
+ font-size="12"
+ font-weight="500"
+ x="54.421875"
+ y="11"
+ textLength="89.384766"
+ id="tspan3679">iew Data-binding</tspan>
+ </text>
+ <line
+ style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker)"
+ x1="535"
+ y1="426"
+ x2="573.09998"
+ y2="426"
+ id="line3681" />
+ </g>
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3702"
+ style="font-style:normal;font-weight:normal;font-size:15px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+ id="flowRegion3704"><rect
+ id="rect3706"
+ width="167.66927"
+ height="65.833336"
+ x="-184.12761"
+ y="67.890625"
+ style="font-size:15px" /></flowRegion><flowPara
+ id="flowPara3708" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3710"
+ style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+ id="flowRegion3712"><rect
+ id="rect3714"
+ width="148.125"
+ height="118.29427"
+ x="-154.29688"
+ y="72.005211" /></flowRegion><flowPara
+ id="flowPara3716" /></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot3718"
+ style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+ id="flowRegion3720"><rect
+ id="rect3722"
+ width="172.8125"
+ height="74.0625"
+ x="-186.18489"
+ y="45.260418" /></flowRegion><flowPara
+ id="flowPara3724" /></flowRoot> <g
+ id="g7985">
+ <rect
+ id="rect6518"
+ width="23.827093"
+ height="120.37917"
+ x="18.119865"
+ y="-132.87184"
+ style="fill:url(#linearGradient6524);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="22.302065"
+ y="33.18549"
+ id="text6520"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="22.302065"
+ y="33.18549"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="tspan6522"><phone-detail></tspan></text>
+ </g>
+ <text
+ sodipodi:linespacing="125%"
+ id="text3584"
+ y="218.59999"
+ x="268"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="218.59999"
+ x="268"
+ id="tspan3586"
+ sodipodi:role="line" /><tspan
+ id="tspan3588"
+ y="233.59999"
+ x="268"
+ sodipodi:role="line" /></text>
+ <g
+ id="g9539">
+ <line
+ style="stroke:#000000;stroke-width:1.98176765;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.96353667, 3.96353667;marker-end:url(#FilledArrow_Marker_2)"
+ id="line3535"
+ y2="31.579533"
+ x2="335.3136"
+ y1="31.309086"
+ x1="133.03603" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text4962"
+ y="24.633343"
+ x="162.71861"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="24.633343"
+ x="162.71861"
+ id="tspan4964"
+ sodipodi:role="line">phoneList component</tspan></text>
+ </g>
+ <g
+ id="g5196"
+ transform="translate(1.6,0)" />
+ <g
+ id="g5377" />
+ <g
+ id="g5401"
+ transform="translate(-4.8,0)" />
+ <g
+ id="g6511"
+ transform="translate(3.2,32)" />
+ <g
+ id="g6516"
+ transform="translate(4.8,-201.6)">
+ <g
+ id="g6526"
+ transform="translate(-1.6,0)" />
+ </g>
+ <g
+ id="g8253">
+ <line
+ x1="381.89932"
+ y1="241.30504"
+ x2="386.03049"
+ y2="206.51944"
+ id="line8216"
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)" />
+ <ellipse
+ cx="400.25"
+ cy="273.40002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse8218"
+ style="fill:url(#linearGradient8222);stroke:#000000;stroke-opacity:1" />
+ </g>
+ <g
+ id="g8258">
+ <line
+ style="stroke:#36ff37;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_7)"
+ id="line3619"
+ y2="207.44225"
+ x2="392.87433"
+ y1="249.62682"
+ x1="391.81387" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_9);stroke:#000000;stroke-opacity:1"
+ id="ellipse3569"
+ ry="38.000061"
+ rx="62.250099"
+ cy="281.40002"
+ cx="408.25" />
+ </g>
+ <g
+ id="g8201"
+ transform="translate(0,65.6)">
+ <g
+ id="g8767">
+ <ellipse
+ style="fill:url(#Obj_Gradient_6);stroke:#000000;stroke-width:1;stroke-opacity:1"
+ cx="397.41321"
+ cy="41.917873"
+ rx="82.54731"
+ ry="89.709602"
+ id="ellipse3521" />
+ <ellipse
+ style="fill:url(#linearGradient7626);stroke:#000000;stroke-width:0.99999994;stroke-opacity:1"
+ cx="397.2579"
+ cy="61.019264"
+ rx="72.67231"
+ ry="63.787731"
+ id="ellipse7624" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3746"
+ y="18.24795"
+ x="396.69162"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan8761"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="18.24795"
+ x="396.69162"
+ sodipodi:role="line">PhoneDetail-</tspan><tspan
+ id="tspan8765"
+ dy="0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="36.247952"
+ x="396.69162"
+ sodipodi:role="line">Controller</tspan><tspan
+ id="tspan8170"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="54.247952"
+ x="396.69162"
+ sodipodi:role="line" /><tspan
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:150%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="68.38134"
+ x="396.69162"
+ sodipodi:role="line"
+ id="tspan8737">phone: Object</tspan><tspan
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:150%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="83.38134"
+ x="396.69162"
+ sodipodi:role="line"
+ id="tspan8741">mainImageUrl: String</tspan><tspan
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:150%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="98.38134"
+ x="396.69162"
+ sodipodi:role="line"
+ id="tspan8743">setImage: Function</tspan><tspan
+ id="tspan8166"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="113.38134"
+ x="396.69162"
+ sodipodi:role="line" /><tspan
+ id="tspan8168"
+ dy="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:150%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="128.38133"
+ x="396.69162"
+ sodipodi:role="line" /><tspan
+ id="tspan8505"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:center;writing-mode:lr-tb;text-anchor:middle"
+ y="143.38133"
+ x="396.69162"
+ sodipodi:role="line" /></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="342.06036"
+ y="-14.941692"
+ id="text7630"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan7632"
+ x="342.06036"
+ y="-14.941692">phoneDetail Scope</tspan></text>
+ </g>
+ </g>
+ <text
+ sodipodi:linespacing="125%"
+ id="text8158"
+ y="37.03125"
+ x="384.30206"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="37.03125"
+ x="384.30206"
+ id="tspan8160"
+ sodipodi:role="line"></tspan></text>
+ <g
+ id="g7990"
+ transform="translate(0,316.8)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient7998);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-132.87184"
+ x="18.119865"
+ height="120.37917"
+ width="23.827093"
+ id="rect7992" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text7994"
+ y="33.18549"
+ x="19.102064"
+ style="font-style:normal;font-weight:normal;font-size:32px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ id="tspan7996"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="33.18549"
+ x="19.102064"
+ sodipodi:role="line"></phone-detail></tspan></text>
+ </g>
+ <g
+ id="g8025"
+ transform="translate(0,-8)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8019);fill-opacity:1;stroke:#000000;stroke-width:0.94374049;stroke-opacity:1"
+ y="-278.12442"
+ x="59.859421"
+ height="257.80667"
+ width="23.827093"
+ id="rect8017" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8021"
+ y="74.925049"
+ x="26.927052"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="74.925049"
+ x="26.927052"
+ id="tspan8023"
+ sodipodi:role="line"><img ng-src="<tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8174">{{$ctrl.mainImageUrl}}</tspan>" /></tspan></text>
+ </g>
+ <g
+ id="g8134"
+ transform="translate(0,-32)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8032);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-278.6264"
+ x="184.79446"
+ height="257.80667"
+ width="95.420837"
+ id="rect8030" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8034"
+ y="198.18124"
+ x="27.293749"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="198.18124"
+ x="27.293749"
+ id="tspan8036"
+ sodipodi:role="line"><ul class="phone-thumbs"></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="213.18124"
+ x="27.293749"
+ sodipodi:role="line"
+ id="tspan8148"> <li ng-repeat="img in ..."></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8040"
+ y="228.18124"
+ x="27.293749"
+ sodipodi:role="line"> <img ng-src="{{img}}"</tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ y="243.18124"
+ x="27.293749"
+ sodipodi:role="line"
+ id="tspan8731"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold'"
+ id="tspan8725"> ng-click="$ctrl.setImage(img)"</tspan>/></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8042"
+ y="258.18124"
+ x="27.293749"
+ sodipodi:role="line"> </li></tspan><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8044"
+ y="273.18124"
+ x="27.293749"
+ sodipodi:role="line"></ul></tspan></text>
+ </g>
+ <g
+ id="g8126"
+ transform="translate(0,57.6)">
+ <rect
+ id="rect8046"
+ width="66.618759"
+ height="257.80667"
+ x="200.79446"
+ y="-278.6264"
+ style="fill:url(#linearGradient8048);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:12px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="27.293749"
+ y="215.78125"
+ id="text8050"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="27.293749"
+ y="215.78125"
+ id="tspan8060"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"><ul class="specs"></tspan><tspan
+ id="tspan8076"
+ sodipodi:role="line"
+ x="27.293749"
+ y="230.78125"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> <li>...</li></tspan><tspan
+ id="tspan8082"
+ sodipodi:role="line"
+ x="27.293749"
+ y="245.78125"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"> ...</tspan><tspan
+ id="tspan8080"
+ sodipodi:role="line"
+ x="27.293749"
+ y="260.78125"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"></ul></tspan></text>
+ </g>
+ <g
+ id="g8090"
+ transform="translate(0,25.6)">
+ <g
+ id="g8110"
+ transform="matrix(1.0195267,0,0,1,-0.3967375,0)">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8098);fill-opacity:1;stroke:#000000;stroke-width:0.9346593;stroke-opacity:1"
+ y="-273.18671"
+ x="59.859421"
+ height="252.86897"
+ width="23.827093"
+ id="rect8092" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8094"
+ y="74.925049"
+ x="26.927052"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="74.925049"
+ x="26.927052"
+ id="tspan8096"
+ sodipodi:role="line"><h1><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8176">{{$ctrl.phone.name}}</tspan></h1></tspan></text>
+ </g>
+ </g>
+ <g
+ id="g8120"
+ transform="translate(0,59.2)">
+ <g
+ id="g8115">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ style="fill:url(#linearGradient8108);fill-opacity:1;stroke:#000000;stroke-width:0.94374055;stroke-opacity:1"
+ y="-278.12421"
+ x="59.859421"
+ height="257.80646"
+ width="23.827093"
+ id="rect8102" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text8104"
+ y="74.925049"
+ x="26.927052"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ y="74.925049"
+ x="26.927052"
+ id="tspan8106"
+ sodipodi:role="line"><p><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8178">{{$ctrl.phone.description}}</tspan></p></tspan></text>
+ </g>
+ </g>
+ </g>
+ <g
+ id="g8263">
+ <line
+ style="stroke:#45ff51;stroke-width:0.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_6)"
+ id="line3617"
+ y2="207.6261"
+ x2="400.89682"
+ y1="256.62918"
+ x1="402.78781" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_a);stroke:#000000;stroke-opacity:1"
+ id="ellipse3581"
+ ry="38.000061"
+ rx="62.250099"
+ cy="290.40002"
+ cx="417.25" />
+ </g>
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot3800"
+ style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:125%;letter-spacing:0px;word-spacing:0px"><flowRegion
+ id="flowRegion3802"><rect
+ id="rect3804"
+ width="162.52605"
+ height="89.492188"
+ x="-180.01302"
+ y="178.98438" /></flowRegion><flowPara
+ id="flowPara3806" /></flowRoot> <line
+ x1="464.67526"
+ y1="265.36365"
+ x2="632.48444"
+ y2="174.53412"
+ id="line3652"
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_2)" />
+ <g
+ id="g9526">
+ <line
+ x1="415.31683"
+ y1="262.83353"
+ x2="408.1882"
+ y2="206.62608"
+ id="line3615"
+ style="stroke:#38ff41;stroke-width:0.99999976;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#FilledArrow_Marker_5)" />
+ <ellipse
+ style="fill:url(#Obj_Gradient_b);stroke:#000000;stroke-opacity:1"
+ cx="426.25"
+ cy="299.40002"
+ rx="62.250099"
+ ry="38.000061"
+ id="ellipse3593" />
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="427.09375"
+ y="281.66251"
+ id="text3808"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3810"
+ x="427.09375"
+ y="281.66251">Repeater</tspan><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="296.66251"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal'"
+ id="tspan3824">Scope</tspan><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="311.66251"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8244" /><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="323.44034"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8246">img: String</tspan><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="335.94034"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8240" /><tspan
+ sodipodi:role="line"
+ x="427.09375"
+ y="348.44034"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;font-family:'Courier New';-inkscape-font-specification:'Courier New'"
+ id="tspan8242" /></text>
+ <g
+ id="g7188"
+ transform="matrix(1.5939525,0,0,1.6153098,529.66665,-46.268913)" />
+ <g
+ id="g8428"
+ transform="translate(-1.3938144,-0.9814433)" />
+ <g
+ id="g8275">
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999994, 3.99999994;marker-end:url(#FilledArrow_Marker_2)"
+ x1="279.47946"
+ y1="195.29387"
+ x2="350.1846"
+ y2="247.36238"
+ id="line3607" />
+ <line
+ style="stroke:#000000;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999986, 3.99999986;marker-end:url(#FilledArrow_Marker_2)"
+ x1="279.55521"
+ y1="195.51347"
+ x2="353.78091"
+ y2="261.83932"
+ id="line3609" />
+ <line
+ style="stroke:#000000;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:4.00000008, 4.00000008;stroke-dashoffset:0;marker-end:url(#FilledArrow_Marker_2)"
+ x1="279.53458"
+ y1="194.99625"
+ x2="357.2608"
+ y2="280.28912"
+ id="line3611" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text5212"
+ y="198.63316"
+ x="294.10846"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><tspan
+ y="198.63316"
+ x="294.10846"
+ id="tspan5214"
+ sodipodi:role="line">ng-repeat</tspan></text>
+ <line
+ id="line8273"
+ y2="236.45398"
+ x2="350.79077"
+ y1="195.06647"
+ x1="279.71902"
+ style="stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.99999985, 3.99999985;marker-end:url(#FilledArrow_Marker_2)" />
+ </g>
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#FilledArrow_Marker)"
+ d="M 461.00559,144.919 531.684,121.97271"
+ id="path8783"
+ inkscape:connector-curvature="0" />
+ <g
+ id="g13474">
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Courier New';-inkscape-font-specification:'Courier New Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#800080;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="529.11847"
+ y="176.63338"
+ id="text9535"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan9537"
+ x="529.11847"
+ y="176.63338">*click*</tspan></text>
+ <path
+ inkscape:connector-curvature="0"
+ id="path9530"
+ d="m 468.72315,161.18462 174.44548,5.06468"
+ style="fill:none;fill-rule:evenodd;stroke:#800080;stroke-width:1.60000002;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1;marker-start:url(#FilledArrow_Marker_8)" />
+ </g>
+ </g>
+</svg>