AngularJS初识

最近公司的项目前端框架用到了VX框架，其框架是在AngularJS上做了一点小小的封装，然后就有想法把AngularJS这个框架整一遍。。。。。。

一、AngularJS初识

首先，AngularJS 是一个JavaScript 框架。它可通过AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到HTML。AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications），单页面应用也可以搞一波。。。。

（说到底，angularJS也还是一个js框架，但是它有自己的一套标准，使用跟jq类似，先导库或者cdn的形式）

AngularJS 扩展了 HTMLAngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 AngularJS 应用程序。

ng-model指令把元素值（比如输入域的值）绑定到应用程序。ng-bind指令把应用程序数据绑定到 HTML 视图。

看个小例子：

解释：当网页加载完毕，AngularJS 自动开启。

ng-app指令告诉 AngularJS，元素是 AngularJS应用程序的"所有者"。

ng-model指令把输入域的值绑定到应用程序变量name。

ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。

二、什么是 AngularJS？以及一些特点，能干什么？

        AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。AngularJS 把应用程序数据绑定到 HTML 元素（MVVM数据双向绑定）。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素"背后"添加代码。AngularJS 支持输入验证。

三、AngularJS 指令

        正如您所看到的，AngularJS 指令是以ng作为前缀的 HTML 属性。ng-init指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是可以使用 data-ng- 来让网页对 HTML5 有效。

四、AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像JavaScript

表达式：它们可以包含文字、运算符和变量。

例子如下：

五、AngularJS 应用

AngularJS模块（Module）定义了 AngularJS 应用。

AngularJS控制器（Controller）用于控制 AngularJS 应用。

ng-app指令指明了应用,ng-controller指明了控制器。

例子：

注：

上面的例子，你会发现你改动ng-model的数据时，控制器里面的也会变，当你改动控制器里面的值时，表单里面的值也会改变，感觉是一种动态的数据绑定，而且是双向的。

未完待续。。。。。。。。。