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', []) 'Step {{step}} Live Demo.

\n' + '\n' + '

The most important changes are listed below. You can see the full diff on ' + - 'GitHub\n' + + 'GitHub.\n' + '

' }; -}); \ 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 @@

{{ key }}

)

- Code licensed under the - The - MIT License. Documentation licensed under CC BY 3.0. + Code licensed under + The MIT License. + Documentation licensed under + CC BY 3.0.

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. -demo -application running in the browser +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. -
The `--depth=14` option just tells Git to pull down only the last 14 commits. This makes the -download much smaller and faster. +
+ The `--depth=16` option tells Git to pull down only the last 16 commits. + This makes the download much smaller and faster.
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 ``` - -
If you need to run different versions of node.js - in your local environment, consider installing - - Node Version Manager (nvm) - . +
+ 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].
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.
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.
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.
-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`.
+ ### 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]. +
+ 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. +
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 + +
+**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://` + +
+**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. + +
+**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]. + +
+**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`. + +
+ +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 -`http://localhost:8000/app/` +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 - - - My HTML File - - - - - - -

Nothing here {{'yet' + '!'}}

- - + + + My HTML File + + + + + +

Nothing here {{'yet' + '!'}}

+ + ``` - ## What is the code doing? -**`ng-app` directive:** +
+**`ng-app` attribute:** - +```html + +``` + +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:** +
+**`angular.js` script tag:** - +``` - 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. + +
**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: +
-

1 + 2 = {{ 1 + 2 }}

+* Try adding a new expression to `index.html` that will do some math: + ```html +

1 + 2 = {{1 + 2}}

+ ``` # 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.
- +
**`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 +
+ * Try adding more static HTML to `index.html`. For example: -

Total number of phones: 2

+ ```html +

Total number of phones: 2

+ ``` # 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. 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 @@ -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
## 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`:__ +
+**`app/index.html`:** ```html ... - + - +