diff options
Diffstat (limited to 'docs/content/tutorial/step_02.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_02.ngdoc | 77 |
1 files changed, 25 insertions, 52 deletions
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index faad7f0e..10721679 100755 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -1,17 +1,11 @@ @ngdoc overview -@name Tutorial: Step 2 +@name Tutorial: 2 - Angular Template @description -<table id="tutorial_nav"> - <tr> - <td id="previous_step">{@link tutorial.step_01 Previous}</td> - <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-2/app Live -Demo}</td> - <td id="tut_home">{@link tutorial Tutorial Home}</td> -<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-1...step-2 Code -Diff}</td> - <td id="next_step">{@link tutorial.step_03 Next}</td> - </tr> -</table> + + +<ul doc:tutorial-nav="2"></ul> + + Now it's time to make this web page dynamic with angular. We'll also add a test that verifies the @@ -24,21 +18,12 @@ code and separate concerns. With that in mind, let's use a little angular and Ja model, view, and controller components to our app. -1. Reset your workspace to step 2. - - git checkout -f step-2 +<doc:tutorial-instructions step="2"></doc:tutorial-instructions> - or - ./goto_step.sh 2 - - -2. Refresh your browser or check the app out on {@link -http://angular.github.com/angular-phonecat/step-2/app angular's server}. - The app now contains a list with 3 phones. @@ -76,9 +61,9 @@ __`app/index.html`:__ </pre> -We replaced the hard-coded phone list with the {@link angular.widget.@ng:repeat ng:repeat widget} -and two {@link guide.expression angular expressions} enclosed in curly braces: `{{phone.name}}` and -`{{phone.snippet}}`: +We replaced the hard-coded phone list with the {@link api/angular.widget.@ng:repeat ng:repeat +widget} and two {@link guide/dev_guide.expressions angular expressions} enclosed in curly braces: +`{{phone.name}}` and `{{phone.snippet}}`: * The `ng:repeat="phone in phones"` statement in the `<li>` tag is an angular repeater. It @@ -90,12 +75,12 @@ tag as the template. * The curly braces around `phone.name` and `phone.snippet` are an example of {@link -angular.markup angular markup}. The curly markup is shorthand for the angular directive {@link -angular.directive.ng:bind ng:bind}. The `ng:bind` directives indicate to angular that these are -template binding points. Binding points are locations in the template where angular creates -data-binding between the view and the model. 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. +guide/dev_guide.compiler.markup angular markup}. The curly markup is shorthand for the angular +directive {@link api/angular.directive.ng:bind ng:bind}. The `ng:bind` directives indicate to +angular that these are template binding points. Binding points are locations in the template where +angular creates data-binding between the view and the model. 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. @@ -133,7 +118,7 @@ data, and logic components: * The name of our controller function (in the JavaScript file `controllers.js`) matches the -{@link angular.directive.@ng:controller ng:controller} directive in the `<body>` tag +{@link api/angular.directive.@ng:controller ng:controller} directive in the `<body>` tag (`PhoneListCtrl`). * We instantiated our data within the scope of our controller function, and our template binding points are located within the block bounded by the `<body ng:controller="PhoneListCtrl">` @@ -145,7 +130,7 @@ the template, model and controller all work together. Angular uses scopes, along information contained in the template, data model, and controller, to keep the model and view separated but in sync. Any changes 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 -angular.scope angular scope documentation}. +api/angular.scope angular scope documentation}. @@ -162,7 +147,7 @@ __`test/unit/controllersSpec.js`:__ describe('PhoneCat controllers', function() { - describe('PhoneListCtrl', function(){ + describe('PhoneListCtrl', function() { it('should create "phones" model with 3 phones', function() { @@ -199,8 +184,8 @@ http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the 3. Choose "Capture this browser in strict mode". -At this point, you can leave this tab open and forget about it. JsTestDriver will use it to execute -the tests and report the results in the terminal. + At this point, you can leave this tab open and forget about it. JsTestDriver will use it to +execute the tests and report the results in the terminal. 4. Execute the test by running `./scripts/test.sh` @@ -218,7 +203,7 @@ the tests and report the results in the terminal. Yay! The test passed! Or not... -Note: If you see errors after you run the test, close the browser tab and go back to the terminal + Note: If you see errors after you run the test, close the browser tab and go back to the terminal and kill the script, then repeat the procedure above. @@ -231,13 +216,13 @@ and kill the script, then repeat the procedure above. <p>Total number of phones: {{phones.length}}</p> -* Create a new model property in the controller and bind to it from the template. For example: +* Create a new model property in the controller and bind to it from the template. For example: this.hello = "Hello, World!" -Refresh your browser to make sure it says, "Hello, World!" + Refresh your browser to make sure it says, "Hello, World!" * Create a repeater that constructs a simple table: @@ -273,17 +258,5 @@ you're testing as you go. Now, let's go to step 3 to learn how to add full text -<table id="tutorial_nav"> - <tr> - <td id="previous_step">{@link tutorial.step_01 Previous}</td> - <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-2/app Live -Demo}</td> - <td id="tut_home">{@link tutorial Tutorial Home}</td> -<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-1...step-2 Code -Diff}</td> - <td id="next_step">{@link tutorial.step_03 Next}</td> - </tr> -</table> - - +<ul doc:tutorial-nav="2"></ul> |