AngularJs与UI路由器的嵌套状态不起作用
[英]AngularJs nested sate with ui router not working
问题描述
I'm a new AngularJs developper and i'm working on a java web application using Spring MVC and angularJs. 
我是AngularJs的新开发人员，并且正在使用Spring MVC和angularJs开发Java Web应用程序。
I want to include ui-router in my project but i'm facing some issue. 我想在我的项目中包含ui-router，但遇到了一些问题。
I'm trying to learn how nesting state works with ui-router in AngularJs. 我正在尝试学习在AngularJs中嵌套状态如何与ui-router一起工作。 But, it is not working. 但是，它不起作用。 in fact, the ui-routing is not working, i dont' know why 实际上，用户界面路由无法正常工作，我不知道为什么
I made and example with a sample test project structured as followed: 我用一个示例测试项目进行了示例，其结构如下：
Here is my index.html file 这是我的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>
Here is my app.js file 这是我的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");
});
Here is my settings.html file 这是我的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>
Here is my profile.html file 这是我的profile.html文件
<div>
This is a profile page
</div>
Here is my account.html file 这是我的account.html文件
<div>
This is a account page
</div>
i expect the content of settings.html to be displayed on the ui-view. 我希望settings.html的内容显示在ui视图中。 but it is not the case. 但事实并非如此。 nothing displayed 没有显示
please, what's missing in my example? 请，我的示例中缺少什么？ have i lost some angularJs configuration? 我丢失了一些angularJs配置吗？
Thanks in advance for your answer 预先感谢您的回答
3 个解决方案
解决方案1
1 2016-06-17 10:32:34
It seems like you have typos in your app.js file. 看来您的app.js文件中有错别字。 Instead of sate you should write state. 除了状态，您应该写状态。
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");
});
Edit 编辑
You are also using relative links for the templateUrls. 您还使用templateUrls的相对链接。 Angular routes should be relative to your main javascript file(in this case app.js). 角路由应相对于您的主要javascript文件（在本例中为app.js）。 So fixing the url to the template might be the cause of your error. 因此，将网址固定到模板可能是导致错误的原因。 I modified the above code to reflect this. 我修改了上面的代码以反映这一点。
解决方案2
1 2016-06-17 11:17:28
you can force it for use this state in run module 您可以在运行模块中强制使用此状态
example.run(function ( $state){ $state.go("settings"); });
解决方案3
0 2016-06-17 10:33:17
Please try after updating your app.js code with below one. 请使用下面的代码更新您的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" }); });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.