diff options
| author | Igor Minar | 2011-05-10 17:45:42 -0700 | 
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:51:58 -0700 | 
| commit | 3751f172b3986604853700a1475a7ad81b42a9b1 (patch) | |
| tree | f6bd09073a22e36b48a6c4454aa082d422a6fd92 /docs/content/tutorial/index.ngdoc | |
| parent | 3776e08db08232d38b6d5e561092ef78795ec356 (diff) | |
| download | angular.js-3751f172b3986604853700a1475a7ad81b42a9b1.tar.bz2 | |
add new batch of tutorial docs and images
Diffstat (limited to 'docs/content/tutorial/index.ngdoc')
| -rw-r--r-- | docs/content/tutorial/index.ngdoc | 110 | 
1 files changed, 69 insertions, 41 deletions
| diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 85c84260..4b10401a 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -2,105 +2,133 @@  @name Tutorial  @description -A great way to get introduced to angular is to work through the {@link tutorial.step_00 angular -tutorial}, which walks you through the construction of an angular web app. The app you will build -in the tutorial is loosely based on the {@link http://www.google.com/phone/ Google phone gallery -app}. The {@link http://angular.github.com/angular-phonecat/step-11/app/#/phones end result of our -effort} is visually simpler, but demonstrates many of the angular features without distractions in -the form of CSS code. -The starting point for our tutorial is the {@link https://github.com/angular/angular-seed -angular-seed project}. +A great way to get introduced to angular is to work through this tutorial, which walks you through +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. -The angular-seed project includes a simple example app, the latest angular libraries, test -libraries, and scripts. It provides all of these in an environment that is pre-configured for -developing a typical web app. For this tutorial, we modified the angular-seed as follows: -* Removed the example app -* Added phone images to `app/img/phones` -* Added phone data files (JSON) to `app/phones`  +<img src="img/tutorial/catalog_screen.png"> + + +As you work through this tutorial, you will learn how angular makes browsers smarter — without the +use of extensions or plugins. + + +* You will see examples of how to use client-side data binding and dependency injection to build +dynamic views of data that change immediately in response to user actions. +* You will see how Angular creates listeners on your data without the need for DOM manipulation. +* You will learn a better, easier way to test your web apps. +* You will learn how to use Angular services to make common web tasks, such as getting data into +your app, easier. + + +And all of this works in any browser without modifications! -**Note**: Using the angular seed app isn't required for building angular apps, but doing so helps -you get started quickly and makes the development and testing process much easier.   When you finish the tutorial you will be able to: -* Create a simple dynamic application that works in any browser + +* Create a dynamic application that works in any browser  * Define the differences between angular and common JavaScript frameworks  * Understand how data binding works in angular  * Use the angular-seed project to quickly boot-strap your own projects  * Create and run tests  * Identify resources for learning more about angular +  Mac and Linux users can work through the tutorial, run tests, and experiment with the code using -Git or the snapshots described below. Windows users will be able follow the tutorial and read -through the source code and view the application running on our servers at different stages. +Git or the snapshots described below. Windows users will be able read the tutorial but won't be +able to run the tests or experiment with the code. +  You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day -really digging into it. In any case, we promise that your time will be well spent! +really digging into it. If you're looking for a shorter introduction to angular, check out {@link +http://docs.angularjs.org/#!started started}. + + + + + + +  <a name="PreReqs"></a>  # Prerequisites +  To run the tutorial app and tests on your machine you will need the following: -* A Mac or Linux machine (required by the tutorial scripts, not angular) -* An http server running on your system. If you don't already have one installed, you can install -`node.js` ({@link https://github.com/joyent/node/wiki/Installation node.js install guide}) or -another http sever (such as Apache, etc.). -* Java. This is required for running tests with JsTestDriver. + +* A Mac or Linux machine (required for running the tutorial scripts) +* An http server running on your system. Mac and Linux machines typically have Apache preinstalled. +If you don't already have an http server installed, you can install `node.js` ({@link +https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager node.js install guide}) +or another http sever. +* {@link http://java.com Java}.  * A web browser.  * A text editor. + +  # Working with the code +  There are two ways that you can you follow this tutorial and hack on the code: +  ## Using Git -The following instructions are for developers who are comfortable with the Git versioning system: + +The following instructions are for Git users. If you're not a Git user, skip down to the "Using +Snapshots" section. +  1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system. +  2. Clone the angular-phonecat repository located at {@link  https://github.com/angular/angular-phonecat GitHub} by running the following command in a terminal: +          git clone git://github.com/angular/angular-phonecat.git -   This will create a directory called `angular-phonecat` in the current directory.  -3. Change your current directory to `angular-phonecat`.  +   This will create a directory called `angular-phonecat` in the current directory. + + +3. Change your current directory to `angular-phonecat`. + + +        cd angular-phonecat -        cd angular-phonecat        The tutorial instructions assume you are running all commands from this directory. + +  ## Using Snapshots -Snapshots are the sets of files that reflect the state of the tutorial app at each step. These -files include the HTML, CSS, and JavaScript for the app, plus Jasmine JavaScript files and Java -libraries for the test stack. These will let you run the tutorial app and tests, without requiring -knowledge of Git.  You can download and install the snapshot files as follows:  1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system. -2. {@link TODO Download the zip archive} with all files and unzip them into `[tutorial-dir]` -directory. + +2. {@link http://code.angularjs.org/angular-phonecat-snapshots.zip Download the zip archive} with +all files and unzip them into `[tutorial-dir]` directory. + +  3. Change directories to `[tutorial-dir]/sandbox`. +          cd [tutorial-dir]/sandbox -# Tutorial Navigation -To see the app running on the angular server, click the "Live Demo" link at the top or bottom of -any tutorial page. To view the code differences between tutorial steps, click the Code Diff link -at top or bottom of each tutorial page. In the Code Diff, additions are highlighted in green; -deletions are highlighted in red. +Let's get going with {@link tutorial/step_00 step 0}. -Let's get going and proceed to {@link tutorial/step_00 step 0}. | 
