I want to use two angularjs modules/app in the same web page

Question

I created two angular modules (navigation and translation) saved into two different files, and I want to use at the same time in my index.php . What I understand is that I can run only one module/app per html page.

(Both app are running perfectly when I use them seperately)

PS: I'm trying to iclude my two modules into the <html> tag not into two differents <div> because 'myApp2' is used to translate all the page text and 'myApp' is used for navigation and It doesn't contain a controller. (my two app/module doesn't run into specific <div> )

Here is the content of my files:

translate.js

//my Json structure for translation is located before this code

var app2 = angular.module('myApp2', ['pascalprecht.translate']);

app2.config(['$translateProvider', function ($translateProvider) {
  // add translation tables
  $translateProvider.translations('en', translationsEN);
  $translateProvider.translations('fr', translationsFR);
  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');
}]); 

app2.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
}]);

navigationMapper.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        title: "Home",
        description: "MyHome",
        templateUrl : "../pages/home.php"
    })
    .when("/about-us/partners", {
        title: "Partners",
        description: "partners",
        templateUrl : "../pages/about-us/partners.php"
    })
    .when("/contact-us", {
        title: "Contact Us",
        description: "contact cs",
        templateUrl : "../pages/contact-us.php"
    });          
});


//Displaying dynamically the page title and change the meta description
app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
        $rootScope.description = current.$$route.description;    
    });
}]);

I want run my two modules/app in the same page, like:

index.php

<html ng-app="myApp" ng-app="myApp2"  ng-controller="Ctrl" lang="en">

But only one run at once, like:

<html  ng-app="myApp2"  ng-controller="Ctrl" lang="en">

or:

<html  ng-app="myApp" lang="en">

Possible duplicate of [AngularJS Multiple ng-app within a page](http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page) — Thierry, Mar 17 '17 at 19:21
While it's possible to bootstrap more than one AngularJS application per page, we don't actively test against this scenario. It's possible that you'll run into problems, especially with complex apps, so caution is advised. See [AngularJS Developer Guide - Bootstrap](https://docs.angularjs.org/guide/bootstrap). — georgeawg, Mar 17 '17 at 19:58

score 0 · Answer 1 · answered Mar 17 '17 at 19:05

0

You can't run two angular apps if you define ng-app in html tag. Instead, define the ng-apps in different divs and manually bootstrap the app to the div using angular.bootstrap. Like this:

angular.bootstrap("div1", ['myApp1']);
angular.bootstrap("div2", ['myApp2']);

answered Mar 17 '17 at 19:05

Muhammed Neswine

2,028
1
20
20

The 2 divs should be separated not embedded, right ? – Mar 17 '17 at 20:10

score 0 · Answer 2 · answered Mar 17 '17 at 19:41

0

Instead of using two angular app in one page... Why can't you merge the two code into one app and inject it into the page

answered Mar 17 '17 at 19:41

Sodimu Segun Michael

117
1
5

The 2 files are bigger than this, so I wanted to split them for more readability. But, your suggestion could be a solution – Mar 17 '17 at 19:47
That is your best shot towards solving the issue and please dont forget to mark it as answer. – Sodimu Segun Michael Mar 17 '17 at 22:56

score 0 · Accepted Answer · answered Mar 20 '17 at 18:14

The Solution as Sodimu Segun Michael suggested:

I merged the 2 .js files into 1 file, because I have to include my app in the <html> tag to be able to use the translation and navigation mechanism.

Manually bootstrap is not a good solution for my case because I'm not using 2 app/modules into two different <div>

Also its not possible to use 2 different app/modules with nested <div>

translation-navigation.js

var app = angular.module("myApp", ["ngRoute", 'pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation tables
  $translateProvider.translations('en', translationsEN);
  $translateProvider.translations('fr', translationsFR);
  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');
}]); 

app.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
}]);

//Displaying dynamically the page title and change the meta description
app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
        $rootScope.description = current.$$route.description;    
    });
}]);


//URL navigation mechanism

app.config(function($routeProvider) {
$routeProvider
.when("/", {
    title: "Home",
    description: "MyHome",
    templateUrl : "../pages/home.php"
})
.when("/about-us/partners", {
    title: "Partners",
    description: "partners",
    templateUrl : "../pages/about-us/partners.php"
})
.when("/contact-us", {
    title: "Contact Us",
    description: "contact cs",
    templateUrl : "../pages/contact-us.php"
});          
});

in the html file include the app and call the translation controller

on top of index.php:

<html ng-app="myApp" ng-controller="Ctrl" lang="en">
    <head>
        <meta charset="utf-8">
        <title ng-bind="title"></title>
        <meta name="description" content="{{description}}">
...

I want to use two angularjs modules/app in the same web page

3 Answers3