Angular的模塊化(代碼分享)
在前面的幾個(gè)文章中,我們的數(shù)據(jù)都是以函數(shù)的方式定義在全局的作用域下,這樣很顯然是不對(duì)的,沒(méi)有模塊化的思想,下面的例子介紹Angular的模塊化!
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AngularJs模塊化</title> <script type="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"> </head> <body> <div ng-controller='Aaa'> <p>{{name}}</p> </div> <div ng-controller='Bbb'> <p>{{name}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); //參數(shù)1:模塊的名字,參數(shù)2:當(dāng)前模塊中依賴的模塊,後面的文章會(huì)介紹 m1.controller('Aaa',function($scope){ $scope.name = 'hello AngularJs'; }); m1.controller('Bbb',function($scope){ $scope.name = 'Hi'; }); </script> </body> </html>
首先在html上綁定初始化的名稱,并附上myApp,使用angular.model在JS中定義多個(gè)模塊,并附上參數(shù)。
再使用控制器定義數(shù)據(jù),注意控制器傳遞的參數(shù),模塊名和匿名函數(shù)。
都知道我們的項(xiàng)目在上線後合并壓縮的,這樣我們匿名函數(shù)傳遞的形參在壓縮後出現(xiàn)問(wèn)題,所以這個(gè)時(shí)候我們需要將參數(shù)包裹成數(shù)組,來(lái)避免壓縮的問(wèn)題!
m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello AngularJs'; }]); m1.controller('Bbb',['$scope',function($scope){ $scope.name = 'Hi'; }]);
這個(gè)時(shí)候注意控制器傳遞的參數(shù),模塊名和數(shù)組(包含服務(wù)和匿名函數(shù))。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的步驟詳解
本文分步驟給大家介紹了在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08AngularJS實(shí)現(xiàn)一次監(jiān)聽多個(gè)值發(fā)生的變化
這文章給大家介紹了如何利用AngularJS一次監(jiān)聽多個(gè)值發(fā)生的變化,文中通過(guò)示例代碼演示,這樣更方便大家理解學(xué)習(xí),有需要的可以參考借鑒。2016-08-08利用Angular7開發(fā)一個(gè)Radio組件的全過(guò)程
這篇文章主要給大家介紹了關(guān)于如何利用Angular7開發(fā)一個(gè)Radio組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular7具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2017-12-12angular使用TweenMax動(dòng)畫庫(kù)的問(wèn)題和解決方法
這篇文章主要給大家介紹了關(guān)于angular使用TweenMax的相關(guān)問(wèn)題和解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02angularJS實(shí)現(xiàn)表格部分列展開縮起示例代碼
這篇文章主要介紹了angularJS實(shí)現(xiàn)表格部分列展開縮起示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09詳解angularjs實(shí)現(xiàn)echart圖表效果最簡(jiǎn)潔教程
本篇文章主要介紹了詳解angularjs實(shí)現(xiàn)echart圖表效果最簡(jiǎn)潔教程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11angular json對(duì)象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對(duì)象push到數(shù)組中的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化的相關(guān)內(nèi)容,文中通過(guò)示例代碼詳細(xì)介紹了將銀行卡號(hào)和日期的方法,需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2017-07-07