diff options
| -rw-r--r-- | docs/content/tutorial/step_03.ngdoc | 14 | ||||
| -rw-r--r-- | docs/content/tutorial/step_04.ngdoc | 4 | ||||
| -rw-r--r-- | docs/content/tutorial/step_05.ngdoc | 8 | ||||
| -rw-r--r-- | docs/content/tutorial/step_06.ngdoc | 11 | ||||
| -rw-r--r-- | docs/content/tutorial/step_07.ngdoc | 11 | ||||
| -rw-r--r-- | docs/content/tutorial/step_08.ngdoc | 10 | ||||
| -rw-r--r-- | docs/content/tutorial/step_09.ngdoc | 2 | ||||
| -rw-r--r-- | docs/content/tutorial/step_10.ngdoc | 4 | ||||
| -rw-r--r-- | docs/content/tutorial/step_11.ngdoc | 17 | ||||
| -rw-r--r-- | docs/content/tutorial/the_end.ngdoc | 2 | ||||
| -rw-r--r-- | docs/src/templates/js/docs.js | 2 |
11 files changed, 51 insertions, 34 deletions
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 91670f52..18d0fca9 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -56,7 +56,7 @@ __`app/index.html`:__ We added a standard HTML `<input>` tag and used angular's {@link api/ng.filter:filter $filter} function to process the input for the -`ngRepeat` directive. +{@link api/ng.directive:ngRepeat ngRepeat} directive. This lets a user enter search criteria and immediately see the effects of their search on the phone list. This new code demonstrates the following: @@ -176,12 +176,14 @@ ngBindTemplate} directives, which are invisible to the user while the page is lo Refresh the browser tab with the end-to-end test runner to see the test fail. To make the test pass, edit the `index.html` template to add a `div` or `p` element with `id` `"status"` and content -with the `query` binding. +with the `query` binding, prefixed by "Current filter:". For instance: -* Add a `pause()` statement into an end-to-end test and rerun it. You'll see the runner pause; this -gives you the opportunity to explore the state of your application while it is displayed in the -browser. The app is live! You can change the search query to prove it. Notice how useful this is -for troubleshooting end-to-end tests. + <div id="status">Current filter: {{query}}</div> + +* Add a `pause()` statement inside of an end-to-end test and rerun it. You'll see the runner pause; +this gives you the opportunity to explore the state of your application while it is displayed in +the browser. The app is live! You can change the search query to prove it. Notice how useful this +is for troubleshooting end-to-end tests. # Summary diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 2542e21f..be7df1f0 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -63,7 +63,7 @@ necessary! ## Controller -__`app/js/controller.js`:__ +__`app/js/controllers.js`:__ <pre> function PhoneListCtrl($scope) { $scope.phones = [ @@ -103,7 +103,7 @@ to the model. The changes we made should be verified with both a unit test and an end-to-end test. Let's look at the unit test first. -__`test/unit/controllerSpec.js`:__ +__`test/unit/controllersSpec.js`:__ <pre> describe('PhoneCat controllers', function() { diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc index 80520078..543a5489 100644 --- a/docs/content/tutorial/step_05.ngdoc +++ b/docs/content/tutorial/step_05.ngdoc @@ -22,7 +22,7 @@ GitHub}: ## Data -The `app/phones/phone.json` file in your project is a dataset that contains a larger list of phones +The `app/phones/phones.json` file in your project is a dataset that contains a larger list of phones stored in the JSON format. Following is a sample of the file: @@ -104,7 +104,7 @@ to avoid any possible naming collisions. Since angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minification_(programming) minify} the JavaScript code for `PhoneListCtrl` controller, all of its function arguments would be -minified as well, and the dependency injector would be able to identify services correctly. +minified as well, and the dependency injector would not be able to identify services correctly. To overcome issues caused by minification, just assign an array with service identifier strings into the `$inject` property of the controller function, just like the last line in the snippet @@ -164,8 +164,8 @@ isolated from the work done in other tests. * We created a new scope for our controller by calling `$rootScope.$new()` -* We called `scope.$new(PhoneListCtrl)` to get Angular to create the child scope associated with -the `PhoneListCtrl` controller. +* We called the injected `$controller` function passing the `PhoneListCtrl` function and the created +scope as parameters. Because our code now uses the `$http` service to fetch the phone list data in our controller, before we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc index 0df5681b..550d71ea 100644 --- a/docs/content/tutorial/step_06.ngdoc +++ b/docs/content/tutorial/step_06.ngdoc @@ -87,7 +87,8 @@ views that we will implement in the upcoming steps. You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running on {@link http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html -angular's server}. +Angular's server}. + # Experiments @@ -96,11 +97,15 @@ or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or `/app/{{phone.imageUrl}}`). + The issue here is that the browser will fire a request for that invalid image address as soon as +it hits the `img` tag, which is before Angular has a chance to evaluate the expression and inject +the valid address. + # Summary -Now that you have added phone images and links, go to {@link step_07 step 7} to learn about angular -layout templates and how angular makes it easy to create applications that have multiple views. +Now that you have added phone images and links, go to {@link step_07 step 7} to learn about Angular +layout templates and how Angular makes it easy to create applications that have multiple views. <ul doc-tutorial-nav="6"></ul> diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc index a70d1287..3d24d205 100644 --- a/docs/content/tutorial/step_07.ngdoc +++ b/docs/content/tutorial/step_07.ngdoc @@ -19,7 +19,7 @@ detail page is displayed. The most important changes are listed below. You can see the full diff on {@link https://github.com/angular/angular-phonecat/compare/step-6...step-7 -GitHub}: +GitHub}. ## Multiple Views, Routing and Layout Template @@ -114,14 +114,14 @@ directive: __`app/index.html`:__ <pre> <!doctype html> -<html ng-app="phonecat"> +<html lang="en" ng-app="phonecat"> ... </pre> ## Controllers -__`app/js/controller.js`:__ +__`app/js/controllers.js`:__ <pre> ... function PhoneDetailCtrl($scope, $routeParams) { @@ -140,11 +140,12 @@ route into the layout template, which makes it a perfect fit for our `index.html __`app/index.html`:__ <pre> -<html ng-app="phonecat"> +<html lang="en" ng-app="phonecat"> <head> ... <script src="lib/angular/angular.js"></script> <script src="js/app.js"></script> + <script src="js/controllers.js"></script> </head> <body> @@ -234,7 +235,7 @@ to various URLs and verify that the correct view was rendered. You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running on {@link http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html -angular's server}. +Angular's server}. # Experiments diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index 60330ad6..1316024f 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -16,7 +16,7 @@ Now when you click on a phone on the list, the phone details page with phone-spe is displayed. To implement the phone details view we will use {@link api/ng.$http $http} to fetch -our data, and we'll flesh out the `phone-details.html` view template. +our data, and we'll flesh out the `phone-detail.html` view template. The most important changes are listed below. You can see the full diff on {@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 @@ -59,7 +59,7 @@ show this data in the phone detail view. We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the json files. This works the same way as the phone list controller. -__`app/js/controller.js`:__ +__`app/js/controllers.js`:__ <pre> function PhoneDetailCtrl($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { @@ -81,7 +81,7 @@ Note where we use the angular `{{expression}}` markup and `ngRepeat` to project our model into the view. -__`app/partials/phone-details.html`:__ +__`app/partials/phone-detail.html`:__ <pre> <img ng-src="{{phone.images[0]}}" class="phone"> @@ -121,7 +121,7 @@ TODO! We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in step 5. -__`test/unit/controllerSpec.js`:__ +__`test/unit/controllersSpec.js`:__ <pre> ... describe('PhoneDetailCtrl', function(){ @@ -180,7 +180,7 @@ __`test/e2e/scenarios.js`:__ You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running on {@link http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html -angular's server}. +Angular's server}. # Experiments diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index d81e17bc..09499fa8 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -15,7 +15,7 @@ Navigate to one of the detail pages. In the previous step, the details page displayed either "true" or "false" to indicate whether certain phone features were present or not. We have used a custom filter to convert those text -strings into glyphs: ✓ for "true", and ✘ for "false". Let's see, what the filter code looks like. +strings into glyphs: ✓ for "true", and ✘ for "false". Let's see what the filter code looks like. The most important changes are listed below. You can see the full diff on {@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index 4fa87a1f..11571ca2 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -13,7 +13,7 @@ In this step, you will add a clickable phone image swapper to the phone details The phone details view displays one large image of the current phone and several smaller thumbnail images. It would be great if we could replace the large image with any of the thumbnails just by -clicking on the desired thumbnail image. Let's have a look at how we can do this with angular. +clicking on the desired thumbnail image. Let's have a look at how we can do this with Angular. The most important changes are listed below. You can see the full diff on {@link https://github.com/angular/angular-phonecat/compare/step-9...step-10 @@ -105,7 +105,7 @@ __`test/e2e/scenarios.js`:__ You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running on {@link http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html -angular's server}. +Angular's server}. # Experiments diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc index b881184b..e34545b3 100644 --- a/docs/content/tutorial/step_11.ngdoc +++ b/docs/content/tutorial/step_11.ngdoc @@ -13,7 +13,7 @@ In this step, you will improve the way our app fetches data. The last improvement we will make to our app is to define a custom service that represents a {@link http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client. Using this client we -can make xhr requests for data in an easier way, without having to deal with the lower-level {@link +can make XHR requests for data in an easier way, without having to deal with the lower-level {@link api/ng.$http $http} API, HTTP methods and URLs. The most important changes are listed below. You can see the full diff on {@link @@ -57,13 +57,22 @@ The {@link api/ngResource.$resource `$resource`} service makes it easy to create lines of code. This client can then be used in our application, instead of the lower-level {@link api/ng.$http $http} service. +__`app/js/app.js`.__ +<pre> +... +angular.module('phonecat', ['phonecatFilters', 'phonecatServices']). +... +</pre> + +We need to add 'phonecatServices' to 'phonecat' application's requires array. + ## Controller We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the lower-level {@link api/ng.$http $http} service, replacing it with a new service called `Phone`. Angular's {@link api/ngResource.$resource `$resource`} service is easier to -use than `$http for interacting with data sources exposed as RESTful resources. It is also easier +use than `$http` for interacting with data sources exposed as RESTful resources. It is also easier now to understand what the code in our controllers is doing. __`app/js/controllers.js`.__ @@ -107,8 +116,8 @@ This is a simple statement that we want to query for all phones. An important thing to notice in the code above is that we don't pass any callback functions when invoking methods of our Phone service. Although it looks as if the result were returned synchronously, that is not the case at all. What is returned synchronously is a "future" — an -object, which will be filled with data when the xhr response returns. Because of the data-binding -in angular, we can use this future and bind it to our template. Then, when the data arrives, the +object, which will be filled with data when the XHR response returns. Because of the data-binding +in Angular, we can use this future and bind it to our template. Then, when the data arrives, the view will automatically update. Sometimes, relying on the future object and data-binding alone is not sufficient to do everything diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc index f62f4fdb..839a119c 100644 --- a/docs/content/tutorial/the_end.ngdoc +++ b/docs/content/tutorial/the_end.ngdoc @@ -11,7 +11,7 @@ For more details and examples of the Angular concepts we touched on in this tuto For several more examples of code, see the {@link cookbook/ Cookbook}. When you are ready to start developing a project using Angular, we recommend that you bootstrap -your development with the {@link https://github.com/angular/angular-seed angular seed} project. +your development with the {@link https://github.com/angular/angular-seed angular-seed} project. We hope this tutorial was useful to you and that you learned enough about Angular to make you want to learn more. We especially hope you are inspired to go out and develop Angular web apps of your diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js index de40db64..436651e7 100644 --- a/docs/src/templates/js/docs.js +++ b/docs/src/templates/js/docs.js @@ -96,7 +96,7 @@ docsApp.directive.docTutorialReset = function() { ' <ol>\n' + ' <li><p>Reset the workspace to step ' + step + '.</p>' + ' <pre>' + command + '</pre></li>\n' + - ' <li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{{docTutorialReset}}/app">angular\'s server</a>.</p></li>\n' + + ' <li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-' + step + '/app">Angular\'s server</a>.</p></li>\n' + ' </ol>\n' + ' </div>\n'; } |