第一眼——AngularJS

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>

• 初始化Angular應用管理邊界
  給元素加上一個屬性ng-app（實際上是Angular定義的指令，它聲明一個angu的管理邊界）

<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>

• 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. 監聽頁面中的請求和行爲

2. 訪問處理數據

3. 將數據同步到view

控制器關注的部分

• view

• css

• image

• html

• js

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

控制器實現步驟：

1. 聲明控制器

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

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

//在模塊
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', []).controller('mycontroller', function() {
    $scope.sendMessage = function() {
        $scope.message = "I\'m message!";
    }
});

---

第一眼，咱們看到了：
AngularJS的核心業務（優點，解決的問題）、使用方式、編程模式（MVC）、基本的數據交互。使得這個強大的框架終於將虛掩的門打開。
第二眼，就一探究竟吧。