[AngularJS]Chapter 1 AnjularJS简介

创建一个完美的Web应用程序是很令人激动的，但是构建这样应用的复杂度也是不可思议的。我们Angular团队的目标就是去减轻构建这样AJAX应用的复杂度。在谷歌我们经历过各种复杂的应用创建工作比如：GMail、Map和日历。我们认为我们有必要把这些经验总结下来传授给大家。

我们希望在编写web应用程序时就像是我们第一次写代码一样，写完了回过头惊奇地看着将会发生什么。我们希望在编码的过程像是在创造而不是为了满足浏览器内部怪异的工作原理。

　与此同时，我们需要一个能使设计一种容易创建和使用的应用变得简单的环境，这种环境也能使程序易于测试盒拓展和维护当这个程序变得庞大的时候。

　我们打算使用AnjularJS来作为这样环境的开发框架。我对我们已经取得的成就感到非常满意。这也主要归功于帮助AnjularJS更加完善，教了哦我们一些东西的和AnjularJS相关的开源社区。我希望你能加入我们使AnjularJS更加完善。、

【概念】

当你构建anjularJS应用的时候，你会遇到这样几个核心概念。这些并不是我们发明的，而是我们从其他框架中借鉴过来的。

【客户端模板】

多页面的web应用程序通过后台服务器程序在HTML中填充数据，然后把结果返回给浏览器。单页面应用程序也成为AJAX应用程序也是这样做的，但是做了一些拓展。anjularJS所不同的是它是在客户端完成HTML模板和数据的组合工作。这样，服务端就成了为前端提供静态资源的角色，并对这些资源进行维护。

让我们举个例子来看看anjularJS是如何在前端组合HTML模板和数据的。我们来举一个hello，word例子，但我们并不把Hello，world写在html里，我们把hello这个问候语写成我们可以再以后更改的数据形式。

我们写这样一段HTML

 1 <html ng-app>
 2 <head>
 3   <script src="angular.js"></script>
 4   <script src="controllers.js"></script>
 5 </head>
 6 <body>
 7   <div ng-controller='HelloController'>
 8     <p>{{greeting.text}}, World</p>
 9   </div>
10 </body>
11 </html>

View Code

在Controller.js中这样写逻辑

1 function HelloController($scope) {
2   $scope.greeting = { text: 'Hello' };
3 }

View Code

运行这个页面我们将看到这样的结果

Hello，world

这里有两件跟我们现在广泛使用的方法所不同的事要特别指出一下。

1、这里面没有id或class来制定从哪指定事件。

2、当hellocontroller设置了greeting.text的值为hello，我们没有注册任何事件监听者和回调函数。

3、hellocontroller只是一个单纯的js函数，没有继承任何anjularJS提供的东西。

4、hellocontroller有一个$scope变量，并且之前我们没有创建它。

5、我们没有调用hellocontroller，也没指定啥时候调用它。

我们之后再说其他不同的地方。但是现在你应该知道anjularJS的应用程序和我们之前构造的应用程序有很大不同

我们为什么这样设计，anjularJS是如何工作的？我们看看anjularJS从其他地方借鉴来的东西先。

【模型-视图-控制器（MVC）】

MVC应用程序架构是在19世纪70年代作为Smalltalk的一部分提出来的。自从被提出以来。它就成为了构建应用程序的流行架构。无论Java、c++还是OC都能看到MVC的影子。但是MVC对于web应用构建还是很不成熟。

MVC的核心就是处理数据、逻辑和界面的分开。

视图从模型中取得数据，展示给用户。当用户和应用程序交互的时候。控制器来负责相应。然后更新模型中的数据，模型通知视图数据的改变然后展示给用户。

在Anjular应用程序中，属兔就是DOM，控制器是JavaScript的类，模型数据存储在对象属性中。

我们认可MVC因为有这几个原因：首先，它给你一个元数据模型来让你存数据，这样你不用每次用的时候重新产生数据。你的项目会在理解你写了什么上有优势，当他们知道你在使用MVC结构来组织你的代码。也许最重要的我们要让你的app易于拓展维护和测试。

【数据绑定】

以前的AJAX单页面应用程序很常见，这样的平台有Rails,PHP，JSP帮助我们创建用户界面通过拼凑html和数据的方式，然后再把这些送回客户端展示出来。

类似于就Query这样的库拓展了这种方式到客户端，并且使我们以一种相同的方式。但是能单独的更新DOM，而不是更新整个页面。这里，我们组合HTML模版和数据，然后插入结果到DOM中通过设置某一元素的innerHtml。

这样的方式很好。但是当你想插入新的数据到UI中，或者改变基于用户输入的数据到正确的状态，在UI和JavaScript属性里。

