Angular 框架介紹

庫和框架的區別

• jQuery：庫
  • 庫一般都是封裝了一些常用的方法
  • 自己手動去調用這些方法，來完成我們的功能
    code $('#txt').val('我是小明'); $('div').text('xx');
• angular：框架
  • 框架都是提供一種規范或者模式,
  • 我們卻要按照它提供的這種規則去寫代碼
  • 框架會自動幫助我們去執行相應的代碼.
• 其實可以簡單的理解為：大而全的是框架，小而精的是庫

AngularJs是什么

• 百度百科http://baike.baidu.com/link?url=CKrQ1574lIOkgQ8-FBB1fxuEJzIf0Jscf2n53rxuVjK37wm0M4LupH--17Ix6towMSRoizil9Dk8mqhK4-PXGK
• 一款非常優秀的前端高級 JS 框架
• 最早由 Misko Hevery 等人創建
• 2009 年被 Google 公式收購，用於其多款產品
• 目前有一個全職的開發團隊繼續開發和維護這個庫
• 其核心就是通過指令擴展了 HTML，通過表達式綁定數據到 HTML。
• Angular不推崇DOM操作，也就是說在NG中幾乎找不到任何的DOM操作
  • angular，幾乎不會使用angualr操作dom（但是angular內部肯定是使用dom來改變頁面的值）
• Angular 主要是來做什么的，幫助我們方便的去寫spa應用程序

什么是AngularJS

• 一個前端框架，提供一種無DOM操作的編程方式，在前端頁面中引入了傳統在后台開發中使用的一些思想，增強代碼的結構和可維護性
• 一個功能非常完備的前端框架，通過增強HTML的方式提供一種便捷開發Web應用程序的方式
• 其核心特點就是幾乎無任何DOM操作，讓開發人員的精力和時間全部集中於業務
• MVC的特性增強了代碼的結構和可維護性，應對需求的變化做出最小的改動

什么是 SPA

• single page application的縮寫
• 單頁應用程序
• 原理就是：通過監視hashchange事件，根據不同的url中的錨點值，去動態的發送ajax請求去請求數據（簡單的說就是不會看到頁面刷新）
  • 網站實例：music.163.com

SPA的優點

• 響應效果好，體驗好
• 重用資源
• 方便統一控制和代碼重用，不想訪問應用了，在入口的控制一下就可以。

擴展：如何獲取url中的各部分參數，比如hash

• 字符串操作
• 正則表達式去匹配url
• 創建a對象

var a=document.createElement('a'); a.hreg='http://www.baidu.com?id=23#home'; a.pathname a.hash a.search

為什么要使用Angular

• 總結一句話：為了更少的代碼，實現更強勁的功能
  • 很多操作都需要dom操作，但是angular中沒有那么多的dom操作，這是因為angular幫我們封裝了，減少了我們開發人員的dom操作
  • 一般在angular中就不會出現jquery了，因為這兩種思想正好是相悖的。
• 上面的意義只是皮毛，它真正的意義是:angular又是一場革命，帶領前端進入了MVX時代。
  • 這就像從手工業轉為機械工業一樣，以前很多東西都是我么你自己手動去做，現在我們有了gulp，webpack這些自動化構建工具。

Angular的使用

Angular相關資料

• AngularJS 1.x 官方網站
  • https://angularjs.org/
• AngularJS 2.x 官方網站
  • https://angular.io/
• Google Material Design for Angular
  • https://material.angularjs.org
• Angular UI（Angular最大的第三方社區）
  • http://angular-ui.github.io/
• AngularJS中文社區
  • http://www.angularjs.cn/
• AngularJS中文社區提供的文檔（不用FQ）
  • http://docs.angularjs.cn/api
  • http://www.apjs.net/

安裝 Angular

• 暴力安裝:
  • 手動的去github下載安裝
• 通過工具安裝:
  • npm : npm install angular
  • bower: bower install angular
• CDN
• 本質都為了拿到angular.js這個文件。

理解angular的整個開發流程

