Angular.js入门教程

简单介绍

AngularJS是为了克服HTML在构建应用上的不足而设计的。首先Html是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。

通常，我们可以通过以下技术来解决决静态网页技术在构建动态应用上的不足：

1.类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。例如jQuery等

2.框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：Knockout、sproutcore、EasyUi等。

AngularJS使用了不同的方式，去尝试补足HTML本身在构建应用方面的缺陷。。它通过使用一些内部约定好的结构，让浏览器能够识别新的语法。例如：

　　1.使用{{}}双大括号实现双向绑定

　　2.使用DOM控制结构来实现迭代或者隐藏DOM片段

　　3.支持表单和表单的验证

　　4.能将逻辑代码关联到相关的DOM元素上

　　5.能将HTML封装成可重用的组件

它提供了怎样的解决方案

AngularJS试图成为WEB应用中的一种端对端的解决方案。通俗点理解前端对后端。这样让AngularJS在构建一个CRUD程序时，仍能灵活变动。它的一些出众之处表现为：

构建Web应用可能用到的全部内容有：

　　1.功能方面：数据绑定、基本模版标识符、表单验证、Url路由、深度链接、组建重用、依赖注入

　　2.测试方面：单元测试、端对端测试、模拟和自动化测试框架

AngularJS下载地址：

https://angularjs.org/

第一个AngularJS程序，创建经典应用程序Hello Word：

 <!doctype html>

 <!--.0ng-app告诉AngularJS处理整个HTML页并引导应用-->

 <html ng-app>

 <head>

     <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

     <title>HelloWorld</title>

 </head>

 <body>

 <!--.0ng-model指的是绑定到yourname的模型变量（viewModel）-->

 Your name: <input type="text" ng-model="yourname" placeholder="World">

 <hr>

 <!--3.0{{}}是将yourname绑定到文本-->

 Hello {{yourname||'World'}}!

 </body>

 </html>

你可以尝试在输入框输入你的名称，你键入的名称将会立即更新到问候语中。这就是双向绑定的概念。

AngularJS的三个组成部分

模版（TemTemplates）

模板是您用HTML和CSS编写的文件，展现应用的视图。您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！

应用程序逻辑（Logic）和行为（Behavior）

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

数据（Data）

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。

此外，它还提供了一些有用的特性：

　　1.底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。

　　2.可以扩展和添加自己特定的应用服务。

　　3.这些服务可以让您非常方便的编写WEB应用。