From 556e8eece69b93b89c6ae1cc4cb86d08994a0dfc Mon Sep 17 00:00:00 2001 From: Brian Ford Date: Tue, 8 Oct 2013 10:45:00 -0700 Subject: docs(tutorial): fix style across tutorial steps --- docs/content/tutorial/step_02.ngdoc | 27 +++++++++++++-------------- docs/content/tutorial/step_04.ngdoc | 25 ++++++++++--------------- docs/content/tutorial/step_05.ngdoc | 11 +++++------ docs/content/tutorial/step_06.ngdoc | 16 ++++++++-------- docs/content/tutorial/step_07.ngdoc | 32 ++++++++++++++++++++++---------- 5 files changed, 58 insertions(+), 53 deletions(-) (limited to 'docs/content/tutorial') 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`:__ 
 
-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);
+});
-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 `` 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`:__ 
-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);
-
+});
* 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:`__ 
-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);
+});
`$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): 
- [
+[
   {
-   ...
-   "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",
+    ...
   },
- ...
- ]
+  ...
+]
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`:__ 
-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'
+      });
+  }]);
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`:__ 
 ...
-phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
-  $scope.phoneId = $routeParams.phoneId;
-}]);
+phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
+  function($scope, $routeParams) {
+    $scope.phoneId = $routeParams.phoneId;
+  }]);
@@ -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. + # Summary With the routing set up and the phone list view implemented, we're ready to go to {@link step_08 -- cgit v1.2.3