概述
页面部分大致如下：
<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
最后
以上就是传统夕阳为你收集整理的有关AngularJS请求Web API资源的思路的全部内容，希望文章能够帮你解决有关AngularJS请求Web API资源的思路所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复