网上找到的一个例子，感觉对于初学者理解将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. ASP.NET Core中防跨站点请求伪造

    CSRF(Cross-site request forgery)利用了web中用户身份验证的一个漏洞:简单的身份验证只能保证请求发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的. 例子 在某个 ...

  2. putty使用方法

    putty是一种体体积小,无需安装的一款免费安全使用方便的绿色软件,它主要用于远程控制linux系统,只要获取了远程的linux的地址,便可以远程控制linux系统以方便管理,越来越受到各方面的欢迎. ...

  3. Java 之 字节流

    一.一切皆为字节 一切文件数据(文本.图片.视频等)在存储时,都是以二进制数字的形式保存,都一个一个的字节,那么传输时一样如此.所以,字节流可以传输任意文件数据.在操作流的时候,我们要时刻明确,无论使 ...

  4. 计算机等级考试【二级C语言程序设计】知识点整理

    *免责声明:本文章中所收集或者引用到的内容的所有版权均为引用内容的原作者所有,本站仅作收集并整理,不承担任何法律责任! *题库收集来源于:[未来教育考试软件2017年版 - 计算机二级 - C语言程序 ...

  5. Python实现YOLO目标检测

    作者:R语言和Python学堂 链接:https://www.jianshu.com/p/35cfc959b37c 1. 什么是目标检测? YOLO目标检测的一个示例 啥是目标检测? 拿上图 (用YO ...

  6. Lwip与底层的接口

    Lwip有三套api,分别是: raw api:使用方法为使用回调函数,即先注册一个函数,当接受到数据之后调用这个函数.缺点是对于数据连续处理不好. Lwip api:把接收与处理放在一个线程里面.因 ...

  7. javascript_04-类型转换

    类型转换 掌握三种类型的转换 转换成字符串类型 转换成数值类型 转换成布尔类型 转换成字符串 1.几乎每一个值都有 toString() 方法,除了 null 和 undefined. var age ...

  8. （备忘）jeecg的$.dialog的一些参数

    jeecg表单弹出框采用的技术是lhgdialog 一.配置全局默认参数 (function(config){ config['extendDrag'] = true; // 注意,此配置参数只能在这 ...

  9. wxpython中设置radiobox相关使用

    #coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...

  10. JVM系列二：垃圾回收

    什么时候回收对象 引用计数法 1.原理:为对象添加一个引用计数器,当对象增加一个引用时计数器加 1,引用失效时计数器减 1.引用计数为 0 的对象可被回收. 2.缺点:无法解决循环引用问题 可达性分析 ...