kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-22 19:23:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(*): simplify doc urls

Browse Source 
we now have two types of namespaces:

- true namespace: angular.* - used for all global apis
- virtual namespace: ng.*, ngMock.*, ... - used for all DI modules

the virual namespaces have services under the second namespace level (e.g. ng.)
and filters and directives prefixed with filter: and directive: respectively
(e.g. ng.filter:orderBy, ng.directive:ngRepeat)

this simplifies urls and makes them a lot shorter while still avoiding name collisions
This commit is contained in:
Igor Minar
2012-06-11 23:49:24 -07:00
parent fc0b2b5715
commit f16150d5f1
106 changed files with 803 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/tutorial/step_00.ngdoc
View File

@@ -184,7 +184,7 @@ __`app/index.html`:__
This code downloads the `angular.js` script and registers a callback that will be executed by the
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
looks for the {@link api/angular.module.ng.$compileProvider.directive.ngApp ngApp} directive. If
looks for the {@link api/ng.directive:ngApp ngApp} directive. If
Angular finds the directive, it will bootstrap the application with the root of the application DOM
being the element on which the `ngApp` directive was defined.
@@ -215,10 +215,10 @@ for most cases. In advanced cases, such as when using script loaders, you can us
There are 3 important things that happen during the app bootstrap:
1. The {@link api/angular.module.AUTO.$injector injector} that will be used for dependency injection
1. The {@link api/AUTO.$injector injector} that will be used for dependency injection
within this app is created.
2. The injector will then create the {@link api/angular.module.ng.$rootScope root scope} that will
2. The injector will then create the {@link api/ng.$rootScope root scope} that will
become the context for the model of our application.
3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any

6
docs/content/tutorial/step_02.ngdoc
View File

@@ -52,7 +52,7 @@ __`app/index.html`:__
</pre>
We replaced the hard-coded phone list with the
{@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat directive} and two
{@link api/ng.directive:ngRepeat ngRepeat directive} and two
{@link guide/expression Angular expressions} enclosed in curly braces:
`{{phone.name}}` and `{{phone.snippet}}`:
@@ -96,7 +96,7 @@ as follows:
* `PhoneListCtrl` — the name of our controller function (located in the JavaScript file
`controllers.js`), matches the value of the
{@link api/angular.module.ng.$compileProvider.directive.ngController ngController} directive located
{@link api/ng.directive:ngController ngController} directive located
on the `<body>` tag.
* The phone data is then attached to the *scope* (`$scope`) that was injected into our controller
@@ -110,7 +110,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/ng.$rootScope.Scope angular scope documentation}.
## Tests

8
docs/content/tutorial/step_03.ngdoc
View File

@@ -55,7 +55,7 @@ __`app/index.html`:__
</pre>
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
{@link api/ng.filter:filter $filter} function to process the input for the
`ngRepeate` directive.
This lets a user enter search criteria and immediately see the effects of their search on the phone
@@ -71,7 +71,7 @@ the DOM to reflect the current state of the model.
<img class="diagram" src="img/tutorial/tutorial_03.png">
* Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function uses the
* Use of `filter` filter. The {@link api/ng.filter:filter filter} function uses the
`query` value to create a new array that contains only those records that match the `query`.
`ngRepeat` automatically updates the view in response to the changing number of phones returned
@@ -152,8 +152,8 @@ and title elements:
While using double curlies works fine in within the title element, you might have noticed that
for a split second they are actually displayed to the user while the page is loading. A better
solution would be to use the {@link api/angular.module.ng.$compileProvider.directive.ngBind
ngBind} or {@link api/angular.module.ng.$compileProvider.directive.ngBindTemplate
solution would be to use the {@link api/ng.directive:ngBind
ngBind} or {@link api/ng.directive:ngBindTemplate
ngBindTemplate} directives, which are invisible to the user while the page is loading:
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

2
docs/content/tutorial/step_04.ngdoc
View File

@@ -47,7 +47,7 @@ two provided sorting options.
<img class="diagram" src="img/tutorial/tutorial_04.png">
* We then chained the `filter` filter with {@link api/angular.module.ng.$filter.orderBy `orderBy`}
* We then chained the `filter` filter with {@link api/ng.filter:orderBy `orderBy`}
filter to further process the input into the repeater. `orderBy` is a filter that takes an input
array, copies it and reorders the copy which is then returned.

16
docs/content/tutorial/step_05.ngdoc
View File

@@ -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.$http $http}. We will use angular's {@link guide/di dependency
from our server using one of angular's built-in {@link api/ng services} called {@link
api/ng.$http $http}. We will use angular's {@link 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.$http $http} service in our controller to make an HTTP
We'll use angular's {@link api/ng.$http $http} service in our controller to make an HTTP
request to your web server to fetch the data in the `app/phones/phones.json` file. `$http` 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/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/di DI subsystem}. Dependency injection
@@ -71,7 +71,7 @@ relative to our `index.html` file). The server responds by providing the data in
browser and our app they both look the same. For the sake of simplicity we used a json file in this
tutorial.)
The `$http` service returns a {@link api/angular.module.ng.$q promise object} with a `success`
The `$http` service returns a {@link api/ng.$q promise object} with a `success`
method. We call this method to handle the asynchronous response and assign the phone data to the
scope controlled by this controller, as a model called `phones`. Notice that angular detected the
json response and parsed it for us!
@@ -155,9 +155,9 @@ use to access and configure the injector.
We created the controller in the test environment, as follows:
* We used the `inject` helper method to inject instances of
{@link api/angular.module.ng.$rootScope $rootScope},
{@link api/angular.module.ng.$controller $controller} and
{@link api/angular.module.ng.$httpBackend $httpBackend} services into the Jasmine's `beforeEach`
{@link api/ng.$rootScope $rootScope},
{@link api/ng.$controller $controller} and
{@link api/ng.$httpBackend $httpBackend} services into the Jasmine's `beforeEach`
function. These instances come from an injector which is recreated from scratch for every single
test. This guarantees that each test starts from a well known starting point and each test is
isolated from the work done in other tests.

