From 7f1e2e48467f80cc083d24b44f088620e4e7bcb6 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Mon, 6 Jun 2011 08:50:35 -0700 Subject: new batch of docs --- docs/content/tutorial/index.ngdoc | 187 ++++++++++++++++++++------------- docs/content/tutorial/step_00.ngdoc | 200 ++++++++++++++++++++++++++---------- docs/content/tutorial/step_01.ngdoc | 50 ++------- docs/content/tutorial/step_02.ngdoc | 77 +++++--------- docs/content/tutorial/step_03.ngdoc | 63 ++++-------- docs/content/tutorial/step_04.ngdoc | 51 +++------ docs/content/tutorial/step_05.ngdoc | 76 +++++--------- docs/content/tutorial/step_06.ngdoc | 54 +++------- docs/content/tutorial/step_07.ngdoc | 65 ++++-------- docs/content/tutorial/step_08.ngdoc | 57 +++------- docs/content/tutorial/step_09.ngdoc | 42 ++------ docs/content/tutorial/step_10.ngdoc | 44 ++------ docs/content/tutorial/step_11.ngdoc | 93 ++++++----------- docs/content/tutorial/the_end.ngdoc | 12 ++- 14 files changed, 470 insertions(+), 601 deletions(-) (limited to 'docs/content/tutorial') diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 4b10401a..eb4c7e11 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -38,14 +38,14 @@ When you finish the tutorial you will be able to: * 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 read the tutorial but won't be -able to run the tests or experiment with the code. +The tutorial is will guide you through the process of building a simple application, including +writing and running unit and end-to-end tests, and will allow you to experiment with angular and +the application through experiments suggested at the end of each step. 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. If you're looking for a shorter introduction to angular, check out {@link -http://docs.angularjs.org/#!started started}. +really digging into it. If you're looking for a shorter introduction to angular, check out the +{@link misc/started Getting Started} document. @@ -54,21 +54,8 @@ http://docs.angularjs.org/#!started started}. - -# Prerequisites -To run the tutorial app and tests on your machine you will need the following: - - -* 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. @@ -76,59 +63,113 @@ or another http sever. # 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 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 prerequisites 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`. - - - cd angular-phonecat - - - The tutorial instructions assume you are running all commands from this directory. - - - - -## Using Snapshots - - -1. Check to be sure you have all of the prerequisites on your system. - - -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 - - - - -Let's get going with {@link tutorial/step_00 step 0}. +There are two ways that you can you follow this tutorial and hack on the code, both available on +Mac/Linux or Windows environment. The first work flow uses Git versioning system for source code +management, the second work flow doesn't depend on any source control system and instead uses +scripts to copy snapshots of project files into your workspace (`sandbox`) directory. Choose the +one you prefer: + + + + +

Verify that you have Java installed by running the +following command in a terminal window:
+
```
java -version
```
+
You will need Java to run unit tests.
Get Git from here
+
You can build it from source or use pre-compiled package.
Clone the angular-phonecat repository located at Github by running this command:
+
```
git clone git://github.com/angular/angular-phonecat.git
```
+
This will create angular-phonecat directory in current directory.
Change your current directory to angular-phonecat:
+
```
cd angular-phonecat
```
+
The tutorial instructions assume you are running all commands from this directory.
You'll also need 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 and use it to run scripts/web-server.js — a simple bundled http +server.

+ + + + +

Verify that you have Java installed and that the +java executable is on your PATH by running this command in windows +command line:
+
```
java -version
```
+
You will need Java to run unit tests.
Install msysGit from here
Open msysGit bash and clone the angular-phonecat repository located at Github by running this command:
+
```
git clone git://github.com/angular/angular-phonecat.git
```
+
This will create angular-phonecat directory in your current directory.
Change your current directory to angular-phonecat:
+
```
cd angular-phonecat
```
+
The tutorial instructions assume you are running all commands from this directory.
+
You should run all git commands from msysGit bash.
+
Other commands like test-server.bat or test.bat that will be +introduced soon, should be executed from the windows command line.
You'll also need an http server running on your system.
+
If you don't already have an http server installed, you can install node.js. Just download pre-compiled binaries, unzip them and add +nodejs\bin into your PATH and use node to run +scripts\web-server.js — a simple bundled http server.

+ + + + +

Verify that you have Java installed by running the +following command in a terminal window:
+
```
java -version
```
+
You will need Java to run unit tests.
Download the zip archive +with all files and unzip them into [tutorial-dir] directory
Change your current directory to [tutorial-dir]/sanbox:
+
```
cd [tutorial-dir]/sandbox
```
+
The tutorial instructions assume you are running all commands from this directory.
You'll also need 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 and use it to run scripts/web-server.js — a simple bundled http +server.

+ + + + +

Verify that you have Java installed and that the +java executable is on your PATH by running this command in windows +command line:
+
```
java -version
```
+
You will need Java to run unit tests.
Download the zip archive +with all files and unzip them into [tutorial-dir] directory
Change your current directory to [tutorial-dir]/sanbox:
+
```
cd [tutorial-dir]/sandbox
```
+
The tutorial instructions assume you are running all commands from this directory.
You'll also need an http server running on your system.
+
If you don't already have an http server installed, you can install node.js. Just download pre-compiled binaries, unzip them and add +nodejs\bin into your PATH and use node to run +scripts\web-server.js — a simple bundled http server.

+ + + + +For either work flow you'll also need a web browser and your favorite text editor. + + +Let's get going with {@link step_00 step 0}. diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 36b35004..e97f4038 100755 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -1,17 +1,11 @@ @ngdoc overview -@name Tutorial: Step 0 +@name Tutorial: 0 - angular-seed @description - - - - - - - - -

{@link tutorial Previous}

{@link http://angular.github.com/angular-phonecat/step-0/app Live Demo}

{@link tutorial Tutorial Home}

Code Diff

{@link tutorial.step_01 Next}

+ + You are now ready to build the phone cat application. In this step, you will become familiar with @@ -19,40 +13,146 @@ the most important source code files, learn how to start the development servers angular-seed, and run the application in the browser. -1. Do one of the following: - - - * Git users: In the `angular-phonecat` directory, run this command: - - - git checkout -f step-0 - - - * Snapshot users: In the `[tutorial-dir]/sandbox` directory, run this command: - ./goto_step.sh 0 + + +

In 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.
To see the app running in a browser, do one of the following: +
- For node.js users: +
  1. In a separate terminal tab or window, run +./scripts/web-server.js to start the web server.
  2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
  +
- For other http servers: +
  1. Configure the server to serve the files in the angular-phonecat +directory.
  2. Navigate in your browser to +http://localhost:[port-number]/[context-path]/app/index.html.
  +
+

+ + + + + + +

Open msysGit bash and run this command (in angular-phonecat directory):
+
```
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.
To see the app running in a browser, do one of the following: +
- For node.js users: +
  1. In a separate terminal tab or window, run node +scripts\web-server.js to start the web server.
  2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
  +
- For other http servers: +
  1. Configure the server to serve the files in the angular-phonecat +directory.
  2. Navigate in your browser to +http://localhost:[port-number]/[context-path]/app/index.html.
  +
+

+ + + + + + +

In angular-phonecat directory, run this command:
+
```
./goto_step.sh 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.
To see the app running in a browser, do one of the following: +
- For node.js users: +
  1. In a separate terminal tab or window, run +./scripts/web-server.js to start the web server.
  2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
  +
- For other http servers: +
  1. Configure the server to serve the files in the angular-phonecat +sandbox directory.
  2. Navigate in your browser to +http://localhost:[port-number]/[context-path]/app/index.html.
  +
+

+ + + + + + +

Open windows command line and run this command (in angular-phonecat directory):
+
```
goto_step.bat 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.
To see the app running in a browser, do one of the following: +
- For node.js users: +
  1. In a separate terminal tab or window, run node +scripts\web-server.js to start the web server.
  2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html
  +
- For other http servers: +
  1. Configure the server to serve the files in the angular-phonecat +sandbox directory.
  2. Navigate in your browser to +http://localhost:[port-number]/[context-path]/app/index.html.
  +
+

+ + - 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. Either command will cause any changes you made within your working directory -to be lost. - - -2. To see the app running in a browser, do one of the following: - * __For node.js users:__ - 1. In a _separate_ terminal tab or window, run `./scripts/web-server.js` to start the app -server. - 2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html. - - - * __For other http servers:__ - 1. Configure the server to serve the files in the `angular-phonecat` directory. - 2. Navigate in your browser to -http://localhost:[*port-number*]/[*context-path*]/app/index.html. You can now see the page in your browser. It's not very exciting, but that's OK. @@ -93,7 +193,7 @@ __`app/index.html`:__ * xmlns declaration - + This `xmlns` declaration for the `ng` namespace must be specified in all angular applications in @@ -104,7 +204,7 @@ using XHTML or HTML). * angular script tag -