AngularJS是个啥？
诞生于2009年，2012年被google收购，是一个适用于CRUD、SPA等类型应用的前端MVC框架
为什么要使用AngularJS
在涉及数据绑定的操作过程中，经典的做法是用AJAX将数据从服务端取回，接着将数据解析成变量，然后在前端进行字符串的拼接、嵌套，再插入到页面。
低数据量的绑定这样的操作的确无可厚非，但是在数据量庞大的时候（比如需要拼接成百上千行的字符串），这种方式就显得难以执行且不太科学了。
在这样的背景下，AngularJS诞生了，它是一种MVC模式的前端框架，为前后端的数据绑定提供了一套解决方案，并自定义了一套事件标准，使得前后端的数据交互更加的合理化并且高效，利于管理。
构建第一个AngularJS应用
下载AngularJS
与大部分框架一样，AngularJS有开发版（可读）和压缩版（不可读，用于生产环境），这里我们下载AngularJS的压缩版
https://angularjs.org/
由于目前大部分应用尚未进行Angular2改造，因此这里使用第一代Angular，之后再对Angular2渐进增强
引入AngularJS
<script src="./lib/angular.min.js"></script>
<div ng-app="app"></div> <!--此div现在受到AngularJS约束-->
调用Angular对象，管理ng-app
angular.module('app',[])//数组代表依赖注入的内容
AngularJS将所有api封装到angular对象中
使用angular对象管理边界的时候，要先声明一个angular模块，对这个模块的操作，即是对管理边界的控制
在管理区域内加入内容
<div ng-app="app">
{{ 'This is your first Angular App!' }}
</div>
基本指令
指令：带有特定功能的自定义属性
指令格式：ng-command
基本指令：
初始化应用管理边界——
ng-app
定义Angular的应用管理边界，前面已经使用到初始化数据指令——
ng-init
定义初始化的数据
<div ng-app="app" ng-init="username='Hello U!'">
{{ username }}
</div>
这个数据可以是除函数外的任意的js数据类型
<div ng-app="app" ng-init="user={ username: 'Samuel',sayHello: 'Samuel say hello to you!' }; date=[1,2,3,4,5,6,7]">
{{ user.username }}
<br>
{{ user.sayHello }}
<br>
今天是星期{{ data[2] }}
</div>
动态数据模型——
ng-model
它接收页面上动态数据的变化
<div ng-app="app">
<input ng-model="text" />
<span>监听到输入框的变化{{ text }}</span>
</div>
数据绑定——
ng-bind
将数据绑定到当前元素
<div ng-app="app" ng-init="username='Samuel'">
<span ng-bind:"username">
{{ username }}
</span>
</div>
它与花括号表达式不同，它只能将数据绑定到html内容中（类似innerHTML实现），而花括号表达式可以将数据绑定到任何地方
<div ng-app="app" ng-init="username='Samuel'>
<p id="{{ username }}"></p>
</div>
PS：ng-model也能实现数据的捆绑，但破坏了规范的分工机制，不提倡
遍历——
ng-repeat
<div ng-app="app" ng-init="datalist=[1,4]">
<p ng-repeat="$item in datalist">{{ $item }}</p>
</div>
遍历datalist，根据遍历的情况生成元素，并且可以在元素中使用遍历到的数据
控制器 controller
既然Angular是MVC模式的框架，那么一定有一个controller（C）层面
控制器的作用：
监听页面中的请求和行为
访问处理数据
将数据同步到view
控制器关注的部分
view
css
image
html
js
插个楼！——$scope
$scope是angular对象内置服务对象，关联当前ng-app，是ng-controller实现内部数据和事件方法绑定（可以说是托管到$scope上，并通过$scope去调用）的核心对象
控制器实现步骤：
声明控制器
<div ng-app="app" ng-controller="mycontroller"></div>
通过应用边界管理模块去监听控制器
//在模块
var app = angular('app',[]).controller('mycontroller',function() {
//这里就要使用到$scope来进行数据的控制
$scope.hostage = "I am a hostage,controlled by Samuel"
$scope.something = "I am something."
})
AngularJS事件
AngularJS自己定义了一套事件标准，通过指令的形式进行监听
示例：
单击事件——
ng-click
html:
<div ng-app="app" ng-controller="mycontroller">
<button ng-click="sendMessage()">sendMessage</button>
<span>I'm wating for message.</span>
<br>
<span>{{ message }}</span>
</div>
js:
var app = angular.module('app',function() {
$scope.sendMessage = function() {
$scope.message = "I\'m message!";
}
});
第一眼，我们看到了：
AngularJS的核心业务（优势，解决的问题）、使用方式、编程模式（MVC）、基本的数据交互。使得这个强大的框架终于将虚掩的门打开。
第二眼，就一探究竟吧。
