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

template(模板)：带有附加标记的模板HTML

directives(指令)：使用自定义属性和元素扩展HTML

model(模型)：用户在视图中显示的数据，并与用户进行交互

scope(作用域)：存储模型的上下文，以便控制器，指令和表达式可以访问它

expressions(表达式)：访问范围中的变量和函数

compiler(编译器)：解析模板并实例化指令和表达式

filter(过滤器)：格式化表达式的值以显示给用户

view(视图):用户看到的内容（DOM）

Data Binding(数据绑定)：在模型和视图之间同步数据

controller(控制器)：视图后面的业务逻辑

Dependency Injection：创建并连接对象和函数

injector(注入器):依賴注入容器

module(模块):一个用于应用程序不同部分的容器，包括控制器，服务，过滤器，配置Injector的指令

service (服务):可重用的业务逻辑独立于视图

第一个例子：数据绑定

在下面的示例中，我们将构建一个表单来计算不同货币的发票成本。

让我们从数量和成本的输入字段开始，其值相乘以产生发票总额：

<div ng-app ng-init="qty=1;cost=2">

  <b>Invoice:</b>

  <div>

    Quantity: <input type="number" min="0" ng-model="qty">

  </div>

  <div>

    Costs: <input type="number" min="0" ng-model="cost">

  </div>

  <div>

    <b>Total:</b> {{qty * cost | currency}}

  </div>

</div>

这看起来像正常的HTML，有一些新的标记。在AngularJS中，像这样的文件称为模板。当AngularJS启动你的应用程序时，它使用编译器从模板解析和处理这个新的标记。加载，转换和渲染的DOM然后称为视图。

第一种新的标记是指令。它们对HTML中的属性或元素应用特殊的行为。在上面的例子中，我们使用ng-app属性，它链接到一个自动初始化我们的应用程序的指令。 AngularJS还定义了一个为元素添加额外行为的输入元素的指令。 ng-model指令存储/更新输入字段的值到/自变量。

访问DOM的自定义指令：在AngularJS中，应用程序应该访问DOM的唯一位置是指令内。这很重要，因为访问DOM的工件难以测试。如果你需要直接访问DOM，你应该为它写一个自定义指令。

第二种新的标记是双花括号{{expression | filter}}：当编译器遇到这个标记时，它将用标记的估计值替换它。模板中的表达式是一个类似JavaScript的代码片段，它允许AngularJS读取和写入变量。请注意，这些变量不是全局变量。就像JavaScript函数中的变量存在于作用域中一样，AngularJS为表达式可访问的变量提供了一个作用域。存储在作用域上的变量中的值在文档的其余部分中称为模型。应用于上面的示例，标记指示AngularJS“获取从输入小部件获取的数据并将它们相乘”。

上面的示例还包含一个过滤器。过滤器格式化表达式的值以显示给用户。在上面的示例中，过滤器货币将数字格式化为看起来像金钱的输出。

在示例中重要的是，AngularJS提供活动绑定：每当输入值更改时，表达式的值都会自动重新计算，并使用其值更新DOM。这背后的概念是双向数据绑定。

添加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

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">

  <b>Invoice:</b>

  <div>

    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >

  </div>

  <div>

    Costs: <input type="number" min="0" ng-model="invoice.cost" required>

    <select ng-model="invoice.inCurr">

      <option ng-repeat="c in invoice.currencies">{{c}}</option>

    </select>

  </div>

  <div>

    <b>Total:</b>

    <span ng-repeat="c in invoice.currencies">

      {{invoice.total(c) | currency:c}}

    </span><br>

    <button class="btn" ng-click="invoice.pay()">Pay</button>

  </div>

</div>

首先，有一个包含控制器的新JavaScript文件。更准确地说，该文件指定将用于创建实际控制器实例的构造函数。控制器的目的是将变量和功能暴露给表达式和指令。

除了包含控制器代码的新文件，我们还向HTML添加了ng-controller指令。这个指令告诉AngularJS，新的InvoiceController负责具有指令的元素和所有元素的子元素。语法InvoiceController作为凭证告诉AngularJS实例化控制器并将其保存在当前作用域中的变量invoice 中。

我们还更改了页面中的所有表达式，以便在控制器实例中读取和写入变量，方法是在它们前面加上invoice 。。可能的货币在控制器中定义，并使用ng-repeat添加到模板。由于控制器包含一个总函数，我们还可以使用{{invoice.total（...）}}将该函数的结果绑定到DOM。

再次，这种绑定是活的，即，当函数的结果改变时，DOM将被自动更新。用于支付发票的按钮使用指令ngClick。这将在每次点击按钮时评估相应的表达式。

在新的JavaScript文件中，我们还创建了一个模块，我们在其中注册控制器。我们将在下一节中讨论模块。

下图显示了在我们介绍控制器之后，一切是如何协同工作的：

独立于视图的业务逻辑：服务service

现在，InvoiceController包含我们示例的所有逻辑。当应用程序增长时，将与视图无关的逻辑从控制器移动到服务中是一个好的做法，因此它也可以由应用程序的其他部分重用。稍后，我们还可以更改该服务以从网络（例如网络）载入汇率。通过调用Yahoo Finance API，而无需更改控制器。

