AngularJs-第一章

来源：互联网发布：中国协同软件排名编辑：程序博客网时间：2024/06/05 23:57

英文原版免积分下载地址：http://download.csdn.net/detail/yangnianbing110/7695577

第一章：AngularJs简介

我们创建基于web应用的能力令人吃惊，这些web应用涉及到的技术也让人不敢相信，我们Angular团队想减少Ajax应用开发中的痛苦。在谷歌的工作过程中，通过构建如：gmail,map之类的大型web应用我们收获了很多经验，我觉得这些经验可以造福每一个人。

我们想让构造web应用更加便捷，而不是费劲脑筋去解决浏览器之间的兼容性问题。

同时我们希望有个环境可以让我们做设计选择，软件在开始阶段更容易构建，更容易测试，扩展以及维护。

通过Angular框架我们试图做到这一点，我们非常激动我们做到了，开源社区中围绕着Angular所做的大量的工作教会了我们很多，我们希望你也可以加入，帮助我们构建更好的Angular.

在GitHub中有更多的可以看到关于Angular的更多的应用。

概念：

在Angular应用中有几个关键的词必须理解，事实上这些并不是我么创造的，我们只是从其他的成功的方言中借鉴过来的。

客户端模板

多页面web应用通过拼装html页面以及获取服务器数据组合而成，拼装好的页面发送到客户端。大部分单页面应用，也被称之为Ajax应用同样如此。Angular应用同这里的模式不一样，angular应用中服务端的应用只是提供模板文件，以及对应的数据。

让我们看看浏览器中如何装配模板以及数据，我们以Hello Word为例，但是Hello World不是作为一个单独的句子，而是将Hello作为一个可变的结构进行拼凑而成的：

<head>

</head>

<body>

<p>{{greeting.text}}, world</p>

</div>

</body>

</html>

在controller.js中的逻辑代码：

function HelloController($scope){

$scope.greeting = {text:'hello'};

}

在浏览器中加载hello.html文件我们会看到hellow,world字样。

这其中有些有趣的地方和我们平常广泛使用的不一样：

没有class或者id标识用来添加时间监听器
HelloController设置greeting.text的值为hello的时候并没有注册任何监听器或者回调函数
HelloController是一个普通的javascript函数，没有继承至Angular任何东西
HelloController获取$scope对象，但是并没有创建这个对象
我们并没有调用HelloController的构造函数，也没有指名什么时候调用。

稍后我们还会看到更多的差异，但是目前为止我们已经知道了AngularJs应用和以往的应用很不一样。

为什么我们选择Angular，以及它是如何工作的？让我们看看AngularJs从其他应用借鉴到的好的思想。

模型视图控制器（MVC）

MVC思想在1970作为Smalltalk的一部分被引进的，之后MVC成为任何开发环境中的一部分，不论你使用的是C++，java或者Object-c,都包含着MVC的思想，目前为止，MVC体现在除了web开发之外的其他所有地方。

MVC背后的思想是分离视图和代码背后的逻辑。

视图从模型获取数据展示给用户，用户和视图交互的时候，控制器复制更新模型数据，最后模型通知视图去更新显示。

在Angular应用中，视图是DOM,控制器是javascript类，模型存储在对象属性中的数据。

我们认为MVC特别简洁的原因是：首先给出了模型，因此不用每次都去构造，能够很好的同你的同事协作，当然最大的好处应该是易于扩展维护以及测试。

数据绑定

之前的Ajax应用，例如Rail,PhP或者jsp都是在返回客户端之前合并数据以及html模板。Jquery这些类图用类似的方式，但是允许我们更新部分DOM结构而不是整个页面。

这种方式在一般的需求下工作良好，但是如果想将新的数据更新到UI或者根据用户的输入进行改变，就会需要很多的工作来保证数据的正确性。

如果可以不需要编写代码来完成这些功能呢？就好像定义了一个UI map让其自动去更新视图，这种编程方式称之为数据绑定，我们在Angular中包含了这种特性，大大减少了在编写视图以及模型是的编码量，数据从一个地方更新到另外一个地方都是自动完成的。

为了演示，我们举个示例。我们通过一个输入框改变greeting.text的值。

<head>

</head>

<body>

<p>{{greeting.text}}, world</p>

</div>

</body>

</html>

改变输入框中的值，<p>中的值也在跟着改变，UI可以动态的更新，我们也可以从服务器获取数据动态更新数据值。

