docs(tutorial): update examples to show best practices

Closes #4256, #4255, #4254, #4253, #4250, #4092

docs/content/tutorial/step_02.ngdoc

@@ -74,7 +74,10 @@ the `PhoneListCtrl` __controller__:
 
 __`app/js/controllers.js`:__
 <pre>
-function PhoneListCtrl($scope) {
+
+var myApp = angular.module('myApp',[]);
+ 
+myApp.controller('PhoneListCtrl', ['$scope', function($scope) {
   $scope.phones = [
     {"name": "Nexus S",
      "snippet": "Fast just got faster with Nexus S."},
@@ -83,7 +86,8 @@ function PhoneListCtrl($scope) {
     {"name": "MOTOROLA XOOM™",
      "snippet": "The Next, Next Generation tablet."}
   ];
-}
+}]);
+
 </pre>
 
 

docs/content/tutorial/step_04.ngdoc

@@ -65,7 +65,9 @@ necessary!
 
 __`app/js/controllers.js`:__
 <pre>
-function PhoneListCtrl($scope) {
+var myApp = angular.module('myApp',[]);
+
+myApp.controller('PhoneListCtrl', ['$scope', function($scope) {
   $scope.phones = [
     {"name": "Nexus S",
      "snippet": "Fast just got faster with Nexus S.",
@@ -79,7 +81,7 @@ function PhoneListCtrl($scope) {
   ];
 
   $scope.orderProp = 'age';
-}
+}]);
 </pre>
 
 * We modified the `phones` model - the array of phones - and added an `age` property to each phone

docs/content/tutorial/step_07.ngdoc

@@ -69,7 +69,7 @@ both module systems can live side by side and fulfil their goals.
 
 __`app/js/app.js`:__
 <pre>
-angular.module('phonecat', []).
+var myApp = angular.module('phonecat', []).
   config(['$routeProvider', function($routeProvider) {
   $routeProvider.
       when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
@@ -124,11 +124,9 @@ __`app/index.html`:__
 __`app/js/controllers.js`:__
 <pre>
 ...
-function PhoneDetailCtrl($scope, $routeParams) {
+myApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
   $scope.phoneId = $routeParams.phoneId;
-}
+}]);
-
-//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];
 </pre>
 
 

docs/content/tutorial/step_08.ngdoc

@@ -61,13 +61,12 @@ the same way as the phone list controller.
 
 __`app/js/controllers.js`:__
 <pre>
-function PhoneDetailCtrl($scope, $routeParams, $http) {
+var myApp = angular.module('myApp',[]);
+myApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
   $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
     $scope.phone = data;
   });
-}
+}]);
-
-//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
 </pre>
 
 To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current

docs/content/tutorial/step_10.ngdoc

@@ -25,7 +25,8 @@ GitHub}:
 __`app/js/controllers.js`:__
 <pre>
 ...
-function PhoneDetailCtrl($scope, $routeParams, $http) {
+var myApp = angular.module('myApp',[]);
+myApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
   $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
     $scope.phone = data;
     $scope.mainImageUrl = data.images[0];
@@ -34,9 +35,7 @@ function PhoneDetailCtrl($scope, $routeParams, $http) {
   $scope.setImage = function(imageUrl) {
     $scope.mainImageUrl = imageUrl;
   }
-}
+}]);
-
-//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
 </pre>
 
 In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its

docs/content/tutorial/step_11.ngdoc

@@ -39,7 +39,7 @@ __`app/index.html`.__
 
 __`app/js/services.js`.__
 <pre>
-angular.module('phonecatServices', ['ngResource']).
+var myApp = angular.module('phonecatServices', ['ngResource']).
     factory('Phone', function($resource){
   return $resource('phones/:phoneId.json', {}, {
     query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
@@ -79,16 +79,12 @@ __`app/js/controllers.js`.__
 <pre>
 ...
 
-function PhoneListCtrl($scope, Phone) {
+myApp.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
   $scope.phones = Phone.query();
   $scope.orderProp = 'age';
-}
+}]);
 
-//PhoneListCtrl.$inject = ['$scope', 'Phone'];
+myApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($scope, $routeParams, Phone) {
-
-
-
-function PhoneDetailCtrl($scope, $routeParams, Phone) {
   $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
     $scope.mainImageUrl = phone.images[0];
   });
@@ -96,9 +92,7 @@ function PhoneDetailCtrl($scope, $routeParams, Phone) {
   $scope.setImage = function(imageUrl) {
     $scope.mainImageUrl = imageUrl;
   }
-}
+}]);
-
-//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
 </pre>
 
 Notice how in `PhoneListCtrl` we replaced: