网上找到的一个例子，感觉对于初学者理解将controller抽成服务有帮助。主要是方便理解什么时候应该来做服务。

html部分

<!DOCTYPE html>

<html ng-app="invoice1">

<head>

    <script src="../angular.min.js"></script>

    <script src="controllers.js"></script>

</head>

<body>

<div ng-controller="priceController as price">

    <b>订单:</b>

    <div>

        数量: <input type="number" ng-model="price.qty" required >

    </div>

    <div>

        单价: <input type="number" ng-model="price.cost" required >

        <select ng-model="price.inCurr">

            <option ng-repeat="c in price.currencies">{{c}}</option>

        </select>

    </div>

    <div>

        <b>总价:</b>

        <span ng-repeat="c in price.currencies">{{c}}{{price.total(c)|currency}}

        </span>

        <button class="btn" ng-click="price.pay()">支付</button>

    </div>

    <hr/>

    <p>控制器实例</p>

    <p>{{price}}</p>

</div>

</body>

</html>

主要是算总价：总价=单价*数量*不同货币汇率

angular.module('invoice1', [])

    .controller('priceController',function() {

        this.qty = 1;

        this.cost = 2;

        this.inCurr = 'EUR';

        this.currencies = ['USD', 'EUR', 'CNY'];

        this.usdToForeignRates = {

            USD: 1,

            EUR: 0.74,

            CNY: 6.09

        };

        this.convert=function(amount, inCurr, outCurr) {

            return amount * this.usdToForeignRates[outCurr] * 1 / this.usdToForeignRates[inCurr];

        };

        this.total = function total(outCurr) {

            return this.convert(this.qty * this.cost, this.inCurr, outCurr);

        };

        this.pay = function pay() {

            window.alert("谢谢！");

        };

    });

这个控制器内部可以分成2个部分，一部分是与视图相关的（单价，数量）,一部分与视图无关的逻辑计算(计算公式)。因为单价，数量的变化会直接影响视图（结果），而计算公式是不变的，不直接影响视图即convert()函数。如果有多个控制器需要使用这个计算公式，就非常适合将其抽成服务来使用。

angular.module('invoice1', ["severModule"])

    .controller('priceController', ["mysever",function(mysever) {

        this.qty = 1;

        this.cost = 2;

        this.inCurr = 'EUR';

        this.currencies = mysever.currencies;

        this.total = function total(outCurr) {

            return mysever.convert(this.qty * this.cost, this.inCurr, outCurr);

        };

        this.pay = function pay() {

            window.alert("谢谢！");

        };

    }]);

简化后的控制器，同时注入了服务severModule，现在控制器只是处理了视图部分（计算了数量和单价的乘积），然后就是使用服务中的函数进行计算；

angular.module('severModule', [])

    .factory('mysever', function() {

        var currencies = ['USD', 'EUR', 'CNY'],

            usdToForeignRates = {

                USD: 1,

                EUR: 0.74,

                CNY: 6.09

            };

        return {

            currencies: currencies,

            convert: convert

        };

        function convert(amount, inCurr, outCurr) {

            return amount * usdToForeignRates[outCurr] * 1 / usdToForeignRates[inCurr];

        }

    });

服务内置了三种货币的汇率，根据指定的货币来计算其他货币的价格。提供一个对象（currencies和函数(convert)给控制器使用

angularJs 中controller与sever的更多相关文章

  1. Angularjs中controller的三种写法

    在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...

  2. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  3. angularJS中controller的通信

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. angularJs中$controller的使用

    $controller的使用 参考:https://stackoverflow.com/questions/27866620/can-someone-provide-a-use-case-for-th ...

  5. AngularJS之指令中controller与link（十二）

    前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...

  6. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  7. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  8. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  9. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

随机推荐

  1. 解决阿里云OSS The requested bucket name is not available的办法

    今天在创建Bucket的时候遇到了这个问题 The requested bucket name is not available. The bucket namespace is shared by ...

  2. Python之网格搜索与检查验证-5.2

    一.网格搜索,在我们不确定超参数的时候,需要通过不断验证超参数,来确定最优的参数值.这个过程就是在不断,搜索最优的参数值,这个过程也就称为网格搜索. 二.检查验证,将准备好的训练数据进行平均拆分,分为 ...

  3. java开发中常用语(词汇)含义

    DAO:Data Access Objects(数据存取对象): DTO:Data Transfer Object: AR:active record:

  4. jQuery 基础知识

    一.序言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后的又一个优秀的JavaScript代码库(JavaScript框架).jQuery设计的宗旨是"W ...

  5. axios配置及使用（发起请求时带上token）

    1.安装 利用npm安装 npm install axios --save 2.引入即可使用 import axios from 'axios' 3.目录 4.各个文件设置: (1)env.js ex ...

  6. weui中的picker滑动报错

    html { touch-action: none; } 在页面插入上述代码即可解决

  7. UI5-技术篇-jQuery.ajax执行过程中Token验证及JSON格式传值问题

    最近两天在测试OData服务类方法CREATE_DEEP_ENTITY及GET_EXPANDED_ENTITYSET,刚开始采用ODataModel方式调用没有任何问题,但是ODataModel采用的 ...

  8. RCS版本控制

    RCS(Revision Control System)衍生品有两个 SCCS(Source Code Control System) CVS(Concurrent Versions System)是 ...

  9. Redis其他数据结构

    用户日活月活怎么统计 - Redis HyperLogLog 详解 HyperLogLog 提出问题 我们先思考一个常见的业务问题:如果你负责开发维护一个大型的网站,有一天老板找产品经理要网站每个网页 ...

  10. Innodb关键特性之自适用Hash索引

    一.索引的资源消耗分析 1.索引三大特点 1.小:只在一个到多个列建立索引 2.有序:可以快速定位终点 3.有棵树:可以定位起点,树高一般小于等于3 2.索引的资源消耗点 1.树的高度,顺序访问索引的 ...