0

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

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

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

这是我的文件的内容：

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

导航映射器.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;    
    });
}]);

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

索引.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">
4

3 回答 3

0

Sodimu Segun Michael建议的解决方案 ：

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

手动引导对我的情况来说不是一个好的解决方案，因为我没有将 2 个应用程序/模块用于两个不同的<div>

也不能使用嵌套的 2 个不同的应用程序/模块<div>

翻译导航.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}}">
...
于 2017-03-20T18:14:27.637 回答
0

如果您ng-app在 html 标记中定义，则无法运行两个 Angular 应用程序。相反，ng-apps在不同的 div 中定义 并使用angular.bootstrap. 像这样：

angular.bootstrap("div1", ['myApp1']);
angular.bootstrap("div2", ['myApp2']);
于 2017-03-17T19:05:08.120 回答
0

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

于 2017-03-17T19:41:48.293 回答