mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-05-04 20:59:19 +08:00
style(docs): make jslint happy - fix some warnings
This commit is contained in:
@@ -102,7 +102,7 @@ contained in the template, data model, and controller, to keep models and views
|
||||
sync. Any changes made 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 api/angular.module.NG.$rootScope.Scope angular scope documentation}.
|
||||
To learn more about Angular scopes, see the {@link api/angular.module.ng.$rootScope.Scope angular scope documentation}.
|
||||
|
||||
|
||||
## Tests
|
||||
|
||||
@@ -43,7 +43,7 @@ __`app/index.html`:__
|
||||
...
|
||||
</pre>
|
||||
|
||||
We added a standard HTML `<input>` tag and used angular's {@link api/angular.module.NG.$filter.filter $filter}
|
||||
We added a standard HTML `<input>` tag and used angular's {@link api/angular.module.ng.$filter.filter $filter}
|
||||
function to process the input for the `ng:repeater`.
|
||||
|
||||
This lets a user enter search criteria and immediately see the effects of their search on the phone
|
||||
@@ -59,7 +59,7 @@ the DOM to reflect the current state of the model.
|
||||
|
||||
<img src="img/tutorial/tutorial_03_final.png">
|
||||
|
||||
* Use of `$filter`. The {@link api/angular.module.NG.$filter.filter $filter} method uses the `query` value to
|
||||
* Use of `$filter`. The {@link api/angular.module.ng.$filter.filter $filter} method uses the `query` value to
|
||||
create a new array that contains only those records that match the `query`.
|
||||
|
||||
`ng:repeat` automatically updates the view in response to the changing number of phones returned
|
||||
|
||||
@@ -54,9 +54,9 @@ two provided sorting options.
|
||||
|
||||
<img src="img/tutorial/tutorial_04-06_final.png">
|
||||
|
||||
* We then chained the `$filter` method with {@link api/angular.module.NG.$filter.orderBy `$orderBy`} method to
|
||||
* We then chained the `$filter` method with {@link api/angular.module.ng.$filter.orderBy `$orderBy`} method to
|
||||
further process the input into the repeater. `$orderBy` is a utility method similar to {@link
|
||||
api/angular.module.NG.$filter.filter `$filter`}, but instead of filtering an array, it reorders it.
|
||||
api/angular.module.ng.$filter.filter `$filter`}, but instead of filtering an array, it reorders it.
|
||||
|
||||
Angular creates a two way data-binding between the select element and the `orderProp` model.
|
||||
`orderProp` is then used as the input for the `$orderBy` method.
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
|
||||
Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
|
||||
from our server using one of angular's built-in {@link api/angular.module.NG services} called {@link
|
||||
api/angular.module.NG.$xhr $xhr}. We will use angular's {@link guide/dev_guide.di dependency
|
||||
from our server using one of angular's built-in {@link api/angular.module.ng services} called {@link
|
||||
api/angular.module.ng.$xhr $xhr}. We will use angular's {@link guide/dev_guide.di dependency
|
||||
injection (DI)} to provide the service to the `PhoneListCtrl` controller.
|
||||
|
||||
|
||||
@@ -42,9 +42,9 @@ Following is a sample of the file:
|
||||
|
||||
## Controller
|
||||
|
||||
We'll use angular's {@link api/angular.module.NG.$xhr $xhr} service in our controller to make an HTTP
|
||||
We'll use angular's {@link api/angular.module.ng.$xhr $xhr} service in our controller to make an HTTP
|
||||
request to your web server to fetch the data in the `app/phones/phones.json` file. `$xhr` is just
|
||||
one of several built-in {@link api/angular.module.NG angular services} that handle common operations
|
||||
one of several built-in {@link api/angular.module.ng angular services} that handle common operations
|
||||
in web apps. Angular injects these services for you where you need them.
|
||||
|
||||
Services are managed by angular's {@link guide/dev_guide.di DI subsystem}. Dependency injection
|
||||
@@ -127,7 +127,7 @@ describe('PhoneCat controllers', function() {
|
||||
var scope, $browser, ctrl;
|
||||
|
||||
beforeEach(function() {
|
||||
scope = angular.module.NG.$rootScope.Scope();
|
||||
scope = angular.module.ng.$rootScope.Scope();
|
||||
$browser = scope.$service('$browser');
|
||||
|
||||
$browser.xhr.expectGET('phones/phones.json')
|
||||
@@ -140,7 +140,7 @@ describe('PhoneCat controllers', function() {
|
||||
|
||||
We created the controller in the test environment, as follows:
|
||||
|
||||
* We created a root scope object by calling `angular.module.NG.$rootScope.Scope()`
|
||||
* We created a root scope object by calling `angular.module.ng.$rootScope.Scope()`
|
||||
|
||||
* We called `scope.$new(PhoneListCtrl)` to get angular to create the child scope associated with
|
||||
the `PhoneListCtrl` controller
|
||||
@@ -149,7 +149,7 @@ Because our code now uses the `$xhr` service to fetch the phone list data in our
|
||||
we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an
|
||||
incoming request from the controller. To do this we:
|
||||
|
||||
* Use the {@link api/angular.module.NG.$rootScope.Scope#$service `$service`} method to retrieve the `$browser` service,
|
||||
* Use the {@link api/angular.module.ng.$rootScope.Scope#$service `$service`} method to retrieve the `$browser` service,
|
||||
a service that angular uses to represent various browser APIs. In tests, angular automatically uses
|
||||
a mock version of this service that allows you to write tests without having to deal with these
|
||||
native APIs and the global state associated with them.
|
||||
|
||||
@@ -34,7 +34,7 @@ template into what we call a "layout template". This is a template that is commo
|
||||
our application. Other "partial templates" are then included into this layout template depending on
|
||||
the current "route" — the view that is currently displayed to the user.
|
||||
|
||||
Application routes in angular are declared via the {@link api/angular.module.NG.$route $route}
|
||||
Application routes in angular are declared via the {@link api/angular.module.ng.$route $route}
|
||||
service. This service makes it easy to wire together controllers, view templates, and the current
|
||||
URL location in the browser. Using this feature we can implement {@link
|
||||
http://en.wikipedia.org/wiki/Deep_linking deep linking}, which lets us utilize the browser's
|
||||
@@ -91,7 +91,7 @@ Note the use of the `:phoneId` parameter in the second route declaration. The `$
|
||||
the route declaration — `'/phones/:phoneId'` — as a template that is matched against the current
|
||||
URL. All variables defined with the `:` notation are extracted into the `$route.current.params` map.
|
||||
|
||||
The `params` alias created in the {@link api/angular.module.NG.$route `$route.onChange`} callback
|
||||
The `params` alias created in the {@link api/angular.module.ng.$route `$route.onChange`} callback
|
||||
allows us to use the `phoneId` property of this map in the `phone-details.html` template.
|
||||
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ phone in the phone list.
|
||||
Now when you click on a phone on the list, the phone details page with phone-specific information
|
||||
is displayed.
|
||||
|
||||
To implement the phone details view we will use {@link api/angular.module.NG.$xhr $xhr} to fetch our
|
||||
To implement the phone details view we will use {@link api/angular.module.ng.$xhr $xhr} to fetch our
|
||||
data, and we'll flesh out the `phone-details.html` view template.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
|
||||
@@ -25,11 +25,11 @@ GitHub}:
|
||||
## Custom Filter
|
||||
|
||||
In order to create a new filter, simply register your custom filter function with the {@link
|
||||
api/angular.module.NG.$filter `angular.module.NG.$filter`} API.
|
||||
api/angular.module.ng.$filter `angular.module.ng.$filter`} API.
|
||||
|
||||
__`app/js/filters.js`:__
|
||||
<pre>
|
||||
angular.module.NG.$filter('checkmark', function(input) {
|
||||
angular.module.ng.$filter('checkmark', function(input) {
|
||||
return input ? '\u2713' : '\u2718';
|
||||
});
|
||||
</pre>
|
||||
@@ -82,8 +82,8 @@ __`test/unit/filtersSpec.js`:__
|
||||
describe('checkmark filter', function() {
|
||||
|
||||
it('should convert boolean values to unicode checkmark or cross', function() {
|
||||
expect(angular.module.NG.$filter.checkmark(true)).toBe('\u2713');
|
||||
expect(angular.module.NG.$filter.checkmark(false)).toBe('\u2718');
|
||||
expect(angular.module.ng.$filter.checkmark(true)).toBe('\u2713');
|
||||
expect(angular.module.ng.$filter.checkmark(false)).toBe('\u2718');
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
@@ -99,7 +99,7 @@ output.
|
||||
|
||||
# Experiments
|
||||
|
||||
* Let's experiment with some of the {@link api/angular.module.NG.$filter built-in angular filters} and add the
|
||||
* Let's experiment with some of the {@link api/angular.module.ng.$filter built-in angular filters} and add the
|
||||
following bindings to `index.html`:
|
||||
* `{{ "lower cap string" | uppercase }}`
|
||||
* `{{ {foo: "bar", baz: 23} | json }}`
|
||||
|
||||
@@ -14,7 +14,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
|
||||
api/angular.module.NG.$xhr $xhr} API, HTTP methods and URLs.
|
||||
api/angular.module.ng.$xhr $xhr} API, HTTP methods and URLs.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-10...step-11
|
||||
@@ -37,30 +37,30 @@ __`app/index.html`.__
|
||||
|
||||
__`app/js/services.js`.__
|
||||
<pre>
|
||||
angular.module.NG('Phone', function($resource) {
|
||||
angular.module.ng('Phone', function($resource) {
|
||||
return $resource('phones/:phoneId.json', {}, {
|
||||
query: {method: 'GET', params: {phoneId: 'phones'}, isArray: true}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
We used the {@link api/angular.module.NG} API to register a custom service. We passed in the name of
|
||||
We used the {@link api/angular.module.ng} API to register a custom service. We passed in the name of
|
||||
the service - 'Phone' - and a factory function. The factory function is similar to a controller's
|
||||
constructor in that both can declare dependencies via function arguments. The Phone service
|
||||
declared a dependency on the `$resource` service.
|
||||
|
||||
The {@link api/angular.module.NG.$resource `$resource`} service makes it easy to create a {@link
|
||||
The {@link api/angular.module.ng.$resource `$resource`} service makes it easy to create a {@link
|
||||
http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few lines
|
||||
of code. This client can then be used in our application, instead of the lower-level {@link
|
||||
api/angular.module.NG.$xhr $xhr} service.
|
||||
api/angular.module.ng.$xhr $xhr} service.
|
||||
|
||||
|
||||
## Controller
|
||||
|
||||
We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
|
||||
lower-level {@link api/angular.module.NG.$xhr $xhr} service, replacing it with a new service called
|
||||
`Phone`. Angular's {@link api/angular.module.NG.$resource `$resource`} service is easier to use than
|
||||
{@link api/angular.module.NG.$xhr $xhr} for interacting with data sources exposed as RESTful
|
||||
lower-level {@link api/angular.module.ng.$xhr $xhr} service, replacing it with a new service called
|
||||
`Phone`. Angular's {@link api/angular.module.ng.$resource `$resource`} service is easier to use than
|
||||
{@link api/angular.module.ng.$xhr $xhr} 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`.__
|
||||
@@ -116,7 +116,7 @@ We have modified our unit tests to verify that our new service is issuing HTTP r
|
||||
processing them as expected. The tests also check that our controllers are interacting with the
|
||||
service correctly.
|
||||
|
||||
The {@link api/angular.module.NG.$resource $resource} service augments the response object with
|
||||
The {@link api/angular.module.ng.$resource $resource} service augments the response object with
|
||||
methods for updating and deleting the resource. If we were to use the standard `toEqual` matcher,
|
||||
our tests would fail because the test values would not match the responses exactly. To solve the
|
||||
problem, we use a newly-defined `toEqualData` {@link
|
||||
@@ -141,7 +141,7 @@ describe('PhoneCat controllers', function() {
|
||||
var scope, $browser, ctrl;
|
||||
|
||||
beforeEach(function() {
|
||||
scope = angular.module.NG.$rootScope.Scope();
|
||||
scope = angular.module.ng.$rootScope.Scope();
|
||||
$browser = scope.$service('$browser');
|
||||
|
||||
$browser.xhr.expectGET('phones/phones.json')
|
||||
@@ -167,12 +167,12 @@ describe('PhoneCat controllers', function() {
|
||||
var scope, $browser, ctrl;
|
||||
|
||||
beforeEach(function() {
|
||||
scope = angular.module.NG.$rootScope.Scope();
|
||||
scope = angular.module.ng.$rootScope.Scope();
|
||||
$browser = scope.$service('$browser');
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
scope = angular.module.NG.$rootScope.Scope();
|
||||
scope = angular.module.ng.$rootScope.Scope();
|
||||
$browser = scope.$service('$browser');
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user