页面部分大致如下:

<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资源的思路的更多相关文章

  1. AngularJS使用OData请求ASP.NET Web API资源的思路

    本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路. 首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData. 然后,给control ...

  2. .Net Core使用HttpClient请求Web API注意事项

    HttpClient 使用HttpClient可以很方便的请求Web API,但在使用时有一些需要注意的地方,不然会给你的程序带来毁灭性的问题. HttpClient是一个继承了IDisposable ...

  3. 动态枢轴网格使用MVC, AngularJS和WEB API 2

    下载shanuAngularMVCPivotGridS.zip - 2.7 MB 介绍 在本文中,我们将详细介绍如何使用AngularJS创建一个简单的MVC Pivot HTML网格.在我之前的文章 ...

  4. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  5. ajax GET和POST请求web api 的几种方式

    GET请求 1.无参数get请求 一般get请求有两种写法,一种是 $.get()   一种是$.ajax({type:"get"}), 我个人比较喜欢用后者. 下面例子主要是ge ...

  6. angularjs呼叫Web API

    今早有分享一篇<创建Web API并使用>http://www.cnblogs.com/insus/p/7771428.html 接下来,我再分享一篇,怎样在angularjs去呼叫Web ...

  7. MUI 跨域请求web api

    由于刚接触MUI框架,所以在跨域问题上花了一点时间.希望我的方式能帮你少走点弯路(大神就直接过里吧)! 首先,遇到这个问题,各种百度.其中说法最多的是将mui,js文件里的 setHeader('X- ...

  8. 使用 HttpClient 请求 Web Api

    1.获取 post 请求 body 内容 [HttpPost] public string GetId() { //如果方法参数里面有 [FromBody],则需要重新调整内容指针,再进行读取. // ...

  9. C# 请求Web Api 接口,返回的json数据直接反序列化为实体类

    须要的引用的dll类: Newtonsoft.Json.dll.System.Net.Http.dll.System.Net.Http.Formatting.dll Web Api接口为GET形式: ...

随机推荐

  1. RESET MASTER和RESET SLAVE使用场景和说明【转】

    [前言]在配置主从的时候经常会用到这两个语句,刚开始的时候还不清楚这两个语句的使用特性和使用场景. 经过测试整理了以下文档,希望能对大家有所帮助: [一]RESET MASTER参数 功能说明:删除所 ...

  2. pip 18.1: pipenv graph results in ImportError: cannot import name 'get_installed_distributions'

    I'm currently using python3 -m pip install pip==10.0.1python3 -m pip install pipenv==2018.5.18 Once ...

  3. python中open函数的用法

    用法如下: name = open('errname.txt','w')name.readline()name.close() 1.看下第一行的代码 用来访问磁盘中存放的文件,可以进行读写等操作,例如 ...

  4. [原创]jQuery Validation范例

    上班无事,学习jQuery Validation,于是手写一公共范例,并收藏以便后用 验证操作类formValidatorClass.js }); 测试页index.html         * {} ...

  5. TPCC-MySQL安装、使用及结果解读

    tpcc-mysql用于MySQL基准测试,percona基于TPC-C(下面简写成TPCC)衍生出来的产品.下面对tpcc-mysql进行安装然后使用,最后结果解读,安装very easy,let ...

  6. FileOutputSteam入门

    FileOutputSteam 字节输入流 从控制台将字节保存到本地硬盘 package com.isoftstone.io; import java.io.FileOutputStream; imp ...

  7. chisequre test

    卡方检验就是统计样本的实际观测值与理论推断值之间的偏离程度,实际观测值与理论推断值之间的偏离程度就决定卡方值的大小,卡方值越大,越不符合:卡方值越小,偏差越小,越趋于符合,若两个值完全相等时,卡方值就 ...

  8. 【Java】 大话数据结构(17) 排序算法(4) (归并排序)

    本文根据<大话数据结构>一书,实现了Java版的归并排序. 更多:数据结构与算法合集 基本概念 归并排序:将n个记录的序列看出n个有序的子序列,每个子序列长度为1,然后不断两两排序归并,直 ...

  9. 【已解决】Chrome提示:"请停用以开发者模式运行的扩展程序"的解决办法

    chrome用户在安装了一些第三方的chrome插件后,每次打开浏览器的时候都会出现“请停用以开发者模式运行的扩展程序”的提示,只有每次点击取消之后才能正常使用扩展.如下图所示 那么有没有什么方法可以 ...

  10. mini-css-extract-plugin简介

    将css单独打包成一个文件的插件,它为每个包含css的js文件都创建一个css文件.它支持css和sourceMaps的按需加载. 目前只有在webpack V4版本才支持使用该插件 和extract ...