AngularJS概念概述和第一个使用例子
点击查看AngularJS系列目录
转载请注明出处：http://www.cnblogs.com/leosx/
概念概述
本节使用一个简单的例子简要介绍了AngularJS的重要组成部分。
| 概念 | 描述 |
| 模板(Template) | HTML的附加标记 |
| 指令(Directives) | 通过元素或者客户属性去扩展HTML |
| 模型(Model) | 用户和界面交互的数据的模型。 |
| 上下文(Scope) | 语境上下文，这样控制器，指令和表达式可以访问它里面的数据。 |
| 表达式(Expressions) | 可以从Scope(上下文)中访问变量和函数。 |
| 编译器(Compiler) | 解析模板和实例化指令和表达式 |
| 过滤器(Filter) | 格式表达式的值以显示给用户 |
| 视图(View) | 用户所看到的（DOM） |
| 数据绑定(Data Binding) | 模型和视图间同步数据的动作 |
| 控制器(Controller) | 试图(view)背后的业务逻辑 |
| 依赖注入(Dependency Injection) | 创建对象和函数的工厂 |
| 注入器(Injector) | 依赖注入的容器 |
| 模块(Module) | 对应用程序的不同部分，包括控制器，服务器，过滤器，指令进行配置注射器的容器 |
| 服务(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到用户视图。
第一个新的标记是指令(directives)。它是HTML元素或者属性的一个特殊的行为。在上面的例子当中，我们使用了 ng-app 属性，这是一个指令，用于自动初始化我们的应用程序。AngularJS还为input元素定义了一些额外的指令，用于增加一些行为来扩展元素。例如：ng-model 指令，用来存储或者更新输入字段的值。
自定义指令访问DOM：在一个AngularJS应用程序中，唯一的一个允许去访问DOM的地方就是指令的范围内(Scope)。这点很重要，因为访问DOM元素是一件很难预测，也很难测试的事情。如果您需要直接访问DOM，你应该写一个自定义的指令去做这件事。
在指令章节，我们会去介绍如何自定义。
第二种新的标记是双花括号 {{表达|过滤器}} ,当编译器遇到这个标记，将其与标记的评估值替换。在模板中的表达式是一个类似于JavaScript的代码段，允许读取和写入变量。请注意，这些变量不是全局变量。就像AngularJS函数和这些变量在一个function函数里面一样，Angular可以去访问。在上面的例子当中，我们的花括号表达式的功能是计算数量和单价，以获得总价格。后面的过滤器使得我们的输出格式为金钱格式(这里加了一个$符号表示是美元为单位的)。在这个例子中，我们可以看到，AngularJS提供了一个绑定：当输入值发生变化，表达式的值会自动重新计算并且去更新DOM与之对应的值。这使用到的概念是双向数据绑定(学过WPF或者Silverlight的同学一定很清楚明白的)。
添加UI逻辑：控制器(controller)
让我们添加更多的逻辑，使我们能够进行不同货币的总价格计算。
第一个文件：invoice1.js
angular.module('invoice1', [])
.controller('InvoiceController', 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.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>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
效果图如下：
和上一个例子相比，有什么改变呢？
首先，增加了一个包含控制器的新的JavaScript文件。更确切地说，该文件包含一个构造函数用于去创建一个真实的Controller控制器的实例。控制器的目的就是为我们的表达式和指令去提供一些变量和方法。
除了增加了新的文件之外，我们还在HTML代码中增加了一个ng-controller指令，这个指令就是在告诉AngularJS，去创建一个InvoiceController去负责这个元素，以及这个元素下的所有子元素。语法：ng-controller="InvoiceController as invoice" 是告诉AngularJS去创建一个控制器，并重命名此控制器为invoce，这样下面访问控制器中的变量的时候，就可以使用invoce这个昵称去访问控制器所在的Scope中的变量了,HTML 中，还使用了ng-repeat指令去循环指定的元素。也定义了一个方法total （function）方法去计算总价格。
同样，这种结合是很灵活的，即当数据变化时，DOM会自动更新显示变化后的结果。这就省却了我们去修改DOM元素。我们使用了ng-click指令去绑定到了按钮点击事件上。这样，当点击按钮的时候，就会触发与controller的scope所对应的方法进行执行。
在新的JavaScript文件，我们还在Module中注册了我们的控制器模块。我们将在下一节讨论模块(module)，下图显示了所有的东西是如何在Controller里面对应显示出来的。
独立的业务逻辑：服务
眼下，InvoiceController包含我们的例子中的所有逻辑。当我们的逻辑变得复杂之后，我们应该把一些可以独立出来的业务逻辑提出来，放到服务里面去，这样这些独立的业务逻辑块儿就可以重复使用了。之后，我们就可以从网络上加载一些独立的业务逻辑，如装载并调用雅虎的财经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(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!");
};
}]);
HTML文件：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>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
效果图：
这次又有什么变化呢？
我们新建了一个文件：finance2.js 并且把 convertCurrency功能移动到了文件当中去。但是我们又如何使得控制器依旧保持着这个功能呢？
这就是依赖注入的用武之地。依赖注入（DI）是软件设计的一部分，它实现了如何创建对象(object)和功能函数(function)，以及如何正确找到它们的依赖关系。在Angular中，所有的东西（指令，过滤器，控制器，服务，...）的创建都有使用依赖注入。在Angular中，DI的容器是注入器(injector)
要使用DI，我们首先是要在需要使用的地方进行注册。在Angular中，我们是在模块(modules)中进行注册的。当Angular启动时，它会执行模块的配置(config)然后根据ng-app指令开始执行，在执行前，模块会根据配置的名称去加载所有依赖的模块。
在上面的例子当中，包含了一个指令ng-app="invoice2"。这是在告诉Angular，应用程序的主模块适用名为：invoice2的模块作为主模块。代码段：angular.module('invoice2', ['finance2'])指定了invoice2的模块依赖于finance2模块。也就是说，InvoiceController 控制器使用了currencyConverter 服务中的功能。执行到这里Angular知道该应用程序的所有部分了，接下来就是去创建它们了。在上一节我们的控制器使用工厂函数来创建的。在服务方面有多种方式来定义自己的工厂（见服务指南）。在上面的例子中，我们在服务的工厂(factory)中使用了一个函数去返回了一个currencyConverter 函数功能。
回到最初的问题：如何在InvoiceController控制器中得到一个服务中的currencyConverter功能？在Angular中，这是通过在构造函数中简单地定义参数进行实现的。有了这个，injector能够根据顺序去创建正确的对象，并且在创建前，会先调用创建依赖对象并调用它们的工厂函数。在InvoiceController 中，有一个currencyConverter的参数，有了它，Angular就知道控制器和服务之间的依赖性，并调用与服务实例作为控制器的参数。
无论是上一个例子还是这一个例子，我们都可以看到，我们在module.controller 函数中，有一个数组，数组首先包含了控制器需要服务相关的名称，它就是在注册所依赖的模块。数组中的最后一项是控制器构造函数。Angular使用此数组语法定义的依赖关系，使得减少了代码污染DI。
访问后台服务
让我们来实现一下我们上面说到的，使用雅虎汇率服务API，去通过网络获得实时的汇率信息。
第一个文件：invoice3.js
angular.module('invoice3', ['finance3'])
.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!");
};
}]);
第二个文件: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&callback=JSON_CALLBACK';
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.jsonp(url).success(function(data) {
var newUsdToForeignRates = {};
angular.forEach(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,
refresh: refresh
};
}]);
第三个文件：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>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
效果图：
这个示例又有什么变化呢？我们的finance 模块的currencyConverter 服务，使用了$http,$http是一个AngularJS内置的用于访问服务器的后端数据的服务。$http 使用的是XMLHttpRequest 技术和 JSONP 进行传输.
