The answer is NO. The ng-app directive is used to auto-bootstrap an AngularJS application. And according to AngularJS Documentation, only one AngularJS application can be auto-bootstrapped per HTML document. I'd like to quote a section from the documentation here:
Only one AngularJS application can be auto-bootstrapped
per HTML document. The first ngApp found in the document will be used to
define the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them using
angular.bootstrap instead. AngularJS applications cannot be nested within
each other.
|
I'm going to show three approaches, latter two being similar, to deal with the issue.
Before that let's take a look what the actual problem is.
<!DOCTYPE
html>
<html>
<head>
<title>Multiple ngApp does not work</title>
</head>
<body>
<div ng-app="firstApp">
<div ng-controller="FirstController">
<p> 1# {{ name }} </p>
</div>
</div>
<div ng-app="secondApp">
<div ng-controller="SecondController">
<p> 2# {{ name }} </p>
</div>
</div>
<script src="angular.js"></script>
<script type="text/javascript">
var firstApp =
angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
$scope.name
= "I'm
the first app.";
});
var secondApp =
angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
$scope.name
= "I'm
the second app.";
});
</script>
</body>
</html>
|
As you can see, we defined two separate ng-app directives named firstApp and secondApp. And we also defined two controllers one for each ng-app module and each having its own scope variable name. As the documentation states, only the first ng-app module is auto-bootstrapped. So, in this case, only the firstApp module works as expected while the secondApp module does not. As a consequence, the browser renders the above page as follows:
1# I'm the first app.
2# {{ name }}
|
Now that we discussed the problem, let's move ahead and see how to use alternatives.
Method 1: Injecting modules as dependencies of the root app
The idea here is to define only one top level ng-app in a root element like in <html> or <body>, define other two as modules and inject them as dependencies of the root app.
<!DOCTYPE
html>
<html>
<head>
<title>Injecting modules
as dependencies of the root app </title>
</head>
<body
ng-app="rootApp">
<div id="firstApp">
<div ng-controller="FirstController">
<p>1# {{ name }}</p>
</div>
</div>
<div id="secondApp">
<div ng-controller="SecondController">
<p>2# {{ name }}</p>
</div>
</div>
<script
src="angular.js"></script>
<script
type="text/javascript">
// passing the two modules as dependencies
of the root module
var rootApp =
angular.module('rootApp', ['firstApp','secondApp']);
var firstApp =
angular.module('firstApp', []);
firstApp.controller('FirstController', function ($scope) {
$scope.name = "I'm the
first app.";
});
var secondApp =
angular.module('secondApp', []);
secondApp.controller('SecondController', function ($scope) {
$scope.name = "I'm the
second app.";
});
</script>
</body>
</html>
|
1# I'm the first app.
2# I'm the second app.
|
Method 2: Manual bootstrapping the second module
In this method, we are going to leave the first ng-app as it is so that it is auto-bootstrapped by Angular. Whereas for the second ng-app, we're going to a manual bootstrapping method.
|
<!DOCTYPE
html>
<html>
<head>
<title>Manual bootstrapping the second module</title>
</head>
<body>
<div ng-app="firstApp">
<div ng-controller="FirstController">
<p>1# {{ name }}</p>
</div>
</div>
<!-- using id attribute instead of ng-app -->
<div id="secondApp">
<div ng-controller="SecondController">
<p>2# {{ name }}</p>
</div>
</div>
<script
src="angular.js"></script>
<script
type="text/javascript">
var firstApp =
angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
$scope.name =
"I'm
the first app.";
});
var secondApp =
angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
$scope.name =
"I'm
the second app.";
});
// manually
boostrapping the second app
var secondDiv =
document.getElementById('secondApp');
angular.element(document).ready(function() {
angular.bootstrap(secondDiv,
[ 'secondApp' ]);
});
</script>
</body>
</html>
|
Method 3: Manual bootstrapping both modules
As I already mentioned, this method is similar to the previous one. Here, we don't rely on Angular's auto-bootstrapping to initialize the modules. We'll use manual bootstrapping method to initialize both modules as depicted in the example below:
|
<!DOCTYPE
html>
<html>
<head>
<title>Manual boostrapping both modules</title>
</head>
<body>
<!-- using id
attribute instead of ng-app -->
<div id="firstApp">
<div ng-controller="FirstController">
<p>1# {{ name }}</p>
</div>
</div>
<!-- using id
attribute instead of ng-app -->
<div id="secondApp">
<div ng-controller="SecondController">
<p>2# {{ name }}</p>
</div>
</div>
<script
src="angular.js"></script>
<script
type="text/javascript">
var firstApp =
angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
$scope.name =
"I'm
the first app.";
});
var secondApp =
angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
$scope.name =
"I'm
the second app.";
});
var firstDiv = document.getElementById('firstApp');
var secondDiv =
document.getElementById('secondApp');
// manually
boostrapping the second app
angular.element(document).ready(function() {
angular.bootstrap(firstDiv,
[ 'firstApp' ]);
angular.bootstrap(secondDiv,
[ 'secondApp' ]);
});
</script>
</body>
</html>
|
Beautiful answer.I am very happy with this answer
ReplyDeleteTaukir Khan
Manoj Shrestha'S Blog: Can Angularjs Have Multiple Ng-App Directives In A Single Page? >>>>> Download Now
Delete>>>>> Download Full
Manoj Shrestha'S Blog: Can Angularjs Have Multiple Ng-App Directives In A Single Page? >>>>> Download LINK
>>>>> Download Now
Manoj Shrestha'S Blog: Can Angularjs Have Multiple Ng-App Directives In A Single Page? >>>>> Download Full
>>>>> Download LINK gL
Get Data From Database Using AngularJS in JSP :
ReplyDeletehttp://geekonjava.blogspot.in/2015/09/get-data-from-database-using-angularjs.html
Struts2 AngularJS Example Application :
http://geekonjava.blogspot.in/2015/06/struts2-angularjs-example-application.html
hi.. its not working in my case , will you please help me out?
ReplyDeletevery nice explanation
ReplyDeleteExplained very nicely, its make make my learning easy.... Thank You So Much :)
ReplyDeleteThank you so much <3
ReplyDelete
ReplyDeleteThank you so much for your useful information
Full Stack online Training
Full Stack Training
Full Stack Developer Online Training
Full Stack Training in Hyderabad
Full Stack Training in Ameerpet
Full Stack Training Institute
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging
ReplyDeleteAngularJs Training in Electronic City
good and great post on Angular course
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteIt was really a nice post and I was really impressed by reading this keep updating Angularjs Training
ReplyDeleteThank you for your post. This is excellent information. It is amazing and wonderful to visit your site. This idea is mind blowing. I think everyone should know such information like you have described on this post. Thank you for sharing this explanation. yours blog was excellent and really enjoyed.Thanks for sharing and mainting blogging....
ReplyDeleteoracle training in chennai
oracle training institute in chennai
oracle training in bangalore
oracle training in hyderabad
oracle training
oracle online training
hadoop training in chennai
hadoop training in bangalore
Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
ReplyDeleteangular js online training
best angular js online training
top angular js online training
Manoj Shrestha'S Blog: Can Angularjs Have Multiple Ng-App Directives In A Single Page? >>>>> Download Now
ReplyDelete>>>>> Download Full
Manoj Shrestha'S Blog: Can Angularjs Have Multiple Ng-App Directives In A Single Page? >>>>> Download LINK
>>>>> Download Now
Manoj Shrestha'S Blog: Can Angularjs Have Multiple Ng-App Directives In A Single Page? >>>>> Download Full
>>>>> Download LINK
yozgat
ReplyDeletetunceli
hakkari
zonguldak
adıyaman
Q7Q
ankara parça eşya taşıma
ReplyDeletetakipçi satın al
antalya rent a car
antalya rent a car
ankara parça eşya taşıma
PBQ
amasya evden eve nakliyat
ReplyDeleteeskişehir evden eve nakliyat
ardahan evden eve nakliyat
manisa evden eve nakliyat
karaman evden eve nakliyat
MOİ5TV
2407F
ReplyDeleteKütahya Şehir İçi Nakliyat
Artvin Lojistik
Ordu Parça Eşya Taşıma
Adana Şehirler Arası Nakliyat
Balıkesir Şehirler Arası Nakliyat
Denizli Evden Eve Nakliyat
Referans Kimliği Nedir
Ordu Lojistik
Afyon Şehirler Arası Nakliyat
78BC1
ReplyDeleteSakarya Lojistik
Maraş Parça Eşya Taşıma
Trabzon Şehirler Arası Nakliyat
Eryaman Fayans Ustası
Samsun Evden Eve Nakliyat
Elazığ Lojistik
Edirne Lojistik
Malatya Lojistik
Maraş Şehirler Arası Nakliyat
B5331
ReplyDeleteIsparta Şehirler Arası Nakliyat
Sinop Parça Eşya Taşıma
Uşak Şehirler Arası Nakliyat
Muş Evden Eve Nakliyat
Gümüşhane Evden Eve Nakliyat
Kırşehir Parça Eşya Taşıma
Çerkezköy Korkuluk
Antalya Parça Eşya Taşıma
Kilis Evden Eve Nakliyat
32F5D
ReplyDeleteBinance Güvenilir mi
Çerkezköy Marangoz
Eryaman Boya Ustası
Sakarya Evden Eve Nakliyat
Eryaman Parke Ustası
Fuckelon Coin Hangi Borsada
Silivri Duşa Kabin Tamiri
Giresun Şehirler Arası Nakliyat
Kırklareli Şehirler Arası Nakliyat
C6475
ReplyDeletekırklareli telefonda sohbet
ücretsiz sohbet uygulamaları
tunceli mobil sohbet chat
konya bedava görüntülü sohbet
rastgele sohbet
bartın kadınlarla sohbet
bayburt sesli sohbet sesli chat
bayburt telefonda kadınlarla sohbet
sohbet muhabbet
373E0
ReplyDeleteTrovo Takipçi Hilesi
Casper Coin Hangi Borsada
Gate io Borsası Güvenilir mi
Soundcloud Reposts Hilesi
Bitcoin Kazma
Kripto Para Nasıl Üretilir
Pi Network Coin Hangi Borsada
Floki Coin Hangi Borsada
Mexc Borsası Kimin
507E0
ReplyDeleteMeta Coin Hangi Borsada
Parasız Görüntülü Sohbet
Bitcoin Nasıl Kazanılır
Clubhouse Takipçi Satın Al
Twitter Takipçi Hilesi
Paribu Borsası Güvenilir mi
Bitcoin Nasıl Alınır
Omlira Coin Hangi Borsada
Dlive Takipçi Hilesi
218CB
ReplyDeleteTwitter Trend Topic Hilesi
Periscope Takipçi Hilesi
Binance Referans Kodu
Kripto Para Madenciliği Nasıl Yapılır
Vector Coin Hangi Borsada
Binance Referans Kodu
Twitch İzlenme Satın Al
Spotify Dinlenme Satın Al
Referans Kimliği Nedir
DA95E
ReplyDeletelayerzero
dao maker
avalaunch
yearn finance
poocoin
pudgy penguins
dappradar
spookyswap
sushiswap