Question

.state('home', {
      url: '/',
      templateUrl: 'index.html',
      abstract:true
 })
.state('home.dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/index.html',
      controller: 'dashboardCtrl'
 })

我访问index.html时未能加载example.com/dashboard，我只能获取dashboard/index.html内的原始html。这很奇怪，因为在index.html我已在身体内宣布<ui-view></ui-view>所以我希望dashboard/index.html成为index.html的孩子。

推送repo我的代码。

Answer 1

你实际上没有嵌套状态;您只需拥有一个主index.html文件，该文件可用作应用程序，其依赖项和视图的容器。 Angular不会加载您的主index.html页面，index.html页面会加载Angular。

所以你的'home'状态不需要有一个templateUrl。例如，如果仪表板视图具有可根据用户操作加载不同模板的内部视图，则将使用嵌套状态。有关嵌套视图的一些示例用例，请参阅Angular UI路由器的documentation。

Answer 2

你不能将index.html声明为@jakeblues所说的第一个<body> <div class="container" style = "border: solid yellow;"> <header> <h1>Further Information</h1> </header> <nav> <a href="Home.html">Home</a><br> <a href="About.html">About</a><br> <a href="Media.html">Media</a><br> </nav> </div> <br class="clear" /> </body> </html>。

尝试将state中的所有特定内容放入新模板中：

index.html

Answer 3

我从repo下载了你的代码。

我看到的主要问题是当您执行example.com/dashboard时未加载角度代码

app.use(express.static(path.join(__dirname, 'public')));

这使您的公用文件夹成为加载项目的文件夹。

当您执行example.com时，您的角度代码已加载，因为您使用包含角度代码的public / index.html文件进行响应并且它是正确的。

但是当你做example.com/dashboard时，它实际上是加载html文件/public/dashboard/index.html，其中没有任何角度代码。

尝试在dashboardCtrl.js上执行警告。你什么也得不到，因为它没有被加载。它仅包含在未加载的index.html文件中。

尝试将网址更改为信息中心并移除＆＃39; home.dashboard＆＃39;

.state('dashboard', {
  url: '/dashboards',
  templateUrl: 'dashboard/index.html',
  controller: 'dashboardCtrl'
 })

angularjs嵌套路由不加载布局

3 个答案: