AngularJS 于 09年开发，后来成为Google公司的项目。
AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中HTML词汇使开发者可以使用HTML来声明动态内容。从而使得WEB开发和测试工作变得更加容易。
AngularJS功能
AngularJS是专门为应用程序设计的HTML
AngularJS使得开发现代的单一页面应用程序（SPAs：single page application）变得更加容易
1、AngularJS把应用程序数据绑定到HTML元素
2、AngularJS可以克隆和复制HTML元素
3、AngularJS可以隐藏和显示HTML元素
4、AngularJS在HTML元素“背后”添加代码
5、AngularJS支持输入验证
AngularJS号称下一代WEB应用 主要特性如下：
1、MVC
2、模块化和依赖注入
3、双向数据绑定
4、指令与UI控件
学AngularJS之前为什么要学ionic
1、AngularJS integrate-整合了AngularJS
2、URL routing , use AngularUI Router
url路由使用AngularUI Router 可以指定不同的路由，方便集成和开发
3、AngularJS Extensions & Directives 扩展了AngularJS指令
ion-tab, ion-content, ion-nav-view, ion-header
$ionicPopup, $ionicLoading, $ionicModal...
学习AngularJS 的资源
http://Angularjs.org 正常情况打不开
Angularjs下载：
通过nodejs下载：npm install angular
为了使用AngularJS我们需要做什么事？
1、下载加载AngularJS库
2、使用ng-app指令告诉angular应该管理DOM中的哪些部分？
AngularJS中常用名词 也就是所说的常用指令
HTML5允许扩展的（自制的）属性，以data-开头。
AngularJS属性以ng-开头，但是您可以使用data-ng-来让网页对HTML5有效
俗话说，下面的指令可以在开头加上data-
例如：ng-app等同于 data_ng_app
| ng-app(指令) | 定义应用程序的根元素 | |
| ng-bind | 绑定HTML元素到应用程序数据 | |
| ng-click | 定义元素被单击时的行为 | |
| ng-controller | 为应用程序定义控制器对象 | |
| ng-disabled | 绑定应用程序数据到HTML的disabled属性 | |
| ng-init | 为应用程序定义初始值 | |
| ng-model | 绑定应用程序数据到HTML元素 | |
| ng-repeat | 为控制器中的每个数据定义一个模板 | |
| ng-show | 隐藏或显示HTML元素 |
1、ng_app ng_bind ng_model {{}}
ng_app:
ng_app指令定义了AngularJS应用程序的 根元素
ng_app 指令在网页加载完毕时会自动初始化应用程序
例如通过一个值（ng-app="myModule"连接到代码模块）
ng-model指令：
ng-model绑定HTML元素到应用程序数据。
ng-model指令也可以：
为应用程序数据提供类型验证（number email required）
为应用程序数据提供状态（invalid dirty touched error）
为HTML元素提供CSS类
绑定HTML元素到HTML表单。
ng-bind指令等同于{{}}
绑定HTML元素到应用程序数据
ng-init指令
ng-init指令为AngularJS应用程序定义了 初始值
通常，不使用ng-init 您将使用一个控制器或模块来代替它。
|
<div ng-app="" ng-init="firstName='John'">
<p>姓名为：<span ng-bind="firstName"></span></p>
</div>
|
data-指令 data-ng-init 与 ng-init等价
|
<div data-ng-app="" data-ng-init="firstName='John'">
<p> 姓名为 <span data-ng-bind="firstName"></span></p>
</div>
|
实例
|
<!doctype html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
|
<!doctype html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
|
当页面加载完毕，AngularJS自动开启
ng-app指令告诉AngularJS <div>元素是AngularJS应用程序的“所有者”
ng-model指令把输入域的值绑定到应用程序变量name
ng-bind指令把应用程序变量name绑定到某个段落的innerHTML
AngularJS表达式
AngularJS表达式卸载双大括号内：{{expression}}
AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙
AngularJS将在表达式书写的位置“输出”数据
AngularJS表达式很像JavaScript表达式，他们可以包含文字、运算符和变量
|
<!doctype html>
<html>
<body>
<div ng-app="">
<p>我的第一个表达式：{{ 5+5 }} </p>
</div>
<script src="angular.min.js"></script>
</body>
|
AngularJS控制器
AngularJS控制器是控制AngularJS应用程序的数据
AngularJS控制器是常规的JavaScript对象
AngularJS应用程序被控制器控制
ng-controller指令定义了应用程序控制器
控制器是JavaScript对象，由标准的JavaScript对象的构造函数 创建
控制器的$scope是控制器所指向的应用程序HTML文件
angular中$scope是连接controllers（控制器）和 templates（模板 view/视图）的主要胶合体，我们可以把我们的model存放在scope上，来达到双向绑定，
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
