mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-23 11:37:38 +08:00
docs(bike-shed-migration): fix up links outside the domain
It is safer to use markdown style links and save jsdoc style links for internal links and code references
This commit is contained in:
@@ -32,9 +32,9 @@ This module is provided by default and contains the core components of AngularJS
|
||||
|
||||
<p>
|
||||
Some examples include:
|
||||
{@link ng.directive:ngClick ngClick},
|
||||
{@link ng.directive:ngInclude ngInclude},
|
||||
{@link ng.directive:ngRepeat ngRepeat},
|
||||
{@link directive:ngClick ngClick},
|
||||
{@link directive:ngInclude ngInclude},
|
||||
{@link directive:ngRepeat ngRepeat},
|
||||
etc… <br />
|
||||
</p>
|
||||
</td>
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
This error occurs when you are using AngularJS with {@link api/ng.$sce Strict Contextual Escaping (SCE)} mode enabled (the default) on IE8 or lower in quirks mode.
|
||||
|
||||
In this mode, IE8 allows one to execute arbitrary javascript by the use of the `expression()` syntax and is not supported.
|
||||
Refer {@link http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx MSDN Blogs > IEBlog > Ending Expressions} to learn more about them.
|
||||
Refer
|
||||
[MSDN Blogs > IEBlog > Ending Expressions](http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx)
|
||||
to learn more about them.
|
||||
|
||||
To resolve this error please specify the proper doctype at the top of your main html document:
|
||||
|
||||
|
||||
@@ -19,8 +19,8 @@ api/ng.$sceDelegateProvider#methods_resourceUrlWhitelist whitelist}/ {@link
|
||||
api/ng.$sceDelegateProvider#methods_resourceUrlBlacklist blacklist} or wrap the URL with a call to {@link
|
||||
api/ng.$sce#methods_trustAsResourceUrl $sce.trustAsResourceUrl}.
|
||||
|
||||
**Note**: The browser's {@link
|
||||
https://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_XMLHttpRequest Same Origin
|
||||
Policy} and {@link http://www.w3.org/TR/cors/ Cross-Origin Resource Sharing (CORS)} policy apply
|
||||
**Note**: The browser's [Same Origin
|
||||
Policy](https://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_XMLHttpRequest) and
|
||||
[Cross-Origin Resource Sharing (CORS)](http://www.w3.org/TR/cors/) policy apply
|
||||
that may further restrict whether the template is successfully loaded. (e.g. neither cross-domain
|
||||
requests won't work on all browsers nor `file://` requests on some browsers)
|
||||
|
||||
@@ -25,7 +25,7 @@ initialization.
|
||||
|
||||
* Place the `script` tag at the bottom of the page. Placing script tags at the end of the page
|
||||
improves app load time because the HTML loading is not blocked by loading of the `angular.js`
|
||||
script. You can get the latest bits from {@link http://code.angularjs.org}. Please don't link
|
||||
script. You can get the latest bits from http://code.angularjs.org. Please don't link
|
||||
your production code to this URL, as it will expose a security hole on your site. For
|
||||
experimental development linking to our site is fine.
|
||||
* Choose: `angular-[version].js` for a human-readable file, suitable for development and
|
||||
|
||||
@@ -28,36 +28,36 @@ is registered.
|
||||
The following example shows a very simple constructor function for a Controller, `GreetingCtrl`,
|
||||
which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
|
||||
|
||||
<pre>
|
||||
```
|
||||
function GreetingCtrl($scope) {
|
||||
$scope.greeting = 'Hola!';
|
||||
}
|
||||
</pre>
|
||||
```
|
||||
|
||||
Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the
|
||||
template:
|
||||
|
||||
<pre>
|
||||
<div ng-controller="GreetingCtrl">
|
||||
{{ greeting }}
|
||||
</div>
|
||||
</pre>
|
||||
```
|
||||
<div ng-controller="GreetingCtrl">
|
||||
{{ greeting }}
|
||||
</div>
|
||||
```
|
||||
|
||||
**NOTE**: Although Angular allows you to create Controller functions in the global scope, this is
|
||||
not recommended. In a real application you should use the `.controller` method of your
|
||||
{@link module Angular Module} for your application as follows:
|
||||
|
||||
<pre>
|
||||
var myApp = angular.module('myApp',[]);
|
||||
```
|
||||
var myApp = angular.module('myApp',[]);
|
||||
|
||||
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
|
||||
$scope.greeting = 'Hola!';
|
||||
}]);
|
||||
</pre>
|
||||
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
|
||||
$scope.greeting = 'Hola!';
|
||||
}]);
|
||||
```
|
||||
|
||||
We have used an **inline injection annotation** to explicitly specify the dependency
|
||||
of the Controller on the `$scope` service provided by Angular. See the guide on
|
||||
{@link http://docs.angularjs.org/guide/di Dependency Injection} for more information.
|
||||
[Dependency Injection](http://docs.angularjs.org/guide/di) for more information.
|
||||
|
||||
|
||||
# Adding Behavior to a Scope Object
|
||||
@@ -68,22 +68,22 @@ then available to be called from the template/view.
|
||||
|
||||
The following example uses a Controller to add a method to the scope, which doubles a number:
|
||||
|
||||
<pre>
|
||||
var myApp = angular.module('myApp',[]);
|
||||
```
|
||||
var myApp = angular.module('myApp',[]);
|
||||
|
||||
myApp.controller('DoubleCtrl', ['$scope', function($scope) {
|
||||
$scope.double = function(value) { return value * 2; };
|
||||
}]);
|
||||
</pre>
|
||||
myApp.controller('DoubleCtrl', ['$scope', function($scope) {
|
||||
$scope.double = function(value) { return value * 2; };
|
||||
}]);
|
||||
```
|
||||
|
||||
Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
|
||||
expression in the template:
|
||||
|
||||
<pre>
|
||||
<div ng-controller="DoubleCtrl">
|
||||
Two times <input ng-model="num"> equals {{ double(num) }}
|
||||
</div>
|
||||
</pre>
|
||||
```
|
||||
<div ng-controller="DoubleCtrl">
|
||||
Two times <input ng-model="num"> equals {{ double(num) }}
|
||||
</div>
|
||||
```
|
||||
|
||||
As discussed in the {@link concepts Concepts} section of this guide, any
|
||||
objects (or primitives) assigned to the scope become model properties. Any methods assigned to
|
||||
@@ -134,30 +134,30 @@ The message in our template contains a binding to the `spice` model, which by de
|
||||
string "very". Depending on which button is clicked, the `spice` model is set to `chili` or
|
||||
`jalapeño`, and the message is automatically updated by data-binding.
|
||||
|
||||
<doc:example module="spicyApp1">
|
||||
<doc:source>
|
||||
<example module="spicyApp1">
|
||||
<file name="index.html">
|
||||
<div ng-app="spicyApp1" ng-controller="SpicyCtrl">
|
||||
<button ng-click="chiliSpicy()">Chili</button>
|
||||
<button ng-click="jalapenoSpicy()">Jalapeño</button>
|
||||
<p>The food is {{spice}} spicy!</p>
|
||||
</div>
|
||||
<script>
|
||||
var myApp = angular.module('spicyApp1', []);
|
||||
</file>
|
||||
<file name="app.js">
|
||||
var myApp = angular.module('spicyApp1', []);
|
||||
|
||||
myApp.controller('SpicyCtrl', ['$scope', function($scope){
|
||||
$scope.spice = 'very';
|
||||
|
||||
$scope.chiliSpicy = function() {
|
||||
$scope.spice = 'chili';
|
||||
};
|
||||
|
||||
$scope.jalapenoSpicy = function() {
|
||||
$scope.spice = 'jalapeño';
|
||||
};
|
||||
}]);
|
||||
</script>
|
||||
</doc:source>
|
||||
</doc:example>
|
||||
myApp.controller('SpicyCtrl', ['$scope', function($scope){
|
||||
$scope.spice = 'very';
|
||||
|
||||
$scope.chiliSpicy = function() {
|
||||
$scope.spice = 'chili';
|
||||
};
|
||||
|
||||
$scope.jalapenoSpicy = function() {
|
||||
$scope.spice = 'jalapeño';
|
||||
};
|
||||
}]);
|
||||
</file>
|
||||
</example>
|
||||
|
||||
Things to notice in the example above:
|
||||
|
||||
@@ -175,15 +175,16 @@ its children).
|
||||
Controller methods can also take arguments, as demonstrated in the following variation of the
|
||||
previous example.
|
||||
|
||||
<doc:example module="spicyApp2">
|
||||
<doc:source>
|
||||
<example module="spicyApp2">
|
||||
<file name="index.html">
|
||||
<div ng-app="spicyApp2" ng-controller="SpicyCtrl">
|
||||
<input ng-model="customSpice">
|
||||
<button ng-click="spicy('chili')">Chili</button>
|
||||
<button ng-click="spicy(customSpice)">Custom spice</button>
|
||||
<p>The food is {{spice}} spicy!</p>
|
||||
</div>
|
||||
<script>
|
||||
</file>
|
||||
<file name="app.js">
|
||||
var myApp = angular.module('spicyApp2', []);
|
||||
|
||||
myApp.controller('SpicyCtrl', ['$scope', function($scope){
|
||||
@@ -194,9 +195,8 @@ previous example.
|
||||
$scope.spice = spice;
|
||||
};
|
||||
}]);
|
||||
</script>
|
||||
</doc:source>
|
||||
</doc:example>
|
||||
</file>
|
||||
</example>
|
||||
|
||||
Notice that the `SpicyCtrl` Controller now defines just one method called `spicy`, which takes one
|
||||
argument called `spice`. The template then refers to this Controller method and passes in a string
|
||||
@@ -209,11 +209,11 @@ It is common to attach Controllers at different levels of the DOM hierarchy. Si
|
||||
{@link api/ng.directive:ngController ng-controller} directive creates a new child scope, we get a
|
||||
hierarchy of scopes that inherit from each other. The `$scope` that each Controller receives will
|
||||
have access to properties and methods defined by Controllers higher up the hierarchy.
|
||||
See {@link https://github.com/angular/angular.js/wiki/Understanding-Scopes Understanding Scopes} for
|
||||
See [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) for
|
||||
more information about scope inheritance.
|
||||
|
||||
<doc:example module="scopeInheritance">
|
||||
<doc:source>
|
||||
<example module="scopeInheritance">
|
||||
<file name="index.html">
|
||||
<div ng-app="scopeInheritance" class="spicy">
|
||||
<div ng-controller="MainCtrl">
|
||||
<p>Good {{timeOfDay}}, {{name}}!</p>
|
||||
@@ -227,13 +227,14 @@ more information about scope inheritance.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
div.spicy div {
|
||||
padding: 10px;
|
||||
border: solid 2px blue;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
</file>
|
||||
<file name="app.css">
|
||||
div.spicy div {
|
||||
padding: 10px;
|
||||
border: solid 2px blue;
|
||||
}
|
||||
</file>
|
||||
<file name="app.js">
|
||||
var myApp = angular.module('scopeInheritance', []);
|
||||
myApp.controller('MainCtrl', ['$scope', function($scope){
|
||||
$scope.timeOfDay = 'morning';
|
||||
@@ -246,9 +247,8 @@ more information about scope inheritance.
|
||||
$scope.timeOfDay = 'evening';
|
||||
$scope.name = 'Gingerbreak Baby';
|
||||
}]);
|
||||
</script>
|
||||
</doc:source>
|
||||
</doc:example>
|
||||
</file>
|
||||
</example>
|
||||
|
||||
Notice how we nested three `ng-controller` directives in our template. This will result in four
|
||||
scopes being created for our view:
|
||||
@@ -270,7 +270,7 @@ Although there are many ways to test a Controller, one of the best conventions,
|
||||
involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$controller $controller}:
|
||||
|
||||
**Controller Definition:**
|
||||
<pre>
|
||||
```
|
||||
var myApp = angular.module('myApp',[]);
|
||||
|
||||
myApp.controller('MyController', function($scope) {
|
||||
@@ -279,10 +279,10 @@ involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$c
|
||||
{"name":"habanero", "spiceness":"LAVA HOT!!"}];
|
||||
$scope.spice = "habanero";
|
||||
});
|
||||
</pre>
|
||||
```
|
||||
|
||||
**Controller Test:**
|
||||
<pre>
|
||||
```
|
||||
describe('myController function', function() {
|
||||
|
||||
describe('myController', function() {
|
||||
@@ -304,13 +304,13 @@ describe('myController function', function() {
|
||||
});
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
```
|
||||
|
||||
|
||||
If you need to test a nested Controller you need to create the same scope hierarchy
|
||||
in your test that exists in the DOM:
|
||||
|
||||
<pre>
|
||||
```
|
||||
describe('state', function() {
|
||||
var mainScope, childScope, grandChildScope;
|
||||
|
||||
@@ -334,7 +334,7 @@ describe('state', function() {
|
||||
expect(grandChildScope.name).toBe('Gingerbreak Baby');
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ the only button on the page, and then it verifies that there are 10 items listed
|
||||
The API section below lists the available commands and expectations for the Runner.
|
||||
|
||||
# API
|
||||
Source: {@link https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js}
|
||||
Source: https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js
|
||||
|
||||
## pause()
|
||||
Pauses the execution of the tests until you call `resume()` in the console (or click the resume
|
||||
@@ -188,7 +188,7 @@ Executes the `method` passing in `key` and `value` on the element matching the g
|
||||
Matchers are used in combination with the `expect(...)` function as described above and can
|
||||
be negated with `not()`. For instance: `expect(element('h1').text()).not().toEqual('Error')`.
|
||||
|
||||
Source: {@link https://github.com/angular/angular.js/blob/master/src/ngScenario/matchers.js}
|
||||
Source: https://github.com/angular/angular.js/blob/master/src/ngScenario/matchers.js
|
||||
|
||||
<pre>
|
||||
// value and Object comparison following the rules of angular.equals().
|
||||
@@ -222,7 +222,7 @@ expect(value).toBeGreaterThan(expected)
|
||||
</pre>
|
||||
|
||||
# Example
|
||||
See the {@link https://github.com/angular/angular-seed angular-seed} project for more examples.
|
||||
See the [angular-seed](https://github.com/angular/angular-seed) project for more examples.
|
||||
|
||||
## Conditional actions with element(...).query(fn)
|
||||
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
|
||||
# What does it do?
|
||||
|
||||
The `$location` service parses the URL in the browser address bar (based on the {@link
|
||||
https://developer.mozilla.org/en/window.location window.location}) and makes the URL available to
|
||||
The `$location` service parses the URL in the browser address bar (based on the [window.location](https://developer.mozilla.org/en/window.location)) and makes the URL available to
|
||||
your application. Changes to the URL in the address bar are reflected into $location service and
|
||||
changes to $location are reflected into the browser address bar.
|
||||
|
||||
@@ -145,7 +144,7 @@ unless `replace()` is called again.
|
||||
|
||||
### Setters and character encoding
|
||||
You can pass special characters to `$location` service and it will encode them according to rules
|
||||
specified in {@link http://www.ietf.org/rfc/rfc3986.txt RFC 3986}. When you access the methods:
|
||||
specified in [RFC 3986](http://www.ietf.org/rfc/rfc3986.txt). When you access the methods:
|
||||
|
||||
- All values that are passed to `$location` setter methods, `path()`, `search()`, `hash()`, are
|
||||
encoded.
|
||||
@@ -160,7 +159,7 @@ encoded.
|
||||
|
||||
`$location` service has two configuration modes which control the format of the URL in the browser
|
||||
address bar: **Hashbang mode** (the default) and the **HTML5 mode** which is based on using the
|
||||
HTML5 {@link http://www.w3.org/TR/html5/browsers.html#history History API}. Applications use the same API in
|
||||
HTML5 [History API](http://www.w3.org/TR/html5/history.html). Applications use the same API in
|
||||
both modes and the `$location` service will work with appropriate URL segments and browser APIs to
|
||||
facilitate the browser URL change and history management.
|
||||
|
||||
@@ -242,8 +241,8 @@ your document:
|
||||
|
||||
This will cause crawler bot to request links with `_escaped_fragment_` param so that your server
|
||||
can recognize the crawler and serve a HTML snapshots. For more information about this technique,
|
||||
see {@link http://code.google.com/web/ajaxcrawling/docs/specification.html Making AJAX Applications
|
||||
Crawlable}.
|
||||
see [Making AJAX Applications
|
||||
Crawlable](http://code.google.com/web/ajaxcrawling/docs/specification.html).
|
||||
|
||||
## HTML5 mode
|
||||
|
||||
@@ -346,8 +345,8 @@ meta tag to the HEAD section of your document:
|
||||
|
||||
This statement causes a crawler to request links with an empty `_escaped_fragment_` parameter so that
|
||||
your server can recognize the crawler and serve it HTML snapshots. For more information about this
|
||||
technique, see {@link http://code.google.com/web/ajaxcrawling/docs/specification.html Making AJAX
|
||||
Applications Crawlable}.
|
||||
technique, see [Making AJAX
|
||||
Applications Crawlable](http://code.google.com/web/ajaxcrawling/docs/specification.html).
|
||||
|
||||
### Relative links
|
||||
|
||||
@@ -625,8 +624,7 @@ then uses the information it obtains to compose hashbang URLs (such as
|
||||
|
||||
## Two-way binding to $location
|
||||
|
||||
The Angular's compiler currently does not support two-way binding for methods (see {@link
|
||||
https://github.com/angular/angular.js/issues/404 issue}). If you should require two-way binding
|
||||
The Angular's compiler currently does not support two-way binding for methods (see [issue](https://github.com/angular/angular.js/issues/404)). If you should require two-way binding
|
||||
to the $location object (using {@link api/ng.directive:input.text
|
||||
ngModel} directive on an input field), you will need to specify an extra model property
|
||||
(e.g. `locationPath`) with two watchers which push $location updates in both directions. For
|
||||
|
||||
@@ -105,7 +105,7 @@ function myController($scope, notify) {
|
||||
</doc:source>
|
||||
</doc:example>
|
||||
|
||||
However, if you plan to {@link http://en.wikipedia.org/wiki/Minification_(programming) minify} your
|
||||
However, if you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming)) your
|
||||
code, your variable names will get renamed in which case you will still need to explicitly specify
|
||||
dependencies with the `$inject` property.
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ care of the rest. The Angular injector subsystem is in charge of service instant
|
||||
of dependencies, and provision of dependencies to components as requested.
|
||||
|
||||
Angular injects dependencies using
|
||||
{@link http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/ "constructor" injection}.
|
||||
["constructor" injection](http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/).
|
||||
The dependency is passed to the component's factory/constructor function. Because JavaScript is a dynamically
|
||||
typed language, Angular's dependency injection subsystem cannot use static types to identify service
|
||||
dependencies. For this reason a component must, explicitly, define its dependencies by using one of the
|
||||
|
||||
@@ -97,9 +97,8 @@ function MyClass() {
|
||||
While no new dependency instance is created, it is fundamentally the same as `new` in
|
||||
that no way exists to intercept the call to `global.xhr` for testing purposes, other then
|
||||
through monkey patching. The basic issue for testing is that a global variable needs to be mutated in
|
||||
order to replace it with call to a mock method. For further explanation of why this is bad see: {@link
|
||||
http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/ Brittle Global
|
||||
State & Singletons}
|
||||
order to replace it with call to a mock method. For further explanation of why this is bad see: [Brittle Global
|
||||
State & Singletons](http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/)
|
||||
|
||||
The class above is hard to test since we have to change the global state:
|
||||
<pre>
|
||||
@@ -336,5 +335,5 @@ replaced the content and "lidless, wreathed in flame, 2 times" is present.
|
||||
|
||||
|
||||
## Sample project
|
||||
See the {@link https://github.com/angular/angular-seed angular-seed} project for an example.
|
||||
See the [angular-seed](https://github.com/angular/angular-seed) project for an example.
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its
|
||||
dependencies.
|
||||
|
||||
For in-depth discussion about DI, see {@link http://en.wikipedia.org/wiki/Dependency_injection
|
||||
Dependency Injection} at Wikipedia, {@link http://martinfowler.com/articles/injection.html
|
||||
Inversion of Control} by Martin Fowler, or read about DI in your favorite software design pattern
|
||||
book.
|
||||
For in-depth discussion about DI, see
|
||||
[Dependency Injection](http://en.wikipedia.org/wiki/Dependency_injection) at Wikipedia,
|
||||
[Inversion of Control](http://martinfowler.com/articles/injection.html) by Martin Fowler,
|
||||
or read about DI in your favorite software design pattern book.
|
||||
|
||||
## DI in a nutshell
|
||||
|
||||
@@ -80,8 +80,7 @@ Here is an example of using the injector service:
|
||||
</pre>
|
||||
|
||||
Asking for dependencies solves the issue of hard coding, but it also means that the injector needs
|
||||
to be passed throughout the application. Passing the injector breaks the {@link
|
||||
http://en.wikipedia.org/wiki/Law_of_Demeter Law of Demeter}. To remedy this, we turn the
|
||||
to be passed throughout the application. Passing the injector breaks the [Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter). To remedy this, we turn the
|
||||
dependency lookup responsibility to the injector by declaring the dependencies as in this example:
|
||||
|
||||
<pre>
|
||||
@@ -133,8 +132,7 @@ function declaration and extracting the parameter names. In the above example `$
|
||||
`greeter` are two services which need to be injected into the function.
|
||||
|
||||
While straightforward, this method will not work with JavaScript minifiers/obfuscators as they
|
||||
rename the method parameter names. This makes this way of annotating only useful for {@link
|
||||
http://www.pretotyping.org/ pretotyping}, and demo applications.
|
||||
rename the method parameter names. This makes this way of annotating only useful for [pretotyping](http://www.pretotyping.org/), and demo applications.
|
||||
|
||||
### `$inject` Annotation
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ When Angular {@link guide/bootstrap bootstraps} your application, the
|
||||
For AngularJS, "compilation" means attaching event listeners to the HTML to make it interactive.
|
||||
The reason we use the term "compile" is that the recursive process of attaching directives
|
||||
mirrors the process of compiling source code in
|
||||
{@link http://en.wikipedia.org/wiki/Compiled_languages compiled programming languages}.
|
||||
[compiled programming languages](http://en.wikipedia.org/wiki/Compiled_languages).
|
||||
</div>
|
||||
|
||||
|
||||
@@ -55,9 +55,9 @@ The following also **matches** `ngModel`:
|
||||
|
||||
Angular **normalizes** an element's tag and attribute name to determine which elements match which
|
||||
directives. We typically refer to directives by their case-sensitive
|
||||
{@link http://en.wikipedia.org/wiki/CamelCase camelCase} **normalized** name (e.g. `ngModel`).
|
||||
[camelCase](http://en.wikipedia.org/wiki/CamelCase) **normalized** name (e.g. `ngModel`).
|
||||
However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case
|
||||
forms, typically using {@link http://en.wikipedia.org/wiki/Letter_case#Computers dash-delimited}
|
||||
forms, typically using [dash-delimited](http://en.wikipedia.org/wiki/Letter_case#Computers)
|
||||
attributes on DOM elements (e.g. `ng-model`).
|
||||
|
||||
The **normalization** process is as follows:
|
||||
|
||||
@@ -123,4 +123,4 @@ text upper-case.
|
||||
|
||||
## Testing custom filters
|
||||
|
||||
See the {@link http://docs.angularjs.org/tutorial/step_09#test phonecat tutorial} for an example.
|
||||
See the [phonecat tutorial](http://docs.angularjs.org/tutorial/step_09#test) for an example.
|
||||
|
||||
@@ -16,10 +16,10 @@ abstracted bits.
|
||||
|
||||
**What level of support for i18n/l10n is currently in Angular?**
|
||||
|
||||
Currently, Angular supports i18n/l10n for {@link
|
||||
http://docs.angularjs.org/#!/api/ng.filter:date datetime}, {@link
|
||||
http://docs.angularjs.org/#!/api/ng.filter:number number} and {@link
|
||||
http://docs.angularjs.org/#!/api/ng.filter:currency currency} filters.
|
||||
Currently, Angular supports i18n/l10n for
|
||||
[datetime](http://docs.angularjs.org/#!/api/ng.filter:date),
|
||||
[number](http://docs.angularjs.org/#!/api/ng.filter:number) and
|
||||
[currency](http://docs.angularjs.org/#!/api/ng.filter:currency) filters.
|
||||
|
||||
Additionally, Angular supports localizable pluralization support provided by the {@link
|
||||
api/ng.directive:ngPluralize ngPluralize directive}.
|
||||
@@ -28,8 +28,8 @@ All localizable Angular components depend on locale-specific rule sets managed b
|
||||
api/ng.$locale $locale service}.
|
||||
|
||||
For readers who want to jump straight into examples, we have a few web pages that showcase how to
|
||||
use Angular filters with various locale rule sets. You can find these examples either on {@link
|
||||
https://github.com/angular/angular.js/tree/master/i18n/e2e Github} or in the i18n/e2e folder of
|
||||
use Angular filters with various locale rule sets. You can find these examples either on
|
||||
[Github](https://github.com/angular/angular.js/tree/master/i18n/e2e) or in the i18n/e2e folder of
|
||||
Angular development package.
|
||||
|
||||
**What is a locale id?**
|
||||
@@ -37,13 +37,13 @@ Angular development package.
|
||||
A locale is a specific geographical, political, or cultural region. The most commonly used locale
|
||||
ID consists of two parts: language code and country code. For example, en-US, en-AU, zh-CN are all
|
||||
valid locale IDs that have both language codes and country codes. Because specifying a country code
|
||||
in locale ID is optional, locale IDs such as en, zh, and sk are also valid. See the {@link
|
||||
http://userguide.icu-project.org/locale ICU } website for more information about using locale IDs.
|
||||
in locale ID is optional, locale IDs such as en, zh, and sk are also valid. See the
|
||||
[ICU ](http://userguide.icu-project.org/locale) website for more information about using locale IDs.
|
||||
|
||||
**Supported locales in Angular**
|
||||
Angular separates number and datetime format rule sets into different files, each file for a
|
||||
particular locale. You can find a list of currently supported locales {@link
|
||||
https://github.com/angular/angular.js/tree/master/src/ngLocale here}
|
||||
particular locale. You can find a list of currently supported locales
|
||||
[here](https://github.com/angular/angular.js/tree/master/src/ngLocale)
|
||||
# Providing locale rules to Angular
|
||||
|
||||
There are two approaches to providing locale rules to Angular:
|
||||
@@ -90,7 +90,7 @@ because an extra script needs to be loaded.
|
||||
|
||||
**Currency symbol "gotcha"**
|
||||
|
||||
Angular's {@link http://docs.angularjs.org/#!/api/ng.filter:currency currency filter} allows
|
||||
Angular's [currency filter](http://docs.angularjs.org/#!/api/ng.filter:currency) allows
|
||||
you to use the default currency symbol from the {@link api/ng.$locale locale service},
|
||||
or you can provide the filter with a custom currency symbol. If your app will be used only in one
|
||||
locale, it is fine to rely on the default currency symbol. However, if you anticipate that viewers
|
||||
@@ -103,8 +103,8 @@ containing currency filter: `{{ 1000 | currency }}`, and your app is currently i
|
||||
browser will specify the locale as ja, and the balance of '¥1000.00' will be shown instead. This
|
||||
will really upset your client.
|
||||
|
||||
In this case, you need to override the default currency symbol by providing the {@link
|
||||
http://docs.angularjs.org/#!/api/ng.filter:currency currency filter} with a currency symbol as
|
||||
In this case, you need to override the default currency symbol by providing the
|
||||
[currency filter](http://docs.angularjs.org/#!/api/ng.filter:currency) with a currency symbol as
|
||||
a parameter when you configure the filter, for example, {{ 1000 | currency:"USD$"}}. This way,
|
||||
Angular will always show a balance of 'USD$1000' and disregard any locale changes.
|
||||
|
||||
|
||||
@@ -101,8 +101,8 @@ Angular frees you from the following pains:
|
||||
overall flow of the application rather than all of the implementation details.
|
||||
* **Writing tons of initialization code just to get started:** Typically you need to write a lot
|
||||
of plumbing just to get a basic "Hello World" AJAX app working. With Angular you can bootstrap
|
||||
your app easily using services, which are auto-injected into your application in a {@link
|
||||
http://code.google.com/p/google-guice/ Guice}-like dependency-injection style. This allows you
|
||||
your app easily using services, which are auto-injected into your application in a
|
||||
[Guice](http://code.google.com/p/google-guice/)-like dependency-injection style. This allows you
|
||||
to get started developing features quickly. As a bonus, you get full control over the
|
||||
initialization process in automated tests.
|
||||
|
||||
|
||||
@@ -23,24 +23,24 @@ for how to contribute your own code to AngularJS.
|
||||
Before you can build AngularJS, you must install and configure the following dependencies on your
|
||||
machine:
|
||||
|
||||
* {@link http://git-scm.com/ Git}: The {@link https://help.github.com/articles/set-up-git Github Guide to
|
||||
Installing Git} is a good source of information.
|
||||
* [Git](http://git-scm.com/): The [Github Guide to
|
||||
Installing Git](https://help.github.com/articles/set-up-git) is a good source of information.
|
||||
|
||||
* {@link http://nodejs.org Node.js}: We use Node to generate the documentation, run a
|
||||
* [Node.js](http://nodejs.org): We use Node to generate the documentation, run a
|
||||
development web server, run tests, and generate distributable files. Depending on your system, you can install Node either from source or as a
|
||||
pre-packaged bundle.
|
||||
|
||||
* {@link http://www.java.com Java}: We minify JavaScript using our
|
||||
{@link https://developers.google.com/closure/ Closure Tools} jar. Make sure you have Java (version 6 or higher) installed
|
||||
and included in your {@link http://docs.oracle.com/javase/tutorial/essential/environment/paths.html PATH} variable.
|
||||
* [Java](http://www.java.com): We minify JavaScript using our
|
||||
[Closure Tools](https://developers.google.com/closure/) jar. Make sure you have Java (version 6 or higher) installed
|
||||
and included in your [PATH](http://docs.oracle.com/javase/tutorial/essential/environment/paths.html) variable.
|
||||
|
||||
* {@link http://gruntjs.com Grunt}: We use Grunt as our build system. Install the grunt command-line tool globally with:
|
||||
* [Grunt](http://gruntjs.com): We use Grunt as our build system. Install the grunt command-line tool globally with:
|
||||
|
||||
```shell
|
||||
npm install -g grunt-cli
|
||||
```
|
||||
|
||||
* {@link http://bower.io/ Bower}: We use Bower to manage client-side packages for the docs. Install the `bower` command-line tool globally with:
|
||||
* [Bower](http://bower.io/): We use Bower to manage client-side packages for the docs. Install the `bower` command-line tool globally with:
|
||||
|
||||
```shell
|
||||
npm install -g bower
|
||||
@@ -51,9 +51,8 @@ Bower globally.
|
||||
|
||||
## Forking Angular on Github
|
||||
|
||||
To create a Github account, follow the instructions {@link https://github.com/signup/free here}.
|
||||
Afterwards, go ahead and {@link http://help.github.com/forking fork} the {@link
|
||||
https://github.com/angular/angular.js main AngularJS repository}.
|
||||
To create a Github account, follow the instructions [here](https://github.com/signup/free).
|
||||
Afterwards, go ahead and [fork](http://help.github.com/forking) the [main AngularJS repository](https://github.com/angular/angular.js).
|
||||
|
||||
|
||||
## Building AngularJS
|
||||
|
||||
@@ -72,12 +72,12 @@ The size of the file is < 36KB compressed and minified.
|
||||
|
||||
### Can I use the open-source Closure Library with Angular?
|
||||
|
||||
Yes, you can use widgets from the {@link http://code.google.com/closure/library Closure Library}
|
||||
Yes, you can use widgets from the [Closure Library](http://code.google.com/closure/library)
|
||||
in Angular.
|
||||
|
||||
### Does Angular use the jQuery library?
|
||||
|
||||
Yes, Angular can use {@link http://jquery.com/ jQuery} if it's present in your app when the
|
||||
Yes, Angular can use [jQuery](http://jquery.com/) if it's present in your app when the
|
||||
application is being bootstrapped. If jQuery is not present in your script path, Angular falls back
|
||||
to its own implementation of the subset of jQuery that we call {@link api/angular.element jQLite}.
|
||||
|
||||
@@ -95,7 +95,7 @@ framework, provides mocks for many heavy dependencies (server-side communication
|
||||
### How can I learn more about Angular?
|
||||
|
||||
Watch the July 17, 2012 talk
|
||||
"{@link http://www.youtube.com/watch?v=1CpiB3Wk25U AngularJS Intro + Dependency Injection}".
|
||||
"[AngularJS Intro + Dependency Injection](http://www.youtube.com/watch?v=1CpiB3Wk25U)".
|
||||
|
||||
|
||||
### How is Angular licensed?
|
||||
@@ -104,10 +104,8 @@ The {@link https://github.com/angular/angular.js/blob/master/LICENSE MIT License
|
||||
|
||||
### Can I download and use the Angular logo artwork?
|
||||
|
||||
Yes! You can find design files in our github repository, under "{@link https://github.com/angular/angular.js/tree/master/images/logo
|
||||
angular.js/images/logo}"
|
||||
The logo design is licensed under a "{@link http://creativecommons.org/licenses/by-sa/3.0/
|
||||
Creative Commons Attribution-ShareAlike 3.0 Unported License}". If you have some other use in mind, contact us.
|
||||
Yes! You can find design files in our github repository, under "[angular.js/images/logo](https://github.com/angular/angular.js/tree/master/images/logo)"
|
||||
The logo design is licensed under a "[Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/)". If you have some other use in mind, contact us.
|
||||
|
||||
### How can I get some AngularJS schwag?
|
||||
|
||||
@@ -119,7 +117,7 @@ they'll waive the setup costs, and you can order any quantity you need.
|
||||
For orders of 250 stickers or more within Canada or the United States, contact Tom Witting (or anyone in sales) via email at tom@stickergiant.com, and tell him you want to order some AngularJS
|
||||
stickers just like the ones in job #42711. You'll have to give them your own info for billing and shipping.
|
||||
|
||||
As long as the design stays exactly the same, {@link http://www.stickergiant.com StickerGiant} will give you a reorder discount.
|
||||
As long as the design stays exactly the same, [StickerGiant](http://www.stickergiant.com) will give you a reorder discount.
|
||||
|
||||
For a smaller order, or for other countries, we suggest downloading the logo artwork and making your own.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ becoming an Angular expert.
|
||||
1. Do the {@link tutorial/ AngularJS Tutorial}.<br/>Walk end-to-end through building an application complete with tests
|
||||
on top of a node.js web server. Covers every major AngularJS feature and show you how to set up your development
|
||||
environment.
|
||||
1. Download or clone the {@link https://github.com/angular/angular-seed Seed App project template}.<br/>Gives you a
|
||||
1. Download or clone the [Seed App project template](https://github.com/angular/angular-seed).<br/>Gives you a
|
||||
starter app with a directory layout, test harness, and scripts to begin building your application.
|
||||
|
||||
|
||||
@@ -20,18 +20,18 @@ becoming an Angular expert.
|
||||
|
||||
If you haven’t had a chance to watch the videos from the homepage, please check out:
|
||||
|
||||
* {@link http://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D Introduction to AngularJS}
|
||||
* {@link http://www.youtube.com/watch?v=Yg-R1gchccg&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D Creating Directives}
|
||||
* {@link http://www.youtube.com/watch?v=IRelx4-ISbs&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D Communicating with Servers}
|
||||
* [Introduction to AngularJS](http://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D)
|
||||
* [Creating Directives](http://www.youtube.com/watch?v=Yg-R1gchccg&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D)
|
||||
* [Communicating with Servers](http://www.youtube.com/watch?v=IRelx4-ISbs&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D)
|
||||
|
||||
And visit our {@link http://www.youtube.com/user/angularjs YouTube channel} for more AngularJS video presentations and
|
||||
And visit our [YouTube channel](http://www.youtube.com/user/angularjs) for more AngularJS video presentations and
|
||||
tutorials.
|
||||
|
||||
##Subscribe
|
||||
|
||||
* Subscribe to the {@link http://groups.google.com/forum/?fromgroups#!forum/angular mailing list}. Ask questions here!
|
||||
* Follow us on {@link https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fangularjs.org%2F®ion=follow_link&screen_name=angularjs&source=followbutton&variant=2.0 Twitter}
|
||||
* Add us to your circles on {@link https://plus.google.com/110323587230527980117/posts Google+}
|
||||
* Subscribe to the [mailing list](http://groups.google.com/forum/?fromgroups#!forum/angular). Ask questions here!
|
||||
* Follow us on [Twitter](https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fangularjs.org%2F®ion=follow_link&screen_name=angularjs&source=followbutton&variant=2.0)
|
||||
* Add us to your circles on [Google+](https://plus.google.com/110323587230527980117/posts)
|
||||
|
||||
##Read more
|
||||
|
||||
|
||||
@@ -169,8 +169,7 @@ and one static binding, and our model is empty. That will soon change!
|
||||
|
||||
## What are all these files in my working directory?
|
||||
|
||||
Most of the files in your working directory come from the {@link
|
||||
https://github.com/angular/angular-seed angular-seed project} which is typically used to bootstrap
|
||||
Most of the files in your working directory come from the [angular-seed project](https://github.com/angular/angular-seed) which is typically used to bootstrap
|
||||
new Angular projects. The seed project includes the latest Angular libraries, test libraries,
|
||||
scripts and a simple example app, all pre-configured for developing a typical web app.
|
||||
|
||||
|
||||
@@ -17,8 +17,7 @@ In this step you will add some basic information about two cell phones to an HTM
|
||||
|
||||
The page now contains a list with information about two phones.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-0...step-1):
|
||||
|
||||
__`app/index.html`:__
|
||||
<pre>
|
||||
|
||||
@@ -9,8 +9,8 @@ Now it's time to make the web page dynamic — with AngularJS. We'll also add a
|
||||
code for the controller we are going to add.
|
||||
|
||||
There are many ways to structure the code for an application. For Angular apps, we encourage the
|
||||
use of {@link http://en.wikipedia.org/wiki/Model–View–Controller the Model-View-Controller (MVC)
|
||||
design pattern} to decouple the code and to separate concerns. With that in mind, let's use a
|
||||
use of [the Model-View-Controller (MVC)
|
||||
design pattern](http://en.wikipedia.org/wiki/Model–View–Controller) to decouple the code and to separate concerns. With that in mind, let's use a
|
||||
little Angular and JavaScript to add model, view, and controller components to our app.
|
||||
|
||||
|
||||
@@ -19,8 +19,7 @@ little Angular and JavaScript to add model, view, and controller components to o
|
||||
|
||||
The app now contains a list with three phones.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-1...step-2 GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-1...step-2):
|
||||
|
||||
|
||||
## View and Template
|
||||
@@ -179,12 +178,9 @@ is available to be injected.
|
||||
### Writing and Running Tests
|
||||
Angular developers prefer the syntax of Jasmine's Behavior-driven Development (BDD) framework when
|
||||
writing tests. Although Angular does not require you to use Jasmine, we wrote all of the tests in
|
||||
this tutorial in Jasmine. You can learn about Jasmine on the {@link
|
||||
http://pivotal.github.com/jasmine/ Jasmine home page} and at the {@link
|
||||
http://pivotal.github.io/jasmine/ Jasmine docs}.
|
||||
this tutorial in Jasmine. You can learn about Jasmine on the [Jasmine home page](http://pivotal.github.com/jasmine/) and at the [Jasmine docs](http://pivotal.github.io/jasmine/).
|
||||
|
||||
The angular-seed project is pre-configured to run all unit tests using {@link
|
||||
http://karma-runner.github.io/ Karma}. Ensure that the necessary karma plugins are installed.
|
||||
The angular-seed project is pre-configured to run all unit tests using [Karma](http://karma-runner.github.io/). Ensure that the necessary karma plugins are installed.
|
||||
You can do this by issuing `npm install` into your terminal.
|
||||
|
||||
|
||||
|
||||
@@ -18,8 +18,7 @@ The app now has a search box. Notice that the phone list on the page changes dep
|
||||
user types into the search box.
|
||||
|
||||
The most important differences between Steps 2 and 3 are listed below. You can see the full diff on
|
||||
{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3
|
||||
GitHub}:
|
||||
[GitHub](https://github.com/angular/angular-phonecat/compare/step-2...step-3):
|
||||
|
||||
|
||||
## Controller
|
||||
@@ -117,10 +116,10 @@ test runner}.
|
||||
|
||||
To run the end-to-end test, open one of the following in a new browser tab:
|
||||
|
||||
* node.js users: {@link http://localhost:8000/test/e2e/runner.html}
|
||||
* node.js users: http://localhost:8000/test/e2e/runner.html
|
||||
* users with other http servers:
|
||||
`http://localhost:[port-number]/[context-path]/test/e2e/runner.html`
|
||||
* casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
|
||||
* casual reader: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
|
||||
|
||||
Previously we've seen how Karma can be used to execute unit tests. Well, it can also run the
|
||||
end-to-end tests! Use `./scripts/e2e-test.sh` script for that. End-to-end tests are slow, so unlike
|
||||
|
||||
@@ -17,7 +17,7 @@ You should see that in addition to the search box, the app displays a drop down
|
||||
users to control the order in which the phones are listed.
|
||||
|
||||
The most important differences between Steps 3 and 4 are listed below. You can see the full diff on
|
||||
{@link https://github.com/angular/angular-phonecat/compare/step-3...step-4 GitHub}:
|
||||
[GitHub](https://github.com/angular/angular-phonecat/compare/step-3...step-4):
|
||||
|
||||
|
||||
## Template
|
||||
@@ -168,9 +168,7 @@ __`test/e2e/scenarios.js`:__
|
||||
The end-to-end test verifies that the ordering mechanism of the select box is working correctly.
|
||||
|
||||
You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test
|
||||
`runner.html` to see the tests run, or you can see them running on {@link
|
||||
http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html
|
||||
Angular's server}.
|
||||
`runner.html` to see the tests run, or you can see them running on [Angular's server](http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html).
|
||||
|
||||
# Experiments
|
||||
|
||||
|
||||
@@ -16,9 +16,7 @@ injection (DI)} to provide the service to the `PhoneListCtrl` controller.
|
||||
|
||||
You should now see a list of 20 phones.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-4...step-5
|
||||
GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-4...step-5):
|
||||
|
||||
## Data
|
||||
|
||||
@@ -108,8 +106,7 @@ properties are considered private, and should not be accessed or modified.
|
||||
### A Note on Minification
|
||||
|
||||
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
|
||||
constructor function, if you were to [minify](http://en.wikipedia.org/wiki/Minification_(programming)) the JavaScript code for `PhoneListCtrl` controller, all of its function arguments would be
|
||||
minified as well, and the dependency injector would not be able to identify services correctly.
|
||||
|
||||
There are two ways to overcome issues caused by minification:
|
||||
|
||||
@@ -15,9 +15,7 @@ about the phones in the catalog.
|
||||
|
||||
You should now see links and images of the phones in the list.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-5...step-6
|
||||
GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-5...step-6):
|
||||
|
||||
|
||||
## Data
|
||||
@@ -85,9 +83,7 @@ We added a new end-to-end test to verify that the app is generating correct link
|
||||
views that we will implement in the upcoming steps.
|
||||
|
||||
You can now rerun `./scripts/e2e-test.sh` or 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}.
|
||||
runner to see the tests run, or you can see them running on [Angular's server](http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html).
|
||||
|
||||
|
||||
# Experiments
|
||||
|
||||
@@ -17,9 +17,7 @@ and the same phone list appears in the browser. When you click on a phone link t
|
||||
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}.
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-6...step-7).
|
||||
|
||||
|
||||
## Multiple Views, Routing and Layout Template
|
||||
@@ -39,8 +37,7 @@ Application routes in Angular are declared via the
|
||||
{@link api/ngRoute.$routeProvider $routeProvider}, which is the provider of the
|
||||
{@link api/ngRoute.$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
|
||||
URL location in the browser. Using this feature we can implement [deep linking](http://en.wikipedia.org/wiki/Deep_linking), which lets us utilize the browser's
|
||||
history (back and forward navigation) and bookmarks.
|
||||
|
||||
|
||||
@@ -107,7 +104,7 @@ module `phonecatControllers`. By listing these two modules as dependencies of `p
|
||||
can use the directives and services they provide.
|
||||
|
||||
Thus using the `config` API we request the `$routeProvider` to be injected into our config function
|
||||
and use the {@link api/ngRoute.$routeProvider#methods_when `$routeProvider.when`} API to define our routes.
|
||||
and use the {@link api/ngRoute.$routeProvider#when `$routeProvider.when`} API to define our routes.
|
||||
|
||||
Our application routes are defined as follows:
|
||||
|
||||
@@ -278,9 +275,7 @@ to various URLs and verify that the correct view was rendered.
|
||||
|
||||
|
||||
You can now rerun `./scripts/e2e-test.sh` or 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}.
|
||||
runner to see the tests run, or you can see them running on [Angular's server](http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html).
|
||||
|
||||
|
||||
# Experiments
|
||||
|
||||
@@ -18,9 +18,7 @@ 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-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
|
||||
GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-7...step-8):
|
||||
|
||||
## Data
|
||||
|
||||
@@ -175,9 +173,7 @@ __`test/e2e/scenarios.js`:__
|
||||
|
||||
|
||||
You can now rerun `./scripts/e2e-test.sh` or 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}.
|
||||
runner to see the tests run, or you can see them running on [Angular's server](http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html).
|
||||
|
||||
|
||||
# Experiments
|
||||
|
||||
@@ -17,9 +17,7 @@ In the previous step, the details page displayed either "true" or "false" to ind
|
||||
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.
|
||||
|
||||
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
|
||||
GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-8...step-9):
|
||||
|
||||
|
||||
## Custom Filter
|
||||
|
||||
@@ -15,9 +15,7 @@ The phone details view displays one large image of the current phone and several
|
||||
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.
|
||||
|
||||
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
|
||||
GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-9...step-10):
|
||||
|
||||
|
||||
## Controller
|
||||
@@ -104,9 +102,7 @@ __`test/e2e/scenarios.js`:__
|
||||
</pre>
|
||||
|
||||
You can now rerun `./scripts/e2e-test.sh` or 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-10/test/e2e/runner.html
|
||||
Angular's server}.
|
||||
runner to see the tests run, or you can see them running on [Angular's server](http://angular.github.com/angular-phonecat/step-10/test/e2e/runner.html).
|
||||
|
||||
# Experiments
|
||||
|
||||
|
||||
@@ -11,14 +11,11 @@ In this step, you will improve the way our app fetches data.
|
||||
<div doc-tutorial-reset="11"></div>
|
||||
|
||||
|
||||
The next 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
|
||||
The next improvement we will make to our app is to define a custom service that represents a [RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) 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/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
|
||||
GitHub}:
|
||||
The most important changes are listed below. You can see the full diff on [GitHub](https://github.com/angular/angular-phonecat/compare/step-10...step-11):
|
||||
|
||||
|
||||
## Template
|
||||
@@ -55,7 +52,7 @@ controller's constructor in that both can declare dependencies via function argu
|
||||
service declared a dependency on the `$resource` service.
|
||||
|
||||
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
|
||||
[RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) client with just a few
|
||||
lines of code. This client can then be used in our application, instead of the lower-level {@link
|
||||
api/ng.$http $http} service.
|
||||
|
||||
@@ -130,8 +127,7 @@ service correctly.
|
||||
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
|
||||
https://github.com/pivotal/jasmine/wiki/Matchers Jasmine matcher}. When the
|
||||
solve the problem, we use a newly-defined `toEqualData` [Jasmine matcher](https://github.com/pivotal/jasmine/wiki/Matchers). When the
|
||||
`toEqualData` matcher compares two objects, it takes only object properties into account and
|
||||
ignores methods.
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ then the animation will run in between the standard DOM operation that is being
|
||||
the given time (e.g. inserting and removing nodes on ngRepeat or adding and removing classes on ngClass).
|
||||
|
||||
The most important changes are listed below. You can see the full diff on
|
||||
{@link https://github.com/angular/angular-phonecat/compare/step-11...step-12 GitHub}:
|
||||
[GitHub](https://github.com/angular/angular-phonecat/compare/step-11...step-12):
|
||||
|
||||
|
||||
## How Animations work with `ngAnimate`
|
||||
@@ -183,8 +183,8 @@ around and collapsing the items before removing them from the list.
|
||||
There's also a nice fade-in and fade-out effect that also occurs at the same time. All of this is handled
|
||||
by the CSS transition declarations at the top of the example code above.
|
||||
|
||||
Although most modern browsers have good support for {@link http://caniuse.com/#feat=css-transitions CSS transitions}
|
||||
and {@link http://caniuse.com/#feat=css-animation CSS animations}, IE9 and earlier do not.
|
||||
Although most modern browsers have good support for [CSS transitions](http://caniuse.com/#feat=css-transitions)
|
||||
and [CSS animations](http://caniuse.com/#feat=css-animation), IE9 and earlier do not.
|
||||
If you want animations that are backwards-compatible with older browsers, consider using JavaScript-based animations,
|
||||
which are described in detail below.
|
||||
|
||||
@@ -284,7 +284,7 @@ loaded the ng-view directive will create a copy of itself, download the template
|
||||
ensures that all views are contained within a single HTML element which allows for easy animation control.
|
||||
|
||||
For more on CSS animations, see the
|
||||
{@link http://docs.webplatform.org/wiki/css/properties/animations Web Platform documentation}.
|
||||
[Web Platform documentation](http://docs.webplatform.org/wiki/css/properties/animations).
|
||||
|
||||
|
||||
## Animating `ngClass` with JavaScript
|
||||
@@ -394,10 +394,10 @@ phonecatAnimations.animation('.phone', function() {
|
||||
});
|
||||
</pre>
|
||||
|
||||
Note that we're using {@link http://jquery.com/ jQuery} to implement the animation. jQuery
|
||||
Note that we're using [jQuery](http://jquery.com/) to implement the animation. jQuery
|
||||
isn't required to do JavaScript animations with AngularJS, but we're going to use it because writing
|
||||
your own JavaScript animation library is beyond the scope of this tutorial. For more on
|
||||
`jQuery.animate`, see the {@link http://api.jquery.com/animate/ jQuery documentation}.
|
||||
`jQuery.animate`, see the [jQuery documentation](http://api.jquery.com/animate/).
|
||||
|
||||
The `addClass` and `removeClass` callback functions are called whenever an a class is added or removed
|
||||
on the element that contains the class we registered, which is in this case `.phone`. When the `.active`
|
||||
|
||||
@@ -9,11 +9,10 @@ For more details and examples of the Angular concepts we touched on in this tuto
|
||||
{@link guide/ Developer Guide}.
|
||||
|
||||
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 [angular-seed](https://github.com/angular/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
|
||||
own, and that you might be interested in {@link misc/contribute contributing} to Angular.
|
||||
|
||||
If you have questions or feedback or just want to say "hi", please post a message at {@link
|
||||
https://groups.google.com/forum/#!forum/angular}.
|
||||
If you have questions or feedback or just want to say "hi", please post a message at (https://groups.google.com/forum/#!forum/angular).
|
||||
|
||||
Reference in New Issue
Block a user