• angularJs 中controller与sever


    网上找到的一个例子,感觉对于初学者理解将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)给控制器使用

  • 相关阅读:
    java系列: 在eclipse中调试时,输入的jsp或者servlet页面的地址要区分大小写
    Activiti系列: 如何在web中使用activiti和sql server
    Java系列:Add Microsoft SQL JDBC driver to Maven
    eclipse系列: Cannot change version of project facet Dynamic web的解决方法
    Java系列:报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
    Activiti系列:如何让Activiti-Explorer使用sql server数据库
    MySQL系列:查看并修改当前数据库的编码
    activiti-explorer:使用mysql导入外部bpmn文件后存在乱码的问题
    Activiti系列:如何把Activiti工程转换为maven工程以解决依赖项找不到的问题
    java从0开始学——数组,一维和多维
  • 原文地址:https://www.cnblogs.com/scdisplay/p/5210143.html
Copyright © 2020-2023  润新知