你的位置:首页 > Java教程

[Java教程]有关AngularJS请求Web API资源的思路


 

页面部分大致如下:

 

<body ng-app="productManagement">  ...  <div ng-include="'app/products/productListView.html'"></div>  ...</body>

 

productManagement是页面module的名称。页面内容通过ng-include加载productListView.html这个页面。注意:ng-include属性值是字符串'app/products/productListView.html', 而不是app/products/productListView.html,这点很容易疏忽。

 

页面部分的JavaScript引用顺序通常是:有关AngularJS的文件、页面级别的js文件、自定义有关Service的js文件、具体有关controller的js文件,就像这样:

 

<!-- Library Scripts --><script src="scripts/angular.js"></script><script src="Scripts/angular-resource.js"></script><!-- Application Script --><script src="app/app.js"></script><!-- Services --><script src="common/common.service.js"></script><script src="common/productResouce.js"></script><!-- Product Controllers --><script src="app/products/productListCtrl.js"></script>

 

在common.service.js中,定义了一个module:

 

(function () {  "use strict";  angular.module("common.services", ["ngResource"])    .constant("appSettings", {      serverPath: "http://localhost:49705/"    });}());

 

以上,common.services这个module,依赖ngResource这个module,而ngResource这个module是被封装在angular-resource.js文件中的,由此,把有关AngularJS的文件放在顶部是有道理的,否则common.services这个module就引用不到了。另外,common.services这个module还定义了一个常量,key是appSettings, value是一个object对象,该对象的serverPath存储固定域名。

 

接下来,通过productResouce.js文件,自定义一个factory,用来返回具体的API路径。

 

(function () {  "use strict";  //通过工厂的方式创建了一个服务  angular.module("common.services")    .factory("productResource", ["$resource", "appSettings", productResouce]);  function productResouce($resource, appSettings) {    return $resource(appSettings.serverPath + "/api/products/:id");  }}());

 

以上,为common.services这个module增加了一个factory,返回经$resource封装的API路径。同样$resource这个服务来自于,angular-resource.js文件,再次体会到把有关AngularJS的文件放在顶部是有道理的。


好,有了module,注册了factory,productListCtrl.js就来使用它们。

 

(function () {  "use strict";  angular    .module("productManagement")    .controller("ProductListCtrl",           ProductListCtrl);  function ProductListCtrl(productResource) {    var vm = this;    productResource.query(function (data) {      vm.products = data;    });  }}());

 

以上,通过factory注册的service注入到这里,调用productResource.query方法把数据加载到model中来。

 

然后,productListView.html这个页面使用ProductListCtrl这个controller。

 

<div class="panel panel-primary"   ng-controller="ProductListCtrl as vm">  <div class="panel-heading"     style="font-size:large">    Product List  </div>  <div class="panel-body">    <table class="table">      <thead>        <tr>          <td>Product</td>          <td>Code</td>          <td>Available</td>          <td>Price</td>        </tr>      </thead>      <tbody>        <tr ng-repeat="product in vm.products">          <td>{{ product.productName}}</td>          <td>{{ product.productCode }}</td>          <td>{{ product.releaseDate | date }}</td>          <td>{{ product.price | currency }}</td>        </tr>      </tbody>    </table>  </div></div>

 

在页面级别的app.js文件中是这样的:

 

(function () {  "use strict";  var app = angular.module("productManagement", ["common.services"]);}());

 

以上,productManagement依赖于自定义的common.services这个moduel。


总结:

 

1、js的位置关系要养成好的习惯:AngularJS文件,页面文件,自定义service文件,controller文件


2、把请求API的逻辑封装到自定义modlue中去,通过factory方式自定义service,使用$resouce来封装API请求路径


3、把自定义的service注入到controller中,请求API数据给Model


4、在主页面的module注册所有依赖的module