• ng-app:告訴angular來管理頁面的代碼塊是什么（ng-app所在元素及其子元素）
• ng-click : 類比成onClick，是用來為當前元素注冊點擊事件的

  ng-click="val = (val-0) + 1" 相當於： var add = document.getElementById('add'); add.addEventListener('click',function(){ }

• ng-model: 用來獲取文本框的值,是於input的value值進行了綁定。
  • 改變ng-model的屬性值對應的值，文本框的值就會改變,

  ng-model = "val";//angular就會幫助我們去創建一個val變量 相當於: var num = document.getElementById('num').value; 

• ng-init 指令: 用於對ng-model指定的值進行初始化操作

ng-init = "val = 10"

• ng-controller：我們的業務邏輯，數據模型都要寫在這里面

• $scope:這個就相當於我們所畫的途中的數據模型， 在它上面給以掛載變量和方法。

• 表達式: {{}}，相當於模板函數中的模板輸出
  • 在大括號內部寫上一個ng-model對應的文本框的值

使用AngularJS的流程

1. 借助npm下載到本地
2. 在HTML代碼中引入Angular.js包
3. 在JS代碼中通過angular.module('myApp', [])注冊一個模塊
4. 在HTML代碼中將剛剛定義的模塊通過ng-app="myApp"指令的方式作用到一個特定的元素上
5. 根據當前頁面的情況（業務塊）划分控制器
6. 在HTML代碼中將剛剛定義的控制器通過ng-controller="ControllerName"作用到特定的元素上
7. 建模（根據界面原型抽象一個數據模型）得到一個視圖模型（ViewModel）
8. 在JS代碼中通過$scope暴露需要提供到頁面的數據成員
9. 在HTML代碼中將剛剛暴露出來的數據通過類似ng-model/{{}}/ng-click之類的指令綁定到特定的元素上
10. 在JS中完成業務邏輯（還可以展開）

• 在思想上：
  • JQ提高了操作DOM的開發效率
  • NG幾乎沒有任何DOM操作（不是沒有，只是不用我們自己操作）
  • NG內置一個類似JQ的東西angular.element()
  • Angular 不提倡DOM操作，如果必須使用DOM的話，也不建議再去引用jquery，有內置

如何查看angular離線文檔

1. angular文檔設計的非常好都是一個功能一個功能的js分開的，主模塊有1000多kb,這個應該是大家見過的最大的js庫了
2. 因為angularJS的文檔需要引用angularjs的東西，所以要用http-server模塊打開的話，必須在文檔的根目錄啟動hs -o

Angular 核心概念

• 模塊化
• MVC - 思想
• 指令
• 雙向數據綁定

angular.module（模塊）

作用

• 通過模塊對頁面進行業務上的划分
• 將重復使用的指令或者過濾器之類的代碼做成模塊，方便復用
• 注意必須指定第二個參數，否則變成找到已經定義的模塊
  • 請參照資料-備課代碼-06-module.html理解

語法

• 根據不同的功能划分不同的模塊。
• 創建一個模塊
• 語法： angular.module('模塊名',[])
  • 第二個參數是個數組,這個數組里的每一個元素，是我們當前模塊依賴的其他模塊
  • 注意: 即便我們不依賴其他的模塊，也需要傳遞一個空數組
    因為如是不傳第二個參數的話，這個方法的作用就會變為獲取一個名為"模塊名"的模塊對象
  • angular.module('myApp'),是獲取一個名為myApp的模塊對象。
  • 我們需要給ng-app指令一個屬性值，這個值就是我們創建的模塊名:
  • 告訴anuglar,現在由我們自己創建的這個模塊來管理頁面。

angular.controller（控制器）

作用

• 為應用中的模型設置初始狀態
• 通過$scope對象把數據模型或者函數行為暴露給視圖
• 監視模型的變化，做出相應的動作
  • 請參照資料-備課代碼-08-reg2.html理解

語法

• 控制器是通過模塊對象來創建的:

  • 語法:
    var app = angular.module('模塊名',[])
app.controller('控制器的名字',function($scope){ // 在這個function里寫我們具體想要執行的代碼 // $scope 就是用來存儲我們的數據模型. })

  • 我們需要在頁面上使用了數據模型的元素父級元素上加上ng-controller指令，並給這個指令一個屬性值，這個值就是我們創建的控制器名字。

雙向數據綁定(雙向數據綁定)

• 頁面文本框的值改變，導致數據模型的值發生改變，
• 數據模型的值的改變，反過來導致頁面文本框的值的改變，這種相互影響的關系，我們起了個名詞，叫作雙向數據綁定。
• ng-model = ""

單向數據綁定

• 只能一數據模型的值改變，導致頁面值的改變;

MVC 思想

什么是 MVC 思想

• 將應用程序的組成划分為三個部分：Model View Controller
  • 模型：數據處理
  • 視圖：以友好的方式向用戶展示數據
  • 控制器：業務邏輯處理
• 控制器的作用就是初始化模型用的；
• 模型就是用於存儲數據的,做一些業務邏輯的操作。

• 視圖用於展現數據

• 請參照資料-圖片-03-富士康MVC類比圖和04-MVC在代碼中的應用理解

• 請參照資料-備課代碼-07-register.html理解

用MVC構建應用的優勢

• 剝離開視圖和邏輯之間的關系，無論怎么修改dom操作都不用修改業務邏輯代碼
• 請參照資料-備課代碼-09-calc2.html理解