05.17 Angular初探-独立的业务逻辑:服务(Services)

独立的业务逻辑:服务(Services)

现在 InvoiceController包含了所有的逻辑。当我们程序非常庞大和复杂时,最好的方法就是将业务逻辑独立出,形成一个新的服务层(Service)可以实现重用,提高代码的灵活度。后来,我们可以改变服务减低web的更新频率。

Angular初探-独立的业务逻辑:服务(Services)

我们继续看我们的示例代码

Finance2.js

angular.module('finance2', []).factory('currencyConverter', function() { var currencies = ['USD', 'EUR', 'CNY']; var usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 }; var convert = function (amount, inCurr, outCurr) { return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr]; }; return { currencies: currencies, convert: convert };});

Invoice2,js

angular.module('invoice2', ['finance2']).controller('InvoiceController', ['currencyConverter', function(currencyConverter) { this.qty = 1; this.cost = 2; this.inCurr = 'EUR'; this.currencies = currencyConverter.currencies; this.total = function total(outCurr) { return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr); }; this.pay = function pay() { window.alert("Thanks!"); };}]);

我们将convertCurrency函数和定义的货币的枚举放在了新文件finance2.js中,这样,控制器如何获取这个独立的函数呢?

依赖注入(Dependency Injection)应运而入,依赖注意是一种设计模式,它可以获取创建对象和函数,可以得到依赖的控制权。在Angular中所有的组件都是靠依赖注入创建使用。

使用依赖注入需要一个注入器,可以存放所有注册过来的组件。在Angular中,这也是模块的目的。当Angular运行时,它会利用模块的配置信息将模块注入容器,一般是通过ng-app指令。

示例中,模板包含指令ng-app="invoice2"。这就告诉Angular要使用invoice2的模块作为应用的主模块。代码angular.module('invoice2', ['finance2'])指明了invoice2模块依赖finance2模型。因此Angular使用InvoiceController控制器链接CurrencyConverter服务。

现在我们知道了Angular的所有部分。在以前文章中我们提到控制器创建需要使用工厂模式,对于服务部分Angular有许多方式定义自己的工厂。在上面的示例中,我们可以把currencyConverter函数作为工厂函数。

回到初始化问题,在angular中,我们通过简单的在代码中定义参数的形式是函数与控制器链接在一起。如此,注入器就可以正确的创建对象,并且将实例化对象传输进对象工厂中使用。

最后一件事情,在新的示例中我们给module.Controller添加了一个数组.数组包含了控制器需要的服务的名字,在数组中,最后的实体就是控制器函数名。Angular使用数组定义依赖,这样做即使是简化的代码,依赖注入同样起作用。我们也可以使用简短的词语重命名控制器函数中的参数名。


分享到:


相關文章: