mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-27 06:54:01 +00:00
docs(tutorial): correct typos and clarify a few sections
This commit is contained in:
parent
9a710c788d
commit
acb499f820
11 changed files with 51 additions and 34 deletions
|
|
@ -56,7 +56,7 @@ __`app/index.html`:__
|
||||||
|
|
||||||
We added a standard HTML `<input>` tag and used angular's
|
We added a standard HTML `<input>` tag and used angular's
|
||||||
{@link api/ng.filter:filter $filter} function to process the input for the
|
{@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
|
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:
|
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
|
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
|
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
|
<div id="status">Current filter: {{query}}</div>
|
||||||
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
|
* Add a `pause()` statement inside of an end-to-end test and rerun it. You'll see the runner pause;
|
||||||
for troubleshooting end-to-end tests.
|
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
|
# Summary
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ necessary!
|
||||||
|
|
||||||
## Controller
|
## Controller
|
||||||
|
|
||||||
__`app/js/controller.js`:__
|
__`app/js/controllers.js`:__
|
||||||
<pre>
|
<pre>
|
||||||
function PhoneListCtrl($scope) {
|
function PhoneListCtrl($scope) {
|
||||||
$scope.phones = [
|
$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 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.
|
the unit test first.
|
||||||
|
|
||||||
__`test/unit/controllerSpec.js`:__
|
__`test/unit/controllersSpec.js`:__
|
||||||
<pre>
|
<pre>
|
||||||
describe('PhoneCat controllers', function() {
|
describe('PhoneCat controllers', function() {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ GitHub}:
|
||||||
|
|
||||||
## Data
|
## 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.
|
stored in the JSON format.
|
||||||
|
|
||||||
Following is a sample of the file:
|
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
|
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)
|
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
|
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
|
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
|
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 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
|
* We called the injected `$controller` function passing the `PhoneListCtrl` function and the created
|
||||||
the `PhoneListCtrl` controller.
|
scope as parameters.
|
||||||
|
|
||||||
Because our code now uses the `$http` service to fetch the phone list data in our controller, before
|
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
|
we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an
|
||||||
|
|
|
||||||
|
|
@ -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
|
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
|
can see them running on {@link
|
||||||
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
|
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
|
||||||
angular's server}.
|
Angular's server}.
|
||||||
|
|
||||||
|
|
||||||
# Experiments
|
# 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
|
making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
|
||||||
`/app/{{phone.imageUrl}}`).
|
`/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
|
# Summary
|
||||||
|
|
||||||
Now that you have added phone images and links, go to {@link step_07 step 7} to learn about angular
|
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.
|
layout templates and how Angular makes it easy to create applications that have multiple views.
|
||||||
|
|
||||||
|
|
||||||
<ul doc-tutorial-nav="6"></ul>
|
<ul doc-tutorial-nav="6"></ul>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ detail page is displayed.
|
||||||
|
|
||||||
The most important changes are listed below. You can see the full diff on {@link
|
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
|
https://github.com/angular/angular-phonecat/compare/step-6...step-7
|
||||||
GitHub}:
|
GitHub}.
|
||||||
|
|
||||||
|
|
||||||
## Multiple Views, Routing and Layout Template
|
## Multiple Views, Routing and Layout Template
|
||||||
|
|
@ -114,14 +114,14 @@ directive:
|
||||||
__`app/index.html`:__
|
__`app/index.html`:__
|
||||||
<pre>
|
<pre>
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html ng-app="phonecat">
|
<html lang="en" ng-app="phonecat">
|
||||||
...
|
...
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
## Controllers
|
## Controllers
|
||||||
|
|
||||||
__`app/js/controller.js`:__
|
__`app/js/controllers.js`:__
|
||||||
<pre>
|
<pre>
|
||||||
...
|
...
|
||||||
function PhoneDetailCtrl($scope, $routeParams) {
|
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`:__
|
__`app/index.html`:__
|
||||||
<pre>
|
<pre>
|
||||||
<html ng-app="phonecat">
|
<html lang="en" ng-app="phonecat">
|
||||||
<head>
|
<head>
|
||||||
...
|
...
|
||||||
<script src="lib/angular/angular.js"></script>
|
<script src="lib/angular/angular.js"></script>
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
|
<script src="js/controllers.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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
|
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
|
can see them running on {@link
|
||||||
http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html
|
http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html
|
||||||
angular's server}.
|
Angular's server}.
|
||||||
|
|
||||||
|
|
||||||
# Experiments
|
# Experiments
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ Now when you click on a phone on the list, the phone details page with phone-spe
|
||||||
is displayed.
|
is displayed.
|
||||||
|
|
||||||
To implement the phone details view we will use {@link api/ng.$http $http} to fetch
|
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
|
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
|
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
|
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.
|
the same way as the phone list controller.
|
||||||
|
|
||||||
__`app/js/controller.js`:__
|
__`app/js/controllers.js`:__
|
||||||
<pre>
|
<pre>
|
||||||
function PhoneDetailCtrl($scope, $routeParams, $http) {
|
function PhoneDetailCtrl($scope, $routeParams, $http) {
|
||||||
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
|
$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.
|
our model into the view.
|
||||||
|
|
||||||
|
|
||||||
__`app/partials/phone-details.html`:__
|
__`app/partials/phone-detail.html`:__
|
||||||
<pre>
|
<pre>
|
||||||
<img ng-src="{{phone.images[0]}}" class="phone">
|
<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
|
We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
|
||||||
step 5.
|
step 5.
|
||||||
|
|
||||||
__`test/unit/controllerSpec.js`:__
|
__`test/unit/controllersSpec.js`:__
|
||||||
<pre>
|
<pre>
|
||||||
...
|
...
|
||||||
describe('PhoneDetailCtrl', function(){
|
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
|
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
|
can see them running on {@link
|
||||||
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
|
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
|
||||||
angular's server}.
|
Angular's server}.
|
||||||
|
|
||||||
# Experiments
|
# Experiments
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
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
|
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
|
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
|
https://github.com/angular/angular-phonecat/compare/step-8...step-9
|
||||||
|
|
|
||||||
|
|
@ -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
|
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
|
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
|
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
|
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
|
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
|
can see them running on {@link
|
||||||
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
|
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
|
||||||
angular's server}.
|
Angular's server}.
|
||||||
|
|
||||||
# Experiments
|
# Experiments
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
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
|
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.
|
api/ng.$http $http} API, HTTP methods and URLs.
|
||||||
|
|
||||||
The most important changes are listed below. You can see the full diff on {@link
|
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
|
lines of code. This client can then be used in our application, instead of the lower-level {@link
|
||||||
api/ng.$http $http} service.
|
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
|
## Controller
|
||||||
|
|
||||||
We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
|
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
|
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
|
`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.
|
now to understand what the code in our controllers is doing.
|
||||||
|
|
||||||
__`app/js/controllers.js`.__
|
__`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
|
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
|
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
|
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
|
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
|
in Angular, we can use this future and bind it to our template. Then, when the data arrives, the
|
||||||
view will automatically update.
|
view will automatically update.
|
||||||
|
|
||||||
Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
|
Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
|
||||||
|
|
|
||||||
|
|
@ -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}.
|
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
|
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
|
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
|
to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@ docsApp.directive.docTutorialReset = function() {
|
||||||
' <ol>\n' +
|
' <ol>\n' +
|
||||||
' <li><p>Reset the workspace to step ' + step + '.</p>' +
|
' <li><p>Reset the workspace to step ' + step + '.</p>' +
|
||||||
' <pre>' + command + '</pre></li>\n' +
|
' <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' +
|
' </ol>\n' +
|
||||||
' </div>\n';
|
' </div>\n';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue