快捷導(dǎo)航

手動(dòng)初始化Angular的模塊與控制器

更新時(shí)間：2016年12月26日 16:03:18 作者：小謝53

本文主要介紹了手動(dòng)初始化Angular的模塊與控制器的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧

在上面的文章中，都是在html元素上綁定ng-app="myApp"，然後使用angular.module('myApp',[]);來初始化模塊的操作，下面我們來用angular.bootstrap方法手動(dòng)初始化模塊。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</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('myApp1',[]);
var m2 = angular.module('myApp2',[]);
m1.controller('Aaa',function($scope){
 $scope.name = 'hello AngularJs';
});
m2.controller('Bbb',function($scope){
 $scope.name = 'Hi';
});
//點(diǎn)擊的時(shí)候初始化模塊
document.onclick = function(){
 var aDiv = document.getElementsByTagName('div');
 //多次初始化操作
 angular.bootstrap(aDiv[0],['myApp1']);
 angular.bootstrap(aDiv[1],['myApp2']);
};
</script>
</body>
</html>

除了手動(dòng)初始化模塊外，還能使用run方法初始化控制器(但是數(shù)據(jù)必須是全局的)。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div>
 <p>這里沒有使用ng-controller命令</p>
 <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//不需要?jiǎng)?chuàng)建控制器引用也可以更改數(shù)據(jù)
//rootScope是全局作用域
m1.run(['$rootScope',function($rootScope){
 $rootScope.name = 'hello';
}]);
</script>
</body>
</html>

在run下不能使用$scope局部，否側(cè)會(huì)報(bào)錯(cuò)！

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

angular實(shí)現(xiàn)頁面打印局部功能的思考與方法
這篇文章主要給大家介紹了關(guān)于angular實(shí)現(xiàn)頁面打印局部功能的思考與方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
AngularJS中filter的使用實(shí)例詳解
這篇文章主要介紹了AngularJS中filter的使用實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下
2017-08-08
在Angular中使用innerHTML屬性綁定的方法
Angular 2+ 支持使用 [innerHTML] 屬性綁定來渲染 HTML,如果你使用插值,它會(huì)被視為字符串,本文將介紹如何使用 [innerHTML] 以及一些注意事項(xiàng),需要的朋友可以參考下
2024-02-02
Angular4的輸入屬性與輸出屬性實(shí)例詳解
這篇文章主要介紹了Angular4的輸入屬性與輸出屬性,結(jié)合實(shí)例形式詳細(xì)分析了Angular4輸入屬性與輸出屬性的概念、功能及相關(guān)使用技巧,需要的朋友可以參考下
2017-11-11
Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包詳解
基于流的前端自動(dòng)化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項(xiàng)目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
動(dòng)手寫一個(gè)angular版本的Message組件的方法
本篇文章主要介紹了動(dòng)手寫一個(gè)angular版本的Message組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
淺談Angular的12個(gè)經(jīng)典問題
Angular作為目前最為流行的前端框架，受到了前端開發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開發(fā)經(jīng)驗(yàn)的開發(fā)者，了解本文中的12個(gè)經(jīng)典面試問題，都將會(huì)是一個(gè)深入了解和學(xué)習(xí)Angular2的知識(shí)概念的絕佳途徑。
2021-05-05
Angularjs整合微信UI（weui）
本文給大家推薦的是使用angularjs實(shí)現(xiàn)整合微信新推出的UI（weui）的全部過程，有相同需求的小伙伴可以參考下
2016-03-03
Ionic + Angular.js實(shí)現(xiàn)圖片輪播的方法示例
圖片輪播在我們?nèi)粘ｉ_發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實(shí)現(xiàn)圖片輪播的方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。
2017-05-05
深入理解Angular4訂閱(Subscribe)與取消
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細(xì)的介紹了訂閱與取消的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11