For AngularJS's idea of requesting Web API resources, angularjsapi
The page section is roughly as follows:
<body ng-app="productManagement">
...
<div ng-include="'app/products/productListView.html'"></div>
...
</body>
ProductManagement is the name of the page module. The content of the page can be viewed on the ng-includemo-productlistview.html page. Note: The ng-include attribute value is the string 'app/products/productListView.html ', rather than app/products/productListView.html, which is easy to ignore.
The JavaScript reference sequence of the page section is usually: file related to AngularJS, page-level js file, custom js file related to Service, specific js file related to controller, like this:
<!-- 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>
In common. service. js, a module is defined:
(function () {
"use strict";
angular.module("common.services", ["ngResource"])
.constant("appSettings", {
serverPath: "http://localhost:49705/"
});
}());
Above, common. services this module, depending on the ngResource module, and the ngResource module is encapsulated in the angular-resource.js file, thus, put the file about AngularJS on the top is reasonable, otherwise common. services module cannot be referenced. In addition, the module common. services also defines a constant. The key is appSettings, and the value is an object. The serverPath of this object stores a fixed domain name.
Next, use the productResouce. js file to customize a factory to return the specific API path.
(function () {
"use strict";
// Created a service through the factory
angular.module ("common.services")
.factory ("productResource", ["$ resource", "appSettings", productResouce]);
function productResouce ($ resource, appSettings) {
return $ resource (appSettings.serverPath + "/ api / products /: id");
}
} ());
The preceding Code adds a factory for the module common. services and returns the API path encapsulated by $ resource. Similarly $ resource this service comes from the angular-resource.js file, and once again it makes sense to put the file about AngularJS on the top.
Well, with the module, the factory is registered, and productListCtrl. js will use them.
(function () {
"use strict";
angular
.module("productManagement")
.controller("ProductListCtrl",
ProductListCtrl);
function ProductListCtrl(productResource) {
var vm = this;
productResource.query(function (data) {
vm.products = data;
});
}
}());
The above code is injected here through the service registered in factory, and the productResource. query method is called to load data to the model.
Then, the productlistview.html page uses the controller ProductListCtrl.
<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>
In the page-level app. js file, it is like this:
(function () {
"use strict";
var app = angular.module("productManagement", ["common.services"]);
}());
As mentioned above, productManagement depends on the custom moduel common. services.
Summary:
1. A good habit should be developed for the location relationship of js: AngularJS files, page files, custom service files, and controller files.
2. encapsulate the logic of the Request API in the Custom modlue, use the factory method to customize the service, and use $ resouce to encapsulate the API Request Path
3. Inject custom services into the controller and request API data to the Model
4. register all dependent modules on the module on the home page
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
