带有ui路由器的AngularJs嵌套状态不起作用答案

【问题标题】：AngularJs nested sate with ui router not working带有ui路由器的AngularJs嵌套状态不起作用
【发布时间】：2016-10-19 03:30:59
【问题描述】：

我是一个新的 AngularJs 开发者，我正在使用 Spring MVC 和 angularJs 开发一个 java web 应用程序。

我想在我的项目中包含 ui-router，但我遇到了一些问题。

我正在尝试了解嵌套状态如何与 AngularJs 中的 ui-router 一起工作。但是，它不起作用。事实上，ui-routing 不起作用，我不知道为什么

我制作了一个示例测试项目，结构如下：

这是我的 index.html 文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
    <title>Test angularJs Nesting</title>
</head>
<body ng-app="example">
    This is the index level
    <br>
    <div ui-view></div>
</body>
</html>

这是我的 app.js 文件

var example=angular.module("example", ['ui.router']);

example.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .sate("settings", {
            url: "/settings",
            templateUrl: "templates/settings.html"
        })
        .sate("settings.profile", {
            url: "/profile",
            templateUrl: "templates/profile.html"
        })
        .sate("settings.account", {
            url: "/account",
            templateUrl: "templates/account.html"
        });
        $urlRouterProvider.otherwise("/settings/profile");

});

这是我的 settings.html 文件

This is our settings layout
<br>
<a ui-sref="settings.profile">Show Profile</a>
<a ui-sref="settings.account">Show Account</a>
<div ui-view></div>

这是我的 profile.html 文件

<div>
    This is a profile page
</div>

这是我的 account.html 文件

<div>
    This is a account page
</div>

我希望 settings.html 的内容显示在 ui 视图上。但事实并非如此。什么都没有显示

请问，我的示例中缺少什么？我丢失了一些 angularJs 配置吗？

提前感谢您的回答

【问题讨论】：

标签： javascript java html angularjs spring-mvc

【解决方案1】：

你可以强制它在运行模块中使用这个状态

example.run(function ( $state){
  $state.go("settings");
});

【讨论】：

虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！
感谢 ayoub 的回答。但是在我的 app.js 末尾添加这个 sn-p 代码后，结果是一样的。还是不行吗
我认为你有路径问题尝试使用 ../templates/settings.html ../templates/profile.html ../templates/account.html

【解决方案2】：

您的 app.js 文件中似乎有拼写错误。你应该写 state 而不是 sat。

example.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state("settings", {
        url: "/settings",
        templateUrl: "../templates/settings.html"
    })
    .state("settings.profile", {
        url: "/profile",
        templateUrl: "../templates/profile.html"
    })
    .state("settings.account", {
        url: "/account",
        templateUrl: "../templates/account.html"
    });
    $urlRouterProvider.otherwise("/settings/profile");

});

编辑

您还为 templateUrls 使用了相对链接。 Angular 路由应该相对于你的主 javascript 文件（在本例中为 app.js）。因此，将 url 固定到模板可能是导致错误的原因。我修改了上面的代码以反映这一点。

【讨论】：

好的，谢谢你的回答好的，谢谢你的回答我已经按照上面的建议调整了我的代码。当我在浏览器中启动我的 index.html 文件时，将状态更改为状态（抱歉，这是一个错误），链接正确更改为 ..../index.html#/settings/profile 但 settings.html 的内容是不显示。当我启动我的 index.html 文件时，我还按照下面 Aravind 的建议使用 $urlRouterProvider.otherwise("/settings") 调整了代码，浏览器中的链接是 .../index.html/settings .但没有显示。不显示settings.html的内容
我稍微修改了我的答案。另一个问题可能是 angular 找不到 html 文件。试试看它是否能解决您的问题。
我试了一下，结果是一样的。什么都没有显示。我是否绝对需要在 Web 服务器中运行我的示例才能使 ui-router 工作？我对我得到的结果感到非常惊讶
是的，您必须在网络服务器上运行它。不幸的是，否则它将无法正常工作。此外，appmjs 很可能必须位于 Web 应用程序的根目录中。
非常感谢海象，这是问题所在。我将我的项目部署在 Web 服务器中，它现在可以正常工作。非常感谢，非常感谢。现在我可以继续我真正的 Java-AngularJs-SpringMvc 项目

【解决方案3】：

请在使用以下代码更新您的 app.js 代码后尝试。

var example=angular.module("example", ['ui.router']);

example.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/settings");
    $stateProvider
        .sate("settings", {
            url: "/settings",
            templateUrl: "templates/settings.html"
        })
        .sate("settings.profile", {
            url: "/profile",
            templateUrl: "templates/profile.html"
        })
        .sate("settings.account", {
            url: "/account",
            templateUrl: "templates/account.html"
        });

});

【讨论】：

好的，感谢您的回答，我已经按照上面的建议调整了我的代码。正如上面海象所提到的，我还将状态更改为状态（抱歉，这是一个错误）。当我在浏览器中启动我的 index.html 文件时，链接正确更改为 ..../index.html#/settings 但未显示 settings.html 的内容。什么都没有显示