Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-10 07:44:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(tutorial): fix style across tutorial steps

Browse source
This commit is contained in:
Brian Ford 2013-10-08 10:45:00 -07:00
parent d769b8b8f0
commit 556e8eece6
5 changed files with 59 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -79,28 +79,27 @@ the `PhoneListCtrl` __controller__. The __controller__ is simply a constructor f
__`app/js/controllers.js`:__ __`app/js/controllers.js`:__
<pre> <pre>
function PhoneListCtrl($scope) { var phonecatApp = angular.module('phonecatApp', []);
$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."}
];
}
var phonecatApp = angular.module('phonecatApp',[]); phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl); $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.'}
];
});
</pre> </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, `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. 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 Although the controller is not yet doing very much, it plays a crucial role. By providing context
providing context for our data model, the controller allows us to establish data-binding between 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 the model and the view. We connected the dots between the presentation, data, and logic components
as follows: as follows:

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

@ -65,25 +65,20 @@ necessary!
__`app/js/controllers.js`:__ __`app/js/controllers.js`:__
<pre> <pre>
function PhoneListCtrl($scope) { var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
$scope.phones = [ $scope.phones = [
{"name": "Nexus S", {'name': 'Nexus S',
"snippet": "Fast just got faster with Nexus S.", 'snippet': 'Fast just got faster with Nexus S.'},
"age": 0}, {'name': 'Motorola XOOM™ with Wi-Fi',
{"name": "Motorola XOOM™ with Wi-Fi", 'snippet': 'The Next, Next Generation tablet.'},
"snippet": "The Next, Next Generation tablet.", {'name': 'MOTOROLA XOOM™',
"age": 1}, 'snippet': 'The Next, Next Generation tablet.'}
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
]; ];
$scope.orderProp = 'age'; $scope.orderProp = 'age';
} });
var phonecatApp = angular.module('phonecatApp',[]);
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
</pre> </pre>
* We modified the `phones` model - the array of phones - and added an `age` property to each phone * We modified the `phones` model - the array of phones - and added an `age` property to each phone

11
docs/content/tutorial/step_05.ngdoc
View file

@ -54,16 +54,15 @@ components themselves, but by the DI subsystem).
__`app/js/controllers.js:`__ __`app/js/controllers.js:`__
<pre> <pre>
function PhoneListCtrl($scope, $http) { var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
$http.get('phones/phones.json').success(function(data) { $http.get('phones/phones.json').success(function(data) {
$scope.phones = data; $scope.phones = data;
}); });
$scope.orderProp = 'age'; $scope.orderProp = 'age';
} });
var phonecatApp = angular.module('phonecatApp',[]);
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
</pre> </pre>
`$http` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is `$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 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. 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. * 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. Each string in the array is the name of the service to inject for the corresponding parameter.

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

@ -27,16 +27,16 @@ urls point to the `app/img/phones/` directory.
__`app/phones/phones.json`__ (sample snippet): __`app/phones/phones.json`__ (sample snippet):
<pre> <pre>
[ [
{ {
... ...
"id": "motorola-defy-with-motoblur", "id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
... ...
}, },
... ...
] ]
</pre> </pre>

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

@ -69,13 +69,23 @@ both module systems can live side by side and fulfil their goals.
__`app/js/app.js`:__ __`app/js/app.js`:__
<pre> <pre>
var phonecatApp = angular.module('phonecatApp', []). var phonecatApp = angular.module('phonecatApp', ['phonecatFilters']);
config(['$routeProvider', function($routeProvider) {
$routeProvider. phonecatApp.config(['$routeProvider',
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). function($routeProvider) {
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). $routeProvider.
otherwise({redirectTo: '/phones'}); when('/phones', {
}]); templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
</pre> </pre>
In order to configure our application with routes, we need to create a module for our application. 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`:__ __`app/js/controllers.js`:__
<pre> <pre>
... ...
phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) { phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
$scope.phoneId = $routeParams.phoneId; function($scope, $routeParams) {
}]); $scope.phoneId = $routeParams.phoneId;
}]);
</pre> </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. inheritance and model property shadowing do some wonders.
</div> </div>
# Summary # Summary
With the routing set up and the phone list view implemented, we're ready to go to {@link step_08 With the routing set up and the phone list view implemented, we're ready to go to {@link step_08