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

docs(tutorial/step05): fix formatting, use DI annotations in example code

Browse source
This commit is contained in:
Brian Ford 2013-10-11 15:57:42 -07:00
parent 989ca61a61
commit 08ba91364d
1 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,8 +6,8 @@
Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
from our server using one of angular's built-in {@link api/ng services} called {@link from our server using one of Angular's built-in {@link api/ng services} called {@link
api/ng.$http $http}. We will use angular's {@link guide/di dependency api/ng.$http $http}. We will use Angular's {@link guide/di dependency
injection (DI)} to provide the service to the `PhoneListCtrl` controller. injection (DI)} to provide the service to the `PhoneListCtrl` controller.
@ -42,12 +42,12 @@ Following is a sample of the file:
## Controller ## Controller
We'll use angular's {@link api/ng.$http $http} service in our controller to make an HTTP We'll use Angular's {@link api/ng.$http $http} service in our controller to make an HTTP
request to your web server to fetch the data in the `app/phones/phones.json` file. `$http` is just request to your web server to fetch the data in the `app/phones/phones.json` file. `$http` is just
one of several built-in {@link guide/dev_guide.services angular services} that handle common operations one of several built-in {@link guide/dev_guide.services angular services} that handle common operations
in web apps. Angular injects these services for you where you need them. in web apps. Angular injects these services for you where you need them.
Services are managed by angular's {@link guide/di DI subsystem}. Dependency injection Services are managed by Angular's {@link guide/di DI subsystem}. Dependency injection
helps to make your web apps both well-structured (e.g., separate components for presentation, data, helps to make your web apps both well-structured (e.g., separate components for presentation, data,
and control) and loosely coupled (dependencies between components are not resolved by the and control) and loosely coupled (dependencies between components are not resolved by the
components themselves, but by the DI subsystem). components themselves, but by the DI subsystem).
@ -56,7 +56,7 @@ __`app/js/controllers.js:`__
<pre> <pre>
var phonecatApp = angular.module('phonecatApp', []); var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) { phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) { $http.get('phones/phones.json').success(function(data) {
$scope.phones = data; $scope.phones = data;
}); });
@ -92,16 +92,22 @@ dependencies.
<img class="diagram" src="img/tutorial/xhr_service_final.png"> <img class="diagram" src="img/tutorial/xhr_service_final.png">
### '$' Prefix Naming Convention ### `$` Prefix Naming Convention
You can create your own services, and in fact we will do exactly that in step 11. As a naming You can create your own services, and in fact we will do exactly that in step 11. As a naming
convention, angular's built-in services, Scope methods and a few other angular APIs have a '$' convention, angular's built-in services, Scope methods and a few other Angular APIs have a `$`
prefix in front of the name. Don't use a '$' prefix when naming your services and models, in order prefix in front of the name.
to avoid any possible naming collisions.
The `$` prefix is there to namespace Angular-provided services.
It's best to avoid naming your services and models anything that begins with a `$` to avoid
If you inspect a Scope, you may also notice some properties that begin with `$$`. These
properties are considered private, and should not be accessed or modified.
### A Note on Minification ### A Note on Minification
Since angular infers the controller's dependencies from the names of arguments to the controller's Since Angular infers the controller's dependencies from the names of arguments to the controller's
constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minification_(programming) constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minification_(programming)
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.
@ -131,6 +137,23 @@ anonymous function when registering the controller:
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]); phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);
From this point onward, we're going to use the inline method in the tutorial. With that in mind,
let's add the annotations to our `PhoneListCtrl`:
__`app/js/controllers.js:`__
<pre>
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
</pre>
## Test ## Test
__`test/unit/controllersSpec.js`:__ __`test/unit/controllersSpec.js`:__
@ -192,7 +215,7 @@ native APIs and the global state associated with them — both of which make tes
HTTP request and tell it what to respond with. Note that the responses are not returned until we call HTTP request and tell it what to respond with. Note that the responses are not returned until we call
the `$httpBackend.flush` method. the `$httpBackend.flush` method.
Now, we will make assertions to verify that the `phones` model doesn't exist on `scope` before Now we will make assertions to verify that the `phones` model doesn't exist on `scope` before
the response is received: the response is received:
<pre> <pre>
@ -230,7 +253,7 @@ You should now see the following output in the Karma tab:
displayed in json format. displayed in json format.
* In the `PhoneListCtrl` controller, pre-process the http response by limiting the number of phones * In the `PhoneListCtrl` controller, pre-process the http response by limiting the number of phones
to the first 5 in the list. Use the following code in the $http callback: to the first 5 in the list. Use the following code in the `$http` callback:
$scope.phones = data.splice(0, 5); $scope.phones = data.splice(0, 5);