angular的基礎知識

2021-07-07 08:50:01 字數 1641 閱讀 7818

本篇主要介紹下angular裡的一些概念,並且在咱們的小應用上加上點料。。

模板:動態模板,是動態的,直接去處理dom的,而不是通過處理字串模版(靜態模板)

mvc:核心思想實現「資料管理-資料模型model、應用邏輯-控制器controller、資料表現-檢視view」三者的之間的分離。view從model獲取資料把資料展示到介面上,當有使用者操作處理互動時,控制器controller去改變資料model,然後通知view去做相應的改變;各司其職。

雙向繫結:意味著當model變化的時候,view也去改變,view改變的時候,model也會相應的發生變化,也就是mvvm的概念,vm就是view和model的樞紐所在。

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。

乙個能夠跑起來的頁面,神奇的效果,無需js**!

當然,這裡甚至連登陸都沒做,只是看到神奇的當輸入使用者名稱或者密碼的時候,下面的預覽區域也會有相應的更改。沒有一行的js**!

為什麼會這樣,這裡不多說,指的我們必須注意的一些細節:

乙個angular應用是跑起來的「入口」

,有兩方式:

2、大概過程

然後在下面的預覽區域,用了},也叫插值表示式,裡面的值是scope上的乙個屬性username,渲染出來的結果就是input的value值,這裡就是angular神奇的地方之一,他實現了雙向繫結,所以當咱們更改input的值得時候,scope.username就會發生改變,然後在插值表示式的地方就會相應的繫結,也就是說view繫結了model,model繫結了view,不管是view還是model更改了,相對應的都會一起更改。

Angular基礎知識

打包 ng build prod aot output hashing all pipe官網鏈結 get format get format 與date format進行資料繫結 template the hero s birthday is toggle format export class h...

angular路由詳解一(基礎知識)

本人原來是ios開發,沒想到工作後,離ios開發原來越遠,走上了前端的坑。一路走來,也沒有向別人一樣遇到乙個技術上的師傅,無奈只能乙個人苦苦摸索。如今又開始填angular的坑了。閒話不扯了。本人學習是根據官網教程,如果想根據官網教程學習,我建議先把官網的例子先學一遍,路由的路基部分,都是根據這個例...

Angular 4 0之表單基礎知識介紹

這兩天專案中涉及到了表單的內容,於是好好的把angular 4.0中表單的內容看了一下,總結了一些基礎的知識。總結的內容參考了以下 的內容,大佬們總結的很全,很詳細,若想對表單有進一步的加深和理解,請移步 formcontrol 表單控制項,封裝了表單中的輸入,並提供了一些可供操縱的物件 valid...