我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http服务来从我们的服务器获取更大的数据集吧。我们将会使用Angular的依赖注入来为PhoneListCtrl控制器提供服务。

  ·现在我们有一个20部电话的列表,它们都是从服务器加载而来。

最重要的变化列举如下,当然您也可以点击这里在GitHub上查看所有的不同。

数据

你项目中的app/phones/phones.json文件是一个使用了JSON格式的一个更大的电话数据集合。

下面是一个文件的样本:

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

组件控制器

我们将会在控制器中使用Anglular的$http服务来想服务端发送一个HTTP请求,以此来从app/phones/phones.json文件中获取数据。$http仅仅是Angular自带的几个服务之一,这些服务在web应用中处理公共的操作。当您需要这些服务的时候,Angular将为您注入它们。

服务是由Angular的DI子系统管理的,依赖注入可以使您的web应用同时保持良好的组织结构(比如:展示层,数据层和控制器的独立组成)和松耦合(各组件间的依赖是由DI子系统而不是由组件自身决定的)。

app/phone-list/phone-list.component.js:

angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController($http) {
var self = this;
self.orderProp = 'age'; $http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}
});

$http向我们的web服务端发送一个HTTP GET请求,请求phones.json(该url相对于我们的index.html文件)。服务端通过返回JSON文件中的数据作为响应(改响应可能刚好被后端服务器动态生成。对于浏览器和我们的应用来说,它们看起来是一样的。为了简单起见,我们在这篇tutorial中使用了一个JSON文件)。

$http服务通过then()方法返回一个promise对象。我们调用这个方法来处理异步相应并且将电话数据分配给控制器中一个叫做phones的属性。注意到Angular已经检测到了JSON响应并且为我们解析它,将其导入response对象(被传递至我们的回调函数)中的data属性!

因为我们在一个回调函数中为phones属性分配任务,而this的值在此处没有被定义,所以我们也会引进一个叫做self的局部变量来指向控制器实体。

为了在Angular中使用服务,您仅仅需要声明您需要的依赖的名字,并将其作为控制器构造函数的参数,如下所示:

function PhoneListController($http) {...}

控制器被构建时,Angular的依赖注入器为您的控制器提供服务。依赖注入器也会注意创建任何这个服务需要的传递性依赖(服务经常依赖于其他服务)。

注意到这些参数的名字是非常重要的,因为注入器将使用它们来寻找依赖。

$-前缀命名规范

您可以创建您自己的服务,我们会在接下来的步骤中做这件事。正如命名规范,Angular内置的服务,Scope方法和少量其他的Angular API 都在它们的名字前都有一个$前缀。

$前缀是Angular提供的服务的命名空间。为了防止冲突,您最好避免以一个$为前缀来命名您的服务和数据模型。

如果您检查一个Scope,您可能会注意到一些属性以$$作为前缀。这些属性被认为是私有的(private),并且不应当被获取或修改。

一点关于压缩的笔记

由于Angular是通过控制器构造函数的参数的名字来推断控制器的依赖的,如果您想要压缩PhoneListContrller控制器的js代码,所有的函数参数也会被压缩,那么依赖注入器将不会被服务正确识别。

我们可以通过用依赖的名字来注释函数来解决这个问题,用string数组提供,这不会被压缩,有两种方法来提供注入注释:

  ·在控制器中创建一个$inject属性来记录一个string的数组。该数组中的每一个string是将要注入服务的对应参数,在我们例子中,我们可以这样写:

function PhoneListController($http) {...}
PhoneListController.$inject = ['$http'];
...
.component('phoneList', {..., controller: PhoneListController});

  ·使用一个内联注释,而不是仅仅提供一个函数,而是提供一个数组,这个数组包含服务名称的列表,并且跟随函数本身。

function PhoneListController($http) {...}
...
.component('phoneList', {..., controller: ['$http', PhoneListController]});

上述两种方法都可以在任何能被Angular注入的函数中起作用,所以您的编程风格将决定您使用哪一种。

当使用第二种方法时,一种常见的做法是在注册控制器时将构造函数内联成一个匿名函数:

.component('phoneList', {..., controller: ['$http', function PhoneListController($http) {...}]});

继续下去,我们将在tutorial中使用内联方法。记住这个,让我们为我们的PhoneListController添加注释:

app/phone-list/phone-list.component.js

angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http',
function PhoneListController($http) {
var self = this;
self.orderProp = 'age'; $http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}
]
});

  

实验  

在phone-list.template.html的底部,添加<pre>{{$ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp | json}}</pre>绑定来看看以JSON格式展示的电话列表。

