简体   繁体   English

如何使用附加到html标签的嵌套ng-app将一个基于angularjs的SPA包含到另一个基于angularjs的SPA中?

[英]How to include one angularjs based SPA into another angularjs based SPA using nested ng-app which are attached to html tag?

Angular module is defined as : 角模块定义为:

angular.module('module1',['ngRoute']);

Route for module1 is defined as 模块1的路由定义为

 module1.config(function($routeProvider) 
 {
      $routeProvider
      .when('/Application1',
       {
            templateUrl: 'Application1/Application1_HomePage.html',
       })         
      .otherwise({
          templateUrl: 'MainPage.html',
          controller: 'ctrl'
      )}
 });

And the controller ctrl is defined as: 控制器ctrl定义为:

 module1.controller('ctrl',function($scope,$location)
 {
         $scope.goToApp1 = function()
         {
              $location.path('/Application1',true);
         }
 });

The shell page is as : 外壳页面为:

<html ng-app="module1">
   <body>
      <div ng-view>   </div>                   
   </body>
</html>

Application1_HomePage.html contains another ng-app than the shell page ng-app module1 . Application1_HomePage.html包含除外壳程序页面ng-app module1之外的另一个ng-app。

From the shell page shown above, when a call to Application1_HomePage.html is made through routeProvider, initialization of ng-app written inside Application1_HomePage.html is failing. 在上面显示的外壳页中,当通过routeProvider调用Application1_HomePage.html时,初始化在Application1_HomePage.html中编写的ng-app失败。 The browser inspector clearly shows nothing out of the DOM. 浏览器检查器清楚地显示了DOM中没有任何内容。

Considering the above scenario how can I make a navigation from one ng-app to another ng-app? 考虑到以上情况,如何从一个ng-app导航到另一个ng-app?

Assuming both of the modules have an entrance page you can just put a link to the other app page, for example: 假设这两个模块都有一个入口页面,则只需放置指向另一个应用程序页面的链接,例如:

you load module1Index.html and on that page you put an link to module2Index.html: 您加载module1Index.html,并在该页面上放置一个指向module2Index.html的链接:

<a href="http://module2.com"></a>

If you need both modules to sit on the same page , just include one in the other: 如果您需要两个模块都位于同一页面上,只需在另一个模块中添加一个即可:

angular.module('module1', ['module2']);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM