AngularJs--XHRs & Dependency Injection

标签：angularjs   web开发   模块化   前端   

本文摘录并解释 AngularJs 引导片段-5 里面的一些重要片段。

The app/phones/phones.json file in your project is a dataset that contains a larger list of phones stored in the JSON format.

Following is a sample of the file:

[
{
 "age": 13,
 "id": "motorola-defy-with-motoblur",
 "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
 "snippet": "Are you ready for everything life throws your way?"
 ...
},
...
]

上面是一个json格式的数据。angularjs提倡web开发的模块化。后台的职责只能是接受请求并处理，最后以一定的格式返回给前端的js代码。这里推荐用 json 因为 ng（angularjs 简称，以下都用ng代替）能自动识别并将json文件打包成一个对象直接拿来使用。

We‘ll use Angular‘s $http service in our controller to make an HTTP request to your web server to fetch the data in theapp/phones/phones.json file. $http is just one of several built-in Angular services that handle common operations in web apps. Angular injects these services for you where you need them.

这里主要是说明 $http 是一个内置的服务，也就是库函数，主要用于向服务器发起http请求。至于你怎么拿到这个库函数，大致上可以分成四个步骤【1】编译器得到函数参数【2】将参数作为服务名进行搜索【3】若找到响应的服务，检测该服务是否已经生成实例【4】如果没有实例，生成一个新的实例。如果已经有了，那么返回这个实例。（单例模式）

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

app/js/controllers.js:

var phonecatApp = angular.module(‘phonecatApp‘, []);

phonecatApp.controller(‘PhoneListCtrl‘, function ($scope, $http) {
  $http.get(‘phones/phones.json‘).success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = ‘age‘;
});

$http makes an HTTP GET request to our web server, asking for phones/phones.json (the url is relative to our index.html file). The server responds by providing the data in the json file.

The $http service returns a promise object with a success method. We call this method to handle the asynchronous response and assign the phone data to the scope controlled by this controller, as a model called phones. Notice that Angular detected the json response and parsed it for us!

To use a service in Angular, you simply declare the names of the dependencies you need as arguments to the controller‘s constructor function, as follows:

phonecatApp.controller(‘PhoneListCtrl‘, function ($scope, $http) {...}

Angular‘s dependency injector provides services to your controller when the controller is being constructed. The dependency injector also takes care of creating any transitive dependencies the service may have (services often depend upon other services).

Note that the names of arguments are significant, because the injector uses these to look up the dependencies.

这里主要说明 $http 这个服务在成功接受数据后会调用一个回调的方法，因为本身这个服务是异步的，所以需要回调，在回调函数中我们可以做一些赋值操作。接下来又说明了ng的自动依赖注入功能，在注入我们需要的服务的同时，也能同时注入主服务依赖的其他服务，以确保主服务工作正常。

最后又说了注入的字符串参数是有意义的，不能乱写，因为ng会根据这个字符串去找对应服务，如果名字写错了，那么就找不到这个服务了。

$ Prefix Naming Convention

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 $ prefix in front of the name.

The $ prefix is there to namespace Angular-provided services. To prevent collisions it‘s best to avoid naming your services and models anything that begins with a $.

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.

这部分主要讲ng中的前缀问题，$ 和 $$ 。$是内置服务和API的惯例前缀，ng允许我们自己定义服务，为了防止产生冲突，最好不要用 $ 开头。$$ 是表示这个服务是私有的，不允许用户改写。

AngularJs--XHRs & Dependency Injection

标签：angularjs   web开发   模块化   前端   

原文地址：http://blog.csdn.net/linsheng9731/article/details/40483611