网上找到的一个例子,感觉对于初学者理解将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. 3.asp.net core 关键概念

    1. StartUp类 在Startup.ConfigureServices方法里配置或注册服务 在Startup.Configure方法里配置请求处理管道.请求处理管道由一系列中间件组建构成,每个中 ...

  3. mybatis获取刚刚插入到数据库的数据的id(转载)

    原文地址:https://blog.csdn.net/hehuihh/article/details/82800739 我用的是第一种写法,直接把代码copy到insert标签里(id要是自增id) ...

  4. 小数据玩转Pyspark(2)

    一.客户画像 客户画像应用:精准营销(精准预测.个性化推荐.联合营销):风险管控(高风险用户识别.异常用户识别.高可疑交易识别):运营优化(快速决策.产品组合优化.舆情分析.服务升级):业务创新(批量 ...

  5. sql 四舍五入 保留两位小数

    一.问题描述 数据库里的 float momey 类型,都会精确到多位小数.但有时候 我们不需要那么精确,例如,只精确到两位有效数字. 二.sqlserver解决方案: 1. 使用 Round() 函 ...

  6. HTML和XML中的转义字符

    HTML中的转义字符  HTML中<, >,&等有特别含义,(前两个字符用于链接签,&用于转义),不能直接使用.使用这三个字符时,应使用他们的转义序列,如下所示: & ...

  7. 剖析.o文件ELF组成

    ELF文件结构组成 ①总共13个节 ②每个节都有一个编号.从ELF头开始编号,编号从0开始,编号的作用就是用来索引(找到)不同节的. ③每个.o的都是这样的结构.链接时要做的就是,将ELF格式的.o全 ...

  8. python自定义ORM并操作数据库

    看这个代码之前先去看上篇文章,理解type的用法及元类的含义: ORM可以代替pymysql,实现将python语义装换为sql语句,简单化 import pymysql ''' metaclass, ...

  9. css详解2

    1.伪类选择器 1.1.a标签的爱恨准则 LoVe HAte .一个冒号连接 1.2.a标签的示例 给a标签设置个颜色,生效了 <html lang="en"> < ...

  10. Jenkins 参数化构建(Git Parameter)

    由于我们在测试过程中,可能需要在多个测试环境跑用例,这个时候就需要jenkins参数化了. Jenkins参数化一般常用的有两种方式:Choice和String Parameter两种 (1)Choi ...