標籤：
頁面部分大致如下：
<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資源的思路
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
