页面部分大致如下：

<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. MTD应用学习札记【转】

    转自:https://blog.csdn.net/lh2016rocky/article/details/70885421 今天做升级方案用到了mtd-utils中的flash_eraseall和fl ...

  2. elasticsearch（ES）日志迁移

    =============================================== 2018/7/29_第1次修改                       ccb_warlock == ...

  3. mysql 用init-connect+binlog实现用户操作追踪做access的ip的log记录

    在MYSQL中,每个连接都会先执行init-connect,进行连接的初始化.我们可以在这里获取用户的登录名称和thread的ID值.然后配合binlog,就可以追踪到每个操作语句的操作时间,操作人等 ...

  4. 通过微信Android和iOS版，看两大系统的差异

    由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯 ...

  5. 原 nc在centos7上的安装和简单使用

    https://blog.csdn.net/qq_16414307/article/details/50291341 https://www.cnblogs.com/rocky-AGE-24/p/69 ...

  6. Android Studio从2.3升级到3.1注意事项

    原文:https://blog.csdn.net/lithiumyoung/article/details/80111111 Android Studio从2.3升级到3.1注意事项 项目根目录下的b ...

  7. 一些计数小Trick

    一些计数小Trick 虽然说计数问题如果不是特别傻逼的话想做出来基本随缘. 但是掌握一些基本的计数方法还是十分有必要的. 想到了就更新. 1. 对于排列的DP问题,一般是不能够按照位置一个一个放的,一 ...

  8. Amazon电商数据分析——数据获取

    最近一段时间主要重心在Amazon电商数据分析上,这是一个偏数据分析和可视化的项目.具体来说就是先获取Amazon的商品数据,数据清洗和持久化存储后作为我们自己的数据源.分析模块和可视化模块基于数据进 ...

  9. Exception in thread "main" java.net.SocketTimeoutException: connect timed ou错误处理

    今天做了一个Jsoup解析网站的项目,使用Jsoup.connect(url).get()连接某网站时偶尔会出现java.net.SocketTimeoutException:Read timed o ...

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

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