AngularJS学习之路--入门篇

前言--什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素"背后"添加代码。

AngularJS 支持输入验证。

Note:

下载链接：https://code.angularjs.org/（博主首推）

http://angularjs.org

https://github.com/angular/angular.js(AngularJs GitHub)

1.0
AngularJS历史

AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。
AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。
这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。

1.1
简介

a). AngularJS是由谷歌开发出来的，它是为了克服HTML在构建应用上的不足而设计的。
b). AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
（1）使用双大括号{{}}语法进行数据绑定；
（2）使用DOM控制结构来实现迭代或者隐藏DOM片段；
（3）支持表单和表单的验证；
（4）能将逻辑代码关联到相关的DOM元素上；
（5）能将HTML分组成可重用的组件
c). AngularJS可以认为是一个MVC模式的框架Model-View-Controller)，其中M代码scope,V代表Html展示元素，
C代表Controller.你也可以将它看成是一个MVVW模式的框架（Model-View-ViewModel），其中其中M代码scope中的数据,
V代表Html展示元素，VW代表scope.AngularJS和Jquery的设计思想完成不同
e). AngularJS 通过新的属性和表达式扩展了 HTML。AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。
f).AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页 面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
g). AngularJS 扩展了 HTML，AngularJS通过 ng-directives(指令)扩展了 HTML。

1.2主要特性

a).数据绑定
能够帮助避免书写大量的初始代码从而节约开发时间（通过 表达式 绑定数据到 HTML）。



b). 模板
在AngularJS中，一个模板就是一个HTML文件
c). MVC
MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西；
AngularJS并不执行传统意义上的MVC，更接近于MVVM（Model-View-ViewModel)。



d). 依赖注入（Dependency Injection，即DI）
AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
e). Directives（指令）
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

1.3
实例 (由于这是入门篇，所以代码以图片的形式展现，并在其中加入了讲解)

a).
简单实例

最后的运行效果是：实时显示你在文本框的输入信息

b).AngularJS表达式实例



c).AngularJS应用实例



运行效果图如下：



在文本框中输入文字，会实时显示输入信心

入门就先说到这吧，如果博文中有什么错误或者不解的地方，欢迎大家留言指出，谢谢大家！