Javascript AngularJs嵌套状态，ui路由器不工作_Javascript_Java_Html_Angularjs_Spring Mvc

Javascript AngularJs嵌套状态，ui路由器不工作

javascript java html angularjs spring-mvc

Javascript AngularJs嵌套状态，ui路由器不工作,javascript,java,html,angularjs,spring-mvc,Javascript,Java,Html,Angularjs,Spring Mvc,我是一名新的AngularJs开发人员，正在使用SpringMVC和AngularJs开发一个java web应用程序我想在我的项目中包括ui路由器，但我面临一些问题我试图学习AngularJs中嵌套状态如何与ui路由器一起工作。但是，它不起作用。事实上，ui路由不起作用，我不知道为什么我制作了一个示例测试项目，其结构如下：这是我的index.html文件 <!DOCTYPE html> <html> <head> <link rel=

我是一名新的AngularJs开发人员，正在使用SpringMVC和AngularJs开发一个java web应用程序

我想在我的项目中包括ui路由器，但我面临一些问题

我试图学习AngularJs中嵌套状态如何与ui路由器一起工作。但是，它不起作用。事实上，ui路由不起作用，我不知道为什么

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

这是我的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>

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>

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

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

这是我的settings.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>

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>

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

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

这是我们的设置布局


显示个人资料
显示帐户

这是我的profile.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>

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>

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

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


这是一个个人资料页面

这是我的account.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>

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>

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

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


这是一个帐户页面

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

拜托，我的例子缺少什么？我是否丢失了一些angularJs配置

提前感谢您的回答

您的app.js文件中似乎有打字错误。你应该写状态而不是状态

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");

});

编辑

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

请在用下面的代码更新app.js后重试

var-example=angular.module（“example”，['ui.router']）；
config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（“/settings”）；
$stateProvider
.sate（“设置”{
url:“/settings”，
templateUrl:“templates/settings.html”
})
.sate（“settings.profile”{
url:“/profile”，
templateUrl:“templates/profile.html”
})
.sate（“settings.account”{
url:“/account”，
templateUrl:“templates/account.html”
});
});您可以强制它在运行模块中使用此状态
example.run（函数（$state）{
$state.go（“设置”）；
});虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！谢谢你的回答。但是在我的app.js末尾添加了这个代码片段后，结果是一样的。它仍然不起作用吗？我想你有路径问题，请尝试使用../templates/settings.html../templates/profile.html../templates/account.htmlok，谢谢你的回答。好的，谢谢你的回答。我已经按照上面的建议修改了我的代码。将状态更改为状态（抱歉，这是一个错误）当我在浏览器中启动index.html文件时，链接正确更改为..../index.html#/settings/profile，但settings.html的内容不显示。未显示任何内容我还使用$urlRouterProvider修改了下面Aravind建议的代码。否则（“/settings”），当我启动index.html文件时，浏览器中的链接是…/index.html/settings。但什么也没显示出来。settings.html的内容没有显示。我稍微修改了我的答案。另一个问题可能是angular找不到html文件。尝试一下，看看它是否解决了你的问题。我尝试过，但结果是一样的。没有显示任何内容。我真的需要在web服务器上运行我的示例才能使ui路由器工作吗？我对我得到的结果感到非常惊讶是的，你必须在Web服务器上运行它。不幸的是，否则它不会起作用。另外，AppMJ可能必须位于web应用程序的根目录中。非常感谢Walrus，这就是问题所在。我在web服务器中部署了我的项目，现在它可以正常工作了。谢谢，非常感谢。现在我可以继续我真正的Java AngularJs SpringMvc项目了，谢谢你的回答，我已经按照上面的建议修改了我的代码。正如上面海象提到的，我还将状态改为状态（对不起，这是一个错误）。在浏览器中启动index.html文件时，链接会正确更改为..../index.html#/settings，但不会显示settings.html的内容。没有显示任何内容