依赖注入

我们之前提到过依赖注入，HelloController控制器中我们省略了很多代码。例如：$scope对象自动传入到我们的函数中，我们并没有创建该对象，我们只是在HelloController构造器中进行引用。

后面的章节我们会看到，$scope对象不是唯一一个可以直接引用的对象，如果我们想绑定地址到用户浏览器中，我们可以在构造函数中引入对象$location：

我们通过Angular的依赖注入系统实现这种神奇的功能，依赖注入让我们直接请求所需要的对象而不是自己创建。

这种设计模式被称之为迪米特法则，也被称为最少知识原则。HelloController的工作就是初始化greeting模型，该模式让其不需要关注其他任何东西，例如：$scope何时被谁创建的。

指令

Angular非常棒的地方就是你可以创建HTML模板，因为框架包含一个强大的DOM转化引擎让你去扩展HTML语法。

在创建的模板中，我们可以看到一些非HTML元素属性，例如：双括号包围起来的数据绑定，ng-controller指定了响应视图的控制器，ng-model给模型绑定数据，我们称这些扩展为指令。

Angular包含了很多指令用来创建视图，我们稍后会看到更多的指令，这些指定可以定义我们通常看到的模板，同时也可以以声明的方式定义程序是如何工作的或者创建可重用的组件。

而且我们不必局限于Angular提供的指定，也可以自定义指令扩展html实现你所想到的任何功能。

实例：购物车

让我开门看一个稍微大一些的示例。假想现在要创建一个购物App，我们需要让用户查看以及编辑购物车中的内容，让我们直接跳到那一部分吧。

<!DOCTYPE html>

<head>

</head>

<h1>Your Order</h1>

<span>{{item.title}}</span>

<span>{{item.price | currency}}</span>

<span>{{item.price * item.quantity | currency}}</span>

<button ng-click="remove($index)">Remove</button>

</div>

</body>

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>

</html>

下面对于上面的程序做一个简单的解释，本书剩下的部分会更加深入的描述。

让我们看看那最顶端：

ng-app属性告诉Angular其作用范围的边界，这里将其放置在html元素表示angular的作用范围是整个页面，但是你可以将其作用范围限制在某个div内。

Angular管理某个区域的javascript类称之为控制器，在<body>元素内添加ng-controller属性表示CartController会管理body内的所有内容。

ng-repeat用来遍历数组，div的内容随之数组元素的遍历会复制多遍，每次复制，模板中的item元素就对应当前数组内遍历的元素，在遍历得到的三个div便签内包含了商品的标题，数量，单价以及总价，还包含一个删除的按钮。

<span>{{item.title}}</span>

如我们在Hello World示例中看到的，数据绑定通过{{}}让我们将数据值同步到页面，表达式{{item.title}}检索当前item中的title属性值插入到Dom中。

ng-model创建了一个输入框的值和item.quantity变量之间的绑定。

span中的{{}}标记表达的意思是往这里插入某个值。我们希望的效果是应用程序能够检测到用户输入的数量并改变总价。

通过ng-model我们保持视图和模型的同步，ng-model会将item.quantity的值插入到输入框中，同时也会根据用户输入的新值更新item.quantity变量的值。

<span>{{item.price | currency}}</span>

<span>{{item.price * item.quantity | currency}}</span>

我们想将单价格式化为美元符号，Angular的过滤器功能能够让我们转化文本，这里添加了过滤器currency将数字格式化为美元符号，后面的章节我们会看到更多的过滤器。

<button ng-click='remove($index)'>Remove</button>

用户通过删除按钮移除指定的商品，点击按钮会调用remove()函数，我们传入$index表示当前遍历元素的数组下标。

function CartController($scope) {

CartController管理购物车的实现逻辑，我们告诉Angular控制器需要$scope，Angular就会传入$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}

];

通过定义$sscope.item变量表示用户购物车内的商品信息，将其绑定到$scope从而和UI进行绑定。

当然现实得项目中需要通过和服务器交互获取信息，稍后的章节我们会涉及到服务器的交互。

$scope.remove = function(index) {

$scope.items.splice(index, 1);

}

我们将remove函数绑定到$scope从而使其可以绑定到UI上面的操作，remove()操作删除掉数组中的元素，因为div和这些元素是绑定的，因此会一同被删掉。

0 0