Let's try this simple notify service, injected into the controller...

@@ -73,19 +66,14 @@ it('should test service', function(){ - - ## Related Topics - {@link dev_guide.services.understanding_services Understanding Angular Services} {@link dev_guide.services.creating_services Creating Angular Services} {@link dev_guide.services.registering_services Registering Angular Services} {@link dev_guide.services.managing_dependencies Managing Service Dependencies} {@link dev_guide.services.testing_services Testing Angular Services} - ## Related API - {@link api/angular.service Angular Service API} diff --git a/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc b/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc index 5adbefae..5f45b001 100644 --- a/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc +++ b/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc @@ -3,20 +3,16 @@ @name Developer Guide: Angular Services: Managing Service Dependencies @description - Angular allows services to declare other services as dependencies needed for construction of their instances. - To declare dependencies, you specify them in the factory function signature and via the `$inject` property, as an array of string identifiers. Optionally the `$inject` property declaration can be dropped (see "Inferring `$inject`" but note that that is currently an experimental feature). - Here is an example of two services that depend on each other, as well as on other services that are provided by angular's web framework: -

 /**
 * batchLog service allows for messages to be queued in memory and flushed
@@ -27,7 +23,6 @@ provided by angular's web framework:
 angular.service('batchLog', function($defer, $log) {
 var messageQueue = [];
 
-
 function log() {
  if (messageQueue.length) {
    $log('batchLog messages: ', messageQueue);
@@ -36,14 +31,12 @@ function log() {
  $defer(log, 50000);
  }
 
-
 return function(message) {
  messageQueue.push(message);
 }
 }, {$inject: ['$defer', '$log']);
 // note how we declared dependency on built-in $defer and $log services above
 
-
 /**
 * routeTemplateMonitor monitors each $route change and logs the current
 * template via the batchLog service.
@@ -55,10 +48,8 @@ $route.onChange(function() {
 }, {$inject: ['$route', 'batchLog'], $eager: true});

- Things to notice in this example: - * The `batchLog` service depends on the built-in {@link api/angular.service.$defer $defer} and {@link api/angular.service.$log $log} services, and allows messages to be logged into the `console.log` in batches. @@ -77,20 +68,15 @@ this array with IDs and their order that the injector uses to determine which se order to inject. - - ## Related Topics - * {@link dev_guide.services.understanding_services Understanding Angular Services} * {@link dev_guide.services.creating_services Creating Angular Services} * {@link dev_guide.services.registering_services Registering Services} * {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers } * {@link dev_guide.services.testing_services Testing Angular Services} - ## Related API - * {@link api/angular.service Angular Service API} * {@link api/angular.injector Angular Injector API} diff --git a/docs/content/guide/dev_guide.services.ngdoc b/docs/content/guide/dev_guide.services.ngdoc index 57449edc..01f747f7 100644 --- a/docs/content/guide/dev_guide.services.ngdoc +++ b/docs/content/guide/dev_guide.services.ngdoc @@ -3,18 +3,14 @@ @name Developer Guide: Angular Services @description - Services are a feature that angular brings to client-side web apps from the server side, where services have been commonly used for a long time. Services in angular apps are substitutable objects that are wired together using {@link dev_guide.di dependency injection (DI)}. Services are most often used with {@link dev_guide.di dependency injection}, also a key feature of angular apps. - - ## Related Topics - * {@link dev_guide.services.understanding_services Understanding Angular Services} * {@link dev_guide.services.creating_services Creating Angular Services} * {@link dev_guide.services.registering_services Registering Angular Services} @@ -22,8 +18,6 @@ most often used with {@link dev_guide.di dependency injection}, also a key featu * {@link dev_guide.services.injecting_controllers Injecting Services Into Conrollers} * {@link dev_guide.services.testing_services Testing Angular Services} - ## Related API - * {@link api/angular.service Angular Service API} diff --git a/docs/content/guide/dev_guide.services.registering_services.ngdoc b/docs/content/guide/dev_guide.services.registering_services.ngdoc index ea182944..cc50d678 100644 --- a/docs/content/guide/dev_guide.services.registering_services.ngdoc +++ b/docs/content/guide/dev_guide.services.registering_services.ngdoc @@ -3,12 +3,10 @@ @name Developer Guide: Angular Services: Registering Angular Services @description - To register a service, register a factory function that creates the service with angular's Injector. The Injector is exposed as {@link api/angular.scope.$service scope.$service}. The following pseudo-code shows a simple service registration: -

 angular.service('service id', function() {
   var shinyNewServiceInstance;
@@ -17,27 +15,21 @@ angular.service('service id', function() {
 });

- Note that you are not registering a service instance, but rather a factory function that will create this instance when called. - # Instantiating Angular Services - A service can be instantiated eagerly or lazily. By default angular instantiates services lazily, which means that a service will be created only when it is needed for instantiation of a service or an application component that depends on it. In other words, angular won't instantiate lazy services unless they are requested directly or indirectly by the application. - Eager services on the other hand, are instantiated right after the injector itself is created, which happens when the angular {@link dev_guide.bootstrap application initializes}. - To override the default, you can request that a service is eagerly instantiated as follows: -

 angular.service('service id', function() {
   var shinyNewServiceInstance;
@@ -46,12 +38,10 @@ angular.service('service id', function() {
 }, {$eager: true});

- While it is tempting to declare services as eager, only in few cases it is actually useful. If you are unsure whether to make a service eager, it likely doesn't need to be. To be more specific, a service should be declared as eager only if it fits one of these scenarios: - * Nothing in your application declares this service as its dependency, and this service affects the state or configuration of the application (e.g. a service that configures `$route` or `$resource` services) @@ -60,7 +50,6 @@ because the service passively observes the application and it is optional for ot components to depend on it. An example of this scenario is a service that monitors and logs application memory usage. - Lastly, it is important to realize that all angular services are applicaiton singletons. This means that there is only one instance of a given service per injector. Since angular is lethally allergic to the global state, it is possible to create multiple injectors, each with its own instance of a @@ -68,19 +57,14 @@ given service, but that is rarely needed, except in tests where this property is important. - - ## Related Topics - * {@link dev_guide.services.understanding_services Understanding Angular Services} * {@link dev_guide.services.creating_services Creating Angular Services} * {@link dev_guide.services.managing_dependencies Managing Service Dependencies} * {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers } * {@link dev_guide.services.testing_services Testing Angular Services} - ## Related API - * {@link api/angular.service 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 65e1ab6d..bc860364 100644 --- a/docs/content/guide/dev_guide.services.testing_services.ngdoc +++ b/docs/content/guide/dev_guide.services.testing_services.ngdoc @@ -3,29 +3,24 @@ @name Developer Guide: Angular Services: Testing Angular Services @description - Following is a unit test for the service in the example in {@link dev_guide.services.registering_services Registering Angular Services}. The unit test example uses Jasmine spy (mock) instead of a real browser alert. -

 var mock, notify;
 
-
 beforeEach(function() {
 mock = {alert: jasmine.createSpy()};
 notify = angular.service('notify')(mock);
 });
 
-
 it('should not alert first two notifications', function() {
 notify('one');
 notify('two');
 expect(mock.alert).not.toHaveBeenCalled();
 });
 
-
 it('should alert all after third notification', function() {
 notify('one');
 notify('two');
@@ -33,7 +28,6 @@ notify('three');
 expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
 });
 
-
 it('should clear messages after alert', function() {
 notify('one');
 notify('two');
@@ -47,24 +41,16 @@ expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);

- - ## Related Topics - * {@link dev_guide.services.understanding_services Understanding Angular Services} * {@link dev_guide.services.creating_services Creating Angular Services} * {@link dev_guide.services.registering_services Registering Angular Services} * {@link dev_guide.services.managing_dependencies Managing Service Dependencies} * {@link dev_guide.services.injecting_controllers Injecting Services Into Conrollers} - ## Related API - * {@link api/angular.service 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 f7afc981..05fafcf6 100644 --- a/docs/content/guide/dev_guide.services.understanding_services.ngdoc +++ b/docs/content/guide/dev_guide.services.understanding_services.ngdoc @@ -3,46 +3,36 @@ @name Developer Guide: Angular Services: Understanding Angular Services @description - Angular services are singletons that carry out specific tasks common to web apps, such as the {@link api/angular.service.$xhr $xhr service} that provides low level access to the browser's `XMLHttpRequest` object. - To use an angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service. Angular's dependency injection subsystem takes care of the rest. The angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to factory functions as requested. - Angular injects dependencies using "constructor" injection (the service is passed in via a factory 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 dependent must explicitly define its dependencies by using the `$inject` property. For example: - myController.$inject = ['$location']; - The angular web framework provides a set of services for common operations. Like other core angular variables and identifiers, the built-in services always start with `$` (such as `$xhr` mentioned above). You can also create your own custom services. - - ## Related Topics - * {@link dev_guide.di About Angular Dependency Injection} * {@link dev_guide.services.creating_services Creating Angular Services} * {@link dev_guide.services.registering_services Registering Angular Services} * {@link dev_guide.services.managing_dependencies Managing Service Dependencies} * {@link dev_guide.services.testing_services Testing Angular Services} - ## Related API - * {@link api/angular.service Angular Service API} * {@link api/angular.injector Injector API} diff --git a/docs/content/guide/dev_guide.templates.css.ngdoc b/docs/content/guide/dev_guide.templates.css.ngdoc index 90021b98..e1e54814 100644 --- a/docs/content/guide/dev_guide.templates.css.ngdoc +++ b/docs/content/guide/dev_guide.templates.css.ngdoc @@ -4,66 +4,48 @@ @description - - Angular includes built-in CSS classes, which in turn have predefined CSS styles. - # Built-in CSS classes - * `ng-exception` - **Usage:** angular applies this class to a DOM element if that element contains an Expression that threw an exception when evaluated. - **Styling:** The built-in styling of the ng-exception class displays an error message surrounded by a solid red border, for example: -

Error message

- You can try to evaluate malformed expressions in {@link dev_guide.expressions expressions} to see the `ng-exception` class' styling. - * `ng-validation-error` - **Usage:** angular applies this class to an input widget element if that element's input does not pass validation. Note that you set the validation criteria on the input widget element using the Ng:validate or Ng:required directives. - **Styling:** The built-in styling of the ng-validation-error class turns the border of the input box red and includes a hovering UI element that includes more details of the validation error. You can see an example in {@link api/angular.widget.@ng:validate ng:validate example}. - ## Overriding Styles for Angular CSS Classes - To override the styles for angular's built-in CSS classes, you can do any of the following: - * Download the source code, edit angular.css, and host the source on your own server. * Create a local CSS file, overriding any styles that you'd like, and link to it from your HTML file as you normally would: -

- - ## Related Topics - * {@link dev_guide.templates Angular Templates} * {@link dev_guide.templates.css Working With CSS in Angular} * {@link dev_guide.templates.formatters Angular Formatters} diff --git a/docs/content/guide/dev_guide.templates.databinding.ngdoc b/docs/content/guide/dev_guide.templates.databinding.ngdoc index 1459095e..3bd0ea8f 100644 --- a/docs/content/guide/dev_guide.templates.databinding.ngdoc +++ b/docs/content/guide/dev_guide.templates.databinding.ngdoc @@ -3,16 +3,13 @@ @name Developer Guide: Templates: Data Binding in Angular @description - Data-binding in angular web apps is the automatic syncing of data between the model and view components. The way that angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. - ## Data Binding in Classical Template Systems -

Most templating systems bind data in only one direction: they merge template and model components together into a view, as illustrated in the diagram. After the merge occurs, changes to the model @@ -20,10 +17,8 @@ or related sections of the view are NOT automatically reflected in the view. Wor that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view. - ## Data Binding in Angular Templates -

The way angular templates works is different, as illustrated in the diagram. They are different because first the template (which is the uncompiled HTML along with any additional markup or @@ -33,16 +28,12 @@ the model are propagated to the view. This makes the model always the single-sou the application state, greatly simplifying the programing model for the developer. You can think of the view as simply an instant projection of your model. - Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency. - - ## Related Topics - * {@link dev_guide.scopes Angular Scopes} * {@link dev_guide.templates Angular Templates} diff --git a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc index ca7fa2f2..ebb7d923 100644 --- a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc +++ b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc @@ -3,25 +3,20 @@ @name Developer Guide: Templates: Filters: Creating Angular Filters @description - Writing your own filter is very easy: just define a JavaScript function on the `angular.filter` object. The framework passes in the input value as the first argument to your function. Any filter arguments are passed in as additional function arguments. - You can use these variables in the function: - * `this` — The current scope. * `this.$element` — The DOM element containing the binding. The `$element` variable allows the filter to manipulate the DOM. - The following sample filter reverses a text string. In addition, it conditionally makes the text upper-case and assigns color. - -
No filter: {{text}}
Reverse: {{text|reverse}}
@@ -59,16 +53,11 @@ expect(binding('text|reverse')).toEqual('CBA'); - - ## Related Topics - * {@link dev_guide.templates.filters Understanding Angular Filters} * {@link dev_guide.compiler Angular HTML Compiler} - ## Related API - * {@link api/angular.filter Angular Filter API} diff --git a/docs/content/guide/dev_guide.templates.filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.ngdoc index fc0f8f84..e233678b 100644 --- a/docs/content/guide/dev_guide.templates.filters.ngdoc +++ b/docs/content/guide/dev_guide.templates.filters.ngdoc @@ -3,36 +3,26 @@ @name Developer Guide: Templates: Understanding Angular Filters @description - Angular filters format data for display to the user. In addition to formatting data, filters can also modify the DOM. This allows filters to handle tasks such as conditionally applying CSS styles to filtered output. - For example, you might have a data object that needs to be formatted according to the locale before displaying it to the user. You can pass expressions through a chain of filters like this: - name | uppercase - The expression evaluator simply passes the value of name to `angular.filter.uppercase()`. - In addition to formatting data, filters can also modify the DOM. This allows filters to handle tasks such as conditionally applying CSS styles to filtered output. - - ## Related Topics - * {@link dev_guide.templates.filters.using_filters Using Angular Filters} * {@link dev_guide.templates.filters.creating_filters Creating Angular Filters} - ## Related API - * {@link api/angular.filter Angular Filter API} diff --git a/docs/content/guide/dev_guide.templates.filters.using_filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.using_filters.ngdoc index 05da5e7d..41f32ac0 100644 --- a/docs/content/guide/dev_guide.templates.filters.using_filters.ngdoc +++ b/docs/content/guide/dev_guide.templates.filters.using_filters.ngdoc @@ -3,35 +3,26 @@ @name Developer Guide: Templates: Filters: Using Angular Filters @description - Filters can be part of any {@link api/angular.scope} evaluation but are typically used to format expressions in bindings in your templates: - {{ expression | filter }} - Filters typically transform the data to a new data type, formatting the data in the process. Filters can also be chained, and can take optional arguments. - You can chain filters using this syntax: - {{ expression | filter1 | filter2 }} - You can also pass colon-delimited arguments to filters, for example, to display the number 123 with 2 decimal points: - 123 | number:2 - Here are some examples that show values before and after applying different filters to an expression in a binding: - * No filter: `{{1234.5678}}` => `1234.5678` * Number filter: `{{1234.5678|number}}` => `1,234.57`. Notice the "," and rounding to two significant digits. @@ -40,16 +31,11 @@ arguments, separated by colons in a binding. For example, the "number" filter ta argument that specifies how many digits to display to the right of the decimal point. - - ## Related Topics - * {@link dev_guide.templates.filters Understanding Angular Filters} * {@link dev_guide.templates.filters.creating_filters Creating Angular Filters} - ## Related API - * {@link api/angular.filter Angular Filter API} diff --git a/docs/content/guide/dev_guide.templates.formatters.creating_formatters.ngdoc b/docs/content/guide/dev_guide.templates.formatters.creating_formatters.ngdoc index 08504bbc..2ecd8f19 100644 --- a/docs/content/guide/dev_guide.templates.formatters.creating_formatters.ngdoc +++ b/docs/content/guide/dev_guide.templates.formatters.creating_formatters.ngdoc @@ -3,19 +3,16 @@ @name Developer Guide: Templates: Angular Formatters: Creating Angular Formatters @description - To create your own formatter, you can simply register a pair of JavaScript functions with `angular.formatter`. One of your functions is used to parse text from the input widget into the data storage format; the other function is used to format stored data into user-readable text. - The following example demonstrates a "reverse" formatter. Data is stored in uppercase and in reverse, but it is displayed in lower case and non-reversed. When a user edits the data model via the input widget, the input is automatically parsed into the internal data storage format, and when the data changes in the model, it is automatically formatted to the user-readable form for display in the view. -

 function reverse(text) {
 var reversed = [];
@@ -25,7 +22,6 @@ reversed.unshift(text.charAt(i));
 return reversed.join('');
 }
 
-
 angular.formatter('reverse', {
 parse: function(value){
 return reverse(value||'').toUpperCase();
@@ -36,7 +32,6 @@ return reverse(value||'').toLowerCase();
 });

- - - diff --git a/docs/content/guide/dev_guide.templates.formatters.ngdoc b/docs/content/guide/dev_guide.templates.formatters.ngdoc index 4dd8f22b..82a14fb4 100644 --- a/docs/content/guide/dev_guide.templates.formatters.ngdoc +++ b/docs/content/guide/dev_guide.templates.formatters.ngdoc @@ -3,24 +3,18 @@ @name Developer Guide: Templates: Angular Formatters @description - In angular, formatters are responsible for translating user-readable text entered in an {@link api/angular.widget.HTML input widget} to a JavaScript object in the data model that the application can manipulate. - You can use formatters in a template, and also in JavaScript. Angular provides built-in formatters, and of course you can create your own formatters. - ## Related Topics - * {@link dev_guide.templates.formatters.using_formatters Using Angular Formatters} * {@link dev_guide.templates.formatters.creating_formatters Creating Angular Formatters} - ## Related API - * {@link api/angular.formatter Angular Formatter API} diff --git a/docs/content/guide/dev_guide.templates.formatters.using_formatters.ngdoc b/docs/content/guide/dev_guide.templates.formatters.using_formatters.ngdoc index 8e160317..bf983cd5 100644 --- a/docs/content/guide/dev_guide.templates.formatters.using_formatters.ngdoc +++ b/docs/content/guide/dev_guide.templates.formatters.using_formatters.ngdoc @@ -3,10 +3,7 @@ @name Developer Guide: Templates: Angular Formatters: Using Angular Formatters @description - The following snippet shows how to use a formatter in a template. The formatter below is `ng:format="reverse"`, added as an attribute to an `` tag. -

-
diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc
index 59fed0fc..ca0ca99a 100644
--- a/docs/content/guide/dev_guide.templates.ngdoc
+++ b/docs/content/guide/dev_guide.templates.ngdoc
@@ -3,17 +3,14 @@
 @name Developer Guide: Understanding Angular Templates
 @description
 
-
 An angular template is the declarative specification that, along with information from the model
 and controller, becomes the rendered view that a user sees in the browser. It is the static DOM,
 containing HTML, CSS, and angular-specific elements and angular-specific element attributes.  The
 angular elements and attributes direct angular to add behavior and transform the template DOM into
 the dynamic view DOM.
 
-
 These are the types of angular elements and element attributes you can use in a template:
 
-
 * {@link dev_guide.compiler.directives Directive} — An attribute that augments an existing DOM
 element.
 * {@link dev_guide.compiler.widgets Widget} — A custom DOM element. An example of a built-in widget
@@ -25,16 +22,13 @@ curly brace notation `{{ }}` to bind expressions to elements is built-in angular
 * {@link dev_guide.templates.formatters Formatter} — Lets you format the input object into a user
 readable view.
 
-
 Note:  In addition to declaring the elements above in templates, you can also access these elements
 in JavaScript code.
 
-
 The following code snippet shows a simple angular template made up of standard HTML tags along with
 angular {@link dev_guide.compiler.directives directives}, {@link dev_guide.compiler.markup markup},
 and {@link dev_guide.expressions expressions}:
 
-
  
  
@@ -49,7 +43,6 @@ and {@link dev_guide.expressions expressions}:
 
 
 
-
 In a simple single-page app, the template consists of HTML, CSS, and angular directives contained
 in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views
 within one main page using "partials", which are segments of template located in separate HTML
@@ -59,17 +52,12 @@ example of this technique is shown in the {@link tutorial/ angular tutorial}, in
 eight.
 
 
-
-
 ## Related Topics
 
-
 * {@link dev_guide.templates.filters Angular Filters}
 * {@link dev_guide.templates.formatters Angular Formatters}
 * {@link dev_guide.templates.validators Angular Validators}
 
-
 ## Related API
 
-
 * {@link api/index API Reference}
diff --git a/docs/content/guide/dev_guide.templates.validators.creating_validators.ngdoc b/docs/content/guide/dev_guide.templates.validators.creating_validators.ngdoc
index 661ce744..835b0b51 100644
--- a/docs/content/guide/dev_guide.templates.validators.creating_validators.ngdoc
+++ b/docs/content/guide/dev_guide.templates.validators.creating_validators.ngdoc
@@ -4,17 +4,13 @@
 @description
 
 
-
-
 To create a custom validator, you simply add your validator code as a method onto the
 `angular.validator` object and provide input(s) for the validator function. Each input provided is
 treated as an argument to the validator function.  Any additional inputs should be separated by
 commas.
 
-
 The following bit of pseudo-code shows how to set up a custom validator:
 
-
  angular.validator('your_validator', function(input [,additional params]) {
         [your validation code];
@@ -26,22 +22,17 @@ angular.validator('your_validator', function(input [,additional params]) {
 }
 
 
-
 Note that this validator returns "true" when the user's input is incorrect, as in "Yes, it's true,
 there was a problem with that input". If you prefer to provide more information when a validator
 detects a problem with input, you can specify an error message in the validator that angular will
 display when the user hovers over the input widget.
 
-
 To specify an error message, replace "`return true;`" with an error string, for example:
 
-
      return "Must be a value between 1 and 5!";
 
-
 Following is a sample UPS Tracking Number validator:
 
-