+```js
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";
});
-
+```
**Controller Test:**
-
+```js
describe('myController function', function() {
describe('myController', function() {
@@ -304,13 +304,13 @@ describe('myController function', function() {
});
});
});
-
+```
If you need to test a nested Controller you need to create the same scope hierarchy
in your test that exists in the DOM:
-
+```js
describe('state', function() {
var mainScope, childScope, grandChildScope;
@@ -334,7 +334,7 @@ describe('state', function() {
expect(grandChildScope.name).toBe('Gingerbreak Baby');
});
});
-
+```
diff --git a/docs/content/guide/dev_guide.e2e-testing.ngdoc b/docs/content/guide/dev_guide.e2e-testing.ngdoc
index ce4e586c07d8..b3d3fa94acec 100644
--- a/docs/content/guide/dev_guide.e2e-testing.ngdoc
+++ b/docs/content/guide/dev_guide.e2e-testing.ngdoc
@@ -1,10 +1,10 @@
@workInProgress
@ngdoc overview
-@name Developer Guide: E2E Testing
+@name E2E Testing
@description
**Angular Scenario Runner is in maintenance mode - If you're starting a new Angular project,
-consider using {@link https://github.com/angular/protractor Protractor}.**
+consider using [Protractor](https://github.com/angular/protractor).**
@@ -31,7 +31,7 @@ In addition to the above elements, scenarios may also contain helper functions t
code in the `it` blocks.
Here is an example of a simple scenario:
-
+```js
describe('Buzz Client', function() {
it('should filter results', function() {
input('user').enter('jacksparrow');
@@ -41,7 +41,7 @@ it('should filter results', function() {
expect(repeater('ul li').count()).toEqual(1);
});
});
-
+```
Note that
[`input('user')`](https://github.com/angular/angular.js/blob/master/docs/content/guide/dev_guide.e2e-testing.ngdoc#L119)
@@ -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
@@ -88,19 +88,19 @@ Returns the window.location.search of the currently loaded page in the test fram
Returns the window.location.hash (without `#`) of the currently loaded page in the test frame.
## browser().location().url()
-Returns the {@link api/ng.$location $location.url()} of the currently loaded page in
+Returns the {@link ng.$location $location.url()} of the currently loaded page in
the test frame.
## browser().location().path()
-Returns the {@link api/ng.$location $location.path()} of the currently loaded page in
+Returns the {@link ng.$location $location.path()} of the currently loaded page in
the test frame.
## browser().location().search()
-Returns the {@link api/ng.$location $location.search()} of the currently loaded page
+Returns the {@link ng.$location $location.search()} of the currently loaded page
in the test frame.
## browser().location().hash()
-Returns the {@link api/ng.$location $location.hash()} of the currently loaded page in
+Returns the {@link ng.$location $location.hash()} of the currently loaded page in
the test frame.
## expect(future).{matcher}
@@ -188,9 +188,9 @@ 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
-+```js // value and Object comparison following the rules of angular.equals(). expect(value).toEqual(value) @@ -219,10 +219,10 @@ expect(value).toContain(expected) // number comparison using < and > expect(value).toBeLessThan(expected) expect(value).toBeGreaterThan(expected) -+``` # 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) @@ -239,7 +239,7 @@ Imagine the application to be structured into two views: 2. a *detail view* which shows the entries' details and contains a delete button. When clicking the delete button, the user is redirected back to the *overview page*. -
+```js
beforeEach(function () {
var deleteEntry = function () {
browser().navigateTo('/entries');
@@ -276,24 +276,24 @@ beforeEach(function () {
// start deleting entries
deleteEntry();
});
-
+```
In order to understand what is happening, we should emphasize that ngScenario calls are not
immediately executed, but queued (in ngScenario terms, we would be talking about adding
future actions). If we had only one entry in our table, then the following future actions
would be queued:
-
+```js
// delete entry 1
browser().navigateTo('/entries');
element('table tbody').query(function (tbody, done) { ... });
element('table tbody a');
element('.btn-danger').click();
-
+```
For two entries, ngScenario would have to work on the following queue:
-
+```js
// delete entry 1
browser().navigateTo('/entries');
element('table tbody').query(function (tbody, done) { ... });
@@ -306,7 +306,7 @@ element('.btn-danger').click();
element('table tbody').query(function (tbody, done) { ... });
element('table tbody a');
element('.btn-danger').click();
-
+```
# Caveats
diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc
index bfd1d5d90999..1d2b0e8206e2 100644
--- a/docs/content/guide/dev_guide.services.$location.ngdoc
+++ b/docs/content/guide/dev_guide.services.$location.ngdoc
@@ -1,11 +1,10 @@
@ngdoc overview
-@name Developer Guide: Angular Services: Using $location
+@name Angular Services: Using $location
@description
# 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.
@@ -88,7 +87,7 @@ setter methods that allow you to get or change the current URL in the browser.
## $location service configuration
To configure the `$location` service, retrieve the
-{@link api/ng.$locationProvider $locationProvider} and set the parameters as follows:
+{@link ng.$locationProvider $locationProvider} and set the parameters as follows:
- **html5Mode(mode)**: {boolean}
+```js
$locationProvider.html5Mode(true).hashPrefix('!');
-
+```
## Getter and setter methods
`$location` service provides getter methods for read-only parts of the URL (absUrl, protocol, host,
port) and getter / setter methods for url, path, search, hash:
-
+```js
// get the current path
$location.path();
// change the path
$location.path('/newValue')
-
+```
All of the setter methods return the same `$location` object to allow chaining. For example, to
change multiple segments in one go, chain setters like this:
-$location.path('/newValue').search({key: value});
+
+```js
+$location.path('/newValue').search({key: value});
+```
## Replace method
@@ -128,14 +130,15 @@ time the $location service is synced with the browser, the last history record s
instead of creating a new one. This is useful when you want to implement redirection, which would
otherwise break the back button (navigating back would retrigger the redirection). To change the
current URL without creating a new browser history record you can call:
-
+
+```js
$location.path('/someNewPath');
$location.replace();
// or you can chain these as: $location.path('/someNewPath').replace();
-
+```
Note that the setters don't update `window.location` immediately. Instead, the `$location` service is
-aware of the {@link api/ng.$rootScope.Scope scope} life-cycle and coalesces multiple `$location`
+aware of the {@link ng.$rootScope.Scope scope} life-cycle and coalesces multiple `$location`
mutations into one "commit" to the `window.location` object during the scope `$digest` phase. Since
multiple changes to the $location's state will be pushed to the browser as a single change, it's
enough to call the `replace()` method just once to make the entire "commit" a replace operation
@@ -145,7 +148,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 +163,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/history.html 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.
@@ -210,7 +213,7 @@ In this mode, `$location` uses Hashbang URLs in all browsers.
### Example
-
+```js
it('should show example', inject(
function($locationProvider) {
$locationProvider.html5Mode(false);
@@ -232,18 +235,21 @@ it('should show example', inject(
$location.absUrl() == 'http://example.com/base/index.html#!/new?x=y'
}
));
-
+```
### Crawling your app
To allow indexing of your AJAX application, you have to add special meta tag in the head section of
your document:
-
+
+```html
+
+```
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
@@ -259,7 +265,7 @@ having to worry about whether the browser displaying your app supports the histo
### Example
-
+```js
it('should show example', inject(
function($locationProvider) {
$locationProvider.html5Mode(true);
@@ -294,7 +300,7 @@ it('should show example', inject(
$location.absUrl() == 'http://example.com/#!/foo/bar?x=y'
}
));
-
+```
### Fallback for legacy browsers
@@ -342,12 +348,15 @@ to entry point of your application (e.g. index.html)
If you want your AJAX application to be indexed by web crawlers, you will need to add the following
meta tag to the HEAD section of your document:
-
+
+```html
+
+```
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
@@ -378,120 +387,116 @@ redirect to regular / hashbang url, as this conversion happens only during parsi
= on page reload.
In this examples we use `
+```js
describe('serviceUnderTest', function() {
beforeEach(module(function($provide) {
$provide.factory('serviceUnderTest', function($location){
@@ -542,7 +547,7 @@ describe('serviceUnderTest', function() {
}));
});
-
+```
# Migrating from earlier AngularJS releases
@@ -625,12 +630,10 @@ 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
-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
-example:
+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 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 example:
+
+```js
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
-
+```
Using the $provide service:
-
+
+```js
angular.module('myModule', [], function($provide) {
$provide.factory('serviceId', function() {
var shinyNewServiceInstance;
@@ -40,7 +42,7 @@ angular.module('myModule', [], function($provide) {
return shinyNewServiceInstance;
});
});
-
+```
Note that you are not registering a service instance, but rather a factory function that will
create this instance when called.
@@ -58,7 +60,7 @@ Following is an example of a very simple service. This service depends on the `$
stores all notifications; after the third one, the service displays all of the notifications by
window alert.
-
+```js
angular.module('myModule', [], function($provide) {
$provide.factory('notify', ['$window', function(win) {
var msgs = [];
@@ -71,7 +73,7 @@ angular.module('myModule', [], function($provide) {
};
}]);
});
-
+```
# Instantiating Angular Services
@@ -101,4 +103,4 @@ important.
## Related API
-* {@link api/ng Angular Service API}
+* {@link ng Angular Service API}
diff --git a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
index 3dce76721ad7..f3a6dbc9e7b7 100644
--- a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
+++ b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
@@ -1,5 +1,5 @@
@ngdoc overview
-@name Developer Guide: Angular Services: Injecting Services Into Controllers
+@name Angular Services: Injecting Services Into Controllers
@description
Using services as dependencies for controllers is very similar to using services as dependencies
@@ -13,7 +13,7 @@ IDs matters: the order of the services in the array will be used when calling th
with injected parameters. The names of parameters in factory function don't matter, but by
convention they match the service IDs, which has added benefits discussed below.
-
+```js
function myController($loc, $log) {
this.firstMethod = function() {
// use $location service
@@ -26,47 +26,48 @@ function myController($loc, $log) {
}
// which services to inject ?
myController.$inject = ['$location', '$log'];
-
-
-Let's try this simple notify service, injected into the controller...
- - -(you have to click 3 times to see an alert)
-Let's try this simple notify service, injected into the controller...
+ + +(you have to click 3 times to see an alert)
+Let's try the notify service, that is implicitly injected into the controller...
- - -(you have to click 3 times to see an alert)
-Let's try the notify service, that is implicitly injected into the controller...
+ + +(you have to click 3 times to see an alert)
+
+```js
function myModuleCfgFn($provide) {
$provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
}
-
+```
Using the $inject property:
-
+```js
function myModuleCfgFn($provide) {
var myServiceFactory = function(dep1, dep2) {};
myServiceFactory.$inject = ['dep1', 'dep2'];
$provide.factory('myService', myServiceFactory);
}
-
+```
Using DI inference (incompatible with minifiers):
-
+```js
function myModuleCfgFn($provide) {
$provide.factory('myService', function(dep1, dep2) {});
}
-
+```
Here is an example of two services, one of which depends on the other and both
of which depend on other services that are provided by the Angular framework:
-
+```js
/**
* batchLog service allows for messages to be queued in memory and flushed
* to the console.log every 50 seconds.
@@ -83,14 +83,14 @@ of which depend on other services that are provided by the Angular framework:
// get the main service to kick off the application
angular.injector([batchLogModule]).get('routeTemplateMonitor');
-
+```
Things to notice in this example:
-* The `batchLog` service depends on the built-in {@link api/ng.$interval $interval} and
-{@link api/ng.$log $log} services, and allows messages to be logged into the
+* The `batchLog` service depends on the built-in {@link ng.$interval $interval} and
+{@link ng.$log $log} services, and allows messages to be logged into the
`console.log` in batches.
-* The `routeTemplateMonitor` service depends on the built-in {@link api/ngRoute.$route
+* The `routeTemplateMonitor` service depends on the built-in {@link ngRoute.$route
$route} service as well as our custom `batchLog` service.
* Both of our services use the factory function signature and array notation for inject annotations
to declare their dependencies. It is important that the order of the string identifiers in the array
@@ -109,5 +109,5 @@ that the injector uses to determine which services and in which order to inject.
## Related API
-* {@link api/ng Angular Service API}
-* {@link api/angular.injector Angular Injector API}
+* {@link ./ng Angular Service API}
+* {@link angular.injector Angular Injector API}
diff --git a/docs/content/guide/dev_guide.services.ngdoc b/docs/content/guide/dev_guide.services.ngdoc
index 725e01e3eaf4..29eba46f603f 100644
--- a/docs/content/guide/dev_guide.services.ngdoc
+++ b/docs/content/guide/dev_guide.services.ngdoc
@@ -1,5 +1,5 @@
@ngdoc overview
-@name Developer Guide: Angular Services
+@name Angular Services
@description
Services are a feature that Angular brings to client-side web apps from the server side, where
@@ -17,4 +17,4 @@ objects that are wired together using {@link di dependency injection (DI)}.
## Related API
-* {@link api/ng Angular Service API}
+* {@link ./ng Angular Service API}
diff --git a/docs/content/guide/dev_guide.services.testing_services.ngdoc b/docs/content/guide/dev_guide.services.testing_services.ngdoc
index 6e0bbacebdc6..67a1635d7651 100644
--- a/docs/content/guide/dev_guide.services.testing_services.ngdoc
+++ b/docs/content/guide/dev_guide.services.testing_services.ngdoc
@@ -1,12 +1,12 @@
@ngdoc overview
-@name Developer Guide: Angular Services: Testing Angular Services
+@name Angular Services: Testing Angular Services
@description
The following is a unit test for the 'notify' service in the 'Dependencies' example in {@link
dev_guide.services.creating_services Creating Angular Services}. The unit test example uses Jasmine
spy (mock) instead of a real browser alert.
-
+```js
var mock, notify;
beforeEach(function() {
@@ -47,7 +47,7 @@ it('should clear messages after alert', function() {
expect(mock.alert.callCount).toEqual(2);
expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
});
-
+```
## Related Topics
@@ -59,4 +59,4 @@ it('should clear messages after alert', function() {
## Related API
-* {@link api/ng Angular Service API}
+* {@link ./ng Angular Service API}
diff --git a/docs/content/guide/dev_guide.services.understanding_services.ngdoc b/docs/content/guide/dev_guide.services.understanding_services.ngdoc
index aebd2fa569ef..b17508848568 100644
--- a/docs/content/guide/dev_guide.services.understanding_services.ngdoc
+++ b/docs/content/guide/dev_guide.services.understanding_services.ngdoc
@@ -1,11 +1,11 @@
@ngdoc overview
-@name Developer Guide: Angular Services: Understanding Angular Services
+@name Angular Services: Understanding Angular Services
@description
## What are Angular Services?
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
-Angular has a number of built in services, such as the {@link api/ng.$http $http service}, which
+Angular has a number of built in services, such as the {@link ng.$http $http service}, which
provides access to the browser's `XMLHttpRequest` object for making requests to a server. Like other core
Angular variables and identifiers, the built-in services always start with `$` (such as `$http` mentioned
above). You can also create your own custom services.
@@ -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
@@ -49,12 +49,12 @@ dependent on this service gets a reference to the single instance generated by t
## Related Topics
-* {@link di About Angular Dependency Injection}
-* {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
-* {@link dev_guide.services.testing_services Testing Angular Services}
+* {@link guide/di About Angular Dependency Injection}
+* {@link guide/dev_guide.services.creating_services Creating Angular Services}
+* {@link guide/dev_guide.services.managing_dependencies Managing Service Dependencies}
+* {@link guide/dev_guide.services.testing_services Testing Angular Services}
## Related API
-* {@link api/ng Angular Service API}
-* {@link api/angular.injector Injector API}
+* {@link ./ng Angular Service API}
+* {@link angular.injector Injector API}
diff --git a/docs/content/guide/dev_guide.templates.css-styling.ngdoc b/docs/content/guide/dev_guide.templates.css-styling.ngdoc
index c00aa9f7709d..b5a3608e45ff 100644
--- a/docs/content/guide/dev_guide.templates.css-styling.ngdoc
+++ b/docs/content/guide/dev_guide.templates.css-styling.ngdoc
@@ -1,5 +1,5 @@
@ngdoc overview
-@name Developer Guide: Templates: Working With CSS in Angular
+@name Templates: Working With CSS in Angular
@description
@@ -8,7 +8,7 @@ Angular sets these CSS classes. It is up to your application to provide useful s
# CSS classes used by angular
* `ng-scope`
- - **Usage:** angular applies this class to any element that where a new {@link api/ng.$rootScope.Scope scope}
+ - **Usage:** angular applies this class to any element that where a new {@link ng.$rootScope.Scope scope}
is defined. (see {@link guide/scope scope} guide for more information about scopes)
* `ng-binding`
@@ -17,15 +17,15 @@ Angular sets these CSS classes. It is up to your application to provide useful s
* `ng-invalid`, `ng-valid`
- **Usage:** angular applies this class to an input widget element if that element's input does
- not pass validation. (see {@link api/ng.directive:input input} directive)
+ not pass validation. (see {@link ng.directive:input input} directive)
* `ng-pristine`, `ng-dirty`
- - **Usage:** angular {@link api/ng.directive:input input} directive applies `ng-pristine` class
+ - **Usage:** angular {@link ng.directive:input input} directive applies `ng-pristine` class
to a new input widget element which did not have user interaction. Once the user interacts with
the input widget the class is changed to `ng-dirty`.
## Related Topics
-* {@link templates Angular Templates}
-* {@link forms Angular Forms}
+* {@link guide/templates Angular Templates}
+* {@link guide/forms Angular Forms}
diff --git a/docs/content/guide/dev_guide.unit-testing.ngdoc b/docs/content/guide/dev_guide.unit-testing.ngdoc
index e73dc2d68e31..2fba61a33a21 100644
--- a/docs/content/guide/dev_guide.unit-testing.ngdoc
+++ b/docs/content/guide/dev_guide.unit-testing.ngdoc
@@ -1,5 +1,5 @@
@ngdoc overview
-@name Developer Guide: Unit Testing
+@name Unit Testing
@description
JavaScript is a dynamically typed language which comes with great power of expression, but it also
@@ -52,7 +52,7 @@ While there is nothing wrong with the `new` operator fundamentally, a problem ar
on a constructor. This permanently binds the call site to the type. For example, lets say that we try to
instantiate an `XHR` that will retrieve data from the server.
-
+```js
function MyClass() {
this.doWork = function() {
var xhr = new XHR();
@@ -61,7 +61,7 @@ function MyClass() {
xhr.send();
}
}
-
+```
A problem surfaces in tests when we would like to instantiate a `MockXHR` that would
allow us to return fake data and simulate network failures. By calling `new XHR()` we are
@@ -69,20 +69,21 @@ permanently bound to the actual XHR and there is no way to replace it. Yes, we
patch, but that is a bad idea for many reasons which are outside the scope of this document.
Here's an example of how the class above becomes hard to test when resorting to monkey patching:
-
+
+```js
var oldXHR = XHR;
XHR = function MockXHR() {};
var myClass = new MyClass();
myClass.doWork();
// assert that MockXHR got called with the right arguments
XHR = oldXHR; // if you forget this bad things will happen
-
+```
### Global look-up:
Another way to approach the problem is to look for the service in a well-known location.
-
+```js
function MyClass() {
this.doWork = function() {
global.xhr({
@@ -92,24 +93,24 @@ 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:
-
+
+```js
var oldXHR = global.xhr;
global.xhr = function mockXHR() {};
var myClass = new MyClass();
myClass.doWork();
// assert that mockXHR got called with the right arguments
global.xhr = oldXHR; // if you forget this bad things will happen
-
+```
### Service Registry:
@@ -117,7 +118,7 @@ global.xhr = oldXHR; // if you forget this bad things will happen
It may seem that this can be solved by having a registry of all the services and then
having the tests replace the services as needed.
-
+```js
function MyClass() {
var serviceRegistry = ????;
this.doWork = function() {
@@ -128,7 +129,7 @@ function MyClass() {
complete:function(response){ ... }
})
}
-
+```
However, where does the serviceRegistry come from? If it is:
* `new`-ed up, the test has no chance to reset the services for testing.
@@ -136,20 +137,21 @@ However, where does the serviceRegistry come from? If it is:
only one global variable exists to be reset).
The class above is hard to test since we have to change the global state:
-
+
+```js
var oldServiceLocator = global.serviceLocator;
global.serviceLocator.set('xhr', function mockXHR() {});
var myClass = new MyClass();
myClass.doWork();
// assert that mockXHR got called with the right arguments
global.serviceLocator = oldServiceLocator; // if you forget this bad things will happen
-
+```
### Passing in Dependencies:
Last, the dependency can be passed in.
-
+```js
function MyClass(xhr) {
this.doWork = function() {
xhr({
@@ -158,7 +160,7 @@ function MyClass(xhr) {
complete:function(response){ ... }
})
}
-
+```
This is the preferred method since the code makes no assumptions about the origin of `xhr` and cares
instead about whoever created the class responsible for passing it in. Since the creator of the
@@ -166,12 +168,13 @@ class should be different code than the user of the class, it separates the resp
creation from the logic. This is dependency-injection in a nutshell.
The class above is testable, since in the test we can write:
-
+
+```js
function xhrMock(args) {...}
var myClass = new MyClass(xhrMock);
myClass.doWork();
// assert that xhrMock got called with the right arguments
-
+```
Notice that no global variables were harmed in the writing of this test.
@@ -183,7 +186,7 @@ What makes each application unique is its logic, and the logic is what we would
for your application contains DOM manipulation, it will be hard to test. See the example
below:
-
+```js
function PasswordCtrl() {
// get references to DOM elements
var msg = $('.ex1 span');
@@ -206,12 +209,12 @@ function PasswordCtrl() {
.text(strength);
}
}
-
+```
The code above is problematic from a testability point of view since it requires your test to have the right kind
of DOM present when the code executes. The test would look like this:
-
+```js
var input = $('');
var span = $('');
$('body').html('')
@@ -223,12 +226,12 @@ input.val('abc');
pc.grade();
expect(span.text()).toEqual('weak');
$('body').empty();
-
+```
In angular the controllers are strictly separated from the DOM manipulation logic and this results in
a much easier testability story as the following example shows:
-
+```js
function PasswordCtrl($scope) {
$scope.password = '';
$scope.grade = function() {
@@ -242,27 +245,27 @@ function PasswordCtrl($scope) {
}
};
}
-
+```
and the test is straight forward:
-
+```js
var $scope = {};
var pc = $controller('PasswordCtrl', { $scope: $scope });
$scope.password = 'abc';
$scope.grade();
expect($scope.strength).toEqual('weak');
-
+```
Notice that the test is not only much shorter, it is also easier to follow what is happening. We say
that such a test tells a story, rather then asserting random bits which don't seem to be related.
## Filters
-{@link api/ng.$filterProvider Filters} are functions which transform the data into a user readable
+{@link ng.$filterProvider Filters} are functions which transform the data into a user readable
format. They are important because they remove the formatting responsibility from the application
logic, further simplifying the application logic.
-
+```js
myModule.filter('length', function() {
return function(text){
return (''+(text||'')).length;
@@ -272,7 +275,7 @@ myModule.filter('length', function() {
var length = $filter('length');
expect(length(null)).toEqual(0);
expect(length('abc')).toEqual(3);
-
+```
## Directives
Directives in angular are responsible for encapsulating complex functionality within custom HTML tags,
@@ -283,13 +286,13 @@ you create with directives may be used throughout your application and in many d
Let's start with an angular app with no dependencies.
-
+```js
var app = angular.module('myApp', []);
-
+```
Now we can add a directive to our app.
-
+```js
app.directive('aGreatEye', function () {
return {
restrict: 'E',
@@ -297,13 +300,13 @@ app.directive('aGreatEye', function () {
template: 'lidless, wreathed in flame, {{1 + 1}} times
'
};
});
-
+```
This directive is used as a tag `lidless, wreathed in flame, {{1 + 1}} times
`. Now we are going to write a jasmine unit test to
verify this functionality. Note that the expression `{{1 + 1}}` times will also be evaluated in the rendered content.
-
+```js
describe('Unit testing great quotes', function() {
var $compile;
var $rootScope;
@@ -328,7 +331,7 @@ describe('Unit testing great quotes', function() {
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
});
-
+```
We inject the $compile service and $rootScope before each jasmine test. The $compile service is used
to render the aGreatEye directive. After rendering the directive we ensure that the directive has
@@ -336,5 +339,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.
diff --git a/docs/content/guide/di.ngdoc b/docs/content/guide/di.ngdoc
index b305dd6bcf14..f6d9869129d2 100644
--- a/docs/content/guide/di.ngdoc
+++ b/docs/content/guide/di.ngdoc
@@ -1,5 +1,5 @@
@ngdoc overview
-@name Developer Guide: Dependency Injection
+@name Dependency Injection
@description
# Dependency Injection
@@ -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
@@ -31,7 +31,7 @@ for test isolation.
The third option is the most viable, since it removes the responsibility of locating the
dependency from the component. The dependency is simply handed to the component.
-
+```js
function SomeClass(greeter) {
this.greeter = greeter;
}
@@ -39,7 +39,7 @@ dependency from the component. The dependency is simply handed to the component.
SomeClass.prototype.doSomething = function(name) {
this.greeter.greet(name);
}
-
+```
In the above example `SomeClass` is not concerned with locating the `greeter` dependency, it
is simply handed the `greeter` at runtime.
@@ -55,7 +55,7 @@ construction and lookup of dependencies.
Here is an example of using the injector service:
-
+```js
// Provide the wiring information in a module
angular.module('myModule', []).
@@ -77,20 +77,20 @@ Here is an example of using the injector service:
// Request any dependency from the injector
var greeter = injector.get('greeter');
-
+```
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:
-
+```html
-
-
+```
+
+```js
// And this controller definition
function MyController($scope, greeter) {
$scope.sayHello = function() {
@@ -100,7 +100,7 @@ dependency lookup responsibility to the injector by declaring the dependencies a
// The 'ng-controller' directive does this behind the scenes
injector.instantiate(MyController);
-
+```
Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the
dependencies of `MyController` without the controller ever knowing about the injector. This is
@@ -122,19 +122,18 @@ information. These can be used interchangeably as you see fit and are equivalent
The simplest way to get hold of the dependencies, is to assume that the function parameter names
are the names of the dependencies.
-
+```js
function MyController($scope, greeter) {
...
}
-
+```
Given a function the injector can infer the names of the service to inject by examining the
function declaration and extracting the parameter names. In the above example `$scope`, and
`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
@@ -142,12 +141,12 @@ To allow the minifers to rename the function parameters and still be able to inj
the function needs to be annotated with the `$inject` property. The `$inject` property is an array
of service names to inject.
-
+```js
var MyController = function(renamed$scope, renamedGreeter) {
...
}
MyController['$inject'] = ['$scope', 'greeter'];
-
+```
In this scenario the ordering of the values in the '$inject' array must match the ordering of the arguments to inject.
Using above code snippet as an example, '$scope' will be injected into 'renamed$scope' and 'greeter' into 'renamedGreeter'.
@@ -164,15 +163,15 @@ directives.
For example:
-
+```js
someModule.factory('greeter', function($window) {
...
});
-
+```
Results in code bloat due to needing a temporary variable:
-
+```js
var greeterFactory = function(renamed$window) {
...
};
@@ -180,15 +179,15 @@ Results in code bloat due to needing a temporary variable:
greeterFactory.$inject = ['$window'];
someModule.factory('greeter', greeterFactory);
-
+```
For this reason the third annotation style is provided as well.
-
+```js
someModule.factory('greeter', ['$window', function(renamed$window) {
...
}]);
-
+```
Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular
where injection is supported.
@@ -202,7 +201,7 @@ DI is pervasive throughout Angular. It is typically used in controllers and fact
Controllers are classes which are responsible for application behavior. The recommended way of
declaring controllers is using the array notation:
-
+```js
someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
@@ -210,7 +209,7 @@ declaring controllers is using the array notation:
}
...
}]);
-
+```
This avoids the creation of global functions for controllers and also protects against minification.
@@ -221,7 +220,7 @@ Factory methods are responsible for creating most objects in Angular. Examples a
services, and filters. The factory methods are registered with the module, and the recommended way
of declaring factories is:
-
+```js
angular.module('myModule', []).
config(['depProvider', function(depProvider){
...
@@ -238,4 +237,4 @@ of declaring factories is:
run(['depService', function(depService) {
...
}]);
-
+```
diff --git a/docs/content/guide/directive.ngdoc b/docs/content/guide/directive.ngdoc
index 704dd48357c5..6c81419a33a1 100644
--- a/docs/content/guide/directive.ngdoc
+++ b/docs/content/guide/directive.ngdoc
@@ -7,7 +7,7 @@
**Note:** this guide is targeted towards developers who are already familiar with AngularJS basics.
If you're just getting started, we recommend the {@link tutorial/ tutorial} first.
-If you're looking for the **directives API**, we recently moved it to {@link api/ng.$compile `$compile`}.
+If you're looking for the **directives API**, we recently moved it to {@link ng.$compile `$compile`}.
@@ -18,7 +18,7 @@ how to implement them.
## What are Directives?
At a high level, directives are markers on a DOM element (such as an attribute, element
-name, or CSS class) that tell AngularJS's **HTML compiler** ({@link api/ng.$compile `$compile`}) to
+name, or CSS class) that tell AngularJS's **HTML compiler** ({@link ng.$compile `$compile`}) to
attach a specified behavior to that DOM element or even transform the DOM element and its children.
Angular comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngView`.
@@ -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).
@@ -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:
@@ -120,7 +120,7 @@ Doing so generally makes it easier to determine what directives a given element
**Best Practice:** Comment directives were commonly used in places where the DOM API limits the
ability to create directives that spanned multiple elements (e.g. inside `` elements).
-AngularJS 1.2 introduces {@link api/ng.directive:ngRepeat `ng-repeat-start` and `ng-repeat-end`}
+AngularJS 1.2 introduces {@link ng.directive:ngRepeat `ng-repeat-start` and `ng-repeat-end`}
as a better solution to this problem. Developers are encouraged to use this over custom comment
directives when possible.
@@ -129,10 +129,10 @@ directives when possible.
### Text and attribute bindings
-During the compilation process the {@link api/ng.$compile compiler} matches text and attributes
-using the {@link api/ng.$interpolate $interpolate} service to see if they contain embedded
-expressions. These expressions are registered as {@link api/ng.$rootScope.Scope#methods_$watch watches}
-and will update as part of normal {@link api/ng.$rootScope.Scope#methods_$digest digest} cycle. An
+During the compilation process the {@link ng.$compile compiler} matches text and attributes
+using the {@link ng.$interpolate $interpolate} service to see if they contain embedded
+expressions. These expressions are registered as {@link ng.$rootScope.Scope#methods_$watch watches}
+and will update as part of normal {@link ng.$rootScope.Scope#methods_$digest digest} cycle. An
example of interpolation is shown below:
```html
@@ -174,7 +174,7 @@ For example, we could fix the example above by instead writing:
## Creating Directives
-First let's talk about the {@link api/ng.$compileProvider#methods_directive API for registering directives}. Much like
+First let's talk about the {@link ng.$compileProvider#methods_directive API for registering directives}. Much like
controllers, directives are registered on modules. To register a directive, you use the
`module.directive` API. `module.directive` takes the
{@link guide/directive#creating-custom-directives_matching-directives normalized} directive name
@@ -183,9 +183,9 @@ options to tell `$compile` how the directive should behave when matched.
The factory function is invoked only once when the
-{@link api/ng.$compile compiler} matches the directive for the first time. You can perform any
+{@link ng.$compile compiler} matches the directive for the first time. You can perform any
initialization work here. The function is invoked using
-{@link api/AUTO.$injector#methods_invoke $injector.invoke} which makes it injectable just like a
+{@link auto.$injector#methods_invoke $injector.invoke} which makes it injectable just like a
controller.
@@ -324,9 +324,9 @@ Let's change our directive to use `restrict: 'E'`:
For more on the
-{@link api/ng.$compile#description_comprehensive-directive-api_directive-definition-object `restrict`}
+{@link ng.$compile#description_comprehensive-directive-api_directive-definition-object `restrict`}
property, see the
-{@link api/ng.$compile#description_comprehensive-directive-api_directive-definition-object API docs}.
+{@link ng.$compile#description_comprehensive-directive-api_directive-definition-object API docs}.
**When should I use an attribute versus an element?**
@@ -791,7 +791,7 @@ element?
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
- }
+ };
});
@@ -829,7 +829,7 @@ to which tab is active.
};
this.addPane = function(pane) {
- if (panes.length == 0) {
+ if (panes.length === 0) {
$scope.select(pane);
}
panes.push(pane);
@@ -912,6 +912,6 @@ point for creating your own directives.
You might also be interested in an in-depth explanation of the compilation process that's
available in the {@link guide/compiler compiler guide}.
-The {@link api/ng.$compile `$compile` API} page has a comprehensive list of directive options for
+The {@link ng.$compile `$compile` API} page has a comprehensive list of directive options for
reference.
diff --git a/docs/content/guide/expression.ngdoc b/docs/content/guide/expression.ngdoc
index 99cc7514578e..5aa0523641d9 100644
--- a/docs/content/guide/expression.ngdoc
+++ b/docs/content/guide/expression.ngdoc
@@ -1,10 +1,10 @@
@ngdoc overview
-@name Developer Guide: Expressions
+@name Expressions
@description
Expressions are JavaScript-like code snippets that are usually placed in bindings such as `{{
-expression }}`. Expressions are processed by the {@link api/ng.$parse $parse}
-service. Expressions are often post processed using {@link filter filters} to create a more user-friendly format.
+expression }}`. Expressions are processed by the {@link ng.$parse $parse}
+service. Expressions are often post processed using {@link guide/filter filters} to create a more user-friendly format.
For example, these are all valid expressions in angular:
@@ -30,100 +30,105 @@ You can think of Angular expressions as JavaScript expressions with following di
If, on the other hand, you do want to run arbitrary JavaScript code, you should make it a
controller method and call the method. If you want to `eval()` an angular expression from
-JavaScript, use the {@link api/ng.$rootScope.Scope#methods_$eval `$eval()`} method.
+JavaScript, use the {@link ng.$rootScope.Scope#methods_$eval `$eval()`} method.
## Example
-
-
- 1+2={{1+2}}
-
-
- it('should calculate expression in binding', function() {
- expect(element(by.binding('1+2')).getText()).toEqual('1+2=3');
- });
-
-
+
+
+ 1+2={{1+2}}
+
+
+
+ it('should calculate expression in binding', function() {
+ expect(element(by.binding('1+2')).getText()).toEqual('1+2=3');
+ });
+
+
You can try evaluating different expressions here:
-
-
-
-
- Expression:
-
-
-
- -
- [ X ]
- {{expr}} =>
-
-
-
-
-
- it('should allow user expression testing', function() {
- element(by.css('.expressions button')).click();
- var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs'));
- expect(lis.count()).toBe(1);
- expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00');
- });
-
-
+ };
+
+ $scope.removeExp = function(index) {
+ exprs.splice(index, 1);
+ };
+ }
+
+
+
+ it('should allow user expression testing', function() {
+ element(by.css('.expressions button')).click();
+ var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs'));
+ expect(lis.count()).toBe(1);
+ expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00');
+ });
+
+
# Property Evaluation
Evaluation of all properties takes place against a scope. Unlike JavaScript, where names default
-to global window properties, Angular expressions have to use {@link api/ng.$window
+to global window properties, Angular expressions have to use {@link ng.$window
`$window`} to refer to the global `window` object. For example, if you want to call `alert()`, which is
defined on `window`, in an expression you must use `$window.alert()`. This is done intentionally to
prevent accidental access to the global state (a common source of subtle bugs).
-
-
-
-
- Name:
-
-
-
-
- it('should calculate expression in binding', function() {
- if (browser.params.browser = 'safari') {
- // Safari can't handle dialogs.
- return;
- };
- element(by.css('[ng-click="greet()"]')).click();
-
- var alertDialog = browser.switchTo().alert();
-
- expect(alertDialog.getText()).toEqual('Hello World');
-
- alertDialog.accept();
- });
-
-
+
+
+
+ Name:
+
+
+
+
+
+ function Cntl1($window, $scope){
+ $scope.name = 'World';
+
+ $scope.greet = function() {
+ $window.alert('Hello ' + $scope.name);
+ };
+ }
+
+
+
+ it('should calculate expression in binding', function() {
+ if (browser.params.browser == 'safari') {
+ // Safari can't handle dialogs.
+ return;
+ }
+ element(by.css('[ng-click="greet()"]')).click();
+
+ var alertDialog = browser.switchTo().alert();
+
+ expect(alertDialog.getText()).toEqual('Hello World');
+
+ alertDialog.accept();
+ });
+
+
## Forgiving
diff --git a/docs/content/guide/filter.ngdoc b/docs/content/guide/filter.ngdoc
index 30e488339da4..a3b43ac7bd7a 100644
--- a/docs/content/guide/filter.ngdoc
+++ b/docs/content/guide/filter.ngdoc
@@ -5,7 +5,7 @@
A filter formats the value of an expression for display to the user. They can be used in view templates,
controllers or services and it is easy to define your own filter.
-The underlying API is the {@link api/ng.$filterProvider filterProvider}.
+The underlying API is the {@link ng.$filterProvider filterProvider}.
## Using filters in view templates
@@ -13,7 +13,7 @@ Filters can be applied to expressions in view templates using the following synt
{{ expression | filter }}
-E.g. the markup `{{ 12 | currency }}` formats the number 12 as a currency using the {@link api/ng.filter:currency `currency`}
+E.g. the markup `{{ 12 | currency }}` formats the number 12 as a currency using the {@link ng.filter:currency `currency`}
filter. The resulting value is `$12.00`.
Filters can be applied to the result of another filter. This is called "chaining" and uses
@@ -26,7 +26,7 @@ Filters may have arguments. The syntax for this is
{{ expression | filter:argument1:argument2:... }}
E.g. the markup `{{ 1234 | number:2 }}` formats the number 1234 with 2 decimal points using the
-{@link api/ng.filter:number `number`} filter. The resulting value is `1,234.00`.
+{@link ng.filter:number `number`} filter. The resulting value is `1,234.00`.
## Using filters in controllers and services
@@ -36,7 +36,7 @@ to your controller or service. E.g. using the dependency `numberFilter` will inj
The injected argument is a function that takes the value to format as first argument and filter parameters
starting with the second argument.
-The example below uses the filter called {@link api/ng.filter:filter `filter`}.
+The example below uses the filter called {@link ng.filter:filter `filter`}.
This filter reduces arrays into sub arrays based on
conditions. The filter can be applied in the view template with markup like
`{{ctrl.array | filter:'a'}}`, which would do a fulltext search for "a".
@@ -47,41 +47,41 @@ The example below therefore calls the filter directly in the controller.
By this, the controller is able to call the filter only when needed (e.g. when the data is loaded from the backend
or the filter expression is changed).
-
-
-
-
-
-
- All entries:
- {{entry.name}}
-
-
- Entries that contain an "a":
- {{entry.name}}
-
-
-
-
+
+
+
+
+ All entries:
+ {{entry.name}}
+
+
+ Entries that contain an "a":
+ {{entry.name}}
+
+
+
+
+
+ angular.module('FilterInControllerModule', []).
+ controller('FilterController', ['filterFilter', function(filterFilter) {
+ this.array = [
+ {name: 'Tobias'},
+ {name: 'Jeff'},
+ {name: 'Brian'},
+ {name: 'Igor'},
+ {name: 'James'},
+ {name: 'Brad'}
+ ];
+ this.filteredArray = filterFilter(this.array, 'a');
+ }]);
+
+
## Creating custom filters
Writing your own filter is very easy: just register a new filter factory function with
-your module. Internally, this uses the {@link api/ng.$filterProvider `filterProvider`}.
+your module. Internally, this uses the {@link ng.$filterProvider `filterProvider`}.
This factory function should return a new filter function which takes the input value
as the first argument. Any filter arguments are passed in as additional arguments to the filter
function.
@@ -89,38 +89,38 @@ function.
The following sample filter reverses a text string. In addition, it conditionally makes the
text upper-case.
-
-
-
-
-
-
- No filter: {{greeting}}
- Reverse: {{greeting|reverse}}
- Reverse + uppercase: {{greeting|reverse:true}}
-
-
-
+
+
+
+
+ No filter: {{greeting}}
+ Reverse: {{greeting|reverse}}
+ Reverse + uppercase: {{greeting|reverse:true}}
+
+
+
+
+ angular.module('MyReverseModule', []).
+ filter('reverse', function() {
+ return function(input, uppercase) {
+ var out = "";
+ for (var i = 0; i < input.length; i++) {
+ out = input.charAt(i) + out;
+ }
+ // conditional based on optional argument
+ if (uppercase) {
+ out = out.toUpperCase();
+ }
+ return out;
+ };
+ });
+
+ function Ctrl($scope) {
+ $scope.greeting = 'hello';
+ }
+
+
## 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.
diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc
index 84ee4330c945..8a23c8c820bd 100644
--- a/docs/content/guide/forms.ngdoc
+++ b/docs/content/guide/forms.ngdoc
@@ -12,42 +12,42 @@ Server-side validation is still necessary for a secure application.
# Simple form
-The key directive in understanding two-way data-binding is {@link api/ng.directive:ngModel ngModel}.
+The key directive in understanding two-way data-binding is {@link ng.directive:ngModel ngModel}.
The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
-In addition it provides an {@link api/ng.directive:ngModel.NgModelController API} for other directives to augment its behavior.
-
-
-
-
-
- form = {{user | json}}
- master = {{master | json}}
-
-
-
-
-
+In addition it provides an {@link ngModel.NgModelController API} for other directives to augment its behavior.
+
+
+
+
+
+ form = {{user | json}}
+ master = {{master | json}}
+
+
+
+
+
Note that `novalidate` is used to disable browser's native form validation.
@@ -67,57 +67,57 @@ The following example uses the CSS to display validity of each form control.
In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty.
This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
# Binding to form and control state
-A form is an instance of {@link api/ng.directive:form.FormController FormController}.
+A form is an instance of {@link form.FormController FormController}.
The form instance can optionally be published into the scope using the `name` attribute.
-Similarly, an input control that has the {@link api/ng.directive:ngModel ngModel} directive holds an
-instance of {@link api/ng.directive:ngModel.NgModelController NgModelController}.
+Similarly, an input control that has the {@link ng.directive:ngModel ngModel} directive holds an
+instance of {@link ngModel.NgModelController NgModelController}.
Such a control instance can be published as a property of the form instance using the `name` attribute
on the input control. The name attribute specifies the name of the property on the form instance.
@@ -130,72 +130,72 @@ This allows us to extend the above example with these features:
- SAVE button is enabled only if form has some changes and is valid
- custom error messages for `user.email` and `user.agree`
-
-
-
-