在PhoneListController控制器中,可以做限制只返回第1到第5部电话的数据的预处理,在$http回调中使用如下代码:

self.phones = response.data.slice(0, 5);

总结

现在您已经知道使用Angular 服务是多么容易了吧(多亏Angular的依赖注入)。进入第八步,您将添加一些电话的略图和一些链接。  

[Angular Tutorial] 7-XHRs & Dependency Injection的更多相关文章

  1. ANGULAR 2 BITS: UNIFIED DEPENDENCY INJECTION

    Angular 1.x has two APIs for injecting dependencies into a directive. These APIs are not interchange ...

  2. [Angular] Communicate Between Components Using Angular Dependency Injection

    Allow more than one child component of the same type. Allow child components to be placed within the ...

  3. [Angular] Component's dependency injection

    An Angular service registered on the NgModule is globally visible on the entire application. Moreove ...

  4. [Angular Tutorial]PhoneCat Tutorial App

    (注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...

  5. 依赖注入 | Dependency Injection

    原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所有名词性的"依赖" 都可以理解为 & ...

  6. [Angular Tutorial] 6-Two-way Data Binding

    在这一步中,您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序,动态改变顺序是由创建一个新的数据模型的特性实现的,将它和迭代器绑定在一起,并且让数据绑定神奇地处理下面的工作. ·除了搜索框 ...

  7. Dependency Injection in ASP.NET Web API 2 Using Unity

    What is Dependency Injection? A dependency is any object that another object requires. For example, ...

  8. AngularJs学习笔记--Dependency Injection(DI,依赖注入)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

  9. Dependency Injection in ASP.NET Web API 2

    What is Dependency Injection? A dependency is any object that another object requires. For example, ...

  10. .NET编程5月小结 - Blazor, Unity, Dependency Injection

    本文是我在5月份看到的一些有趣的内容的集合.在这里你可以找到许多有关Blazor.ASPNET Core的学习资源和示例项目,有关在Unity中使用Zenject进行单元测试的博客,有关Unity项目 ...

随机推荐

  1. jsonp的简单实现

    jsonp: function(url, data, callback){ if( wfQuery.isFunction(data) ){ callback = data; data = {}; } ...

  2. hdu_5723_Abandoned country(最小生成树)

    题目链接:hdu_5723_Abandoned country 题意: 让你求最小生成树的花费,然后求任给两点的期望路程 题解: 最小生成树大家都会求,Kruskal这里要改改,因为后面要求任意两点的 ...

  3. 主机windwo7+虚拟机centos如何配置虚拟机可以上网,且与主机互ping通

    /etc/sysconfig/network-scripts/ifcfg-eth0的配置如下: E=eth0PROTO=static#IPADDR=10.1.1.138IPADDR=192.168.0 ...

  4. YModem协议

    源:YModem协议 YModem协议: YModem协议是由XModem协议演变而来的,每包数据可以达到1024字节,是一个非常高效的文件传输协议. 下面先看下YModem协议传输的完整的握手过程: ...

  5. cakephp 的query方法,直接写在controller中是否 有点不合适

    模型的query()函数有时是非常实用的,它可以在任何需要数据的地方执行SQL语句.但不是在什么地方调用query()方法都是恰当的.特别是在控制器中直接调用模型的query()方法 $this-&g ...

  6. 深入浅出Ajax(二)

    <script type="text/javascript"> window.onload = initPage; function initPage() { var ...

  7. phpstorm 格式化代码方法

    hpstorm 代码格式化方法: 快捷键:Ctrl + Alt + L 设置代码样式:File -> Settings -> Code Style ->PHP 根据个人php代码规范 ...

  8. c#获取新浪微博登录cookie

    用新浪微博api收集数据有诸多限制,每小时只能调用官方api函数150次,认证也很麻烦.因此想通过爬网页的方式来收集数据.访问新浪微博用户网页首先需要登录,登录获取cookie后可直接获取网页数据,无 ...

  9. USACO Section 1.1 Your Ride Is Here 解题报告

    题目 问题描述 将字符串转变为数字,字母A对应的值为1,依次对应,字母Z对应的值为26.现在有一个字符串,将其中的每个字符转变为数字之后进行累乘,最终的结果对47求余数. 题目给你两个字符串,其中的字 ...

  10. PAT 天梯赛 L2-002 链表去重

    模拟单链表的增删操作 题目链接:https://www.patest.cn/contests/gplt/L2-002 题解 最开始我脑抽用map模拟单链表进行操作,因为这样可以节约空间,并且用了cin ...