Angular开发者指南（二）概念概述

正文

请到「今天看啥」查看全文

添加UI逻辑：控制器

invoice1.js

angular.module('invoice1', [])

.controller('InvoiceController', function InvoiceController() {

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.total = function total(outCurr) {

return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);

};

this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {

return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];

};

this.pay = function pay() {

window.alert('Thanks!');

};

});

index.html

Invoice:

Quantity:

Costs:

{{c}} Total:          {{invoice.total(c) | currency:c}}        Pay  首先，有一个包含控制器的新JavaScript文件。更准确地说，该文件指定将用于创建实际控制器实例的构造函数。控制器的目的是将变量和功能暴露给表达式和指令。除了包含控制器代码的新文件，我们还向HTML添加了ng-controller指令。这个指令告诉AngularJS，新的InvoiceController负责具有指令的元素和所有元素的子元素。语法InvoiceController作为凭证告诉AngularJS实例化控制器并将其保存在当前作用域中的变量invoice 中。我们还更改了页面中的所有表达式，以便在控制器实例中读取和写入变量，方法是在它们前面加上invoice 。 。可能的货币在控制器中定义，并使用ng-repeat添加到模板。由于控制器包含一个总函数，我们还可以使用{{invoice.total（...）}}将该函数的结果绑定到DOM。再次，这种绑定是活的，即，当函数的结果改变时，DOM将被自动更新。用于支付发票的按钮使用指令ngClick。这将在每次点击按钮时评估相应的表达式。在新的JavaScript文件中，我们还创建了一个模块，我们在其中注册控制器。我们将在下一节中讨论模块。下图显示了在我们介绍控制器之后，一切是如何协同工作的：独立于视图的业务逻辑：服务service现在，InvoiceController包含我们示例的所有逻辑。 当应用程序增长时，将与视图无关的逻辑从控制器移动到服务中是一个好的做法，因此它也可以由应用程序的其他部分重用。 稍后，我们还可以更改该服务以从网络（例如网络）载入汇率。 通过调用Yahoo Finance API，而无需更改控制器。

请到「今天看啥」查看全文