网上找到的一个例子，感觉对于初学者理解将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. module 'cv2' has no attribute 'KNearest_create'

    python版本:3.6.5 opencv版本:3.2.0 使用的是jupyter notebook 源代码如下: import cv2 import numpy as np import matpl ...

  2. 2743711 - Possible Unexpected Results When Using Query With an ORDER BY Clause on a Rowstore Table With a Parallelized Search on a Cpbtree-Type Index

    2743711 - Possible Unexpected Results When Using Query With an ORDER BY Clause on a Rowstore Table W ...

  3. 删除MRP单据

    select *into newtable from a_mplist 把a_mplist的表中的数据复制到newtable表中结构也是一样的 insert into newtable select ...

  4. Git 日常命令

    克隆项目:git clone addr dir   切换分支,分支并没有 git checkout -b production origin/production 分支已存在,单纯切换分支 git c ...

  5. 运输层3——传输控制协议TCP概述

    目录 1. TCP最主要的特点 2. TCP的连接 3. socket在不同场景中的含义 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户 ...

  6. 剑指Offer（三十）：连续子数组的最大和

    .# 剑指Offer(三十):连续子数组的最大和 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net ...

  7. python3 jieba分词

    一.jieba库用于分词,https://github.com/fxsjy/jieba 二.分词:分词精细:全局(文本分析)<精确(快速成词)<搜素(搜素引擎分词) #分词 str=r'今 ...

  8. P1313 计算系数[二项式定理]

    题目描述 给定一个多项式\((by+ax)^k\),请求出多项式展开后\(x^n \times y^m\)项的系数. 解析 一道水题,二项式定理搞定.注意递推组合数时对其取模. 参考代码 #inclu ...

  9. 1205 CSRF跨站请求与django中的auth模块使用

    目录 今日内容 昨日回顾 基于配置文件的编程思想 importlib模块 简单代码实现 跨站请求伪造csrf 1. 钓鱼网站 如何实现 模拟该现象的产生 2. 解决问题 解决 {% csrf_toke ...

  10. 《hello-world团队》第七次作业：团队项目设计完善&编码

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十一 团队作业7:团队项目设计完善&编码 团队名称 <hello--w ...