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. Page content loads productlistview.html this page via Ng-include. Note: TheNg-include property value is the string ' app/products/productlistview.html ' instead of the app/products/ Productlistview.html, this is easy to neglect.
The sequence of JavaScript references in the page section is usually: Files about Angularjs, page-level JS files, custom JS files about the service, specific JS files about the 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", { " http://localhost:49705/" }); ());Above Common.services This module, relying on Ngresource this module, and Ngresource This module is encapsulated in the Angular-resource.js file, thus, put the relevant ANGULARJS files on the top of it makes sense, Otherwise common.services This module will not be quoted. In addition, common.services This module also defines a constant, key is appsettings, and value is an object that Serverpath stores a fixed domain name.
Next, through the Productresouce.js file, customize a factory to return to the specific API path.
(function () { "use strict"; // A service was created in the way of a factory Angular.module ("common.services") . Factory ("Productresource", ["$resource", "appSettings", Productresouce]); function productresouce ($resource, appSettings) { return $resource (Appsettings.serverpath + "/api /products/:id ");} } ());Above, for common.services This module adds a factory that returns the API path encapsulated by the $resource. The same $resource This service comes from, Angular-resource.js file, once again realize that it makes sense to put the documents about Angularjs on the top.
Well, with the module, register the factory,productlistctrl.js and use them.
(function () { "use strict"; Angular . Module ("Productmanagement") . Controller ("Productlistctrl", Productlistctrl); function Productlistctrl (productresource) { varthis; Productresource.query (function (data) { = data; });} } ());Above, through factory registered service injected here, call the Productresource.query method to load the data into the model.
Then, productlistview.html this page uses the Productlistctrl controller.
<Divclass= "Panel Panel-primary"Ng-controller= "Productlistctrl as VM"> <Divclass= "Panel-heading"style= "Font-size:large">Product List</Div> <Divclass= "Panel-body"> <Tableclass= "Table"> <thead> <TR> <TD>Product</TD> <TD>Code</TD> <TD>Available</TD> <TD>Price</TD> </TR> </thead> <tbody> <TRng-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>
This is the case in the page-level app.js file:
(function () { "use strict"; var app = Angular.module ("Productmanagement", ["Common.services"]);} ());Above, Productmanagement relies on the custom common.services this moduel.
Summarize:
1, JS position relationship to develop good habits: Angularjs files, page files, custom service files, controller files
2. Encapsulate the logic of the request API into a custom modlue, customize the service by factory way, use $resouce to encapsulate the API request path
3. Inject the custom service into the controller and request the API data to the model
4. The module on the main page registers all dependent module
Ideas for Angularjs requesting Web API resources
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
