创建一个完美的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. Oracle 高水位(HWM: High Water Mark)

    http://blog.itpub.net/31397003/viewspace-2137246/ http://blog.itpub.net/12778571/viewspace-582695/ h ...

  2. asp.net-EF事物与存储过程

    FK_Equipment_EquipmentClass 这个是sql中的命名规范,外键名称在前面,主键名称在后面 EF事务的代码 DbTransaction tran = null; try { ne ...

  3. spring cloud 中Actuator不显示更多信息的处理方式

    spring cloud 中Actuator不显示更多信息的处理方式 直接咨询了周大立,他说 management.security.enabled = false 就可以了: 学习了:http:// ...

  4. [Tailwind] Get started with Tailwindcss

    In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. ...

  5. 第一篇、Android Supersu 权限管理定制，隐藏过滤权限，指定APP最高权限

    近期有个需求,在预装ROM的时候,须要权限,可是又不同意全部的应用都有权限,仅仅同意自己的应用有最高的权限(当然没有系统签名情况下). 所以.编译了CM 提取了supersu进行了二次定制,让他进行权 ...

  6. java old GC和young GC

    Java内存分配机制 摘自:http://www.cnblogs.com/zhguang/p/3257367.html 这里所说的内存分配,主要指的是在堆上的分配,一般的,对象的内存分配都是在堆上进行 ...

  7. 杂项-Java：Spring Cloud

    ylbtech-杂项-Java:Spring Cloud Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册. ...

  8. 19.QT对话框(文件对话框,颜色对话框,字体框,自定义对话框)

    文件对话框 #include<QFileDialog> //文件对话框 void Dialog::on_pushButton_clicked() { //定义显示文件的类型 窗口标题 可供 ...

  9. ROS-导航功能-RVIZ

    前言:slam使用激光雷达完成了地图构建,现在介绍一下自主导航.move_base用于实现最优路径规划,amcl用于实现机器人定位. 前提:已下载并编译了相关功能包集,如还未下载,可通过git下载:h ...

  10. centos7 usually use

    firewall-cmd --permanent --add-rich-rule 'rule family=ipv4 source address=192.168.22.103 port port=8 ...