angular入門系列教程2


主題:

本篇主要介紹下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

歡迎吐槽

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM