创建一个完美的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

 <html ng-app>

 <head>

   <script src="angular.js"></script>

   <script src="controllers.js"></script>

 </head>

 <body>

   <div ng-controller='HelloController'>

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

   </div>

 </body>

 </html>

在Controller.js中这样写逻辑

 function HelloController($scope) {

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

 }

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

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可变。

 <html ng-app>

 <head>

   <script src="angular.js"></script>

   <script src="controllers.js"></script>

 </head>

 <body>

   <div ng-controller='HelloController'>

     <input ng-model='greeting.text'>

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

   </div>

 </body>

 </html>

在浏览器中加载这个文件，我们看到如下的结果
[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变量里。
【下章预告】
本章很简单。下面讲述更多东西。

[AngularJS]Chapter 1 AnjularJS简介的更多相关文章

  1. anjularjs简介

    1 什么时候该用AngularJS AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅 ...

  2. AngularJS——第1章 简介

    第1章 简介 由谷歌公司开发维护的前端MVC框架,克服了HTML在构建应用上的诸多不足,降低了开发成本,提高了效率. 一个框架 以数据和逻辑作为驱动 AngularJS核心特性:模块化,双数据绑定,语 ...

  3. Angularjs入门学习一 简介

    本系列文章是从头开始学习angularjs,下文中用ng表示angularjs,要知道从以为根深蒂固的jquery开发者转变开发思想,确实需要一段时间,下面介绍以下 angularjs,我也是参考网上 ...

  4. [AngularJS]Chapter 8 秘籍诀窍

    <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <met ...

  5. [AngularJS]Chapter 5 与服务器交互

    第八章有关于缓存的东西. [通过$http交互] 传统的AJAX请求如下 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange ...

  6. [AngularJS]Chapter 3 使用AngularJS构建应用程序

    本章内容提要: 如何布置AngularJS进行快速开发 开启服务器进行测试 使用Karma进行单元测试用例测试 编译压缩AngularJS进行生产 使用Batarang进行Debug 如何简化开发工作 ...

  7. [AngularJS]Chapter 2 剖析安哥拉JS应用程序

    不同于普通的框架,你可以从中选择你想用的方法.在anjular中是不同组件写作工作的.这章中,你会看到anjular中基本的组成部分并且理解他们是如何协同工作的.很多组件会在以后的章节中详细讲解.[开 ...

  8. 《JavaScript高级程序设计》chapter 1: javascript 简介

    1.2.2 文档对象模型     DHTML的出现让开发人员无需重新加载页面就可以修改其外观了. 1.2.3 浏览器对象模型(BOM)     BOM真正与众不同的地方在于他作为javascript实 ...

  9. [AngularJS]Chapter 4 AngularJS程序案例分析

    前边讲的都是基础.本章看看他们怎么合作的. 我们要建一个程序.一次一步.章末结束 [这个程序] GutHub是一个简单的菜谱管理程序.功能是存好吃的的菜谱并提供步骤.这个程序包含: 两列布局 左边是导 ...

随机推荐

  1. jquery-Kendo框架

    从github上下载的包是完整的,可以根据readme.md上的步骤来操作 从官网下的那个包不是完整的,里面没有例子,只有源文件

  2. zoj 3034 - The Bridges of Kolsberg

    题目:在河两端有两排server,如今要把河两边同样的品牌型号的机器连起来.每一个电脑有个值, 每一个机器仅仅能与还有一台机器链接.而且不同的链接不交叉,如今要求链接的电脑总之最大. 分析:dp,最大 ...

  3. C++数值类型极限值的获取

    C/C++中基本类型的数值极限值一般来说都是与详细平台有关的,在程序设计的过程中为了写出与平台无关的程序则必须通过合理科学的方法去获取各种类型的极值,经常使用的获取方法有两种:一种是传统的C语言所採用 ...

  4. Chrome插件开发新手教程

    近期在用百词斩这个站点来学单词,感觉非常不错,就是在回想单词列表的时候仅仅有单词和意思.却没有读音.感觉非常不方便,思来思去,想到了Chrome插件能够胜任这个工作.于是小小的研究了一下. Chrom ...

  5. php面向对象之构造函数和析构函数

    php面向对象之构造函数和析构函数 简介 php面向对象支持两种形式的构造函数和析构函数,一种是和类同名的构造函数(php5.5之前),一类是魔术方法(php5.5之后).与类名相同的构造函数优先级比 ...

  6. 2016 提高组c++ 错题

    需重做 树的重心 链表 计算机基础知识 无线通讯技术: 蓝牙,wifi,GPRS 现在常用的无线通信技术:FM调频广播(用于收音机): 2G.3G移动通信技术(中国移动.中国联通.中国电信正在运营的网 ...

  7. 2.linux系统命令详解

    1 shell shell:命令解释器,根据输入的命令执行相应命令. 1.1 shell家族 察看当前系统下有哪些shell: cat /etc/shells 察看当前系统正在使用的shell ech ...

  8. ROS常用知识指南

    前言:介绍一些基础常用的知识. 一.标准单位 二.坐标表现方式 三.默认安装位置 通过apt-get安装的软件包, 默认安装位置为:/opt/ros/kinetic/share 四.软件包安装流程 4 ...

  9. 20个非常有用的Java程序片段--转

    原文地址:http://geek.csdn.net/news/detail/236591 下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = ...

  10. Android开发实现QQ三方登录 标签： android开发qq三方登录

    本文分为两个部分:一是QQ的授权部分:二是获取用户的基本信息部分 一.授权部分 1.首先,先去腾讯开放平台获取APP ID和APP KEY(未注册腾讯开发者账号的可能需要先注册账号),获取的过程还是还 ...