网上找到的一个例子，感觉对于初学者理解将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. ExcelReport.cs Excel操作类、实例源码下载

    标题一.告别ASP.NET操作EXCEL的烦恼标题二.ASP.NET操作EXCEL 合并单元格 大全... cnblogs/hanzhaoxin/韩兆新的博客园ExcelReport第一篇:使用Exc ...

  2. 3_PHP表达式_4_PHP运算符

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 3.4.1 算术运算符 <?php $num1 = -10; $num2 = -4; $num3 = $nu ...

  3. Python：GeoJson格式的多边形裁剪Tiff影像并计算栅格数值

    JSON是通过键值对表示数据对象的一种格式,其全称为JavaScript Object Notation,它采用完全独立于编程语言的文本格式来存储和表示数据,轻量级.简洁清晰的层次结构.容易解析等特点 ...

  4. 由于找不到MSVCP140.dll，无法继续执行代码。重新安装程序可能会解决此问题。

    msvcp140.dll文件下载,解决找不到msvcp140.dll的问题: 如果您的系统是64位的请将32位的dll文件复制到C:\Windows\System32目录 如果您的系统是64位的请将3 ...

  5. 云端的ABAP Restful服务开发

    愉快的暑假结束了,今天是小朋友新学期开学后的第一个周日,不知道各位家长是否和小朋友们一起,已经适应了新学期的生活了么? Jerry从少的可怜的属于自己的周末时光挤了一小部分时间出来,写了这篇文章. J ...

  6. GitHub开源的10个超棒后台管理面板

    目录1.AdminLTE 2.vue-Element-Admin 3.tabler 4.Gentelella 5.ng2-admin 6.ant-design-pro 7.blur-admin 8.i ...

  7. DataGrip像navicat一样导入导出表数据,不是导出导入insert和update这种

    用的是mysql,其他也一样 首先是导出: 然后: 然后就可以导出了,导出去别的工具能不能拿来导入不知道... 然后是导入: 然后:

  8. [Abp vNext微服务实践] - 框架分析

    一.简介 abp vNext新框架的热度一直都很高,于是最近上手将vNext的微服务Demo做了一番研究.我的体验是,vNext的微服务架构确实比较成熟,但是十分难以上手,对于没有微服务开发经验的.n ...

  9. Alpha版本发布

                Alpha版本发布   Part1.基本介绍 作业所属课程 课程链接 作业要求 要求链接 团队名称 Typhoon 作业目标 通过本次团队项目,体验通过使用软件工程来研发项目的 ...

  10. PHM与智慧运维落地实践案例集 — 机车运用数据智能诊断系统正式上线

    2019年9月20日,经过为期一个多月的紧张测试,北京润科通用技术有限公司为中车某机车单位倾力打造的“机车运用数据智能诊断系统”正式上线运行,标志着润科通用在轨道交通智慧运维领域的又一案例成功落地. ...