但是如果我们能完成这些而不用写代码。如果我们只是生命那部分UI映射那部分JavaScript属性。让他嗯自动一步同步。这种编程的风格叫做数据绑定。我们把这种方式包含在anjularJS中是引文他能与MVC协同工作的很好。这能减少代码当你写视图和模型。把数据从一个地方移动到另一个地方的工作是自动完成的。

我们做一个例子解释。hellocontroller设置了模型greeting.text一次，之后就没再改变。我们修改这个例子通过添加一个能改变greeting.text值的文本框使greeting.text可变。

 1 <html ng-app>
 2 <head>
 3   <script src="angular.js"></script>
 4   <script src="controllers.js"></script>
 5 </head>
 6 <body>
 7   <div ng-controller='HelloController'>
 8     <input ng-model='greeting.text'>
 9     <p>{{greeting.text}}, World</p>
10   </div>
11 </body>
12 </html>

View Code

在浏览器中加载这个文件，我们看到如下的结果
[hello]

hello,world

没有注册一个文本框文字改变事件，我们的UI自动更新啦！这也会发生在与服务器的交互过程中。在我们的控制器中，我们能够向服务器我们

依赖注入
我们之前提到过但是还有很多关于hellocontroller我们没提到的。例如，$scope对象自动进行绑定数据。我们不需要通过调用任何方法创建它。我们只需要把它放到hellocontroller的函数体里。
我们这章的后半部分将要提到，$scope不是唯一我们可以访问到的对象。如果我们想绑定数据到用户浏览器的URL上。我们可以请求管理这项事务的对象通过把$location放到函数参数列表中，像这样：
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}
我们通过Anjular的依赖注入系统得到这样神奇的效果。依赖注入使我们遵循这样一种开发方式：不创建依赖，我们的类知道他们需要什么
这遵循了一种设计模式叫做Law of Demeter，也叫做最低知识准则。我们的hellocontroller的工作是去创建一个greeting模型的初始状态，这种模式不用担心其他的一些事，比如￥scope是如何创建的或者从哪找到他。
Directives
Anjular最好的部分就是你可以写HTML模板。你能这样做是因为框架的核心包含了一个强大的DOM转换引擎，使你能够拓展html的语法。
我们已经看见了模板中好多不是HTML的新的特性，例子包含了这样的数据绑定特性，ng-controller来制定哪一个控制器开控制试图的哪部分。还有ng-model绑定了模型的输入部分。我们把这些html拓展称之为directivesAnjular提供了很多directives帮你为你的app定义视图，我们将要介绍更多这些东西。这些directives定义了我们。他们能只是设定你的应用程序工作或者被用来创建可重用的组件。
当然，你也不是只能使用Anjular提供哦你的Directives。你可以写你自己的HTML模板拓展能力来满足你的需要。
【一个例子：购物车】
让我们看一个稍微大一点的例子。此例中展示了Augular更多的特性。我们想象一下我们要干什么去创建我们购物app。在这个app的某些地方我们将显示用户的购物车并且让他编辑。让我们掠过中间的步骤。
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>

下面就是一个简单的介绍。本书的其他部分再做深入讲解。
我们从头部开始
<html ng-app>
ng-app属性告诉Anjular要管理页面的那些部分。我们把它加到了HTML元素上。我们将桃酥Anjular我们想要它管理整个页面。这样做是很常见的。但是你可能想把它放到一个div里。在这个app里如果你想用一个已经存在的使用特定方法的app使用集成Anjular来管理页面
<body ng-controller='CartController'>
在Angular中，你管理页面某一部分的javascript类叫做controller。通过包含控制器在body标签，我就生命了CartController将要管理所有<body>标签中的所有内容。
<div ng-repeat='item in items'>
ng-repeat属性告诉这里边的东西是要循环显示的，，本例中将会产生三个div，每个都有产品题目，单位价格，总价，还有一个移除按钮。
<span>{{item.title}}</span>
通过{{}}来进行数据绑定，我们能从页面的其他部分插入数据，然后使他保持同步
<input ng-model='item.quantity'>
ng-model做了文本域和属性之间的数据绑定。
{{}}是一种单向数据绑定。我们同步数据的改变通过使用ng-model。当用户填写了一个新值的时候，ng-model改变了item.quantity的值。
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
anjular提供了一种特性叫做过滤器，使我们能够格式化文本。有这么一些列过滤器叫做currency过滤器能格式化美元。
<button ng-click='remove($index)'>Remove</button>
我们传入了一个$index参数，它代表了ng-repeat的序号，所以我们知道要删除的是谁。
function CartController($scope) {
这个CartController处理购物车的业务逻辑。我们告诉Anjular这个控制器需要$scope。$scope就是使我们能够绑定数据到UI中的东西
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
本例中加的这个items要在UI中显示。
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
我们想让remove()方法在UI可用，所以我们把它加入到了$scope变量里。
【下章预告】
本章很简单。下面讲述更多东西。