让我们重构我们的例子，并将货币转换转换为另一个文件中的服务：

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 InvoiceController(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!');

  };

}]);

index.html

<div ng-app="invoice2" ng-controller="InvoiceController as invoice">

  <b>Invoice:</b>

  <div>

    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >

  </div>

  <div>

    Costs: <input type="number" min="0" ng-model="invoice.cost" required >

    <select ng-model="invoice.inCurr">

      <option ng-repeat="c in invoice.currencies">{{c}}</option>

    </select>

  </div>

  <div>

    <b>Total:</b>

    <span ng-repeat="c in invoice.currencies">

      {{invoice.total(c) | currency:c}}

    </span><br>

    <button class="btn" ng-click="invoice.pay()">Pay</button>

  </div>

</div>

我们将convertCurrency函数和现有货币的定义移动到新文件finance2.js中。但是控制器如何保持现在分离的功能？

这是依赖注入发挥作用的地方。依赖注入（DI）是一种软件设计模式，它处理对象和函数如何创建以及如何获得它们的依赖。 AngularJS中的所有内容（指令，过滤器，控制器，服务，...）都是使用依赖注入创建和连接的。在AngularJS中，DI容器称为注入器。

要使用DI，需要一个地方，所有应该一起工作的东西都注册。在AngularJS中，这是模块的目的。当AngularJS启动时，它将使用具有由ng-app指令定义的名称的模块配置，包括该模块所依赖的所有模块的配置。

在上面的示例中：模板包含指令ng-app =“invoice2”。这告诉AngularJS使用invoice2模块作为应用程序的主模块。代码片段angular.module（'invoice2'，['finance2']）指定invoice2模块依赖于finance2模块。通过这个，AngularJS使用InvoiceController以及currencyConverter服务。

现在AngularJS知道应用程序的所有部分，它需要创建它们。在上一节中，我们看到控制器是使用构造函数创建的。对于服务，有多种方式指定如何创建它们（请参阅服务指南）。在上面的例子中，我们使用一个匿名函数作为currencyConverter服务的工厂函数。此函数应返回currencyConverter服务实例。

回到最初的问题：InvoiceController如何获得对currencyConverter函数的引用？在AngularJS中，这是通过简单地定义参数的构造函数。这样，注入器能够以正确的顺序创建对象，并且将先前创建的对象传递到依赖于它们的对象的工厂中。在我们的示例中，InvoiceController有一个名为currencyConverter的参数。通过这个，AngularJS知道控制器和服务之间的依赖关系，并以服务实例作为参数来调用控制器。

在上一节和本节之间的示例中，最后一件事情是改变了，现在我们将一个数组传递给module.controller函数，而不是一个简单的函数。数组首先包含控制器需要的服务依赖关系的名称。数组中的最后一个条目是控制器构造函数。 AngularJS使用这个数组语法来定义依赖关系，以便DI也可以在缩小代码后工作，这很可能会将控制器构造函数的参数名称重新命名为更短的。

访问后端

让我们通过从Yahoo Finance API获取汇率来完成我们的示例。以下示例说明如何使用AngularJS完成此操作：

invoice3

angular.module('invoice3', ['finance3'])

.controller('InvoiceController', ['currencyConverter', function InvoiceController(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!');

  };

}]);

finance3.js

angular.module('finance3', [])

.factory('currencyConverter', ['$http', function($http) {

  var YAHOO_FINANCE_URL_PATTERN =

        '//query.yahooapis.com/v1/public/yql?q=select * from ' +

        'yahoo.finance.xchange where pair in ("PAIRS")&format=json&' +

        'env=store://datatables.org/alltableswithkeys';

  var currencies = ['USD', 'EUR', 'CNY'];

  var usdToForeignRates = {};

  var convert = function(amount, inCurr, outCurr) {

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

  };

  var refresh = function() {

    var url = YAHOO_FINANCE_URL_PATTERN.

               replace('PAIRS', 'USD' + currencies.join('","USD'));

    return $http.get(url).then(function(response) {

      var newUsdToForeignRates = {};

      angular.forEach(response.data.query.results.rate, function(rate) {

        var currency = rate.id.substring(3,6);

        newUsdToForeignRates[currency] = window.parseFloat(rate.Rate);

      });

      usdToForeignRates = newUsdToForeignRates;

    });

  };

  refresh();

  return {

    currencies: currencies,

    convert: convert

  };

}]);

index.html

<div ng-app="invoice3" ng-controller="InvoiceController as invoice">

  <b>Invoice:</b>

  <div>

    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >

  </div>

  <div>

    Costs: <input type="number" min="0" ng-model="invoice.cost" required >

    <select ng-model="invoice.inCurr">

      <option ng-repeat="c in invoice.currencies">{{c}}</option>

    </select>

  </div>

  <div>

    <b>Total:</b>

    <span ng-repeat="c in invoice.currencies">

      {{invoice.total(c) | currency:c}}

    </span><br>

    <button class="btn" ng-click="invoice.pay()">Pay</button>

  </div>

</div>

我们的financeConverter服务的财务模块现在使用$ http，AngularJS提供的内置服务访问服务器后端。 $ http是XMLHttpRequest和JSONP传输的包装器。

巴特西

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

最新文章

热门文章