From 8e2675029f5ca404a7c649cc161df3ea642d941f Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Sat, 28 Apr 2012 22:45:28 -0700 Subject: chore(docs): re-skin main documentation --- docs/content/tutorial/index.ngdoc | 44 ++++++++++++++++++------------------- docs/content/tutorial/step_00.ngdoc | 34 ++++++++++++++-------------- docs/content/tutorial/step_01.ngdoc | 8 +++---- docs/content/tutorial/step_02.ngdoc | 8 +++---- docs/content/tutorial/step_03.ngdoc | 10 ++++----- docs/content/tutorial/step_04.ngdoc | 39 +++++++++++++++----------------- docs/content/tutorial/step_05.ngdoc | 8 +++---- docs/content/tutorial/step_06.ngdoc | 8 +++---- docs/content/tutorial/step_07.ngdoc | 8 +++---- docs/content/tutorial/step_08.ngdoc | 8 +++---- docs/content/tutorial/step_09.ngdoc | 6 ++--- docs/content/tutorial/step_10.ngdoc | 8 +++---- docs/content/tutorial/step_11.ngdoc | 6 ++--- 13 files changed, 94 insertions(+), 101 deletions(-) (limited to 'docs/content/tutorial') diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 1190aaf2..9bbe9e2f 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -7,7 +7,7 @@ the construction of an AngularJS web app. The app you will build is a catalog th of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device. - + Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions or plug-ins. As you work through the tutorial, you will: @@ -52,22 +52,22 @@ code management or to use scripts that copy snapshots of project files into your (`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your computer for your preferred option. - - +
+

  1. Verify that you have Java installed by running the following command in a terminal window:

    - 
    java -version
    + 
    java -version

    You will need Java to run unit tests.

  2. Download Git from the Git site.

    You can build Git from source or use the pre-compiled package.

  3. Clone the angular-phonecat repository located at Github by running the following command:

    - 
    git clone git://github.com/angular/angular-phonecat.git
    + 
    git clone git://github.com/angular/angular-phonecat.git

    This command creates the angular-phonecat directory in your current directory.

  4. Change your current directory to angular-phonecat:

    - 
    cd angular-phonecat
    + 
    cd angular-phonecat

    The tutorial instructions assume you are running all commands from the angular-phonecat directory.

  5. You will need an http server running on your system. Mac and Linux machines typically @@ -75,22 +75,22 @@ have Apache pre-installed, but If you don't already have one installed, you can href="http://nodejs.org/#download">install node.js. Use node to run scripts/web-server.js, a simple bundled http server.

- +
- +

  1. You will need Java to run unit tests, so run the following command to verify that you have Java installed and that the java executable is on your PATH.

    - 
    java -version
    + 
    java -version

  2. Install msysGit from the Git site.

  3. Open msysGit bash and clone the angular-phonecat repository located at Github by running the following command:

    - 
    git clone git://github.com/angular/angular-phonecat.git
    + 
    git clone git://github.com/angular/angular-phonecat.git

    This command creates the angular-phonecat directory in your current directory.

  4. Change your current directory to angular-phonecat.

    - 
    cd angular-phonecat
    + 
    cd angular-phonecat

    The tutorial instructions assume you are running all commands from the angular-phonecat directory.

    You should run all git commands from msysGit bash.

    @@ -101,18 +101,18 @@ already installed, you can install node.js nodejs\bin was added into your PATH. Use node to run scripts\web-server.js, a simple bundled http server.

- +
- +

  1. You need Java to run unit tests, so verify that you have Java installed by running the following command in a terminal window:

    - 
    java -version
    + 
    java -version

  2. Download the zip archive containing all of the files and unzip them into the [tutorial-dir] directory

    .

  3. Change your current directory to [tutorial-dir]/sandbox, as follows:

    - 
    cd [tutorial-dir]/sandbox
    + 
    cd [tutorial-dir]/sandbox

    The tutorial instructions assume you are running all commands from your sandbox directory.

  4. You need an http server running on your system and Mac and Linux machines typically @@ -120,29 +120,29 @@ have Apache pre-installed. If you don't have an http server installed, you can < href="http://nodejs.org/#download">install node.js and use it to run scripts/web-server.js, a simple bundled http server.

- +
- +

  1. Verify that you have Java installed and that the java executable is on your PATH by running the following command in the Windows command line:

    - 
    java -version
    + 
    java -version

    You need Java to run unit tests, so download the zip archive that contains all of the files and unzip the files into the [tutorial-dir] directory

  2. Change your current directory to [tutorial-dir]/sandbox, as follows:

    - 
    cd [tutorial-dir]/sandbox
    + 
    cd [tutorial-dir]/sandbox

    The tutorial instructions assume you are running all commands from this directory.

  3. You need an http server running on your system, but if you don't already have one already installed, you can install node.js. Make sure that nodejs\bin was added into your PATH. Use node to run scripts\web-server.js, a simple bundled http server.

- - +
+ The last thing to do is to make sure your computer has a web browser and a good text editor installed. Now, let's get some cool stuff done! -{@link step_00 Get Started!} +{@link step_00 Get Started!} diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 3cf1c172..714f983e 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 0 - Bootstrapping @description -
    +
      You are now ready to build the AngularJS phonecat app. In this step, you will become familiar @@ -10,11 +10,11 @@ with the most important source code files, learn how to start the development se angular-seed, and run the application in the browser. - - +
      +

      1. In angular-phonecat directory, run this command:

        - 
        git checkout -f step-0
        + 
        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 @@ -41,13 +41,13 @@ directory.

      - +
      - +

      1. Open msysGit bash and run this command (in angular-phonecat directory):

        - 
        git checkout -f step-0
        + 
        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 @@ -73,13 +73,13 @@ directory.

      - +
      - +

      1. In the angular-phonecat directory, run this command:

        - 
        ./goto_step.sh 0
        + 
        ./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 @@ -105,13 +105,13 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html

      - +
      - +

      1. Open windows command line and run this command (in the angular-phonecat directory):

        - 
        goto_step.bat 0
        + 
        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 @@ -137,8 +137,8 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html

      - - +
      +
      You can now see the page in your browser. It's not very exciting, but that's OK. @@ -233,7 +233,7 @@ 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! - + ## What are all these files in my working directory? @@ -265,7 +265,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi Now let's go to {@link step_01 step 1} and add some content to the web app. -
        +
          Note: During the bootstrap the injector and the root scope will then be associated with the diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc index 11725031..a664c951 100644 --- a/docs/content/tutorial/step_01.ngdoc +++ b/docs/content/tutorial/step_01.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 1 - Static Template @description -
            +
              In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML @@ -12,7 +12,7 @@ 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. @@ -22,7 +22,6 @@ https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}: __`app/index.html`:__ 
              -...
   
                
     
              • 
       Nexus S
@@ -37,7 +36,6 @@ __`app/index.html`:__
       
                
     
                • 
   
              
-...
              @@ -54,4 +52,4 @@ This addition to your app uses static HTML to display the list. Now, let's go to step 2} to learn how to use AngularJS to dynamically generate the same list. -
                +
                  diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index d7e6a93f..bf7dc661 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 2 - Angular Templates @description -
                    +
                      Now it's time to make the web page dynamic — with AngularJS. We'll also add a test that verifies the @@ -14,7 +14,7 @@ design pattern} to decouple the code and to separate concerns. With that in mind little Angular and JavaScript to add model, view, and controller components to our app. - +
                      The app now contains a list with three phones. @@ -64,7 +64,7 @@ tag as the template. bindings. As opposed to evaluating constants, these expression are refering to our application model, which was set up in our `PhoneListCtrl` controller. - + ## Model and Controller @@ -209,4 +209,4 @@ are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to a to the app. -
                        +
                          diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 60b4173b..26bb9d5f 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 3 - Filtering Repeaters @description -
                            +
                              We did a lot of work in laying a foundation for the app in the last step, so now we'll do something @@ -11,7 +11,7 @@ test, because a good end-to-end test is a good friend. It stays with your app, k and quickly detects regressions. - +
                              The app now has a search box. Notice that the phone list on the page changes depending on what a @@ -31,7 +31,6 @@ We made no changes to the controller. __`app/index.html`:__ 
                              -...
   
                              
     
                              
       
                              
@@ -53,7 +52,6 @@ __`app/index.html`:__
       
                              
     
                              
   
                              
-...
                              We added a standard HTML `` tag and used angular's @@ -71,7 +69,7 @@ available as a filter input in the list repeater (`phone in phones | filter:`__` 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. - + * Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function uses the `query` value to create a new array that contains only those records that match the `query`. @@ -192,5 +190,5 @@ We have now added full text search and included a test to verify that search wor to {@link step_04 step 4} to learn how to add sorting capability to the phone app. -
                                +
                                  diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 900a0340..ca452b59 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 4 - Two-way Data Binding @description -
                                    +
                                      In this step, you will add a feature to let your users control the order of the items in the phone @@ -10,7 +10,7 @@ list. The dynamic ordering is implemented by creating a new model property, wiri the repeater, and letting the data binding magic do the rest of the work. - +
                                      You should see that in addition to the search box, the app displays a drop down menu that allows @@ -24,23 +24,20 @@ The most important differences between Steps 3 and 4 are listed below. You can s __`app/index.html`:__ 
                                      -...
-        Search: 
-        Sort by:
-        
-
-...
-
-        
                                        
-          
                                      • 
-            {{phone.name}}
-            
                                        {{phone.snippet}}
                                        
-          
                                        • 
-        
                                      
-...
+  Search: 
+  Sort by:
+  
+
+
+  
                                        
+    
                                      • 
+      {{phone.name}}
+      
                                        {{phone.snippet}}
                                        
+    
                                        • 
+
                                      We made the following changes to the `index.html` template: @@ -48,7 +45,7 @@ We made the following changes to the `index.html` template: * First, we added a `