第一眼——AngularJS

AngularJS是個啥？

誕生於2009年，2012年被google收購，是一個適用於CRUD、SPA等類型應用的前端MVC框架

為什麼要使用AngularJS

在涉及數據綁定的操作過程中，經典的做法是用AJAX將數據從服務端取回，接著將數據解析成變數，然後在前端進行字元串的拼接、嵌套，再插入到頁面。

低數據量的綁定這樣的操作的確無可厚非，但是在數據量龐大的時候（比如需要拼接成百上千行的字元串），這種方式就顯得難以執行且不太科學了。

在這樣的背景下，AngularJS誕生了，它是一種MVC模式的前端框架，為前後端的數據綁定提供了一套解決方案，並自定義了一套事件標準，使得前後端的數據交互更加的合理化並且高效，利於管理。

構建第一個AngularJS應用

1. 下載AngularJS

與大部分框架一樣，AngularJS有開發版（可讀）和壓縮版（不可讀，用於生產環境），這裡我們下載AngularJS的壓縮版

https://angularjs.org/

由於目前大部分應用尚未進行Angular2改造，因此這裡使用第一代Angular，之後再對Angular2漸進增強

2. 引入AngularJS

```html

```

3. 初始化Angular應用管理邊界

給元素加上一個屬性``ng-app``（其實是Angular定義的指令，它聲明一個angu的管理邊界）

<div ng-app="app"></div> 

4. 調用Angular對象，管理ng-app

angular.module(app,[])//數組代表依賴注入的內容

AngularJS將所有api封裝到angular對象中

使用angular對象管理邊界的時候，要先聲明一個angular模塊，對這個模塊的操作，即是對管理邊界的控制

5. 在管理區域內加入內容

<div ng-app="app"> {{ This is your first Angular App! }} </div>

Angular將頁面中所有的表達式進行解析，並輸出裡面的內容
Angular不需要在js中聲明邊界管理模塊也可以在頁面顯示內容

基本指令

指令：帶有特定功能的自定義屬性

指令格式：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,2,3,4]"> <p ng-repeat="$item in datalist">{{ $item }}</p> </div>

遍歷datalist，根據遍歷的情況生成元素，並且可以在元素中使用遍歷到的數據

控制器 controller

既然Angular是MVC模式的框架，那麼一定有一個controller（C）層面

控制器的作用：

1. 監聽頁面中的請求和行為
訪問處理數據
將數據同步到view

控制器關注的部分

view
css
image
html
js

插個樓！——$scope

$scope是angular對象內置服務對象，關聯當前ng-app，是ng-controller實現內部數據和事件方法綁定（可以說是託管到$scope上，並通過$scope去調用）的核心對象

控制器實現步驟：

1. 聲明控制器

<div ng-app="app" ng-controller="mycontroller"></div>

2. 通過應用邊界管理模塊去監聽控制器

//在模塊 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>Im wating for message.</span> <br> <span>{{ message }}</span> </div>