有关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
有关AngularJS请求Web API资源的思路的更多相关文章
- AngularJS使用OData请求ASP.NET Web API资源的思路
本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路. 首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData. 然后,给control ...
- .Net Core使用HttpClient请求Web API注意事项
HttpClient 使用HttpClient可以很方便的请求Web API,但在使用时有一些需要注意的地方,不然会给你的程序带来毁灭性的问题. HttpClient是一个继承了IDisposable ...
- 动态枢轴网格使用MVC, AngularJS和WEB API 2
下载shanuAngularMVCPivotGridS.zip - 2.7 MB 介绍 在本文中,我们将详细介绍如何使用AngularJS创建一个简单的MVC Pivot HTML网格.在我之前的文章 ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- ajax GET和POST请求web api 的几种方式
GET请求 1.无参数get请求 一般get请求有两种写法,一种是 $.get() 一种是$.ajax({type:"get"}), 我个人比较喜欢用后者. 下面例子主要是ge ...
- angularjs呼叫Web API
今早有分享一篇<创建Web API并使用>http://www.cnblogs.com/insus/p/7771428.html 接下来,我再分享一篇,怎样在angularjs去呼叫Web ...
- MUI 跨域请求web api
由于刚接触MUI框架,所以在跨域问题上花了一点时间.希望我的方式能帮你少走点弯路(大神就直接过里吧)! 首先,遇到这个问题,各种百度.其中说法最多的是将mui,js文件里的 setHeader('X- ...
- 使用 HttpClient 请求 Web Api
1.获取 post 请求 body 内容 [HttpPost] public string GetId() { //如果方法参数里面有 [FromBody],则需要重新调整内容指针,再进行读取. // ...
- C# 请求Web Api 接口，返回的json数据直接反序列化为实体类
须要的引用的dll类: Newtonsoft.Json.dll.System.Net.Http.dll.System.Net.Http.Formatting.dll Web Api接口为GET形式: ...
随机推荐
- 001_关于选中的磁盘具有MBR分区表。在 EFI 系统上，Windows 只能安装到 GPT 磁盘。问题解决
问题: 今天我的diy电脑重装系统时,遇到了一个棘手的问题.在选择安装分区的时候,提示有这样的错误. Windows 无法安装到这个磁盘.选中的磁盘具有MBR分区表.在 EFI 系统上,Windows ...
- spring-mvc集成 swagger
问题1:spring-mvc集成 swagger, 配置好后界面 404, 原因: dispatcher-servlet.xml 文件中, 要在这上面 <!-- 启用spring mvc 注解 ...
- java 接口与工厂
接口时实现多重继承的途径,而生产遵循某个接口的对象的典型方式就是工厂方法设计模式,这与直接调用构造器不同,我们在工厂对象上调用的是某种方法,而该工厂对象将生成接口的某个实现的对象,理论上通过这种方式, ...
- [转] impress.js学习
引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...
- react + redux 完整的项目，同时写一下个人感悟
先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...
- 用 javascript 实现 ping 一个主机，仅测试是否能够连接。
function ping(ip){ var img = new Image(); var start = new Date().getTime(); img.src = "http://& ...
- CSS------制作一个带+-的input框
如图: 代码:(div和input之间要连续写在一起,不能换行) <div style="font-size:36px;margin-top:30px"> <di ...
- 7-12 The Rotation Game IDA*
状态搜索题目 一开始打算用bfs 但是图给的不是矩形图 有点难以下手 参考了 lrj 将图上所有的点进行标号 直接一个一维数组就解决了图的问题 并且明确了每个点的标号 处理起来十分方 ...
- thinkphp中table方法
table方法也属于模型类的连贯操作方法之一,主要用于指定操作的数据表. 用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了:切换操作的数据表: ...
- Codeforces Round #529 (Div. 3) 题解
生病康复中,心情很不好,下午回苏州. 刷了一套题散散心,Div 3,全部是 1 A,感觉比以前慢了好多好多啊. 这几天也整理了一下自己要做的事情,工作上要努力... ... 晚上还是要认认真真背英语的 ...