网上找到的一个例子，感觉对于初学者理解将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. ActiveX控件的注册和反注册

    原文转自 https://blog.csdn.net/piaopiaopiaopiaopiao/article/details/41649495 ActiveX控件,需要注册之后才能使用. 注意:注册 ...

  2. css 基础入门

    CSS 概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css 由此而生,css 是 Cascading Style Sheets 的字母缩写,意思是层叠样式表,有了 css,h ...

  3. robot framework 如何处理循环条件下面的变量自增

    下面举了一个基础栗子,可以运行的.${num}就是我需要的自增变量.有人也许会问为什么不用${i},不是我不想用,而是我${i}有其他用处,必须另外定义一个变量,需要注意的是定义变量的时候,应该在循环 ...

  4. 这些方面做好了才能叫运营-App运营日常

    现在APP的开发推广是时代的潮流,同时也是不少企业的难题.现在我们就来谈谈APP运营的一些问题. 1. 基础运营正常维护产品最日常.最普通的工作,如APP应用包在各大应用市场提交上传等,如安卓渠道,包 ...

  5. JetBrains 系列开发工具 汉化(中文化)教程

    项目地址:(*￣3￣)╭ 操作流程: 拷贝内容 将下载的包改名为resources_cn.jar,拷贝到 $IDEA_HOME$/lib/ 目录下 重启IDEA 打开或者重新启动IDEA

  6. openwrt双机热备

    转自:https://oldwiki.archive.openwrt.org/doc/recipes/high-availability 先记号一下,有空再仔细研究. ---------------- ...

  7. kubernetes---ConfigMap管理应用配置

    1.拆分环境 主机名 角色 ip hdss7-11.host.com zk1.od.com(Test环境) 10.4.7.11 hdss7-12.host.com zk2.od.com(Prod环境) ...

  8. JavaScript中对数组的排序

    将下列对象数组,通过工资属性,由高到低排序 var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, ge ...

  9. 了解这些后，再去决定要不要买Mac苹果电脑！

    我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统......表砍我...当时买mac的 ...

  10. Redis未授权访问漏洞复现及修复方案

    首先,第一个复现Redis未授权访问这个漏洞是有原因的,在 2019-07-24 的某一天,我同学的服务器突然特别卡,卡到连不上的那种,通过 top,free,netstat 等命令查看后发现,CPU ...