diff options
54 files changed, 594 insertions, 516 deletions
diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc index 1178d774..a9dd6ac6 100644 --- a/docs/content/guide/animations.ngdoc +++ b/docs/content/guide/animations.ngdoc @@ -64,11 +64,11 @@ You may also want to setup a separate CSS file for defining CSS-based animations Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within your website, you can apply animations to it. Lets say for example that we have an HTML template with a repeater in it like so: -<pre> +```html <div ng-repeat="item in items" class="repeated-item"> {{ item.id }} </div> -</pre> +``` As you can see, the `.repeated-item` class is present on the element that will be repeated and this class will be used as a reference within our application's CSS and/or JavaScript animation code to tell AngularJS to perform an animation. @@ -80,13 +80,13 @@ it will apply a `ng-move` class name. Taking a look at the following CSS code, we can see some transition and keyframe animation code set for each of those events that occur when ngRepeat triggers them: -<pre> -/* +```css +/* We're using CSS transitions for when the enter and move events are triggered for the element that has the .repeated-item class -*/ +*/ .repeated-item.ng-enter, .repeated-item.ng-move { -webkit-transition:0.5s linear all; -moz-transition:0.5s linear all; @@ -95,22 +95,22 @@ occur when ngRepeat triggers them: opacity:0; } -/* +/* The ng-enter-active and ng-move-active are where the transition destination properties are set so that the animation knows what to animate. -*/ +*/ .repeated-item.ng-enter.ng-enter-active, .repeated-item.ng-move.ng-move-active { opacity:1; } -/* +/* We're using CSS keyframe animations for when the leave event is triggered for the element that has the .repeated-item class -*/ +*/ .repeated-item.ng-leave { -webkit-animation:0.5s my_animation; -moz-animation:0.5s my_animation; @@ -118,34 +118,34 @@ occur when ngRepeat triggers them: animation:0.5s my_animation; } -@keyframes my_animation { +@keyframes my_animation { from { opacity:1; } to { opacity:0; } } -/* +/* Unfortunately each browser vendor requires its own definition of keyframe animation code... -*/ -@-webkit-keyframes my_animation { +*/ +@-webkit-keyframes my_animation { from { opacity:1; } to { opacity:0; } } -@-moz-keyframes my_animation { +@-moz-keyframes my_animation { from { opacity:1; } to { opacity:0; } } -@-o-keyframes my_animation { +@-o-keyframes my_animation { from { opacity:1; } to { opacity:0; } } -</pre> +``` The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**): -<pre> +```js myModule.animation('.repeated-item', function() { return { enter : function(element, done) { @@ -199,7 +199,7 @@ myModule.animation('.repeated-item', function() { removeClass : function(element, className, done) {} } }); -</pre> +``` With these generated CSS class names present on the element at the time, AngularJS automatically figures out whether to perform a CSS and/or JavaScript animation. If both CSS and JavaScript animation @@ -268,7 +268,7 @@ For a full breakdown of the steps involved during each animation event, refer to Animations within custom directives can also be established by injecting `$animate` directly into your directive and making calls to it when needed. -<pre> +```js myModule.directive('my-directive', ['$animate', function($animate) { return function(element, scope, attrs) { element.bind('click', function() { @@ -280,7 +280,7 @@ myModule.directive('my-directive', ['$animate', function($animate) { }); }; }]); -</pre> +``` ## More about animations diff --git a/docs/content/guide/bootstrap.ngdoc b/docs/content/guide/bootstrap.ngdoc index 058ae46d..d5098a23 100644 --- a/docs/content/guide/bootstrap.ngdoc +++ b/docs/content/guide/bootstrap.ngdoc @@ -13,7 +13,7 @@ This example shows the recommended path for integrating Angular with what we cal initialization. -<pre> +```html <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> @@ -21,7 +21,7 @@ initialization. <script src="angular.js"> </body> </html> -</pre> +``` * 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` @@ -65,7 +65,7 @@ If the {@link api/ng.directive:ngApp `ng-app`} directive is found then Angular w portion of the DOM as an Angular application. -<pre> +```html <!doctype html> <html ng-app="optionalModuleName"> <body> @@ -73,7 +73,7 @@ If the {@link api/ng.directive:ngApp `ng-app`} directive is found then Angular w <script src="angular.js"></script> </body> </html> -</pre> +``` @@ -86,7 +86,7 @@ or the need to perform an operation before Angular compiles a page. Here is an example of manually initializing Angular: -<pre> +```html <!doctype html> <html xmlns:ng="http://angularjs.org"> <body> @@ -100,7 +100,7 @@ Here is an example of manually initializing Angular: </script> </body> </html> -</pre> +``` Note that we have provided the name of our application module to be loaded into the injector as the second parameter of the {@link api/angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules diff --git a/docs/content/guide/compiler.ngdoc b/docs/content/guide/compiler.ngdoc index 4440ace6..8defadcf 100644 --- a/docs/content/guide/compiler.ngdoc +++ b/docs/content/guide/compiler.ngdoc @@ -60,12 +60,12 @@ during the compilation process. The directives can be placed in element names, a names, as well as comments. Here are some equivalent examples of invoking the {@link api/ng.directive:ngBind `ng-bind`} directive. -<pre> +```html <span ng-bind="exp"></span> <span class="ng-bind: exp;"></span> <ng-bind></ng-bind> <!-- directive: ng-bind exp --> -</pre> +``` A directive is just a function which executes when the compiler encounters it in the DOM. See {@link api/ng.$compileProvider#methods_directive directive API} for in-depth documentation on how @@ -187,7 +187,7 @@ a model on the compiled scope will be reflected in the DOM. Below is the corresponding code using the `$compile` service. This should help give you an idea of what Angular does internally. -<pre> +```js var $compile = ...; // injected into your code var scope = ...; var parent = ...; // DOM element where the compiled template can be appended @@ -205,7 +205,7 @@ This should help give you an idea of what Angular does internally. // Step 4: Append to DOM (optional) parent.appendChild(element); -</pre> +``` ### The difference between Compile and Link @@ -229,14 +229,14 @@ moved to the compile function for performance reasons. To understand, let's look at a real-world example with `ngRepeat`: -<pre> +```html Hello {{user}}, you have these actions: <ul> <li ng-repeat="action in user.actions"> {{action.description}} </li> </ul> -</pre> +``` When the above example is compiled, the compiler visits every node and looks for directives. @@ -295,7 +295,7 @@ One of the most common use cases for directives is to create reusable components Below is a pseudo code showing how a simplified dialog component may work. -<pre> +```html <div> <button ng-click="show=true">show</button> @@ -306,7 +306,7 @@ Below is a pseudo code showing how a simplified dialog component may work. Body goes here: {{username}} is {{title}}. </dialog> </div> -</pre> +``` Clicking on the "show" button will open the dialog. The dialog will have a title, which is data bound to `username`, and it will also have a body which we would like to transclude @@ -314,7 +314,7 @@ into the dialog. Here is an example of what the template definition for the `dialog` widget may look like. -<pre> +```html <div ng-show="visible"> <h3>{{title}}</h3> <div class="body" ng-transclude></div> @@ -323,7 +323,7 @@ Here is an example of what the template definition for the `dialog` widget may l <button ng-click="onCancel()">Close</button> </div> </div> -</pre> +``` This will not render properly, unless we do some scope magic. @@ -334,14 +334,14 @@ the `onOk` and `onCancel` functions to be present in the scope. This limits the widget. To solve the mapping issue we use the `locals` to create local variables which the template expects as follows: -<pre> +```js scope: { title: '@', // the title uses the data-binding from the parent scope onOk: '&', // create a delegate onOk function onCancel: '&', // create a delegate onCancel function visible: '=' // set up visible to accept data-binding } -</pre> +``` Creating local properties on widget scope creates two problems: @@ -367,7 +367,7 @@ surprise. Therefore the final directive definition looks something like this: -<pre> +```js transclude: true, scope: { title: '@', // the title uses the data-binding from the parent scope @@ -377,5 +377,5 @@ scope: { }, restrict: 'E', replace: true -</pre> +``` diff --git a/docs/content/guide/controller.ngdoc b/docs/content/guide/controller.ngdoc index 77e0ac50..01f5299f 100644 --- a/docs/content/guide/controller.ngdoc +++ b/docs/content/guide/controller.ngdoc @@ -28,7 +28,7 @@ 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`: -``` +```js function GreetingCtrl($scope) { $scope.greeting = 'Hola!'; } @@ -37,22 +37,22 @@ which attaches a `greeting` property containing the string `'Hola!'` to the `$sc Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the template: -``` -<div ng-controller="GreetingCtrl"> - {{ greeting }} -</div> +```js + <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: -``` -var myApp = angular.module('myApp',[]); +```js + var myApp = angular.module('myApp',[]); -myApp.controller('GreetingCtrl', ['$scope', function($scope) { - $scope.greeting = 'Hola!'; -}]); + myApp.controller('GreetingCtrl', ['$scope', function($scope) { + $scope.greeting = 'Hola!'; + }]); ``` We have used an **inline injection annotation** to explicitly specify the dependency @@ -68,21 +68,21 @@ 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: -``` -var myApp = angular.module('myApp',[]); +```js + var myApp = angular.module('myApp',[]); -myApp.controller('DoubleCtrl', ['$scope', function($scope) { - $scope.double = function(value) { return value * 2; }; -}]); + 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: -``` -<div ng-controller="DoubleCtrl"> - Two times <input ng-model="num"> equals {{ double(num) }} -</div> +```js + <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 @@ -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:** -``` +```js var myApp = angular.module('myApp',[]); myApp.controller('MyController', function($scope) { @@ -282,7 +282,7 @@ involves injecting the {@link api/ng.$rootScope $rootScope} and {@link api/ng.$c ``` **Controller Test:** -``` +```js describe('myController function', function() { describe('myController', function() { @@ -310,7 +310,7 @@ 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; diff --git a/docs/content/guide/dev_guide.e2e-testing.ngdoc b/docs/content/guide/dev_guide.e2e-testing.ngdoc index e0d3f61d..d72cb9b3 100644 --- a/docs/content/guide/dev_guide.e2e-testing.ngdoc +++ b/docs/content/guide/dev_guide.e2e-testing.ngdoc @@ -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: -<pre> +```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); }); }); -</pre> +``` Note that [`input('user')`](https://github.com/angular/angular.js/blob/master/docs/content/guide/dev_guide.e2e-testing.ngdoc#L119) @@ -190,7 +190,7 @@ be negated with `not()`. For instance: `expect(element('h1').text()).not().toEqu Source: https://github.com/angular/angular.js/blob/master/src/ngScenario/matchers.js -<pre> +```js // value and Object comparison following the rules of angular.equals(). expect(value).toEqual(value) @@ -219,7 +219,7 @@ expect(value).toContain(expected) // number comparison using < and > expect(value).toBeLessThan(expected) expect(value).toBeGreaterThan(expected) -</pre> +``` # Example See the [angular-seed](https://github.com/angular/angular-seed) project for more examples. @@ -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*. -<pre> +```js beforeEach(function () { var deleteEntry = function () { browser().navigateTo('/entries'); @@ -276,24 +276,24 @@ beforeEach(function () { // start deleting entries deleteEntry(); }); -</pre> +``` 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: -<pre> +```js // delete entry 1 browser().navigateTo('/entries'); element('table tbody').query(function (tbody, done) { ... }); element('table tbody a'); element('.btn-danger').click(); -</pre> +``` For two entries, ngScenario would have to work on the following queue: -<pre> +```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(); -</pre> +``` # Caveats diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc index 04bf23eb..8f7a596a 100644 --- a/docs/content/guide/dev_guide.services.$location.ngdoc +++ b/docs/content/guide/dev_guide.services.$location.ngdoc @@ -100,25 +100,28 @@ To configure the `$location` service, retrieve the default: `""` ### Example configuration -<pre> +```js $locationProvider.html5Mode(true).hashPrefix('!'); -</pre> +``` ## 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: -<pre> +```js // get the current path $location.path(); // change the path $location.path('/newValue') -</pre> +``` 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: -<pre>$location.path('/newValue').search({key: value});</pre> + +```js +$location.path('/newValue').search({key: value}); +``` ## Replace method @@ -127,11 +130,12 @@ 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: -<pre> + +```js $location.path('/someNewPath'); $location.replace(); // or you can chain these as: $location.path('/someNewPath').replace(); -</pre> +``` 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` @@ -209,7 +213,7 @@ In this mode, `$location` uses Hashbang URLs in all browsers. ### Example -<pre> +```js it('should show example', inject( function($locationProvider) { $locationProvider.html5Mode(false); @@ -231,13 +235,16 @@ it('should show example', inject( $location.absUrl() == 'http://example.com/base/index.html#!/new?x=y' } )); -</pre> +``` ### Crawling your app To allow indexing of your AJAX application, you have to add special meta tag in the head section of your document: -<pre><meta name="fragment" content="!" /></pre> + +```html +<meta name="fragment" content="!" /> +``` 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, @@ -258,7 +265,7 @@ having to worry about whether the browser displaying your app supports the histo ### Example -<pre> +```js it('should show example', inject( function($locationProvider) { $locationProvider.html5Mode(true); @@ -293,7 +300,7 @@ it('should show example', inject( $location.absUrl() == 'http://example.com/#!/foo/bar?x=y' } )); -</pre> +``` ### Fallback for legacy browsers @@ -341,7 +348,10 @@ 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: -<pre><meta name="fragment" content="!" /></pre> + +```html +<meta name="fragment" content="!" /> +``` 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 @@ -525,7 +535,7 @@ hashPrefix. When using `$location` service during testing, you are outside of the angular's {@link api/ng.$rootScope.Scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`. -<pre> +```js describe('serviceUnderTest', function() { beforeEach(module(function($provide) { $provide.factory('serviceUnderTest', function($location){ @@ -541,7 +551,7 @@ describe('serviceUnderTest', function() { })); }); -</pre> +``` # Migrating from earlier AngularJS releases diff --git a/docs/content/guide/dev_guide.services.creating_services.ngdoc b/docs/content/guide/dev_guide.services.creating_services.ngdoc index bdcf42ad..c6210cc1 100644 --- a/docs/content/guide/dev_guide.services.creating_services.ngdoc +++ b/docs/content/guide/dev_guide.services.creating_services.ngdoc @@ -22,17 +22,19 @@ by using the {@link api/AUTO.$provide $provide} service in the module configurat function. The following pseudo-code shows both approaches: Using the angular.Module api: -<pre> + +```js var myModule = angular.module('myModule', []); myModule.factory('serviceId', function() { var shinyNewServiceInstance; //factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance; }); -</pre> +``` Using the $provide service: -<pre> + +```js angular.module('myModule', [], function($provide) { $provide.factory('serviceId', function() { var shinyNewServiceInstance; @@ -40,7 +42,7 @@ angular.module('myModule', [], function($provide) { return shinyNewServiceInstance; }); }); -</pre> +``` 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. -<pre> +```js angular.module('myModule', [], function($provide) { $provide.factory('notify', ['$window', function(win) { var msgs = []; @@ -71,7 +73,7 @@ angular.module('myModule', [], function($provide) { }; }]); }); -</pre> +``` # Instantiating Angular Services diff --git a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc index b24dec6e..312342b8 100644 --- a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc +++ b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc @@ -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. -<pre> +```js function myController($loc, $log) { this.firstMethod = function() { // use $location service @@ -26,7 +26,7 @@ function myController($loc, $log) { } // which services to inject ? myController.$inject = ['$location', '$log']; -</pre> +``` <doc:example module="MyServiceModule"> <doc:source> diff --git a/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc b/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc index 6dafc3f7..726a8bbe 100644 --- a/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc +++ b/docs/content/guide/dev_guide.services.managing_dependencies.ngdoc @@ -12,37 +12,37 @@ dropped (see "Inferring `$inject`" but note that that is currently an experiment Using the array notation: -<pre> +```js function myModuleCfgFn($provide) { $provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]); } -</pre> +``` Using the $inject property: -<pre> +```js function myModuleCfgFn($provide) { var myServiceFactory = function(dep1, dep2) {}; myServiceFactory.$inject = ['dep1', 'dep2']; $provide.factory('myService', myServiceFactory); } -</pre> +``` Using DI inference (incompatible with minifiers): -<pre> +```js function myModuleCfgFn($provide) { $provide.factory('myService', function(dep1, dep2) {}); } -</pre> +``` 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: -<pre> +```js /** * batchLog service allows for messages to be queued in memory and flushed * to the console.log every 50 seconds. @@ -83,7 +83,7 @@ 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'); -</pre> +``` Things to notice in this example: diff --git a/docs/content/guide/dev_guide.services.testing_services.ngdoc b/docs/content/guide/dev_guide.services.testing_services.ngdoc index 6e0bbace..49f10c5a 100644 --- a/docs/content/guide/dev_guide.services.testing_services.ngdoc +++ b/docs/content/guide/dev_guide.services.testing_services.ngdoc @@ -6,7 +6,7 @@ The following is a unit test for the 'notify' service in the 'Dependencies' exam dev_guide.services.creating_services Creating Angular Services}. The unit test example uses Jasmine spy (mock) instead of a real browser alert. -<pre> +```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"]); }); -</pre> +``` ## Related Topics diff --git a/docs/content/guide/dev_guide.unit-testing.ngdoc b/docs/content/guide/dev_guide.unit-testing.ngdoc index 16c1c99e..28779182 100644 --- a/docs/content/guide/dev_guide.unit-testing.ngdoc +++ b/docs/content/guide/dev_guide.unit-testing.ngdoc @@ -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. -<pre> +```js function MyClass() { this.doWork = function() { var xhr = new XHR(); @@ -61,7 +61,7 @@ function MyClass() { xhr.send(); } } -</pre> +``` 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: -<pre> + +```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 -</pre> +``` ### Global look-up: Another way to approach the problem is to look for the service in a well-known location. -<pre> +```js function MyClass() { this.doWork = function() { global.xhr({ @@ -92,7 +93,7 @@ function MyClass() { }) } } -</pre> +``` 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 @@ -101,14 +102,15 @@ order to replace it with call to a mock method. For further explanation of why t 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> + +```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 -</pre> +``` ### Service Registry: @@ -116,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. -<pre> +```js function MyClass() { var serviceRegistry = ????; this.doWork = function() { @@ -127,7 +129,7 @@ function MyClass() { complete:function(response){ ... } }) } -</pre> +``` However, where does the serviceRegistry come from? If it is: * `new`-ed up, the test has no chance to reset the services for testing. @@ -135,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: -<pre> + +```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 -</pre> +``` ### Passing in Dependencies: Last, the dependency can be passed in. -<pre> +```js function MyClass(xhr) { this.doWork = function() { xhr({ @@ -157,7 +160,7 @@ function MyClass(xhr) { complete:function(response){ ... } }) } -</pre> +``` 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 @@ -165,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: -<pre> + +```js function xhrMock(args) {...} var myClass = new MyClass(xhrMock); myClass.doWork(); // assert that xhrMock got called with the right arguments -</pre> +``` Notice that no global variables were harmed in the writing of this test. @@ -182,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: -<pre> +```js function PasswordCtrl() { // get references to DOM elements var msg = $('.ex1 span'); @@ -205,12 +209,12 @@ function PasswordCtrl() { .text(strength); } } -</pre> +``` 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: -<pre> +```js var input = $('<input type="text"/>'); var span = $('<span>'); $('body').html('<div class="ex1">') @@ -222,12 +226,12 @@ input.val('abc'); pc.grade(); expect(span.text()).toEqual('weak'); $('body').empty(); -</pre> +``` 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: -<pre> +```js function PasswordCtrl($scope) { $scope.password = ''; $scope.grade = function() { @@ -241,17 +245,17 @@ function PasswordCtrl($scope) { } }; } -</pre> +``` and the test is straight forward: -<pre> +```js var $scope = {}; var pc = $controller('PasswordCtrl', { $scope: $scope }); $scope.password = 'abc'; $scope.grade(); expect($scope.strength).toEqual('weak'); -</pre> +``` 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. @@ -261,7 +265,7 @@ that such a test tells a story, rather then asserting random bits which don't se format. They are important because they remove the formatting responsibility from the application logic, further simplifying the application logic. -<pre> +```js myModule.filter('length', function() { return function(text){ return (''+(text||'')).length; @@ -271,7 +275,7 @@ myModule.filter('length', function() { var length = $filter('length'); expect(length(null)).toEqual(0); expect(length('abc')).toEqual(3); -</pre> +``` ## Directives Directives in angular are responsible for encapsulating complex functionality within custom HTML tags, @@ -282,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. -<pre> +```js var app = angular.module('myApp', []); -</pre> +``` Now we can add a directive to our app. -<pre> +```js app.directive('aGreatEye', function () { return { restrict: 'E', @@ -296,13 +300,13 @@ app.directive('aGreatEye', function () { template: '<h1>lidless, wreathed in flame, {{1 + 1}} times</h1>' }; }); -</pre> +``` This directive is used as a tag `<a-great-eye></a-great-eye>`. It replaces the entire tag with the template `<h1>lidless, wreathed in flame, {{1 + 1}} times</h1>`. 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. -<pre> +```js describe('Unit testing great quotes', function() { var $compile; var $rootScope; @@ -327,7 +331,7 @@ describe('Unit testing great quotes', function() { expect(element.html()).toContain("lidless, wreathed in flame, 2 times"); }); }); -</pre> +``` 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 diff --git a/docs/content/guide/di.ngdoc b/docs/content/guide/di.ngdoc index 1714e2aa..dde41dcb 100644 --- a/docs/content/guide/di.ngdoc +++ b/docs/content/guide/di.ngdoc @@ -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. -<pre> +```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); } -</pre> +``` 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: -<pre> +```js // Provide the wiring information in a module angular.module('myModule', []). @@ -77,19 +77,20 @@ Here is an example of using the injector service: // Request any dependency from the injector var greeter = injector.get('greeter'); -</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 [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> +```html <!-- Given this HTML --> <div ng-controller="MyController"> <button ng-click="sayHello()">Hello</button> </div> -</pre> -<pre> +``` + +```js // And this controller definition function MyController($scope, greeter) { $scope.sayHello = function() { @@ -99,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); -</pre> +``` 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 @@ -121,11 +122,11 @@ 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. -<pre> +```js function MyController($scope, greeter) { ... } -</pre> +``` 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 @@ -140,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. -<pre> +```js var MyController = function(renamed$scope, renamedGreeter) { ... } MyController['$inject'] = ['$scope', 'greeter']; -</pre> +``` 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'. @@ -162,15 +163,15 @@ directives. For example: -<pre> +```js someModule.factory('greeter', function($window) { ... }); -</pre> +``` Results in code bloat due to needing a temporary variable: -<pre> +```js var greeterFactory = function(renamed$window) { ... }; @@ -178,15 +179,15 @@ Results in code bloat due to needing a temporary variable: greeterFactory.$inject = ['$window']; someModule.factory('greeter', greeterFactory); -</pre> +``` For this reason the third annotation style is provided as well. -<pre> +```js someModule.factory('greeter', ['$window', function(renamed$window) { ... }]); -</pre> +``` Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular where injection is supported. @@ -200,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: -<pre> +```js someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) { ... $scope.aMethod = function() { @@ -208,7 +209,7 @@ declaring controllers is using the array notation: } ... }]); -</pre> +``` This avoids the creation of global functions for controllers and also protects against minification. @@ -219,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: -<pre> +```js angular.module('myModule', []). config(['depProvider', function(depProvider){ ... @@ -236,4 +237,4 @@ of declaring factories is: run(['depService', function(depService) { ... }]); -</pre> +``` diff --git a/docs/content/guide/i18n.ngdoc b/docs/content/guide/i18n.ngdoc index f8e2189d..159958f8 100644 --- a/docs/content/guide/i18n.ngdoc +++ b/docs/content/guide/i18n.ngdoc @@ -66,7 +66,7 @@ starts, Angular is automatically pre-configured with localization rules for the You can also include the locale specific js file in the index.html page. For example, if one client requires German locale, you would serve index_de-de.html which will look something like this: -<pre> +```html <html ng-app> <head> …. @@ -75,7 +75,7 @@ requires German locale, you would serve index_de-de.html which will look somethi …. </head> </html> -</pre> +``` **Comparison of the two approaches** Both approaches described above requires you to prepare different index.html pages or js files for diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index 334161cb..7a1c828c 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -26,7 +26,8 @@ To make your Angular application work on IE please make sure that: 1. You polyfill JSON.stringify for IE7 and below. You can use [JSON2](https://github.com/douglascrockford/JSON-js) or [JSON3](http://bestiejs.github.com/json3/) polyfills for this. - <pre> + + ```html <!doctype html> <html xmlns:ng="http://angularjs.org"> <head> @@ -38,21 +39,23 @@ To make your Angular application work on IE please make sure that: ... </body> </html> - </pre> + ``` 2. add `id="ng-app"` to the root element in conjunction with `ng-app` attribute - <pre> + + ```html <!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> ... </html> - </pre> + ``` 3. you **do not** use custom element tags such as `<ng:view>` (use the attribute version `<div ng-view>` instead), or 4. if you **do use** custom element tags, then you must take these steps to make IE 8 and below happy: - <pre> + + ```html <!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> <head> @@ -73,7 +76,7 @@ To make your Angular application work on IE please make sure that: ... </body> </html> - </pre> + ``` The **important** parts are: @@ -112,37 +115,37 @@ attribute names. So this requires no special handling in IE: `<div my-tag your:t Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same result): -<pre> +```html <html> <body> <mytag>some text</mytag> </body> </html> -</pre> +``` It should parse into the following DOM: -<pre> +``` #document +- HTML +- BODY +- mytag +- #text: some text -</pre> +``` The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has the text `some text`. But this is not what IE does (if the above fixes are not included): -<pre> +``` #document +- HTML +- BODY +- mytag +- #text: some text +- /mytag -</pre> +``` In IE, the behavior is that the `BODY` element has three children: @@ -162,7 +165,7 @@ In IE, the behavior is that the `BODY` element has three children: To make CSS selectors work with custom elements, the custom element name must be pre-created with `document.createElement('my-tag')` regardless of XML namespace. -<pre> +```html <html xmlns:ng="needed for ng: namespace"> <head> <!--[if lte IE 8]> @@ -192,7 +195,7 @@ To make CSS selectors work with custom elements, the custom element name must be ... </body> </html> -</pre> +``` diff --git a/docs/content/guide/module.ngdoc b/docs/content/guide/module.ngdoc index 8bf0eba6..417d3837 100644 --- a/docs/content/guide/module.ngdoc +++ b/docs/content/guide/module.ngdoc @@ -126,7 +126,7 @@ of blocks: application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time. -<pre> +```js angular.module('myModule', []). config(function(injectables) { // provider-injector // This is an example of config block. @@ -140,14 +140,14 @@ angular.module('myModule', []). // You can only inject instances (not Providers) // into the run blocks }); -</pre> +``` ## Configuration Blocks There are some convenience methods on the module which are equivalent to the config block. For example: -<pre> +```js angular.module('myModule', []). value('a', 123). factory('a', function() { return 123; }). @@ -163,7 +163,7 @@ angular.module('myModule', []). $compileProvider.directive('directiveName', ...); $filterProvider.register('filterName', ...); }); -</pre> +``` The configuration blocks get applied in the order in which they are registered. The only exception to it are constant definitions, which are placed at the beginning of all configuration blocks. @@ -196,7 +196,7 @@ and thus script loaders can take advantage of this property and parallelize the Beware that using `angular.module('myModule', [])` will create the module `myModule` and overwrite any existing module named `myModule`. Use `angular.module('myModule')` to retrieve an existing module. -<pre> +```js var myModule = angular.module('myModule', []); // add some directives and services @@ -208,7 +208,7 @@ existing module named `myModule`. Use `angular.module('myModule')` to retrieve a // throws an error because myOtherModule has yet to be defined var myModule = angular.module('myOtherModule'); -</pre> +``` # Unit Testing @@ -219,7 +219,8 @@ injector, which means that the modules are loaded multiple times per VM. Properl modules can help with unit testing, as in this example: In all of these examples we are going to assume this module definition: -<pre> + +```js angular.module('greetMod', []). factory('alert', function($window) { @@ -235,10 +236,11 @@ In all of these examples we are going to assume this module definition: alert(salutation + ' ' + name + '!'); } }); -</pre> +``` Let's write some tests: -<pre> + +```js describe('myApp', function() { // load the relevant application modules then load a special // test module which overrides the $window with a mock version, @@ -272,4 +274,4 @@ describe('myApp', function() { }); }); }); -</pre> +``` diff --git a/docs/content/guide/scope.ngdoc b/docs/content/guide/scope.ngdoc index 3d932fd9..da194977 100644 --- a/docs/content/guide/scope.ngdoc +++ b/docs/content/guide/scope.ngdoc @@ -88,7 +88,7 @@ scope is the single source-of-truth for all things view related. From a testability point of view, the separation of the controller and the view is desirable, because it allows us to test the behavior without being distracted by the rendering details. -<pre> +```js it('should say hello', function() { var scopeMock = {}; var cntl = new MyController(scopeMock); @@ -101,7 +101,7 @@ to test the behavior without being distracted by the rendering details. scopeMock.sayHello(); expect(scopeMock.greeting).toEqual('Hello angular!'); }); -</pre> +``` ## Scope Hierarchies diff --git a/docs/content/guide/templates.ngdoc b/docs/content/guide/templates.ngdoc index 045cb2a8..fdd90b74 100644 --- a/docs/content/guide/templates.ngdoc +++ b/docs/content/guide/templates.ngdoc @@ -24,7 +24,7 @@ The following code snippet shows a simple Angular template made up of standard H Angular {@link guide/directive directives} and curly-brace bindings with {@link expression expressions}: -<pre> +```html <html ng-app> <!-- Body tag augmented with ngController directive --> <body ng-controller="MyController"> @@ -36,7 +36,7 @@ with {@link expression expressions}: <script src="angular.js"> </body> </html> -</pre> +``` 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 diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index b6ea975c..22bbe158 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -77,7 +77,8 @@ The HTML page that displays "Nothing here yet!" was constructed with the HTML co The code contains some key Angular elements that we will need as we progress. __`app/index.html`:__ -<pre> + +```html <!doctype html> <html lang="en" ng-app> <head> @@ -93,7 +94,7 @@ __`app/index.html`:__ </body> </html> -</pre> +``` diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc index 540484d3..d3f28929 100644 --- a/docs/content/tutorial/step_01.ngdoc +++ b/docs/content/tutorial/step_01.ngdoc @@ -21,7 +21,8 @@ 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 [GitHub](https://github.com/angular/angular-phonecat/compare/step-0...step-1): __`app/index.html`:__ -<pre> + +```html <ul> <li> <span>Nexus S</span> @@ -36,7 +37,7 @@ __`app/index.html`:__ </p> </li> </ul> -</pre> +``` # Experiments diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index 99180b4b..efafba91 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -32,7 +32,8 @@ view. The view component is constructed by Angular from this template: __`app/index.html`:__ -<pre> + +```html <html ng-app="phonecatApp"> <head> ... @@ -50,7 +51,7 @@ __`app/index.html`:__ </body> </html> -</pre> +``` We replaced the hard-coded phone list with the {@link api/ng.directive:ngRepeat ngRepeat directive} and two @@ -77,7 +78,8 @@ the `PhoneListCtrl` __controller__. The __controller__ is simply a constructor f `$scope` parameter: __`app/js/controllers.js`:__ -<pre> + +```js var phonecatApp = angular.module('phonecatApp', []); @@ -92,7 +94,7 @@ phonecatApp.controller('PhoneListCtrl', function ($scope) { ]; }); -</pre> +``` Here we declared a controller called `PhoneListCtrl` and registered it in an AngularJS module, `phonecatApp`. Notice that our `ng-app` directive (on the `<html>` tag) now specifies the `phonecatApp` @@ -130,7 +132,8 @@ developed. If our controller is available on the global namespace then we can si with a mock `scope` object. Take a look at the following unit test for our controller: __`test/unit/controllersSpec.js`:__ -<pre> + +```js describe('PhoneCat controllers', function() { describe('PhoneListCtrl', function(){ @@ -143,7 +146,7 @@ describe('PhoneCat controllers', function() { }); }); }); -</pre> +``` The test instantiates `PhoneListCtrl` and verifies that the phones array property on the scope contains three records. This example demonstrates how easy it is to create a unit test for code in @@ -157,7 +160,8 @@ service, `$controller`, which will retrieve your controller by name. Here is th `$controller`: __`test/unit/controllersSpec.js`:__ -<pre> + +```js describe('PhoneCat controllers', function() { beforeEach(module('phonecatApp')); @@ -171,7 +175,7 @@ describe('PhoneCat controllers', function() { })); }); }); -</pre> +``` Don't forget that we need to load up the `phonecatApp` module into the test so that the controller is available to be injected. diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index d7c75086..8866e49c 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -30,7 +30,8 @@ We made no changes to the controller. ## Template __`app/index.html`:__ -<pre> + +```html <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> @@ -52,7 +53,7 @@ __`app/index.html`:__ </div> </div> </div> -</pre> +``` We added a standard HTML `<input>` tag and used Angular's {@link api/ng.filter:filter filter} function to process the input for the @@ -88,7 +89,8 @@ The search feature was fully implemented via templates and data-binding, so we'l end-to-end test, to verify that the feature works. __`test/e2e/scenarios.js`:__ -<pre> + +```js describe('PhoneCat App', function() { describe('Phone list view', function() { @@ -109,7 +111,7 @@ describe('PhoneCat App', function() { }); }); }); -</pre> +``` Even though the syntax of this test looks very much like our controller unit test written with Jasmine, the end-to-end test uses APIs of {@link guide/dev_guide.e2e-testing Angular's end-to-end @@ -168,7 +170,7 @@ ngBindTemplate} directives, which are invisible to the user while the page is lo * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`: - <pre> + ```js it('should display the current filter value within an element with id "status"', function() { expect(element('#status').text()).toMatch(/Current filter: \s*$/); @@ -180,7 +182,7 @@ ngBindTemplate} directives, which are invisible to the user while the page is lo //alternative version of the last assertion that tests just the value of the binding using('#status').expect(binding('query')).toBe('nexus'); }); - </pre> + ``` Refresh the browser tab with the end-to-end test runner to see the test fail. To make the test pass, edit the `index.html` template to add a `div` or `p` element with `id` `"status"` and content diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 612619a4..adf362b6 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -24,7 +24,8 @@ The most important differences between Steps 3 and 4 are listed below. You can s ## Template __`app/index.html`:__ -<pre> + +```html Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> @@ -39,7 +40,7 @@ __`app/index.html`:__ <p>{{phone.snippet}}</p> </li> </ul> -</pre> +``` We made the following changes to the `index.html` template: @@ -65,7 +66,8 @@ necessary! ## Controller __`app/js/controllers.js`:__ -<pre> + +```js var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function ($scope) { @@ -83,7 +85,7 @@ phonecatApp.controller('PhoneListCtrl', function ($scope) { $scope.orderProp = 'age'; }); -</pre> +``` * We modified the `phones` model - the array of phones - and added an `age` property to each phone record. This property is used to order phones by age. @@ -107,7 +109,8 @@ The changes we made should be verified with both a unit test and an end-to-end t the unit test first. __`test/unit/controllersSpec.js`:__ -<pre> + +```js describe('PhoneCat controllers', function() { describe('PhoneListCtrl', function(){ @@ -130,7 +133,7 @@ describe('PhoneCat controllers', function() { }); }); }); -</pre> +``` The unit test now verifies that the default ordering property is set. @@ -146,7 +149,8 @@ You should now see the following output in the Karma tab: Let's turn our attention to the end-to-end test. __`test/e2e/scenarios.js`:__ -<pre> + +```js ... it('should be possible to control phone order via the drop down select box', function() { @@ -164,7 +168,7 @@ __`test/e2e/scenarios.js`:__ "Motorola XOOM\u2122 with Wi-Fi"]); }); ... -</pre> +``` The end-to-end test verifies that the ordering mechanism of the select box is working correctly. diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc index e32739a1..357bbf5b 100644 --- a/docs/content/tutorial/step_05.ngdoc +++ b/docs/content/tutorial/step_05.ngdoc @@ -25,7 +25,8 @@ The `app/phones/phones.json` file in your project is a dataset that contains a l stored in the JSON format. Following is a sample of the file: -<pre> + +```js [ { "age": 13, @@ -36,7 +37,7 @@ Following is a sample of the file: }, ... ] -</pre> +``` ## Controller @@ -52,7 +53,8 @@ and control) and loosely coupled (dependencies between components are not resolv components themselves, but by the DI subsystem). __`app/js/controllers.js:`__ -<pre> + +```js var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function ($scope, $http) { @@ -62,7 +64,7 @@ phonecatApp.controller('PhoneListCtrl', function ($scope, $http) { $scope.orderProp = 'age'; }); -</pre> +``` `$http` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is relative to our `index.html` file). The server responds by providing the data in the json file. @@ -115,31 +117,37 @@ There are two ways to overcome issues caused by minification: * You can create a `$inject` property on the controller function which holds an array of strings. Each string in the array is the name of the service to inject for the corresponding parameter. In the case of our example we would write: -<pre> + +```js function PhoneListCtrl($scope, $http) {...} PhoneListCtrl.$inject = ['$scope', '$http']; phonecatApp.controller('PhoneListCtrl', PhoneListCtrl); -</pre> +``` + * Use the inline bracket notation which wraps the function to be injected into an array of strings (representing the dependency names) followed by the function to be injected: -<pre> + +```js function PhoneListCtrl($scope, $http) {...} phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]); -</pre> +``` + Both of these methods work with any function that can be injected by Angular, so it's up to your project's style guide to decide which one you use. When using the second method, it is common to provide the constructor function inline as an anonymous function when registering the controller: -<pre> + +```js phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]); -</pre> +``` From this point onward, we're going to use the inline method in the tutorial. With that in mind, let's add the annotations to our `PhoneListCtrl`: __`app/js/controllers.js:`__ -<pre> + +```js var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', @@ -150,7 +158,7 @@ phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', $scope.orderProp = 'age'; }]); -</pre> +``` ## Test @@ -162,7 +170,7 @@ constructor with some kind of fake `$http` implementation. However, the recommen is to create a controller in the test environment in the same way that angular does it in the production code behind the scenes, as follows: -<pre> +```js describe('PhoneCat controllers', function() { describe('PhoneListCtrl', function(){ @@ -182,7 +190,7 @@ describe('PhoneCat controllers', function() { scope = $rootScope.$new(); ctrl = $controller('PhoneListCtrl', {$scope: scope}); })); -</pre> +``` Note: Because we loaded Jasmine and `angular-mocks.js` in our test environment, we got two helper methods {@link api/angular.mock.module module} and {@link api/angular.mock.inject inject} that we'll @@ -219,7 +227,7 @@ the `$httpBackend.flush` method. Now we will make assertions to verify that the `phones` model doesn't exist on `scope` before the response is received: -<pre> +```js it('should create "phones" model with 2 phones fetched from xhr', function() { expect(scope.phones).toBeUndefined(); $httpBackend.flush(); @@ -227,7 +235,7 @@ the response is received: expect(scope.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); }); -</pre> +``` * We flush the request queue in the browser by calling `$httpBackend.flush()`. This causes the promise returned by the `$http` service to be resolved with the trained response. @@ -236,11 +244,11 @@ promise returned by the `$http` service to be resolved with the trained response Finally, we verify that the default value of `orderProp` is set correctly: -<pre> +```js it('should set the default value of orderProp model', function() { expect(scope.orderProp).toBe('age'); }); -</pre> +``` You should now see the following output in the Karma tab: diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc index 09052e8f..3eabeadb 100644 --- a/docs/content/tutorial/step_06.ngdoc +++ b/docs/content/tutorial/step_06.ngdoc @@ -25,7 +25,8 @@ Note that the `phones.json` file contains unique ids and image urls for each of urls point to the `app/img/phones/` directory. __`app/phones/phones.json`__ (sample snippet): -<pre> + +```js [ { ... @@ -36,13 +37,14 @@ __`app/phones/phones.json`__ (sample snippet): }, ... ] -</pre> +``` ## Template __`app/index.html`:__ -<pre> + +```html ... <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"> @@ -52,7 +54,7 @@ __`app/index.html`:__ </li> </ul> ... -</pre> +``` To dynamically generate links that will in the future lead to phone detail pages, we used the now-familiar double-curly brace binding in the `href` attribute values. In step 2, we added the @@ -70,7 +72,8 @@ Using the `ngSrc` directive prevents the browser from making an http request to ## Test __`test/e2e/scenarios.js`__: -<pre> + +```js ... it('should render phone specific links', function() { input('query').enter('nexus'); @@ -78,7 +81,7 @@ __`test/e2e/scenarios.js`__: expect(browser().location().url()).toBe('/phones/nexus-s'); }); ... -</pre> +``` We added a new end-to-end test to verify that the app is generating correct links to the phone views that we will implement in the upcoming steps. diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc index 2f752f6a..de3bdae6 100644 --- a/docs/content/tutorial/step_07.ngdoc +++ b/docs/content/tutorial/step_07.ngdoc @@ -71,7 +71,8 @@ both module systems can live side by side and fulfil their goals. ## The App Module __`app/js/app.js`:__ -<pre> + +```js var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatControllers' @@ -92,7 +93,7 @@ phonecatApp.config(['$routeProvider', redirectTo: '/phones' }); }]); -</pre> +``` In order to configure our application with routes, we need to create a module for our application. We call this module `phonecatApp`. Notice the second argument passed to `angular.module`: @@ -133,17 +134,19 @@ the module name as the value of the {@link api/ng.directive:ngApp ngApp} directive: __`app/index.html`:__ -<pre> + +```html <!doctype html> <html lang="en" ng-app="phonecatApp"> ... -</pre> +``` ## Controllers __`app/js/controllers.js`:__ -<pre> + +```js var phonecatControllers = angular.module('phonecatControllers', []); phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', @@ -159,7 +162,7 @@ phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId; }]); -</pre> +``` Again, note that we created a new module called `phonecatControllers`. For small AngularJS applications, it's common to create just one module for all of your controllers if there are just a few. For larger apps, @@ -180,7 +183,8 @@ tag to your `index.html` file as shown below. </div> __`app/index.html`:__ -<pre> + +```html <!doctype html> <html lang="en" ng-app="phonecatApp"> <head> @@ -196,14 +200,15 @@ __`app/index.html`:__ </body> </html> -</pre> +``` Note that we removed most of the code in the `index.html` template and replaced it with a single line containing a div with the `ng-view` attribute. The code that we removed was placed into the `phone-list.html` template: __`app/partials/phone-list.html`:__ -<pre> + +```html <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> @@ -231,7 +236,7 @@ __`app/partials/phone-list.html`:__ </div> </div> </div> -</pre> +``` <div style="display:none"> TODO! @@ -241,9 +246,10 @@ TODO! We also added a placeholder template for the phone details view: __`app/partials/phone-detail.html`:__ -<pre> + +```html TBD: detail view for {{phoneId}} -</pre> +``` Note how we are using `phoneId` model defined in the `PhoneDetailCtrl` controller. @@ -253,7 +259,7 @@ Note how we are using `phoneId` model defined in the `PhoneDetailCtrl` controlle To automatically verify that everything is wired properly, we wrote end-to-end tests that navigate to various URLs and verify that the correct view was rendered. -<pre> +```js ... it('should redirect index.html to index.html#/phones', function() { browser().navigateTo('app/index.html'); @@ -272,7 +278,7 @@ to various URLs and verify that the correct view was rendered. expect(binding('phoneId')).toBe('nexus-s'); }); }); -</pre> +``` You can now rerun `./scripts/e2e-test.sh` or refresh the browser tab with the end-to-end test diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index 7ba6d36a..02c03773 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -27,7 +27,8 @@ In addition to `phones.json`, the `app/phones/` directory also contains one json phone: __`app/phones/nexus-s.json`:__ (sample snippet) -<pre> + +```js { "additionalFeatures": "Contour Display, Near Field Communications (NFC),...", "android": { @@ -46,7 +47,7 @@ __`app/phones/nexus-s.json`:__ (sample snippet) "ram": "512MB" } } -</pre> +``` Each of these files describes various properties of the phone using the same data structure. We'll @@ -59,7 +60,8 @@ We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the jso the same way as the phone list controller. __`app/js/controllers.js`:__ -<pre> + +```js var phonecatControllers = angular.module('phonecatControllers',[]); phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', @@ -68,7 +70,7 @@ phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$h $scope.phone = data; }); }]); -</pre> +``` To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current route by the `$route` service. @@ -82,7 +84,8 @@ our model into the view. __`app/partials/phone-detail.html`:__ -<pre> + +```html <img ng-src="{{phone.images[0]}}" class="phone"> <h1>{{phone.name}}</h1> @@ -109,7 +112,7 @@ __`app/partials/phone-detail.html`:__ <dd>{{phone.additionalFeatures}}</dd> </li> </ul> -</pre> +``` <div style="display: none"> TODO! @@ -122,7 +125,8 @@ We wrote a new unit test that is similar to the one we wrote for the `PhoneListC step 5. __`test/unit/controllersSpec.js`:__ -<pre> + +```js ... describe('PhoneDetailCtrl', function(){ var scope, $httpBackend, ctrl; @@ -145,7 +149,7 @@ __`test/unit/controllersSpec.js`:__ }); }); ... -</pre> +``` You should now see the following output in the Karma tab: @@ -156,7 +160,8 @@ We also added a new end-to-end test that navigates to the Nexus S detail page an heading on the page is "Nexus S". __`test/e2e/scenarios.js`:__ -<pre> + +```js ... describe('Phone detail view', function() { @@ -170,7 +175,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 diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index 8d23af3e..0e32001d 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -26,13 +26,14 @@ In order to create a new filter, you are going to create a `phonecatFilters` mod your custom filter with this module: __`app/js/filters.js`:__ -<pre> + +```js angular.module('phonecatFilters', []).filter('checkmark', function() { return function(input) { return input ? '\u2713' : '\u2718'; }; }); -</pre> +``` The name of our filter is "checkmark". The `input` evaluates to either `true` or `false`, and we return one of the two unicode characters we have chosen to represent true (`\u2713` -> ✓) or false (`\u2718` -> ✘). @@ -41,11 +42,12 @@ Now that our filter is ready, we need to register the `phonecatFilters` module a our main `phonecat` module. __`app/js/app.js`:__ -<pre> + +```js ... angular.module('phonecatApp', ['phonecatFilters']). ... -</pre> +``` ## Template @@ -54,12 +56,13 @@ Since the filter code lives in the `app/js/filters.js` file, we need to include layout template. __`app/index.html`:__ -<pre> + +```html ... <script src="js/controllers.js"></script> <script src="js/filters.js"></script> ... -</pre> +``` The syntax for using filters in Angular templates is as follows: @@ -70,7 +73,8 @@ Let's employ the filter in the phone details template: __`app/partials/phone-detail.html`:__ -<pre> + +```html ... <dl> <dt>Infrared</dt> @@ -79,7 +83,7 @@ __`app/partials/phone-detail.html`:__ <dd>{{phone.connectivity.gps | checkmark}}</dd> </dl> ... -</pre> +``` ## Test @@ -87,7 +91,8 @@ __`app/partials/phone-detail.html`:__ Filters, like any other component, should be tested and these tests are very easy to write. __`test/unit/filtersSpec.js`:__ -<pre> + +```js describe('filter', function() { beforeEach(module('phonecatFilters')); @@ -101,7 +106,7 @@ describe('filter', function() { })); }); }); -</pre> +``` We must call `beforeEach(module('phonecatFilters'))` before any of our filter tests execute. This call loads our `phonecatFilters` module into the injector diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index 640977e6..b16ceaab 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -22,7 +22,8 @@ The most important changes are listed below. You can see the full diff on [GitHu ## Controller __`app/js/controllers.js`:__ -<pre> + +```js ... var phonecatControllers = angular.module('phonecatControllers',[]); @@ -37,7 +38,7 @@ phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$h $scope.mainImageUrl = imageUrl; } }]); -</pre> +``` In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its default value to the first phone image URL. @@ -48,7 +49,8 @@ We also created a `setImage` event handler function that will change the value o ## Template __`app/partials/phone-detail.html`:__ -<pre> + +```html <img ng-src="{{mainImageUrl}}" class="phone"> ... @@ -59,7 +61,7 @@ __`app/partials/phone-detail.html`:__ </li> </ul> ... -</pre> +``` We bound the `ngSrc` directive of the large image to the `mainImageUrl` property. @@ -80,7 +82,8 @@ to the first phone image by default. The second test clicks on several thumbnail verifies that the main image changed appropriately. __`test/e2e/scenarios.js`:__ -<pre> + +```js ... describe('Phone detail view', function() { @@ -100,7 +103,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 [Angular's server](http://angular.github.com/angular-phonecat/step-10/test/e2e/runner.html). diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc index ffd342ed..b3308cc6 100644 --- a/docs/content/tutorial/step_11.ngdoc +++ b/docs/content/tutorial/step_11.ngdoc @@ -25,17 +25,19 @@ template. Additionally, we also need to load the `angular-resource.js` file, whi `ngResource` module and in it the `$resource` service, that we'll soon use: __`app/index.html`.__ -<pre> + +```html ... <script src="js/services.js"></script> <script src="lib/angular/angular-resource.js"></script> ... -</pre> +``` ## Service __`app/js/services.js`.__ -<pre> + +```js var phonecatServices = angular.module('phonecatServices', ['ngResource']); phonecatServices.factory('Phone', ['$resource', @@ -44,7 +46,7 @@ phonecatServices.factory('Phone', ['$resource', query: {method:'GET', params:{phoneId:'phones'}, isArray:true} }); }]); -</pre> +``` We used the module API to register a custom service using a factory function. We passed in the name of the service - 'Phone' - and the factory function. The factory function is similar to a @@ -57,11 +59,12 @@ lines of code. This client can then be used in our application, instead of the l api/ng.$http $http} service. __`app/js/app.js`.__ -<pre> + +```js ... angular.module('phonecatApp', ['ngRoute', 'phonecatControllers','phonecatFilters', 'phonecatServices']). ... -</pre> +``` We need to add the 'phonecatServices' module dependency to 'phonecatApp' module's requires array. @@ -75,7 +78,8 @@ use than `$http` for interacting with data sources exposed as RESTful resources. now to understand what the code in our controllers is doing. __`app/js/controllers.js`.__ -<pre> + +```js ... phonecatApp.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) { @@ -92,7 +96,7 @@ phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', fu $scope.mainImageUrl = imageUrl; } }]); -</pre> +``` Notice how in `PhoneListCtrl` we replaced: @@ -133,7 +137,8 @@ ignores methods. __`test/unit/controllersSpec.js`:__ -<pre> + +```js describe('PhoneCat controllers', function() { beforeEach(function(){ @@ -204,7 +209,7 @@ describe('PhoneCat controllers', function() { }); }); }); -</pre> +``` You should now see the following output in the Karma tab: diff --git a/docs/content/tutorial/step_12.ngdoc b/docs/content/tutorial/step_12.ngdoc index 1323fb2f..3e823a10 100644 --- a/docs/content/tutorial/step_12.ngdoc +++ b/docs/content/tutorial/step_12.ngdoc @@ -41,7 +41,8 @@ as the `angular-animate.js` file. The animation module, known as `ngAnimate`, is Here's what needs to changed in the index file: __`app/index.html`.__ -<pre> + +```html ... <!-- jQuery is used for JavaScript animations (include this before angular.js) --> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> @@ -55,7 +56,7 @@ __`app/index.html`.__ <!-- for CSS Transitions and/or Keyframe Animations --> <link rel="stylesheet" href="css/animations.css"> ... -</pre> +``` <div class="alert alert-error"> **Important:** Be sure to use jQuery version `1.10.x`. AngularJS does not yet support jQuery `2.x`. @@ -68,17 +69,19 @@ with `ngResource`. ## Module & Animations __`app/js/animations.js`.__ -<pre> + +```js angular.module('phonecatAnimations', ['ngAnimate']). // ... // this module will later be used to define animations // ... -</pre> +``` And now let's attach this module to our application module... __`app/js/app.js`.__ -<pre> + +```js // ... angular.module('phonecat', [ 'ngRoute', @@ -89,7 +92,7 @@ angular.module('phonecat', [ 'phonecatServices', ]). // ... -</pre> +``` Now, the phonecat module is animation aware. Let's make some animations! @@ -100,7 +103,8 @@ We'll start off by adding CSS transition animations to our `ngRepeat` directive First let's add an extra CSS class to our repeated element so that we can hook into it with our CSS animation code. __`app/partials/phone-list.html`.__ -<pre> + +```html <!-- Let's change the repeater HTML to include a new CSS class which we will later use for animations: @@ -114,14 +118,15 @@ __`app/partials/phone-list.html`.__ </li> </ul> -</pre> +``` Notice how we added the `phone-listing` CSS class? This is all we need in our HTML code to get animations working. Now for the actual CSS transition animation code: __`app/css/animations.css`__ -<pre> + +```css .phone-listing.ng-enter, .phone-listing.ng-leave, .phone-listing.ng-move { @@ -155,7 +160,7 @@ __`app/css/animations.css`__ padding-top: 0; padding-bottom: 0; } -</pre> +``` As you can see our `phone-listing` CSS class is combined together with the animation hooks that occur when items are inserted into and removed from the list: @@ -200,11 +205,12 @@ In order to do this, we'll have to make some small changes to the HTML code so t animations between view changes. __`app/index.html`.__ -<pre> + +```html <div class="view-container"> <div ng-view class="view-frame"></div> </div> -</pre> +``` With this change, the `ng-view` directive is nested inside a parent element with a `view-container` CSS class. This class adds a `position: relative` style so that the positioning of the `ng-view` @@ -213,7 +219,8 @@ is relative to this parent as it animates transitions. With this in place, let's add the CSS for this transition animation to our `animations.css` file: __`app/css/animations.css`.__ -<pre> + +```css .view-container { position: relative; } @@ -242,34 +249,34 @@ __`app/css/animations.css`.__ z-index:99; } -@keyframes fade-in { +@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } -@-moz-keyframes fade-in { +@-moz-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } -@-webkit-keyframes fade-in { +@-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } -@keyframes fade-out { +@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } -@-moz-keyframes fade-out { +@-moz-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } -@-webkit-keyframes fade-out { +@-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } -/* don't forget about the vendor-prefixes! */ -</pre> +/* don't forget about the vendor-prefixes! */ +``` Nothing crazy here! Just a simple fade in and fade out effect between pages. The only out of the ordinary thing here is that we're using absolute positioning to position the next page (identified via `ng-enter`) on top of the @@ -306,7 +313,8 @@ profile image and the animation plays. Let's get started and tweak our HTML code on the `phone-detail.html` page first: __`app/partials/phone-detail.html`.__ -<pre> + +```html <!-- We're only changing the top of the file --> <div class="phone-images"> <img ng-src="{{img}}" @@ -324,7 +332,7 @@ __`app/partials/phone-detail.html`.__ <img ng-src="{{img}}" ng-mouseenter="setImage(img)"> </li> </ul> -</pre> +``` Just like with the thumbnails, we're using a repeater to display **all** the profile images as a list, however we're not animating any repeat-related animations. Instead, we're keeping our eye on the ng-class directive since whenever @@ -340,7 +348,8 @@ You may be thinking that we're just going to create another CSS-enabled animatio Although we could do that, let's take the opportunity to learn how to create JavaScript-enabled animations with the `animation()` module method. __`app/js/animations.js`.__ -<pre> + +```js var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']); phonecatAnimations.animation('.phone', function() { @@ -393,7 +402,7 @@ phonecatAnimations.animation('.phone', function() { removeClass: animateDown }; }); -</pre> +``` 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 diff --git a/src/Angular.js b/src/Angular.js index 04169818..99b6e67b 100644 --- a/src/Angular.js +++ b/src/Angular.js @@ -214,14 +214,14 @@ function isArrayLike(obj) { * It is worth noting that `.forEach` does not iterate over inherited properties because it filters * using the `hasOwnProperty` method. * - <pre> + ```js var values = {name: 'misko', gender: 'male'}; var log = []; angular.forEach(values, function(value, key){ this.push(key + ': ' + value); }, log); expect(log).toEqual(['name: misko', 'gender: male']); - </pre> + ``` * * @param {Object|Array} obj Object to iterate over. * @param {Function} iterator Iterator function. @@ -374,12 +374,12 @@ function inherit(parent, extra) { * @description * A function that performs no operations. This function can be useful when writing code in the * functional style. - <pre> + ```js function foo(callback) { var result = calculateResult(); (callback || angular.noop)(result); } - </pre> + ``` */ function noop() {} noop.$inject = []; @@ -395,11 +395,11 @@ noop.$inject = []; * A function that returns its first argument. This function is useful when writing code in the * functional style. * - <pre> + ```js function transformer(transformationFn, value) { return (transformationFn || angular.identity)(value); }; - </pre> + ``` */ function identity($) {return $;} identity.$inject = []; diff --git a/src/auto/injector.js b/src/auto/injector.js index 977b5774..dcfa2cc3 100644 --- a/src/auto/injector.js +++ b/src/auto/injector.js @@ -16,7 +16,7 @@ * * @example * Typical usage - * <pre> + * ```js * // create an injector * var $injector = angular.injector(['ng']); * @@ -26,7 +26,7 @@ * $compile($document)($rootScope); * $rootScope.$digest(); * }); - * </pre> + * ``` * * Sometimes you want to get access to the injector of a currently running Angular app * from outside Angular. Perhaps, you want to inject and compile some markup after the @@ -40,7 +40,7 @@ * directive is added to the end of the document body by JQuery. We then compile and link * it into the current AngularJS scope. * - * <pre> + * ```js * var $div = $('<div ng-controller="MyCtrl">{{content.label}}</div>'); * $(document.body).append($div); * @@ -48,7 +48,7 @@ * var scope = angular.element($div).scope(); * $compile($div)(scope); * }); - * </pre> + * ``` */ @@ -110,20 +110,20 @@ function annotate(fn) { * * The following always holds true: * - * <pre> + * ```js * var $injector = angular.injector(); * expect($injector.get('$injector')).toBe($injector); * expect($injector.invoke(function($injector){ * return $injector; * }).toBe($injector); - * </pre> + * ``` * * # Injection Function Annotation * * JavaScript does not have annotations, and annotations are needed for dependency injection. The * following are all valid ways of annotating function with injection arguments and are equivalent. * - * <pre> + * ```js * // inferred (only works if code not minified/obfuscated) * $injector.invoke(function(serviceA){}); * @@ -134,7 +134,7 @@ function annotate(fn) { * * // inline * $injector.invoke(['serviceA', function(serviceA){}]); - * </pre> + * ``` * * ## Inference * @@ -215,7 +215,7 @@ function annotate(fn) { * The simplest form is to extract the dependencies from the arguments of the function. This is done * by converting the function into a string using `toString()` method and extracting the argument * names. - * <pre> + * ```js * // Given * function MyController($scope, $route) { * // ... @@ -223,7 +223,7 @@ function annotate(fn) { * * // Then * expect(injector.annotate(MyController)).toEqual(['$scope', '$route']); - * </pre> + * ``` * * This method does not work with code minification / obfuscation. For this reason the following * annotation strategies are supported. @@ -232,7 +232,7 @@ function annotate(fn) { * * If a function has an `$inject` property and its value is an array of strings, then the strings * represent names of services to be injected into the function. - * <pre> + * ```js * // Given * var MyController = function(obfuscatedScope, obfuscatedRoute) { * // ... @@ -242,7 +242,7 @@ function annotate(fn) { * * // Then * expect(injector.annotate(MyController)).toEqual(['$scope', '$route']); - * </pre> + * ``` * * # The array notation * @@ -250,7 +250,7 @@ function annotate(fn) { * is very inconvenient. In these situations using the array notation to specify the dependencies in * a way that survives minification is a better choice: * - * <pre> + * ```js * // We wish to write this (not minification / obfuscation safe) * injector.invoke(function($compile, $rootScope) { * // ... @@ -272,7 +272,7 @@ function annotate(fn) { * expect(injector.annotate( * ['$compile', '$rootScope', function(obfus_$compile, obfus_$rootScope) {}]) * ).toEqual(['$compile', '$rootScope']); - * </pre> + * ``` * * @param {function|Array.<string|Function>} fn Function for which dependent service names need to * be retrieved as described above. @@ -359,7 +359,7 @@ function annotate(fn) { * The following example shows how to create a simple event tracking service and register it using * {@link auto.$provide#methods_provider $provide.provider()}. * - * <pre> + * ```js * // Define the eventTracker provider * function EventTrackerProvider() { * var trackingUrl = '/track'; @@ -416,7 +416,7 @@ function annotate(fn) { * expect(postSpy.mostRecentCall.args[1]).toEqual({ 'login': 1 }); * })); * }); - * </pre> + * ``` */ /** @@ -437,19 +437,19 @@ function annotate(fn) { * * @example * Here is an example of registering a service - * <pre> + * ```js * $provide.factory('ping', ['$http', function($http) { * return function ping() { * return $http.send('/ping'); * }; * }]); - * </pre> + * ``` * You would then inject and use this service like this: - * <pre> + * ```js * someModule.controller('Ctrl', ['ping', function(ping) { * ping(); * }]); - * </pre> + * ``` */ @@ -473,7 +473,7 @@ function annotate(fn) { * @example * Here is an example of registering a service using * {@link auto.$provide#methods_service $provide.service(class)}. - * <pre> + * ```js * var Ping = function($http) { * this.$http = $http; * }; @@ -484,13 +484,13 @@ function annotate(fn) { * return this.$http.get('/ping'); * }; * $provide.service('ping', Ping); - * </pre> + * ``` * You would then inject and use this service like this: - * <pre> + * ```js * someModule.controller('Ctrl', ['ping', function(ping) { * ping.send(); * }]); - * </pre> + * ``` */ @@ -515,7 +515,7 @@ function annotate(fn) { * * @example * Here are some examples of creating value services. - * <pre> + * ```js * $provide.value('ADMIN_USER', 'admin'); * * $provide.value('RoleLookup', { admin: 0, writer: 1, reader: 2 }); @@ -523,7 +523,7 @@ function annotate(fn) { * $provide.value('halfOf', function(value) { * return value / 2; * }); - * </pre> + * ``` */ @@ -543,7 +543,7 @@ function annotate(fn) { * * @example * Here a some examples of creating constants: - * <pre> + * ```js * $provide.constant('SHARD_HEIGHT', 306); * * $provide.constant('MY_COLOURS', ['red', 'blue', 'grey']); @@ -551,7 +551,7 @@ function annotate(fn) { * $provide.constant('double', function(value) { * return value * 2; * }); - * </pre> + * ``` */ @@ -577,12 +577,12 @@ function annotate(fn) { * @example * Here we decorate the {@link ng.$log $log} service to convert warnings to errors by intercepting * calls to {@link ng.$log#error $log.warn()}. - * <pre> + * ```js * $provide.decorator('$log', ['$delegate', function($delegate) { * $delegate.warn = $delegate.error; * return $delegate; * }]); - * </pre> + * ``` */ diff --git a/src/loader.js b/src/loader.js index 7184cb47..cdb092f5 100644 --- a/src/loader.js +++ b/src/loader.js @@ -47,7 +47,7 @@ function setupModuleLoader(window) { * A module is a collection of services, directives, filters, and configuration information. * `angular.module` is used to configure the {@link auto.$injector $injector}. * - * <pre> + * ```js * // Create a new module * var myModule = angular.module('myModule', []); * @@ -59,13 +59,13 @@ function setupModuleLoader(window) { * // Configure existing providers * $locationProvider.hashPrefix('!'); * }); - * </pre> + * ``` * * Then you can create an injector and load your modules like this: * - * <pre> + * ```js * var injector = angular.injector(['ng', 'MyModule']) - * </pre> + * ``` * * However it's more likely that you'll just use * {@link ng.directive:ngApp ngApp} or @@ -205,7 +205,7 @@ function setupModuleLoader(window) { * Defines an animation hook that can be later used with * {@link ngAnimate.$animate $animate} service and directives that use this service. * - * <pre> + * ```js * module.animation('.animation-name', function($inject1, $inject2) { * return { * eventName : function(element, done) { @@ -217,7 +217,7 @@ function setupModuleLoader(window) { * } * } * }) - * </pre> + * ``` * * See {@link ngAnimate.$animateProvider#register $animateProvider.register()} and * {@link ngAnimate ngAnimate module} for more information. diff --git a/src/ng/animate.js b/src/ng/animate.js index 11a287e6..55eb0a3f 100644 --- a/src/ng/animate.js +++ b/src/ng/animate.js @@ -36,7 +36,7 @@ var $AnimateProvider = ['$provide', function($provide) { * triggered. * * - *<pre> + * ```js * return { * eventFn : function(element, done) { * //code to run the animation @@ -46,7 +46,7 @@ var $AnimateProvider = ['$provide', function($provide) { * } * } * } - *</pre> + * ``` * * @param {string} name The name of the animation. * @param {function} factory The factory function that will be executed to return the animation diff --git a/src/ng/cacheFactory.js b/src/ng/cacheFactory.js index 32d179b4..9371ca58 100644 --- a/src/ng/cacheFactory.js +++ b/src/ng/cacheFactory.js @@ -7,7 +7,7 @@ * @description * Factory that constructs cache objects and gives access to them. * - * <pre> + * ```js * * var cache = $cacheFactory('cacheId'); * expect($cacheFactory.get('cacheId')).toBe(cache); @@ -19,7 +19,7 @@ * // We've specified no options on creation * expect(cache.info()).toEqual({id: 'cacheId', size: 2}); * - * </pre> + * ``` * * * @param {string} cacheId Name or id of the newly created cache. @@ -201,7 +201,7 @@ function $CacheFactoryProvider() { * `$templateCache` service directly. * * Adding via the `script` tag: - * <pre> + * ```html * <html ng-app> * <head> * <script type="text/ng-template" id="templateId.html"> @@ -210,29 +210,29 @@ function $CacheFactoryProvider() { * </head> * ... * </html> - * </pre> + * ``` * * **Note:** the `script` tag containing the template does not need to be included in the `head` of * the document, but it must be below the `ng-app` definition. * * Adding via the $templateCache service: * - * <pre> + * ```js * var myApp = angular.module('myApp', []); * myApp.run(function($templateCache) { * $templateCache.put('templateId.html', 'This is the content of the template'); * }); - * </pre> + * ``` * * To retrieve the template later, simply use it in your HTML: - * <pre> + * ```html * <div ng-include=" 'templateId.html' "></div> - * </pre> + * ``` * * or get it via Javascript: - * <pre> + * ```js * $templateCache.get('templateId.html') - * </pre> + * ``` * * See {@link ng.$cacheFactory $cacheFactory}. * diff --git a/src/ng/compile.js b/src/ng/compile.js index 219f99ae..dd8d001c 100644 --- a/src/ng/compile.js +++ b/src/ng/compile.js @@ -50,7 +50,7 @@ * * Here's an example directive declared with a Directive Definition Object: * - * <pre> + * ```js * var myModule = angular.module(...); * * myModule.directive('directiveName', function factory(injectables) { @@ -83,7 +83,7 @@ * }; * return directiveDefinitionObject; * }); - * </pre> + * ``` * * <div class="alert alert-warning"> * **Note:** Any unspecified options will use the default value. You can see the default values below. @@ -91,7 +91,7 @@ * * Therefore the above can be simplified as: * - * <pre> + * ```js * var myModule = angular.module(...); * * myModule.directive('directiveName', function factory(injectables) { @@ -102,7 +102,7 @@ * // or * // return function postLink(scope, iElement, iAttrs) { ... } * }); - * </pre> + * ``` * * * @@ -256,9 +256,9 @@ * * #### `compile` * - * <pre> + * ```js * function compile(tElement, tAttrs, transclude) { ... } - * </pre> + * ``` * * The compile function deals with transforming the template DOM. Since most directives do not do * template transformation, it is not used often. Examples that require compile functions are @@ -301,9 +301,9 @@ * #### `link` * This property is used only if the `compile` property is not defined. * - * <pre> + * ```js * function link(scope, iElement, iAttrs, controller, transcludeFn) { ... } - * </pre> + * ``` * * The link function is responsible for registering DOM listeners as well as updating the DOM. It is * executed after the template has been cloned. This is where most of the directive logic will be @@ -361,7 +361,7 @@ * the only way to easily get the actual value because during the linking phase the interpolation * hasn't been evaluated yet and so the value is at this time set to `undefined`. * - * <pre> + * ```js * function linkingFn(scope, elm, attrs, ctrl) { * // get the attribute value * console.log(attrs.ngModel); @@ -374,7 +374,7 @@ * console.log('ngModel has changed value to ' + value); * }); * } - * </pre> + * ``` * * Below is an example using `$compileProvider`. * @@ -465,14 +465,14 @@ * * - If you are not asking the linking function to clone the template, create the DOM element(s) * before you send them to the compiler and keep this reference around. - * <pre> + * ```js * var element = $compile('<p>{{total}}</p>')(scope); - * </pre> + * ``` * * - if on the other hand, you need the element to be cloned, the view reference from the original * example would not point to the clone, but rather to the original template that was cloned. In * this case, you can access the clone via the cloneAttachFn: - * <pre> + * ```js * var templateElement = angular.element('<p>{{total}}</p>'), * scope = ....; * @@ -481,7 +481,7 @@ * }); * * //now we have reference to the cloned DOM via `clonedElement` - * </pre> + * ``` * * * For information on how the compiler works, see the diff --git a/src/ng/directive/booleanAttrs.js b/src/ng/directive/booleanAttrs.js index d2ba61df..b49105cd 100644 --- a/src/ng/directive/booleanAttrs.js +++ b/src/ng/directive/booleanAttrs.js @@ -16,14 +16,14 @@ * The `ngHref` directive solves this problem. * * The wrong way to write it: - * <pre> + * ```html * <a href="http://www.gravatar.com/avatar/{{hash}}"/> - * </pre> + * ``` * * The correct way to write it: - * <pre> + * ```html * <a ng-href="http://www.gravatar.com/avatar/{{hash}}"/> - * </pre> + * ``` * * @element A * @param {template} ngHref any string which can contain `{{}}` markup. @@ -106,14 +106,14 @@ * `{{hash}}`. The `ngSrc` directive solves this problem. * * The buggy way to write it: - * <pre> + * ```html * <img src="http://www.gravatar.com/avatar/{{hash}}"/> - * </pre> + * ``` * * The correct way to write it: - * <pre> + * ```html * <img ng-src="http://www.gravatar.com/avatar/{{hash}}"/> - * </pre> + * ``` * * @element IMG * @param {template} ngSrc any string which can contain `{{}}` markup. @@ -132,14 +132,14 @@ * `{{hash}}`. The `ngSrcset` directive solves this problem. * * The buggy way to write it: - * <pre> + * ```html * <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/> - * </pre> + * ``` * * The correct way to write it: - * <pre> + * ```html * <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/> - * </pre> + * ``` * * @element IMG * @param {template} ngSrcset any string which can contain `{{}}` markup. @@ -154,11 +154,11 @@ * @description * * The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs: - * <pre> + * ```html * <div ng-init="scope = { isDisabled: false }"> * <button disabled="{{scope.isDisabled}}">Disabled</button> * </div> - * </pre> + * ``` * * The HTML specification does not require browsers to preserve the values of boolean attributes * such as disabled. (Their presence means true and their absence means false.) diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index ced50167..1a357805 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -861,14 +861,14 @@ var VALID_CLASS = 'ng-valid', * @property {Array.<Function>} $formatters Array of functions to execute, as a pipeline, whenever the model value changes. Each function is called, in turn, passing the value through to the next. Used to format / convert values for display in the control and validation. - * <pre> + * ```js * function formatter(value) { * if (value) { * return value.toUpperCase(); * } * } * ngModel.$formatters.push(formatter); - * </pre> + * ``` * * @property {Array.<Function>} $viewChangeListeners Array of functions to execute whenever the * view value has changed. It is called with no arguments, and its return value is ignored. diff --git a/src/ng/directive/ngCloak.js b/src/ng/directive/ngCloak.js index 0ef5090f..42b0224f 100644 --- a/src/ng/directive/ngCloak.js +++ b/src/ng/directive/ngCloak.js @@ -18,11 +18,11 @@ * `angular.min.js`. * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * - * <pre> + * ```css * [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { * display: none !important; * } - * </pre> + * ``` * * When this css rule is loaded by the browser, all html elements (including their children) that * are tagged with the `ngCloak` directive are hidden. When Angular encounters this directive diff --git a/src/ng/directive/ngCsp.js b/src/ng/directive/ngCsp.js index 9dc93f81..38508bb4 100644 --- a/src/ng/directive/ngCsp.js +++ b/src/ng/directive/ngCsp.js @@ -29,13 +29,13 @@ * * @example * This example shows how to apply the `ngCsp` directive to the `html` tag. - <pre> + ```html <!doctype html> <html ng-app ng-csp> ... ... </html> - </pre> + ``` */ // ngCsp is not implemented as a proper directive any more, because we need it be processed while we bootstrap diff --git a/src/ng/directive/ngPluralize.js b/src/ng/directive/ngPluralize.js index a33735e9..d6ad861f 100644 --- a/src/ng/directive/ngPluralize.js +++ b/src/ng/directive/ngPluralize.js @@ -36,13 +36,13 @@ * * The following example shows how to configure ngPluralize: * - * <pre> + * ```html * <ng-pluralize count="personCount" when="{'0': 'Nobody is viewing.', * 'one': '1 person is viewing.', * 'other': '{} people are viewing.'}"> * </ng-pluralize> - *</pre> + *``` * * In the example, `"0: Nobody is viewing."` is an explicit number rule. If you did not * specify this rule, 0 would be matched to the "other" category and "0 people are viewing" @@ -62,7 +62,7 @@ * The offset attribute allows you to offset a number by any desired value. * Let's take a look at an example: * - * <pre> + * ```html * <ng-pluralize count="personCount" offset=2 * when="{'0': 'Nobody is viewing.', * '1': '{{person1}} is viewing.', @@ -70,7 +70,7 @@ * 'one': '{{person1}}, {{person2}} and one other person are viewing.', * 'other': '{{person1}}, {{person2}} and {} other people are viewing.'}"> * </ng-pluralize> - * </pre> + * ``` * * Notice that we are still using two plural categories(one, other), but we added * three explicit number rules 0, 1 and 2. diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index f83bb88f..41146fdc 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -30,7 +30,7 @@ * up to and including the ending HTML tag where **ng-repeat-end** is placed. * * The example below makes use of this feature: - * <pre> + * ```html * <header ng-repeat-start="item in items"> * Header {{ item }} * </header> @@ -40,10 +40,10 @@ * <footer ng-repeat-end> * Footer {{ item }} * </footer> - * </pre> + * ``` * * And with an input of {@type ['A','B']} for the items variable in the example above, the output will evaluate to: - * <pre> + * ```html * <header> * Header A * </header> @@ -62,7 +62,7 @@ * <footer> * Footer B * </footer> - * </pre> + * ``` * * The custom start and end points for ngRepeat also support all other HTML directive syntax flavors provided in AngularJS (such * as **data-ng-repeat-start**, **x-ng-repeat-start** and **ng:repeat-start**). diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index c4754bee..a6b47b9c 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -11,13 +11,13 @@ * in AngularJS and sets the display style to none (using an !important flag). * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * - * <pre> + * ```html * <!-- when $scope.myValue is truthy (element is visible) --> * <div ng-show="myValue"></div> * * <!-- when $scope.myValue is falsy (element is hidden) --> * <div ng-show="myValue" class="ng-hide"></div> - * </pre> + * ``` * * When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute * on the element causing it to become hidden. When true, the ng-hide CSS class is removed @@ -38,7 +38,7 @@ * * If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by * restating the styles for the .ng-hide class in CSS: - * <pre> + * ```css * .ng-hide { * //!annotate CSS Specificity|Not to worry, this will override the AngularJS default... * display:block!important; @@ -48,7 +48,7 @@ * top:-9999px; * left:-9999px; * } - * </pre> + * ``` * * Just remember to include the important flag so the CSS override will function. * @@ -64,7 +64,7 @@ * you must also include the !important flag to override the display property * so that you can perform an animation when the element is hidden during the time of the animation. * - * <pre> + * ```css * // * //a working example can be found at the bottom of this page * // @@ -77,7 +77,7 @@ * .my-element.ng-hide-add.ng-hide-add-active { ... } * .my-element.ng-hide-remove { ... } * .my-element.ng-hide-remove.ng-hide-remove-active { ... } - * </pre> + * ``` * * @animations * addClass: .ng-hide - happens after the ngShow expression evaluates to a truthy value and the just before contents are set to visible @@ -168,13 +168,13 @@ var ngShowDirective = ['$animate', function($animate) { * in AngularJS and sets the display style to none (using an !important flag). * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * - * <pre> + * ```hrml * <!-- when $scope.myValue is truthy (element is hidden) --> * <div ng-hide="myValue"></div> * * <!-- when $scope.myValue is falsy (element is visible) --> * <div ng-hide="myValue" class="ng-hide"></div> - * </pre> + * ``` * * When the ngHide expression evaluates to true then the .ng-hide CSS class is added to the class attribute * on the element causing it to become hidden. When false, the ng-hide CSS class is removed @@ -195,7 +195,7 @@ var ngShowDirective = ['$animate', function($animate) { * * If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by * restating the styles for the .ng-hide class in CSS: - * <pre> + * ```css * .ng-hide { * //!annotate CSS Specificity|Not to worry, this will override the AngularJS default... * display:block!important; @@ -205,7 +205,7 @@ var ngShowDirective = ['$animate', function($animate) { * top:-9999px; * left:-9999px; * } - * </pre> + * ``` * * Just remember to include the important flag so the CSS override will function. * @@ -221,7 +221,7 @@ var ngShowDirective = ['$animate', function($animate) { * you must also include the !important flag to override the display property so * that you can perform an animation when the element is hidden during the time of the animation. * - * <pre> + * ```css * // * //a working example can be found at the bottom of this page * // @@ -234,7 +234,7 @@ var ngShowDirective = ['$animate', function($animate) { * .my-element.ng-hide-add.ng-hide-add-active { ... } * .my-element.ng-hide-remove { ... } * .my-element.ng-hide-remove.ng-hide-remove-active { ... } - * </pre> + * ``` * * @animations * removeClass: .ng-hide - happens after the ngHide expression evaluates to a truthy value and just before the contents are set to hidden diff --git a/src/ng/exceptionHandler.js b/src/ng/exceptionHandler.js index 13f775ef..c2c77f64 100644 --- a/src/ng/exceptionHandler.js +++ b/src/ng/exceptionHandler.js @@ -15,14 +15,14 @@ * * ## Example: * - * <pre> + * ```js * angular.module('exceptionOverride', []).factory('$exceptionHandler', function () { * return function (exception, cause) { * exception.message += ' (caused by "' + cause + '")'; * throw exception; * }; * }); - * </pre> + * ``` * * This example will override the normal action of `$exceptionHandler`, to make angular * exceptions fail hard when they happen, instead of just logging to the console. diff --git a/src/ng/filter.js b/src/ng/filter.js index 8e4254e2..c78f526e 100644 --- a/src/ng/filter.js +++ b/src/ng/filter.js @@ -9,7 +9,7 @@ * Dependency Injected. To achieve this a filter definition consists of a factory function which is * annotated with dependencies and is responsible for creating a filter function. * - * <pre> + * ```js * // Filter registration * function MyModule($provide, $filterProvider) { * // create a service to demonstrate injection (not always needed) @@ -28,12 +28,12 @@ * }; * }); * } - * </pre> + * ``` * * The filter function is registered with the `$injector` under the filter name suffix with * `Filter`. * - * <pre> + * ```js * it('should be the same instance', inject( * function($filterProvider) { * $filterProvider.register('reverse', function(){ @@ -43,7 +43,7 @@ * function($filter, reverseFilter) { * expect($filter('reverse')).toBe(reverseFilter); * }); - * </pre> + * ``` * * * For more information about how angular filters work, and how to create your own filters, see diff --git a/src/ng/http.js b/src/ng/http.js index aa8c4071..011b33a8 100644 --- a/src/ng/http.js +++ b/src/ng/http.js @@ -202,7 +202,7 @@ function $HttpProvider() { * that is used to generate an HTTP request and returns a {@link ng.$q promise} * with two $http specific methods: `success` and `error`. * - * <pre> + * ```js * $http({method: 'GET', url: '/someUrl'}). * success(function(data, status, headers, config) { * // this callback will be called asynchronously @@ -212,7 +212,7 @@ function $HttpProvider() { * // called asynchronously if an error occurs * // or server returns response with an error status. * }); - * </pre> + * ``` * * Since the returned value of calling the $http function is a `promise`, you can also use * the `then` method to register callbacks, and these callbacks will receive a single argument – @@ -241,10 +241,10 @@ function $HttpProvider() { * POST/PUT requests require request data to be provided as well, shortcut methods * were created: * - * <pre> + * ```js * $http.get('/someUrl').success(successCallback); * $http.post('/someUrl', data).success(successCallback); - * </pre> + * ``` * * Complete list of shortcut methods: * @@ -369,7 +369,7 @@ function $HttpProvider() { * resolved with a rejection. * * - * <pre> + * ```js * // register the interceptor as a service * $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { * return { @@ -422,7 +422,7 @@ function $HttpProvider() { * } * }; * }); - * </pre> + * ``` * * # Response interceptors (DEPRECATED) * @@ -440,7 +440,7 @@ function $HttpProvider() { * injected with dependencies (if specified) and returns the interceptor — a function that * takes a {@link ng.$q promise} and returns the original or a new promise. * - * <pre> + * ```js * // register the interceptor as a service * $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { * return function(promise) { @@ -466,7 +466,7 @@ function $HttpProvider() { * // same as above * } * }); - * </pre> + * ``` * * * # Security Considerations @@ -490,15 +490,15 @@ function $HttpProvider() { * Angular will automatically strip the prefix before processing it as JSON. * * For example if your server needs to return: - * <pre> + * ```js * ['one','two'] - * </pre> + * ``` * * which is vulnerable to attack, your server can return: - * <pre> + * ```js * )]}', * ['one','two'] - * </pre> + * ``` * * Angular will strip the prefix, before processing the JSON. * diff --git a/src/ng/interpolate.js b/src/ng/interpolate.js index 0665fd25..abc54b43 100644 --- a/src/ng/interpolate.js +++ b/src/ng/interpolate.js @@ -99,11 +99,11 @@ function $InterpolateProvider() { * interpolation markup. * * - <pre> + ```js var $interpolate = ...; // injected var exp = $interpolate('Hello {{name | uppercase}}!'); expect(exp({name:'Angular'}).toEqual('Hello ANGULAR!'); - </pre> + ``` * * * @param {string} text The text with markup to interpolate. diff --git a/src/ng/parse.js b/src/ng/parse.js index f84c8fa7..043be76c 100644 --- a/src/ng/parse.js +++ b/src/ng/parse.js @@ -1091,7 +1091,7 @@ function getterFn(path, options, fullExp) { * * Converts Angular {@link guide/expression expression} into a function. * - * <pre> + * ```js * var getter = $parse('user.name'); * var setter = getter.assign; * var context = {user:{name:'angular'}}; @@ -1101,7 +1101,7 @@ function getterFn(path, options, fullExp) { * setter(context, 'newValue'); * expect(context.user.name).toEqual('newValue'); * expect(getter(context, locals)).toEqual('local'); - * </pre> + * ``` * * * @param {string} expression String expression to compile. diff --git a/src/ng/q.js b/src/ng/q.js index 38a63f53..09448fd4 100644 --- a/src/ng/q.js +++ b/src/ng/q.js @@ -15,7 +15,7 @@ * From the perspective of dealing with error handling, deferred and promise APIs are to * asynchronous programming what `try`, `catch` and `throw` keywords are to synchronous programming. * - * <pre> + * ```js * // for the purpose of this example let's assume that variables `$q`, `scope` and `okToGreet` * // are available in the current lexical scope (they could have been injected or passed in). * @@ -47,7 +47,7 @@ * }, function(update) { * alert('Got notification: ' + update); * }); - * </pre> + * ``` * * At first it might not be obvious why this extra complexity is worth the trouble. The payoff * comes in the way of guarantees that promise and deferred APIs make, see @@ -119,14 +119,14 @@ * Because calling the `then` method of a promise returns a new derived promise, it is easily * possible to create a chain of promises: * - * <pre> + * ```js * promiseB = promiseA.then(function(result) { * return result + 1; * }); * * // promiseB will be resolved immediately after promiseA is resolved and its value * // will be the result of promiseA incremented by 1 - * </pre> + * ``` * * It is possible to create chains of any length and since a promise can be resolved with another * promise (which will defer its resolution further), it is possible to pause/defer resolution of @@ -146,7 +146,7 @@ * * # Testing * - * <pre> + * ```js * it('should simulate promise', inject(function($q, $rootScope) { * var deferred = $q.defer(); * var promise = deferred.promise; @@ -166,7 +166,7 @@ * $rootScope.$apply(); * expect(resolvedValue).toEqual(123); * })); - * </pre> + * ``` */ function $QProvider() { @@ -357,7 +357,7 @@ function qFactory(nextTick, exceptionHandler) { * current promise, you have to "rethrow" the error by returning a rejection constructed via * `reject`. * - * <pre> + * ```js * promiseB = promiseA.then(function(result) { * // success: do something and resolve promiseB * // with the old or a new result @@ -372,7 +372,7 @@ function qFactory(nextTick, exceptionHandler) { * } * return $q.reject(reason); * }); - * </pre> + * ``` * * @param {*} reason Constant, message, exception or an object representing the rejection reason. * @returns {Promise} Returns a promise that was already resolved as rejected with the `reason`. diff --git a/src/ng/rootScope.js b/src/ng/rootScope.js index d5be52b0..6c2cf130 100644 --- a/src/ng/rootScope.js +++ b/src/ng/rootScope.js @@ -93,13 +93,13 @@ function $RootScopeProvider(){ * compiled HTML template is executed.) * * Here is a simple scope snippet to show how you can interact with the scope. - * <pre> + * ```html * <file src="./test/ng/rootScopeSpec.js" tag="docs1" /> - * </pre> + * ``` * * # Inheritance * A scope can inherit from a parent scope, as in this example: - * <pre> + * ```js var parent = $rootScope; var child = parent.$new(); @@ -110,7 +110,7 @@ function $RootScopeProvider(){ child.salutation = "Welcome"; expect(child.salutation).toEqual('Welcome'); expect(parent.salutation).toEqual('Hello'); - * </pre> + * ``` * * * @param {Object.<string, function()>=} providers Map of service factory which need to be @@ -244,7 +244,7 @@ function $RootScopeProvider(){ * * * # Example - * <pre> + * ```js // let's assume that scope was dependency injected as the $rootScope var scope = $rootScope; scope.name = 'misko'; @@ -293,7 +293,7 @@ function $RootScopeProvider(){ scope.$digest(); expect(scope.foodCounter).toEqual(1); - * </pre> + * ``` * * * @@ -372,7 +372,7 @@ function $RootScopeProvider(){ * * * # Example - * <pre> + * ```js $scope.names = ['igor', 'matias', 'misko', 'james']; $scope.dataCount = 4; @@ -391,7 +391,7 @@ function $RootScopeProvider(){ //now there's been a change expect($scope.dataCount).toEqual(3); - * </pre> + * ``` * * * @param {string|Function(scope)} obj Evaluated as {@link guide/expression expression}. The @@ -520,7 +520,7 @@ function $RootScopeProvider(){ * In unit tests, you may need to call `$digest()` to simulate the scope life cycle. * * # Example - * <pre> + * ```js var scope = ...; scope.name = 'misko'; scope.counter = 0; @@ -538,7 +538,7 @@ function $RootScopeProvider(){ scope.name = 'adam'; scope.$digest(); expect(scope.counter).toEqual(1); - * </pre> + * ``` * */ $digest: function() { @@ -717,14 +717,14 @@ function $RootScopeProvider(){ * expressions. * * # Example - * <pre> + * ```js var scope = ng.$rootScope.Scope(); scope.a = 1; scope.b = 2; expect(scope.$eval('a+b')).toEqual(3); expect(scope.$eval(function(scope){ return scope.a + scope.b; })).toEqual(3); - * </pre> + * ``` * * @param {(string|function())=} expression An angular expression to be executed. * @@ -800,7 +800,7 @@ function $RootScopeProvider(){ * ## Life cycle * * # Pseudo-Code of `$apply()` - * <pre> + * ```js function $apply(expr) { try { return $eval(expr); @@ -810,7 +810,7 @@ function $RootScopeProvider(){ $root.$digest(); } } - * </pre> + * ``` * * * Scope's `$apply()` method transitions through the following stages: diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index c257921b..fbf05162 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -37,7 +37,7 @@ * * Below is an example of how to apply animations to a directive that supports animation hooks: * - * <pre> + * ```html * <style type="text/css"> * .slide.ng-enter, .slide.ng-leave { * -webkit-transition:0.5s linear all; @@ -55,7 +55,7 @@ * to trigger the CSS transition/animations * --> * <ANY class="slide" ng-include="..."></ANY> - * </pre> + * ``` * * Keep in mind that if an animation is running, any child elements cannot be animated until the parent element's * animation has completed. @@ -67,7 +67,7 @@ * * The following code below demonstrates how to perform animations using **CSS transitions** with Angular: * - * <pre> + * ```html * <style type="text/css"> * /* * The animate class is apart of the element and the ng-enter class @@ -95,11 +95,11 @@ * <div class="view-container"> * <div ng-view class="reveal-animation"></div> * </div> - * </pre> + * ``` * * The following code below demonstrates how to perform animations using **CSS animations** with Angular: * - * <pre> + * ```html * <style type="text/css"> * .reveal-animation.ng-enter { * -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */ @@ -118,7 +118,7 @@ * <div class="view-container"> * <div ng-view class="reveal-animation"></div> * </div> - * </pre> + * ``` * * Both CSS3 animations and transitions can be used together and the animate service will figure out the correct duration and delay timing. * @@ -136,7 +136,7 @@ * the animation. The style property expected within the stagger class can either be a **transition-delay** or an * **animation-delay** property (or both if your animation contains both transitions and keyframe animations). * - * <pre> + * ```css * .my-animation.ng-enter { * /* standard transition code */ * -webkit-transition: 1s linear all; @@ -157,7 +157,7 @@ * /* standard transition styles */ * opacity:1; * } - * </pre> + * ``` * * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this @@ -166,7 +166,7 @@ * * The following code will issue the **ng-leave-stagger** event on the element provided: * - * <pre> + * ```js * var kids = parent.children(); * * $animate.leave(kids[0]); //stagger index=0 @@ -180,7 +180,7 @@ * $animate.leave(kids[5]); //stagger index=0 * $animate.leave(kids[6]); //stagger index=1 * }, 100, false); - * </pre> + * ``` * * Stagger animations are currently only supported within CSS-defined animations. * @@ -188,7 +188,7 @@ * In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations on browsers that do not * yet support CSS transitions/animations, then you can make use of JavaScript animations defined inside of your AngularJS module. * - * <pre> + * ```js * //!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application. * var ngModule = angular.module('YourApp', ['ngAnimate']); * ngModule.animation('.my-crazy-animation', function() { @@ -217,7 +217,7 @@ * removeClass: function(element, className, done) { } * }; * }); - * </pre> + * ``` * * JavaScript-defined animations are created with a CSS-like class selector and a collection of events which are set to run * a javascript callback function. When an animation is triggered, $animate will look for a matching animation which fits diff --git a/src/ngMock/angular-mocks.js b/src/ngMock/angular-mocks.js index 1c276f29..fe25254f 100644 --- a/src/ngMock/angular-mocks.js +++ b/src/ngMock/angular-mocks.js @@ -195,7 +195,7 @@ angular.mock.$Browser.prototype = { * information. * * - * <pre> + * ```js * describe('$exceptionHandlerProvider', function() { * * it('should capture log messages and exceptions', function() { @@ -216,7 +216,7 @@ angular.mock.$Browser.prototype = { * }); * }); * }); - * </pre> + * ``` */ angular.mock.$ExceptionHandlerProvider = function() { @@ -327,10 +327,10 @@ angular.mock.$LogProvider = function() { * Array of messages logged using {@link ngMock.$log#log}. * * @example - * <pre> + * ```js * $log.log('Some Log'); * var first = $log.log.logs.unshift(); - * </pre> + * ``` */ $log.log.logs = []; /** @@ -341,10 +341,10 @@ angular.mock.$LogProvider = function() { * Array of messages logged using {@link ngMock.$log#info}. * * @example - * <pre> + * ```js * $log.info('Some Info'); * var first = $log.info.logs.unshift(); - * </pre> + * ``` */ $log.info.logs = []; /** @@ -355,10 +355,10 @@ angular.mock.$LogProvider = function() { * Array of messages logged using {@link ngMock.$log#warn}. * * @example - * <pre> + * ```js * $log.warn('Some Warning'); * var first = $log.warn.logs.unshift(); - * </pre> + * ``` */ $log.warn.logs = []; /** @@ -369,10 +369,10 @@ angular.mock.$LogProvider = function() { * Array of messages logged using {@link ngMock.$log#error}. * * @example - * <pre> + * ```js * $log.error('Some Error'); * var first = $log.error.logs.unshift(); - * </pre> + * ``` */ $log.error.logs = []; /** @@ -383,10 +383,10 @@ angular.mock.$LogProvider = function() { * Array of messages logged using {@link ngMock.$log#debug}. * * @example - * <pre> + * ```js * $log.debug('Some Error'); * var first = $log.debug.logs.unshift(); - * </pre> + * ``` */ $log.debug.logs = []; }; @@ -606,7 +606,7 @@ function padNumber(num, digits, trim) { * incomplete we might be missing some non-standard methods. This can result in errors like: * "Date.prototype.foo called on incompatible Object". * - * <pre> + * ```js * var newYearInBratislava = new TzDate(-1, '2009-12-31T23:00:00Z'); * newYearInBratislava.getTimezoneOffset() => -60; * newYearInBratislava.getFullYear() => 2010; @@ -615,7 +615,7 @@ function padNumber(num, digits, trim) { * newYearInBratislava.getHours() => 0; * newYearInBratislava.getMinutes() => 0; * newYearInBratislava.getSeconds() => 0; - * </pre> + * ``` * */ angular.mock.TzDate = function (offset, timestamp) { @@ -961,7 +961,7 @@ angular.mock.dump = function(object) { * The following code shows how to setup and use the mock backend when unit testing a controller. * First we create the controller under test: * - <pre> + ```js // The controller code function MyController($scope, $http) { var authToken; @@ -982,11 +982,11 @@ angular.mock.dump = function(object) { }); }; } - </pre> + ``` * * Now we setup the mock backend and create the test specs: * - <pre> + ```js // testing controller describe('MyController', function() { var $httpBackend, $rootScope, createController; @@ -1052,7 +1052,7 @@ angular.mock.dump = function(object) { $httpBackend.flush(); }); }); - </pre> + ``` */ angular.mock.$HttpBackendProvider = function() { this.$get = ['$rootScope', createHttpBackendMock]; @@ -1441,9 +1441,9 @@ function createHttpBackendMock($rootScope, $delegate, $browser) { * Typically, you would call this method following each test case that asserts requests using an * "afterEach" clause. * - * <pre> + * ```js * afterEach($httpBackend.verifyNoOutstandingExpectation); - * </pre> + * ``` */ $httpBackend.verifyNoOutstandingExpectation = function() { $rootScope.$digest(); @@ -1462,9 +1462,9 @@ function createHttpBackendMock($rootScope, $delegate, $browser) { * Typically, you would call this method following each test case that asserts requests using an * "afterEach" clause. * - * <pre> + * ```js * afterEach($httpBackend.verifyNoOutstandingRequest); - * </pre> + * ``` */ $httpBackend.verifyNoOutstandingRequest = function() { if (responses.length) { @@ -1726,7 +1726,7 @@ angular.module('ngMockE2E', ['ng']).config(['$provide', function($provide) { * To setup the application to run with this http backend, you have to create a module that depends * on the `ngMockE2E` and your application modules and defines the fake backend: * - * <pre> + * ```js * myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']); * myAppDev.run(function($httpBackend) { * phones = [{name: 'phone1'}, {name: 'phone2'}]; @@ -1741,7 +1741,7 @@ angular.module('ngMockE2E', ['ng']).config(['$provide', function($provide) { * $httpBackend.whenGET(/^\/templates\//).passThrough(); * //... * }); - * </pre> + * ``` * * Afterwards, bootstrap your app with this new module. */ @@ -2010,7 +2010,7 @@ if(window.jasmine || window.mocha) { * * ## Example * Example of what a typical jasmine tests looks like with the inject method. - * <pre> + * ```js * * angular.module('myApplicationModule', []) * .value('mode', 'app') @@ -2044,7 +2044,7 @@ if(window.jasmine || window.mocha) { * }); * }); * - * </pre> + * ``` * * @param {...Function} fns any number of functions which will be injected using the injector. */ diff --git a/src/ngResource/resource.js b/src/ngResource/resource.js index a75aab61..2ee9cbbc 100644 --- a/src/ngResource/resource.js +++ b/src/ngResource/resource.js @@ -156,13 +156,13 @@ function shallowClearAndCopy(src, dst) { * instance of the resource class. The actions `save`, `remove` and `delete` are available on it * as methods with the `$` prefix. This allows you to easily perform CRUD operations (create, * read, update, delete) on server-side data like this: - * <pre> + * ```js var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}, function() { user.abc = true; user.$save(); }); - </pre> + ``` * * It is important to realize that invoking a $resource object method immediately returns an * empty reference (object or array depending on `isArray`). Once the data is returned from the @@ -206,7 +206,7 @@ function shallowClearAndCopy(src, dst) { * * # Credit card resource * - * <pre> + * ```js // Define CreditCard class var CreditCard = $resource('/user/:userId/card/:cardId', {userId:123, cardId:'@id'}, { @@ -239,7 +239,7 @@ function shallowClearAndCopy(src, dst) { // POST: /user/123/card {number:'0123', name:'Mike Smith'} // server returns: {id:789, number:'0123', name: 'Mike Smith'}; expect(newCard.id).toEqual(789); - * </pre> + * ``` * * The object returned from this function execution is a resource "class" which has "static" method * for each action in the definition. @@ -250,19 +250,19 @@ function shallowClearAndCopy(src, dst) { * all of the non-GET methods are available with `$` prefix. This allows you to easily support CRUD * operations (create, read, update, delete) on server-side data. - <pre> + ```js var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}, function() { user.abc = true; user.$save(); }); - </pre> + ``` * * It's worth noting that the success callback for `get`, `query` and other methods gets passed * in the response that came from the server as well as $http header getter function, so one * could rewrite the above example and get access to http headers as: * - <pre> + ```js var User = $resource('/user/:userId', {userId:'@id'}); User.get({userId:123}, function(u, getResponseHeaders){ u.abc = true; @@ -271,11 +271,11 @@ function shallowClearAndCopy(src, dst) { //putResponseHeaders => $http header getter }); }); - </pre> + ``` * # Creating a custom 'PUT' request * In this example we create a custom method on our resource to make a PUT request - * <pre> + * ```js * var app = angular.module('app', ['ngResource', 'ngRoute']); * * // Some APIs expect a PUT request in the format URL/object/ID @@ -300,7 +300,7 @@ function shallowClearAndCopy(src, dst) { * * // This will PUT /notes/ID with the note object in the request payload * }]); - * </pre> + * ``` */ angular.module('ngResource', ['ng']). factory('$resource', ['$http', '$q', function($http, $q) { diff --git a/src/ngRoute/routeParams.js b/src/ngRoute/routeParams.js index 977a26bc..81347bae 100644 --- a/src/ngRoute/routeParams.js +++ b/src/ngRoute/routeParams.js @@ -27,14 +27,14 @@ ngRouteModule.provider('$routeParams', $RouteParamsProvider); * Instead you can use `$route.current.params` to access the new route's parameters. * * @example - * <pre> + * ```js * // Given: * // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby * // Route: /Chapter/:chapterId/Section/:sectionId * // * // Then * $routeParams ==> {chapterId:1, sectionId:2, search:'moby'} - * </pre> + * ``` */ function $RouteParamsProvider() { this.$get = function() { return {}; }; |