第214天:Angular 基礎概念

1、Angular 簡介

1、 什麼是 AngularJS

- 一款很是優秀的前端高級 JS 框架

- 最先由 Misko Hevery 等人建立

- 2009 年被 Google 公式收購，用於其多款產品

- 目前有一個全職的開發團隊繼續開發和維護這個庫

- 有了這一類框架就能夠輕鬆構建 SPA 應用程序

- 輕鬆構建 SPA（單一頁面應用程序）

- 單一頁面應用程序：

  + 只有一個頁面（整個應用的一個載體）

  + 內容所有是由AJAX方式呈現出啦的

- 其核心就是經過指令擴展了 HTML，經過表達式綁定數據到 HTML。

 

2、爲何使用 AngularJS

- 更少的代碼，實現更強勁的功能

- 將一些之前在後臺開發中使用的思想帶入前端開發

- 帶領當前市面上的框架走向模式化或者架構化

3、AngularJS 的核心特性

- MVC

- 模塊化

- 自動化雙向數據綁定

- 指令系統

4、相關連接

- http://www.apjs.net/

- http://www.angularjs.cn/

- http://docs.angularjs.cn/api

- https://material.angularjs.org

- http://angular-ui.github.io/

5、Angular 上手

- 安裝 Angular

 

（1）下載 Angular.js 的包

  + https://github.com/angular/angular.js/releases

（2）使用 CDN 上的 Angular.js

  + http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js

（3）使用 Bower 安裝

  ```bash

  bower install angular

  ```

（4）使用 NPM 安裝

  ```bash

  npm install angular

  ```

- 每種方式安裝包，本質都是將angular的庫下載到當前文件夾中

 

六、angular的優點

• Angular 最大程度的減小了頁面上的 DOM 操做；
• 讓 JavaScript 中專一業務邏輯的代碼；
• 經過簡單的指令結合頁面結構與邏輯數據；
• 經過自定義指令實現組件化編程；
• 代碼結構更合理；
• 維護成本更低；
• Angular 解放了傳統 JavaScript 中頻繁的 DOM 操做

7、angular中最重要的概念是指令（directive）

- ng-model 是雙向數據綁定的指令，效果就是將當前元素的value屬性和模型中的user.name創建綁定關係

八、運行官方文檔

因爲衆所周知的緣由，Angular 官網打不開

咱們須要本地運行 Angular 文檔

下載最新的 Angular 包

解壓後有一個 docs 文件夾

必須經過 http 服務器訪問該文件夾

能夠經過 SublimeServer 或者 http-server 運行

9、推薦工具

- 在線編輯器

  + https://jsfiddle.net/

 

2、 Angular 基礎概念

 1、MVC 思想

- 將應用程序的組成劃分爲三個部分：Model View Controller

模型：處理數據和業務邏輯

視圖：以友好的方式向用戶展現數據

控制器：組織調度相應的處理模型

 

- 控制器的做用就是初始化模型用的；

- 模型就是用於存儲數據的

- 視圖用於展示數據

 

- 登錄案例分析MVC思想

- 模型

  + 咱們數據庫中全部用戶的信息

  + 接受控制器傳來的用戶名和密碼進行校驗的業務邏輯並返回true/false

- 控制器

  + 接受用戶在界面上填寫的用戶名和密碼

  + 將用戶名和密碼交給模型

- 視圖

  + 給用戶呈現一個表單

  + 接受用戶輸入內容，並將其提交給控制器

  + 根據控制器返回的數據，響應用戶頁面

2、模塊（Module）

AngularJS很重要的一個特性就是實現模塊化編程，咱們能夠經過如下方式建立一個模塊，對頁面進行功能業務上的劃分

1 // 建立一個名字叫MyApp的模塊，第二個參數指的是該模塊依賴那些模塊
2 
3 var myApp = angular.module("MyApp", []);

也能夠將重複使用的指令或過濾器之類的作成模塊便於複用

注意必須指定第二個參數，不然變成找到已經定義的模塊

3、控制器（Controller）

調度邏輯的集合

 1 angular.module('OneApp', [])
 2 
 3     .controller('HelloController', [
 4 
 5         '$scope',
 6 
 7         function($scope) {
 8 
 9             $scope.p = {
10 
11                 name: 'zhangsan'
12 
13             };
14 
15         }
16 
17     ]);

 

控制器的三種主要職責：

• 爲應用中的模型設置初始狀態
• 經過$scope對象把數據模型或函數行爲暴露給視圖
• 監視模型的變化，作出相應的動做

 

// 監視購物車內容變化，計算最新結果

$scope.$watch(‘totalCart’, calculateDiscount);

 

$scope（上下文模型）

• 視圖和控制器之間的橋樑
• 用於在視圖和控制器之間傳遞數據
• 利用$scope暴露數據模型（數據，行爲）

4、表達式（Expression）

做用：

使用 表達式 把數據綁定到 HTML。

語法：

表達式寫在雙大括號內：{{ expression }}。

比較：

表達式做用相似於ng-bind指令

建議更多的使用指令

AngularJS表達式很像JavaScript表達式

它們能夠包含文字、運算符和變量

如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}

 

對比 JavaScript 表達式

相同點：

AngularJS 表達式能夠包含字母，操做符，變量。

 

不一樣點：

AngularJS 表達式能夠寫在 HTML 中。

AngularJS 表達式不支持條件判斷，循環及異常。

AngularJS 表達式支持過濾器。

五、數據綁定

• 單向數據綁定

　　　　模型變化事後，自動同步到界面上；

　　　　通常純展現型的數據會用到單項數據綁定；

　　　　使用表達式的方式都是單向的

• 雙向數據綁定

　　　　兩個方向的數據自動同步：

　　　　模型發生變化自動同步到視圖上；

　　　　視圖上的數據發生變化事後自動同步到模型上；