我想在同一个网页中使用两个 angularjs modules/app

Question

我创建了两个 angular 模块（导航和翻译）保存到两个不同的文件中，我想在我的 index.php 中同时使用。我的理解是，每个 html 页我只能运行一个 module/app。

（当我单独使用时，这两个应用程序运行都非常完美）

PS：我试图将我的两个模块包含在 <html> 标签中而不是两个不同的 <div> 因为 'myApp2' 用于翻译所有页面文本，'myApp' 用于导航，它不包含控制器。（我的两个 app/module 没有运行到特定的 <div> ）

这是我的文件内容：

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;    
    });
}]);

我希望运行我的两个 modules/app 在同一页面中，例如：

index.php

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

但一次只有一个运行，例如：

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

或：

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

Answer 1

如果您在 html 标签中定义 ng-app，则不能运行两个 angular 应用程序。相反，在不同的 div 中定义 ng-apps，然后使用 angular.bootstrap 将应用程序手动 bootstrap 到 div。像这样：

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

Answer 2

而不是在一个页面中使用两个 angular 应用...为什么不能将两个代码合并到一个应用中并将其注入页面

Answer 3

Sodimu Segun Michael 建议的解决方案：

我将 2 个 .js 文件合并为 1 个文件，因为我必须将我的应用程序包含在 <html> 标记中才能使用翻译和导航机制。

手动 bootstrap 对我的情况来说不是一个好的解决方案，因为我没有使用 2 app/modules 到两个不同的 <div>

也无法将 2 个不同的 app/modules 与嵌套的 <div>

一起使用

翻译-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"
});          
});

在 html 文件中包含应用程序并调用翻译控制器

在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}}">
...

我想在同一个网页中使用两个 angularjs modules/app

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

angularjs

ng-app