Question

我有一个angularjs应用程序，它有app.js（应用程序启动的主要js文件），index.html文件，它就像一个母版页（应用于应用程序中的所有页面）。这个index.html位于我的项目/ app的根目录下。

我想在应用中添加2-3个新页面，其中包含新的主/布局页面（不是index.html）。我想创建index2.html，它将应用于某些页面和index3.html，它将应用于某些页面。

所有3个布局index.html，index2.html和index3.html完全独立/彼此不同。

我尝试了所有内容，但新页面始终将index.html作为默认布局。

Answer 1

我认为您正在寻找的是Angular UI路由器。请在此处查看：https://github.com/angular-ui/ui-router

您必须将index.html配置为＆＃39; home＆＃39; state，具有其他索引文件的嵌套视图。

查看文档以获取详细信息，但基本上您将设置index.html文件：

...
<body ng-app="app">
  <ui-view></ui-view>
</body>

然后在你的app.js中：

angular.module('app', [ui.router])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
      .state('home', {
        url: "/",
        templateUrl: "partials/index.html"
      })
      .state('index2View', {
        url: "/index2",
        templateUrl: "partials/index2.html"
      });
      ... add more states for your views here ...
  });

您可能也想查看抽象状态，但我不确定您的具体要求是什么。

Answer 2

您可以在多个视图ng-app="what ever your app here"之后使用多个应用，之后只需在某些

中添加视图即可

AngularJS多个布局页面

2 个答案: