Question

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

（当我单独使用它们时，两个应用程序都运行得很好）

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

我想在同一页面中运行我的两个模块/应用程序，例如：

的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，则无法运行两个角度应用。相反，在不同的div中定义ng-apps，并使用angular.bootstrap手动将应用程序引导到div。像这样：

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

Answer 2

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

Answer 3

解决方案 Sodimu Segun Michael 建议：

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

手动引导不适合我的情况，因为我没有将2个app / modules用于两个不同的<div>

此外，还无法使用2个嵌套<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模块/ app

3 个答案: