Angularjs中controller的三種寫(xiě)法分享

更新時(shí)間：2016年09月21日 11:53:20 投稿：daisy

這篇文章給大家介紹了angularjs中controller的三種寫(xiě)法，每種寫(xiě)法都給出了示例代碼，對(duì)大家理解和學(xué)習(xí)很有幫助，有需要的朋友們可以參考借鑒。

前言

在Angular中，Directive、Service、Filter、Controller都是以工廠方法的方式給出，而工廠方法的參數(shù)名對(duì)應(yīng)著該工廠方法依賴(lài)的Service。angularjs中controller其實(shí)就是一個(gè)方法，它有三種寫(xiě)法，下面來(lái)一起看看吧。

第一種：

<pre name="code" class="javascript">var AppController = ['$scope', function($scope){ 
   $scope.notifyServiceOnChage = function(){ 
   console.log($scope.windowHeight); 
 }; 
}]; 
app.controller('AppController',AppController);

在定義AppController的時(shí)候，先聲明方法需要注入的參數(shù)，然后再定義方法體。最后將AppController綁定到app上。

第二種：

app.controller('AppController', function($scope){ 
  $scope.notifyServiceOnChage = function(){ 
   console.log($scope.windowHeight); 
 }; 
})

直接在app的controller屬性定義，首先是controller名字，然后是方法體。

第三種：

function AppController($scope) { 
  $scope.notifyServiceOnChage = function(){ 
   console.log($scope.windowHeight); 
 }; 
}

直接寫(xiě)方法，然后在ng-controller引用該方法

總結(jié)

以上就是關(guān)于angularjs中controller三種寫(xiě)法的全部?jī)?nèi)容，不知道大家都學(xué)會(huì)了沒(méi)有，希望這篇文章的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

angular內(nèi)容投影詳解
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
Angular使用ControlValueAccessor創(chuàng)建自定義表單控件
這篇文章主要介紹了Angular使用ControlValueAccessor創(chuàng)建自定義表單控件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
深入講解AngularJS中的自定義指令的使用
這篇文章主要介紹了深入講解AngularJS中的自定義指令的使用,AngularJS是一款熱門(mén)的JavaScript開(kāi)發(fā)庫(kù),需要的朋友可以參考下
2015-06-06
AngularJS基礎(chǔ)知識(shí)筆記之表格
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí)筆記之表格的相關(guān)資料,需要的朋友可以參考下
2015-05-05
Angular 13+開(kāi)發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析
這篇文章主要為大家介紹了Angular 13+開(kāi)發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
簡(jiǎn)單來(lái)說(shuō)Angular.js是google開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)的一套前端開(kāi)發(fā)框架，幫助你簡(jiǎn)化前端開(kāi)發(fā)的負(fù)擔(dān)。到底能簡(jiǎn)化到什么程度呢，今天我們來(lái)看下，一行代碼實(shí)現(xiàn)控件驗(yàn)證效果，有木有嚇尿？
2014-06-06
在Angular?中使用?Flex?布局的示例詳解
在本教程中,您使用?Flex?布局與?Angular?應(yīng)用程序,它允許您構(gòu)建一個(gè)布局,使用預(yù)配置的?Flexbox?CSS?樣式,而無(wú)需額外的樣式,對(duì)Angular使用?Flex?布局相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2024-02-02
angular.element方法匯總
本文主要給大家匯總了一下angular.element的方法，十分的詳細(xì)，這里推薦給大家參考下。
2015-01-01
AngularJS過(guò)濾器filter用法總結(jié)
這篇文章主要介紹了AngularJS過(guò)濾器filter用法,結(jié)合實(shí)例形式較為詳細(xì)的總結(jié)分析了過(guò)濾器filter的功能、分類(lèi)、使用技巧及自定義過(guò)濾器的實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-12-12
Angular依賴(lài)注入optional?constructor?parameters概念
這篇文章主要為大家介紹了Angular?依賴(lài)注入領(lǐng)域里?optional?constructor?parameters?的概念及使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11