2
docs/content/tutorial/step_06.ngdoc
View File

@@ -61,7 +61,7 @@ now-familiar double-curly brace binding in the `href` attribute values. In step
the element attribute.
We also added phone images next to each record using an image tag with the {@link
api/angular.module.ng.$compileProvider.directive.ngSrc ngSrc} directive. That directive prevents the
api/ng.directive:ngSrc ngSrc} directive. That directive prevents the
browser from treating the angular `{{ expression }}` markup literally, and initiating a request to
invalid url `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had only
specified an attribute binding in a regular `src` attribute (`<img class="diagram" src="{{phone.imageUrl}}">`).

10
docs/content/tutorial/step_07.ngdoc
View File

@@ -36,8 +36,8 @@ our application. Other "partial templates" are then included into this layout te
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.$routeProvider $routeProvider}, which is the provider of the
{@link api/angular.module.ng.$route $route service}. This service makes it easy to wire together
{@link api/ng.$routeProvider $routeProvider}, which is the provider of the
{@link api/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
@@ -104,11 +104,11 @@ the browser address doesn't match either of our routes.
Note the use of the `:phoneId` parameter in the second route declaration. The `$route` service uses
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
{@link api/angular.module.ng.$routeParams $routeParams} object.
{@link api/ng.$routeParams $routeParams} object.
In order for our application to bootstrap with our newly created module we'll also need to specify
the module name as the value of the {@link api/angular.module.ng.$compileProvider.directive.ngApp ngApp}
the module name as the value of the {@link api/ng.directive:ngApp ngApp}
directive:
__`app/index.html`:__
@@ -134,7 +134,7 @@ function PhoneDetailCtrl($scope, $routeParams) {
## Template
The `$route` service is usually used in conjunction with the {@link api/angular.module.ng.$compileProvider.directive.ngView
The `$route` service is usually used in conjunction with the {@link api/ng.directive:ngView
ngView} directive. The role of the `ngView` directive is to include the view template for the current
route into the layout template, which makes it a perfect fit for our `index.html` template.

2
docs/content/tutorial/step_08.ngdoc
View File

@@ -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.$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.
The most important changes are listed below. You can see the full diff on {@link

2
docs/content/tutorial/step_09.ngdoc
View File

@@ -121,7 +121,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/ng.$filter built-in angular filters} and add the
following bindings to `index.html`:
* `{{ "lower cap string" | uppercase }}`
* `{{ {foo: "bar", baz: 23} | json }}`

2
docs/content/tutorial/step_10.ngdoc
View File

@@ -63,7 +63,7 @@ __`app/partials/phone-detail.html`:__
We bound the `ngSrc` directive of the large image to the `mainImageUrl` property.
We also registered an {@link api/angular.module.ng.$compileProvider.directive.ngClick `ngClick`}
We also registered an {@link api/ng.directive:ngClick `ngClick`}
handler with thumbnail images. When a user clicks on one of the thumbnail images, the handler will
use the `setImage` event handler function to change the value of the `mainImageUrl` property to the
url of the thumbnail image.

12
docs/content/tutorial/step_11.ngdoc
View File

@@ -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.$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
https://github.com/angular/angular-phonecat/compare/step-10...step-11
@@ -52,17 +52,17 @@ of the service - 'Phone' - and the factory function. The factory function is sim
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.ngResource.$resource `$resource`} service makes it easy to create a
The {@link api/ngResource.$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.$http $http} service.
api/ng.$http $http} service.
## Controller
We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
lower-level {@link api/angular.module.ng.$http $http} service, replacing it with a new service called
`Phone`. Angular's {@link api/angular.module.ngResource.$resource `$resource`} service is easier to
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
now to understand what the code in our controllers is doing.
@@ -122,7 +122,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.ngResource.$resource $resource} service augments the response object
The {@link api/ngResource.$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