diff options
Diffstat (limited to 'docs/content/tutorial')
| -rw-r--r-- | docs/content/tutorial/step_00.ngdoc | 5 | ||||
| -rw-r--r-- | docs/content/tutorial/step_01.ngdoc | 5 | ||||
| -rw-r--r-- | docs/content/tutorial/step_02.ngdoc | 20 | ||||
| -rw-r--r-- | docs/content/tutorial/step_03.ngdoc | 14 | ||||
| -rw-r--r-- | docs/content/tutorial/step_04.ngdoc | 20 | ||||
| -rw-r--r-- | docs/content/tutorial/step_05.ngdoc | 44 | ||||
| -rw-r--r-- | docs/content/tutorial/step_06.ngdoc | 15 | ||||
| -rw-r--r-- | docs/content/tutorial/step_07.ngdoc | 34 | ||||
| -rw-r--r-- | docs/content/tutorial/step_08.ngdoc | 25 | ||||
| -rw-r--r-- | docs/content/tutorial/step_09.ngdoc | 25 | ||||
| -rw-r--r-- | docs/content/tutorial/step_10.ngdoc | 15 | ||||
| -rw-r--r-- | docs/content/tutorial/step_11.ngdoc | 25 | ||||
| -rw-r--r-- | docs/content/tutorial/step_12.ngdoc | 59 |
13 files changed, 181 insertions, 125 deletions
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 |