docs(tutorial): fix style across tutorial steps

author: Brian Ford 2013-10-08 10:45:00 -0700
committer: Brian Ford 2013-10-08 10:49:33 -0700
commit: 556e8eece69b93b89c6ae1cc4cb86d08994a0dfc (patch)
tree: e797331ff844daf220327f43a0ad5a0a0bbe64f0 /docs/content/tutorial
parent: d769b8b8f0fba81b35e441249e31e7e209d40580 (diff)
download: angular.js-556e8eece69b93b89c6ae1cc4cb86d08994a0dfc.tar.bz2
5 files changed, 58 insertions, 53 deletions
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc
index 16dbe366..539c541b 100644
--- a/docs/content/tutorial/step_02.ngdoc
+++ b/docs/content/tutorial/step_02.ngdoc
@@ -79,28 +79,27 @@ the `PhoneListCtrl` __controller__. The __controller__ is simply a constructor f
 __`app/js/controllers.js`:__
 <pre>
 
-function PhoneListCtrl($scope) {
+var phonecatApp = angular.module('phonecatApp', []);
+
+phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
   $scope.phones = [
-    {"name": "Nexus S",
-     "snippet": "Fast just got faster with Nexus S."},
-    {"name": "Motorola XOOM™ with Wi-Fi",
-     "snippet": "The Next, Next Generation tablet."},
-    {"name": "MOTOROLA XOOM™",
-     "snippet": "The Next, Next Generation tablet."}
+    {'name': 'Nexus S',
+     'snippet': 'Fast just got faster with Nexus S.'},
+    {'name': 'Motorola XOOM™ with Wi-Fi',
+     'snippet': 'The Next, Next Generation tablet.'},
+    {'name': 'MOTOROLA XOOM™',
+     'snippet': 'The Next, Next Generation tablet.'}
   ];
-}
-
-var phonecatApp = angular.module('phonecatApp',[]);
-phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
+});
 
 </pre>
 
-Here we have declared a controller called __PhoneListCtrl__ and registered it in an AngularJS
+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`
 module name as the module to load when bootstrapping the Angular application.
 
-Although the controller is not yet doing very much controlling, it is playing a crucial role. By
-providing context for our data model, the controller allows us to establish data-binding between
+Although the controller is not yet doing very much, it plays a crucial role. By providing context
+for our data model, the controller allows us to establish data-binding between
 the model and the view. We connected the dots between the presentation, data, and logic components
 as follows:
 
diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc
index 8cf429e1..2e92cfb2 100644
--- a/docs/content/tutorial/step_04.ngdoc
+++ b/docs/content/tutorial/step_04.ngdoc
@@ -65,25 +65,20 @@ necessary!
 
 __`app/js/controllers.js`:__
 <pre>
-function PhoneListCtrl($scope) {
+var phonecatApp = angular.module('phonecatApp', []);
+
+phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
   $scope.phones = [
-    {"name": "Nexus S",
-     "snippet": "Fast just got faster with Nexus S.",
-     "age": 0},
-    {"name": "Motorola XOOM™ with Wi-Fi",
-     "snippet": "The Next, Next Generation tablet.",
-     "age": 1},
-    {"name": "MOTOROLA XOOM™",
-     "snippet": "The Next, Next Generation tablet.",
-     "age": 2}
+    {'name': 'Nexus S',
+     'snippet': 'Fast just got faster with Nexus S.'},
+    {'name': 'Motorola XOOM™ with Wi-Fi',
+     'snippet': 'The Next, Next Generation tablet.'},
+    {'name': 'MOTOROLA XOOM™',
+     'snippet': 'The Next, Next Generation tablet.'}
   ];
 
   $scope.orderProp = 'age';
-}
-
-var phonecatApp = angular.module('phonecatApp',[]);
-phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
-
+});
 </pre>
 
 * We modified the `phones` model - the array of phones - and added an `age` property to each phone
diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc
index 36d4748c..80c7a96f 100644
--- a/docs/content/tutorial/step_05.ngdoc
+++ b/docs/content/tutorial/step_05.ngdoc
@@ -54,16 +54,15 @@ components themselves, but by the DI subsystem).
 
 __`app/js/controllers.js:`__
 <pre>
-function PhoneListCtrl($scope, $http) {
+var phonecatApp = angular.module('phonecatApp', []);
+
+phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
   $http.get('phones/phones.json').success(function(data) {
     $scope.phones = data;
   });
 
   $scope.orderProp = 'age';
-}
-
-var phonecatApp = angular.module('phonecatApp',[]);
-phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
+});
 </pre>
 
 `$http` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is
@@ -107,7 +106,7 @@ constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minific
 minify} the JavaScript code for `PhoneListCtrl` controller, all of its function arguments would be
 minified as well, and the dependency injector would not be able to identify services correctly.
 
-There are two ways to overcome issues caused by minification.
+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.
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index a4ca18ed..40e22dfc 100644
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -27,16 +27,16 @@ urls point to the `app/img/phones/` directory.
 
 __`app/phones/phones.json`__ (sample snippet):
 <pre>
- [
+[
   {
-   ...
-   "id": "motorola-defy-with-motoblur",
-   "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
-   "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
-   ...
+    ...
+    "id": "motorola-defy-with-motoblur",
+    "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
+    "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
+    ...
   },
- ...
- ]
+  ...
+]
 </pre>
 
 
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
index 76074417..126b30a8 100644
--- a/docs/content/tutorial/step_07.ngdoc
+++ b/docs/content/tutorial/step_07.ngdoc
@@ -69,13 +69,23 @@ both module systems can live side by side and fulfil their goals.
 
 __`app/js/app.js`:__
 <pre>
-var phonecatApp = angular.module('phonecatApp', []).
-  config(['$routeProvider', function($routeProvider) {
-  $routeProvider.
-      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
-      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
-      otherwise({redirectTo: '/phones'});
-}]);
+var phonecatApp = angular.module('phonecatApp', ['phonecatFilters']);
+
+phonecatApp.config(['$routeProvider',
+  function($routeProvider) {
+    $routeProvider.
+      when('/phones', {
+        templateUrl: 'partials/phone-list.html',
+        controller: 'PhoneListCtrl'
+      }).
+      when('/phones/:phoneId', {
+        templateUrl: 'partials/phone-detail.html',
+        controller: 'PhoneDetailCtrl'
+      }).
+      otherwise({
+        redirectTo: '/phones'
+      });
+  }]);
 </pre>
 
 In order to configure our application with routes, we need to create a module for our application.
@@ -124,9 +134,10 @@ __`app/index.html`:__
 __`app/js/controllers.js`:__
 <pre>
 ...
-phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
-  $scope.phoneId = $routeParams.phoneId;
-}]);
+phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
+  function($scope, $routeParams) {
+    $scope.phoneId = $routeParams.phoneId;
+  }]);
 </pre>
 
 
@@ -251,6 +262,7 @@ the same binding into the `phone-list.html` template, the binding will work as e
 inheritance and model property shadowing do some wonders.
 </div>
 
+
 # Summary
 
 With the routing set up and the phone list view implemented, we're ready to go to {@link step_08
author	Brian Ford	2013-10-08 10:45:00 -0700
committer	Brian Ford	2013-10-08 10:49:33 -0700
commit	556e8eece69b93b89c6ae1cc4cb86d08994a0dfc (patch)
tree	e797331ff844daf220327f43a0ad5a0a0bbe64f0 /docs/content/tutorial
parent	d769b8b8f0fba81b35e441249e31e7e209d40580 (diff)
download	angular.js-556e8eece69b93b89c6ae1cc4cb86d08994a0dfc.tar.bz2