AngularJS學習

1、AngularJS四大特性:MVC 、模塊化、雙向數據綁定、指令系統。
(1)MVC:一個古老的框架,MVC開始是存在於桌面程序中的,M是指業務模型,V是指用戶界面,C則是控制器,使用MVC的目的是將M和V的實現代碼分離,從而使同一個程序可以使用不同的表現形式。比如一批統計數據可以分別用柱狀圖、餅圖來表示。C存在的目的則是確保M和V的同步,一旦M改變,V應該同步更新。
這裏寫圖片描述
Model(模型)是應用程序中用於處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。
View(視圖)是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。
Controller(控制器)是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據,控制用戶輸入,並向模型發送數據。
(2)模塊化:在做angularjs時首先要考慮到的就是模塊化(module),因爲其他的東西都是掛在module下面的。只有將模塊創建出來後才能去調用config、filter、controller之類的。所以首先要創建模塊,然後在模塊下創建控制器。
(3)指令系統:可以自定義一堆指令。ng-app就是一個指令,它類似於main方法,當遇到它時,就是說明開始使用angularjs。angularjs就是從ng-app啓動的,所以單頁也只能有一個。
(4)雙向數據綁定:首先要說一下
單向數據綁定*它是將已經做好的模板和model從後臺讀取的數據相互綁定,生成HTML標籤並將其插入到文檔流裏面生成視圖,這就是經典的單向數據綁定。缺點是因爲生成的HTML標籤一旦生成就不能改變,一旦數據改變就要從新再次讀取數據並進行綁定,將整體替換。*backbonejs不實現雙向數據綁定的解釋:大概的意思就是雙向數據綁定在實際的運用中很少,沒必要。
這裏寫圖片描述
雙向數據綁定視圖與數據是對應的,當視圖裏面的數據發生變化時(例如表單數據發生變化,當用戶在前端頁面完成輸入後,不用任何操作,我們就已經拿到了用戶的數據存放到數據模型中了。),數據模型裏面的數據也要發生變化。當數據模型裏面的數據發生變化時,視圖裏面的數據也會自動去更新。這裏就需要藉助一個事件機制。實現雙向數據綁定的前端框架主要有AngularJS,VueJS等。
這裏寫圖片描述
2、爲什麼需要MVC?
前端代碼規模越來越大,切分職責是大勢所趨
爲了複用:很多邏輯是一模一樣
爲了後期維護方便:修改一塊功能不影響其它功能

MVC只是手段,終極目標是模塊化和複用

3、前端實現MVC的困難
操作dom的代碼必須等待整個頁面全部加載完成
多個js文件之間如果出現互相依賴,程序員必須自己解決
js的原型繼承也給前端編程帶來了很多困難

因爲:瀏覽器加載腳本是以字符串形式加載的,然後通過內部的JIT進行編輯
4、MVC實現方式:這裏寫圖片描述
一個控制器對應一個視圖,當多個控制器有通用的東西,我們會把它抽出來,作爲一個服務service來調用而不是讓控制器繼承通用的控制器(易錯點)
注意
不要用視圖去複用Controller,一個控制器一般只負責一小塊視圖,同時控制器裏面也有一些業務邏輯,業務邏輯的可複用性不強;
不要在Controller中操作DOM,這不是控制器的職責,DOM操作進行封裝放在指令裏面(操作DOM的效率很低,因爲HTML標籤的改變會造成瀏覽器去重寫和重繪);
不要在Controller裏面做數據格式化,ng有很好的表單控件;
不要在Controller裏面做數據過濾,ng有$filter服務;
一般來說,Controller是不會相互調用的,控制器之間的交互會通過事件。 控制器之間進行互相交互的方法:通過scope或者是數據模型上的事件去進行交互,controller在內部去進行監控事件,來實現一些操作。
這裏寫圖片描述
5、如何複用model:
ng-modle運行機制:頁面加載完成後angular啓動,當找到ng_app之後angular就自動認爲ng_app內的內容都是由它負責,然後去找這些程序裏面所有的指令,並進行編譯操作。找到ng-modle,生成ng-modle裏面定義的數據模型,這個數據模型是掛在所謂的**rootScopengappangularnewangular scope對象的上面。
這裏寫圖片描述
這裏寫圖片描述
6、如何複用view(利用指令去實現視圖的複用)
這裏寫圖片描述
7、AngularJS的MVC是藉助$scope(作用域)實現的,遵循js屬性查找機制,會向上查找。
AngularJS也有事件機制,向上傳播與向下傳播。
這裏寫圖片描述
可以使用firebug上面的插件進行輔助調試。
這裏寫圖片描述

發佈了25 篇原創文章 · 獲贊 10 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章