Question

我正在使用一个大型AngularJS应用程序，该应用程序有一个大型模块，我正在尝试将其分解为更容易管理的模块。

我们在主页面上有几个用于菜单，页脚，内容，侧边栏等的ui视图。

目前，每个$ stateProvider.state都会在每次状态更改时填充每个ui-views。我想将其更改为更加层次结构，只有根状态更改这些。我能这样做。

但是，当我将应用程序拆分为模块时，我遇到了问题。我创建了一个Plunker来演示。

(function() {

  angular
    .module("acme", ["ui.bootstrap", "ui.router", "acme.admin", "acme.stock"]);


  angular
    .module("acme")
    .config(MainModuleConfig);

  MainModuleConfig.$inject = ["$stateProvider", "$urlRouterProvider", "$locationProvider"];

  function MainModuleConfig($stateProvider, $urlRouterProvider, $locationProvider) {
    //$locationProvider.html5Mode(true);

    var root = {
      name: "root",
      url: "/",
      views: {
        "menuView": {
          templateUrl: "app/menu/menuTemplate.html",
        },
        "mainView": {
          templateUrl: "app/mainTemplate.html",
          controller: "MainController",
          controllerAs: "vm",
        }
      }
    };

    $stateProvider
      .state("root", root);

    $urlRouterProvider
      .otherwise("/");
  }


})();

(function() {

  angular
    .module("acme.admin", ["ui.router"]);

  angular
    .module("acme.admin")
    .config(AdminConfig);

  AdminConfig.$inject = ["$stateProvider", "$locationProvider"];

  function AdminConfig($stateProvider, $locationProvider) {


    var admin = {
      name: "admin",
      url: "/Admin",
      views: {
        "menuView": {
          templateUrl: "app/menu/menuTemplate.html",
        },        
        "mainView": {
          templateUrl: "app/admin/adminTemplate.html",
        }
      }
    };

    var countries = {
      name: "admin.Countries",
      url: "/Admin/Countries",
      views: {
        "adminView": {
          templateUrl: "app/admin/adminCountriesTemplate.html",
          controller: "AdminCountriesController",
          controllerAs: "vm"
        }
      }
    }

    var people = {
      name: "admin.People",
      url: "/Admin/People",
      views: {
        "adminView": {
          templateUrl: "app/admin/adminPeopleTemplate.html",
          controller: "AdminPeopleController",
          controllerAs: "vm"
        }
      }
    }


    $stateProvider
      .state("admin", admin)
      .state("admin.Countries", countries)
      .state("admin.People", people);
  }


})();

在admin模块和其他人中，我不想再次设置“menuView”，但我看不到如何引用父

Answer 1

我设法解决了这个问题：

首先，我在主模块中设置了根状态：

      var root = {
        name: "root",
        url:"/",
        views: {
          "menuView": {
            templateUrl: "app/menu/menuTemplate.html",
          },
                      "mainView": {
              templateUrl: "app/mainTemplate.html",
              controller: "MainController",
              controllerAs: "vm",
            }
        }
        };

然后在子模块中，我将主节点更改为root的子节点，并使用@：

为ui-view名称添加后缀

    var admin = {
      name: "root.admin",
      url: "/Admin",
      views: {
           "mainView@": {
          templateUrl: "app/admin/adminTemplate.html",
        }
      }
    };

plunker已使用工作示例进行了更新。

获取嵌套视图以使用AngularJS和ui-router中的多个模块

1 个答案: