爲什麼要使用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的流程
- 藉助npm下載到本地
- 在HTML代碼中引入Angular.js包
- 在JS代碼中通過
angular.module('myApp', [])註冊一個模塊 - 在HTML代碼中將剛剛定義的模塊通過
ng-app="myApp"指令的方式作用到一個特定的元素上 - 根據當前頁面的情況（業務塊）劃分控制器
- 在HTML代碼中將剛剛定義的控制器通過
ng-controller="ControllerName"作用到特定的元素上 - 建模（根據界面原型抽象一個數據模型）得到一個視圖模型（ViewModel）
- 在JS代碼中通過
$scope暴露需要提供到頁面的數據成員 - 在HTML代碼中將剛剛暴露出來的數據通過類似
ng-model/{{}}/ng-click之類的指令綁定到特定的元素上 - 在JS中完成業務邏輯（還可以展開）
- 在思想上：
- JQ提高了操作DOM的開發效率
- NG幾乎沒有任何DOM操作（不是沒有，只是不用我們自己操作）
- NG內置一個類似JQ的東西
angular.element() - Angular 不提倡DOM操作，如果必須使用DOM的話，也不建議再去引用jquery，有內置
如何查看angular離線文檔
- angular文檔設計的非常好都是一個功能一個功能的js分開的，主模塊有1000多kb,這個應該是大家見過的最大的js庫了
- 因爲angularJS的文檔需要引用angularjs的東西，所以要用http-server模塊打開的話，必須在文檔的根目錄啓動hs -o
Angular 核心概念
- 模塊化
- MVC - 思想
- 指令
- 雙向數據綁定
angular.module（模塊）
作用
- 通過模塊對頁面進行業務上的劃分
- 將重複使用的指令或者過濾器之類的代碼做成模塊，方便複用
- 注意必須指定第二個參數，否則變成找到已經定義的模塊
語法
- 根據不同的功能劃分不同的模塊。
- 創建一個模塊
- 語法：
angular.module('模塊名',[])- 第二個參數是個數組,這個數組裏的每一個元素，是我們當前模塊依賴的其他模塊
- 注意: 即便我們不依賴其他的模塊，也需要傳遞一個空數組
因爲如是不傳第二個參數的話，這個方法的作用就會變爲獲取一個名爲"模塊名"的模塊對象 angular.module('myApp'),是獲取一個名爲myApp的模塊對象。- 我們需要給ng-app指令一個屬性值，這個值就是我們創建的模塊名:
- 告訴anuglar,現在由我們自己創建的這個模塊來管理頁面。
angular.controller（控制器）
作用
- 爲應用中的模型設置初始狀態
- 通過$scope對象把數據模型或者函數行爲暴露給視圖
- 監視模型的變化，做出相應的動作
語法
- 控制器是通過模塊對象來創建的:
-
語法:
var app = angular.module('模塊名',[])app.controller('控制器的名字',function($scope){ // 在這個function裏寫我們具體想要執行的代碼 // $scope 就是用來存儲我們的數據模型. }) -
我們需要在頁面上使用了數據模型的元素父級元素上加上ng-controller指令，並給這個指令一個屬性值，這個值就是我們創建的控制器名字。
雙向數據綁定(雙向數據綁定)
- 頁面文本框的值改變，導致數據模型的值發生改變，
- 數據模型的值的改變，反過來導致頁面文本框的值的改變，這種相互影響的關係，我們起了個名詞，叫作雙向數據綁定。
- ng-model = ""
單向數據綁定
- 只能一數據模型的值改變，導致頁面值的改變;
MVC 思想
什麼是 MVC 思想
- 將應用程序的組成劃分爲三個部分：Model View Controller
- 模型：數據處理
- 視圖：以友好的方式向用戶展示數據
- 控制器：業務邏輯處理
- 控制器的作用就是初始化模型用的；
- 模型就是用於存儲數據的,做一些業務邏輯的操作。
-
視圖用於展現數據
用MVC構建應用的優勢
- 剝離開視圖和邏輯之間的關係，無論怎麼修改dom操作都不用修改業務邏輯代碼