主題:
本篇主要介紹下angular里的一些概念,並且在咱們的小應用上加上點料。。
概念(大概了解即可,代碼中遇到的會有詳細注釋):
模板:動態模板,是動態的,直接去處理DOM的,而不是通過處理字符串模版(靜態模板)
mvc:核心思想實現“數據管理-數據模型Model、應用邏輯-控制器Controller、數據表現-視圖View”三者的之間的分離。view從model獲取數據把數據展示到界面上,當有用戶操作處理交互時,控制器controller去改變數據model,然后通知view去做相應的改變;各司其職。
雙向綁定:意味着當model變化的時候,view也去改變,view改變的時候,model也會相應的發生變化,也就是MVVM的概念,VM就是view和model的樞紐所在。
scope:是一個view和控制器之間的紐帶,也就是作為數據模型model的,scope負責去監聽model的變化,同時scope是和html結構一樣具備層次結構的,每個angular app都會有且只有一個rootScope,他可以有childScope,每個childScope會有parentScope和childScope,也就意味着是可以繼承的,繼承方式也是原型繼承,每一個childScope繼承自他的parentScope。
controller:view后的代碼,在angular中,規范的是在controller中不出現任何的DOM操作,controller僅僅是去更改(創建)scope上的數據就ok了,所以在ag中跑單元測試時很容易的。
model:數據模型,與模板結合產生視圖,在angular中,他是scope的一個屬性,值可以是任何的JS的對象(數字 字符串 數組...)
view:就是咱們的HTML呈現,angular會便利DOM樹,然后經過compile,在和scope數據結合,完整的呈獻給用戶。
directive:指令,可以說是angular中相當占分量的概念,可以理解為去擴展HTML元素,使其具備一定的特性或者功能,類似於組件化HTML的意思,如果說DOM操作的話,就是在這里完成的;有人說這是未來的方向還是很有道理的,未來通道polymer O(∩_∩)O
依賴注入:其他好多語言也有這個概念,這樣我們就不用創建依賴關系了,angular會自動幫我們注入到調用函數的參數中。
module:模塊,可以理解為某類功能特性的集合,是一個應用塊,模塊是可以被依賴注入的,也是配置依賴的地方。
表達式:一個普通的JS代碼片段,我們可以通過$parse服務對表達式求值,除了if else switch throw while for啊這些,基本上其他的JS代碼片段都可以被parse求值,此外還增加了過濾器filter的管道|語法,例如3*10|currency,詳見官網。
當然,還有一些概念這里是沒涉及到的,例如service啊等等,等后邊用到的時候,再去看也ok。
效果圖:
細節:
說一下咱們的目的,密碼長度限制,最長不超過10位,咱這里只是簡單的demo,所以定10位;但用戶輸入的密碼長度超過10的時候,提示用戶,同時下邊的預覽區域,顯示的輸入密碼只會顯示10個,超出部分不顯示。
之后會模擬注冊(這里也意味着登錄成功),然后跳轉到主頁,也就是咱們的主題內容部分。
詳見代碼注釋即可。。
結束語:
開始旅程。。
本篇源碼:https://github.com/dolymood/angular-example/tree/ls_2
歡迎吐槽