Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(tutorial): update examples to show best practices

Browse source 
Closes #4256, #4255, #4254, #4253, #4250, #4092
This commit is contained in:
James Dunn 2013-10-03 10:16:44 +01:00 committed by Pete Bacon Darwin
parent d3fcacedd6
commit 575f63ac50
6 changed files with 24 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/content/tutorial/step_02.ngdoc
View file

@ -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>

6
docs/content/tutorial/step_04.ngdoc
View file

@ -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

8
docs/content/tutorial/step_07.ngdoc
View file

@ -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>

7
docs/content/tutorial/step_08.ngdoc
View file

@ -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

7
docs/content/tutorial/step_10.ngdoc
View file

@ -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

16
docs/content/tutorial/step_11.ngdoc
View file

@ -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'];
function PhoneDetailCtrl($scope, $routeParams, Phone) {
myApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($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: