网上找到的一个例子,感觉对于初学者理解将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. HTTP响应状态码整理

    1xx:信息 100 Continue服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求.101 Switching Protocols服务器转换协议:服务器将遵从客 ...

  2. Verilog HDL

    https://wenku.baidu.com/view/9943b7acf524ccbff1218463.html https://hdlbits.01xz.net/wiki/Main_Page h ...

  3. 数据结构之链表(LinkedList)(二)

    数据结构之链表(LinkedList)(一) 双链表 上一篇讲述了单链表是通过next 指向下一个节点,那么双链表就是指不止可以顺序指向下一个节点,还可以通过prior域逆序指向上一个节点 示意图: ...

  4. FreeRTOS 任务创建和删除(动态)

    TaskHandle_t taskhandle; TaskHandle_t taskhandle1; void vTask(void *t) { int i = 0; while(1) { i++; ...

  5. [LeetCode] 76. 最小覆盖子串 ☆☆☆☆☆(滑动窗口)

    https://leetcode-cn.com/problems/minimum-window-substring/solution/hua-dong-chuang-kou-suan-fa-tong- ...

  6. java判定数据(对象)类型

    1.说明一 int 是关键字,Integer是包装类,Number是所有数字了的基类(父类).所以,Number是Integer的基础,Integer是int的基础,也称Integer是int的原型类 ...

  7. javascript_12-递归

    递归 // function f1(){ // console.log("hello"); // f1(); // } // f1(); // 给递归添加结束的条件 var i = ...

  8. spark 机器学习 knn 代码实现(二)

    通过knn 算法规则,计算出s2表中的员工所属的类别原始数据:某公司工资表 s1(训练数据)格式:员工ID,员工类别,工作年限,月薪(K为单位)       101       a类       8年 ...

  9. hive之建立分区表和分区

    1. 建立分区表 create table 单分区表:其中分区字段是partdate,注意分区字段不能和表字段一样,否则会报重复的错 create table test_t2(words string ...

  10. 1260:【例9.4】拦截导弹(Noip1999)

    题目来源:http://ybt.ssoier.cn:8088/problem_show.php?pid=1260 1260:[例9.4]拦截导弹(Noip1999) 时间限制: 1000 ms     ...