controller as引入的意義和方法?

在Angular中蚀狰,有幾種不同的方式來聲明和使用控制器。

在最開始的時候我們對于angular在view上的綁定都必須使用直接的scope對象,對于controller來說我們也得必須注入$scope這個service敦姻。

angular從1.2版本開始帶來了新語法Controller as。

它使我們不需要把$scope作為依賴項歧杏。簡潔了controller镰惦,同時我們可以使用this在控制器上直接添加我們想要的任何屬性。


$scope和this是什么?

引入controller as之前的寫法

引入controller a's之后的寫法

類比一下js中的構造函數(shù)和實例:

用new方法給myClass()一個實例對象犬绒,我們可以在這個實例中訪問myClass()中的屬性和方法旺入;

app.controller('MainCtrl',function(){})就是在定義一個名稱為MainCtrl的構造函數(shù),MainCtrl as main就是在實例化凯力,生成MainCtrl的實例main茵瘾,然后就可以在main中訪問MainCtrl里定義的變量和函數(shù)

這樣類比的話,scope對象類似于構造函數(shù)的原型對象咐鹤,this則是指當前實例對象

controller as有哪些優(yōu)點

1拗秘、controller as讓繼承關系的變量之間更清晰可讀

使用controller as后,在視圖嵌套中雙向綁定的數(shù)據(jù)所屬清晰可見祈惶,不會出現(xiàn)分不清哪個是哪個的問題雕旨;

2扮匠、controller as 方式解決了父子$scope帶來的混亂

直接使用$scope會產生父變字變,子變父不變的現(xiàn)象凡涩。當一個對象的原型鏈上有屬性foo棒搜,你再給這個對象賦上一個屬性foo,它不會改變原型鏈上的屬性foo活箕。只是新建的一個foo力麸,在原型鏈的更近端,訪問這個屬性時不會在去尋找更遠處的foo屬性讹蘑。

使用controller as方式可以避免上面的混亂末盔,讓關系更清晰:




controller as有哪些應用方式筑舅?

1座慰、在view視圖中定義

2、在路由配置中定義

對象__proto__屬性的值就是它所對應的原型對象翠拣;



controller as的實質是什么版仔?

controller as的實質是一種語法糖,我們可以看一下angular源碼:

從上面的代碼我們能看見的是:angular只是把controller這個對象實例以其as的別名在scope上創(chuàng)建了一個新的對象屬性误墓。

等價于


參考文獻:

AngularJS Controller As Syntax:

angular controller as syntax vs scope:

MENU AngularJS: "Controller as" or "$scope"? :

angularjs 中 controller as 引入的意義:


vm是什么蛮粮?

vm是“view model”,controller函數(shù)實例的統(tǒng)稱谜慌。

為什么在controller中不直接用this然想,而要用vm等代指this?

為了避免this指向的混亂

controller as有缺點嗎欣范?

使用controller as并不能提升整體性能变泄,只是對我們簡潔代碼的一種規(guī)定,因為沒有了$scope恼琼,而controller實例將會成為scope上的一個屬性妨蛹,所以在controller中不能使用$watch,$emit,$on之類的特殊方法,因為這些東西往往不該出現(xiàn)在controller中的晴竞。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蛙卤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子噩死,更是在濱河造成了極大的恐慌颤难,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件已维,死亡現(xiàn)場離奇詭異乐严,居然都是意外死亡,警方通過查閱死者的電腦和手機衣摩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門昂验,熙熙樓的掌柜王于貴愁眉苦臉地迎上來捂敌,“玉大人,你說我怎么就攤上這事既琴≌纪瘢” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵甫恩,是天一觀的道長逆济。 經常有香客問我,道長磺箕,這世上最難降的妖魔是什么奖慌? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮松靡,結果婚禮上简僧,老公的妹妹穿的比我還像新娘痪寻。我一直安慰自己牺弄,他們只是感情好,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布届案。 她就那樣靜靜地躺著屠列,像睡著了一般啦逆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上笛洛,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天夏志,我揣著相機與錄音,去河邊找鬼苛让。 笑死沟蔑,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蝌诡。 我是一名探鬼主播溉贿,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼浦旱!你這毒婦竟也來了宇色?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤颁湖,失蹤者是張志新(化名)和其女友劉穎宣蠕,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甥捺,經...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡抢蚀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了镰禾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片皿曲。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡唱逢,死狀恐怖,靈堂內的尸體忽然破棺而出屋休,到底是詐尸還是另有隱情坞古,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布劫樟,位于F島的核電站痪枫,受9級特大地震影響,放射性物質發(fā)生泄漏叠艳。R本人自食惡果不足惜奶陈,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望附较。 院中可真熱鬧吃粒,春花似錦、人聲如沸翅睛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捕发。三九已至,卻和暖如春很魂,著一層夾襖步出監(jiān)牢的瞬間扎酷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工遏匆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留法挨,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓幅聘,卻偏偏與公主長得像凡纳,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子帝蒿,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理荐糜,服務發(fā)現(xiàn),斷路器葛超,智...
    卡卡羅2017閱讀 134,714評論 18 139
  • Angular面試題 一暴氏、ng-show/ng-hide與ng-if的區(qū)別? 第一點區(qū)別是绣张,ng-if在后面表達式...
    w_zhuan閱讀 5,538評論 0 26
  • 1答渔、angularjs的幾大特性是什么? 雙向數(shù)據(jù)綁定侥涵、依賴注入沼撕、模板宋雏、指令、MVC/MVVM 2务豺、列舉幾種常見的...
    2e9a10d418ab閱讀 1,276評論 0 10
  • 1好芭、angularjs的幾大特性是什么? 雙向數(shù)據(jù)綁定冲呢、依賴注入舍败、模板、指令敬拓、MVC/MVVM 2邻薯、列舉幾種常見的...
    秀才JaneBook閱讀 1,545評論 0 22
  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個用于設計動態(tài)web應用的結構框架乘凸。首先厕诡,它是...
    200813閱讀 1,611評論 0 3