更新

以下是当前状态的摘要：
https://plnkr.co/edit/G5CdPPtULVeI1Lfa9Rjg?p=preview

您可以看到家庭状态加载，并有3个视图加载页眉和页脚（从他们的模块文件夹）和主页内容。我正在尝试添加一个链接，将下一组视图加载到索引页面上的原始ui视图中，以显示带有标题，内容和页脚视图的“示例”页面。

更新2

具有以下解决方案的解决方案：
https://plnkr.co/edit/WQHN5ehCDhKo4mkhMbgU?p=preview

原始问题：

所以我正在重构我的应用程序，在根目录下有一个ui-view，在每个模块中加载一个子路由。我使用默认路由，将“home”模块加载到主视图中：

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('otherwise', {
  url: '*path',
  template: '',
  controller: function ($state) {
    $state.go('home.page');
  }
});

}）;

home.routes.js文件是这样的：

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('home', {
  url: '/home',
  templateUrl: 'modules/home/home.html',
  abstract: true,
  controller: 'HomeController as home',
  data: {
    pageTitle: 'Home Page'
  }
})
.state('home.page', {
  views: {
    header: {
      templateUrl: 'modules/header/header.html'
     },
    content: {
      templateUrl: 'modules/home/home.content.html'
     },
    footer: {
      templateUrl: 'modules/footer/footer.html'
     }
   }
  });
});

它按预期工作。抽象路由加载home.html，这只是我的命名视图：

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

但是我在主页上链接到第二个模块时遇到问题。我使用与上面完全相同的设置创建了一个模块“sample”，从字面上复制并重命名文件并从“home”路由到“sample”。

在home.content.html页面上，我正在尝试使用a ui-sref="sample">Sample Section</a>创建指向第二个模块“sample”的链接，但它出错“无法转换为抽象状态'示例'”。< / p>

我也尝试了a ui-sref="sample.page">Sample Section</a>，它不会抛出任何控制台错误但无处可去。我以为我有这个，但现在我很困惑。

sample.routes.js的路由：

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('sample', {
  url: '/sample',
  templateUrl: 'modules/sample/sample.html',
  abstract: true,
  controller: 'SampleController as sample',
  data: {
    pageTitle: 'Sample Page'
  }
})
.state('sample.page', {
  views: {
    header: {
      templateUrl: 'modules/header/header.html'
    },
    content: {
      templateUrl: 'modules/sample/sample.content.html'
     },
    footer: {
      templateUrl: 'modules/footer/footer.html'
     }
   }
  });
});

Answer 1

示例如下。

我们走了。因此，创建一个sep登陆页面（主页）。对于您希望成为应用程序主要部分的所有州，您可以使用名为main的sep树。如果你使你的第一个主要状态摘要，你可以在技术上只有一堆子状态。

索引页：

<div ui-view=""></div>

查看：

<script type="text/ng-template" id="modules/main/main.content.html">
  main content
</script>

<script type="text/ng-template" id="modules/footer/footer.html">
  footer
</script>
<script type="text/ng-template" id="modules/header/header.html">
  header
</script>
<script type="text/ng-template" id="modules/home/home.content.html">
  content
</script>

<script type="text/ng-template" id="modules/home/home.html">
  Nicks {{test}}
  <a ui-sref="main">Test</a>
</script>

使用Javascript：

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
         $stateProvider.state('home', {
    url: '/home',
    controller: 'HomeController as home',
    templateUrl: 'modules/home/home.html'
    });

  $stateProvider.state('main', {
    url: '/main',
    views: {
      'header@main': {
        templateUrl: 'modules/header/header.html'
      },
      '': {
        templateUrl: 'modules/main/main.html'
      },
      'content@main':{
        templateUrl: 'modules/main/main.content.html'
      },
      'footer@main': {
        templateUrl: 'modules/footer/footer.html'
      }
    }
  });
});

Sample fiddle

Angular 1.4 UI路由器：子路由？

更新

更新2

原始问题：

1 个答案: