【精选】AngularJS REST和自定义服务.pdfVIP

AngularJS REST和⾃定义服务 REST和⾃定义服务 在这⼀步中，你将改变我们获取数据的⽅法。 我们定义了⼀个⾃定义服务，它代表了⼀个RESTful客 端。利⽤该客 端， 我们可以⽤更容易的⽅式制作⼀个向服务器索取数据的请求，不需要去处理底 层?$http API 、HTTP⽅法以及URL 。 把⼯作空间重置到第⼗⼀步 git checkout -f step-11 刷新你的浏览器或在线检查这⼀步：Step 8 Live Demo 下⾯列出了第⼗步和第⼗⼀步之间最重要的区别。你可以在GitHub上看到完整的差 异。 依赖性 Angula 在ngResource模块中提供了安静的功能，它是与核⼼Angula 框架分开分布 的。 我们正在使⽤Bowe 以安装客 端依赖性。这⼀步更新的bower.json配置⽂件，以 包含新的依赖性： { name: angular-seed, description: A starter project for Angular S, version: 0.0.0, homepage: /angular/angular-seed, license: MIT, private: true, dependencies: { angular: 1.4 .x, angular-mocks: 1.4 .x, jquery: ~2.1.1, bootstrap: ~3.1.1, angular-route: 1.4 .x, angular-resource: 1.4 .x } } 新的依赖性angular-resource: 1.4 .x告诉bowe 安装⼀个以angula 为源的 组件的版本，它与v 1.4x版兼容。我们必须要求bowe 下载并安装这个依赖性。我们可 以通过运⾏下⾯的指令来做到它： npm install **警告：**如果⾃从你上⼀次运⾏`npm install` 以后，Angula 又发布了⼀个新版本， 则你⽤`bowe install`可能遇到问题，因为你安装的angula .j s的版本与它有冲突。如果 你想通过它，则需要在运⾏`npm install`之前先删除你的`app/bowe _components`⽂件 夹。 **注意：**如果你已经全局安装了bowe ，则你可以运⾏`bowe install` ，但是为了我们 已经预配置的项⽬,`npm install`为我们运⾏了bowe 。 模板 我们的⾃定义源服务将被定义在app/js/services.js中，因此我们需要在我们的 布局模板中包含这个⽂件。另外，我们还需要载⼊angular-resouces.js⽂件， 它包含了ngResou ce模块： app/index .html. ... script src=/attachments/image/wk/angularjs/angular-resource.j script src=/attachments/image/wk/angularjs/services.js/scri ... 服务 我们创建了⾃⼰的服务，以提供对服务器上的⼿机数据的访问： app/js/services.js. var phonecatServices = angular.module(phonecatServices, [ngRes phonecatServices.factory(Phone, [$resource, function($resource){ return $resource(phones/ :phoneId.json, {}, { query : {method:GET , params:{phoneId:phones}, isArray : }); }]); 我们使⽤模块API ，利⽤⼯⼚函数注册⾃定义的服务。我们传⼊服务的名称“Phone” 以 及⼯⼚函数。⼯⼚函数的结构近似于控制器，两者都可以声明依赖性，以通过函数参 数注⼊。Phone服务在$resource服务上声明了⼀个依赖性。 $resource服务使它更容易只⽤寥寥⼏⾏代码创建⼀个RESTful客 端。这种客 端 可以⽤在我们的应⽤中，代替底层$http服务。 app/js/ap