我的 angularjs 应用程序中的 ui 路由遇到了障碍。以前它运行良好，说实话，我不记得更改任何会影响路由的内容。
当我第一次开始调试时，应用程序加载正常，索引导航栏和主视图出现。然后，我可以毫无问题地导航到应用程序的其他区域，只有当我单击导航栏中的主页链接时，请求才会失败，并且索引页面和主页 View 不会加载。
我正在使用 netbeans 构建我的应用程序。
我的文件夹结构 根 - 应用程序 - - 服务 ---- Controller ----CSS - - 数据 ----js ----观点 索引.html
这是我的index.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app/css/bootstrap.min.css" >
<link rel="stylesheet" href="app/css/bootstrap.css" >
</head>
<!-- Define an angular controller -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/home">Home</a></li>
<li class="dropdown">
<a ui-sref="hydrotel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hydrotel<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="hydrotel.overview">Overview</a></li>
<li role="seperator" class="divider"></li>
<li><a ui-sref="hydrotel.interfaces">Interfaces</a></li>
<li><a ui-sref="hydrotel.dataTransfer">Data Transfers</a></li>
</ul>
</li>
<li class="dropdown">
<a ui-sref="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">WISKI<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="wiski">Overview</a></li>
</ul>
</li>
<li class="dropdown">
<a ui-sref="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hydstra<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="hydstra">Overview</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div class="main">
<div ui-view></div>
</div>
<!-- Angular Declaration -->
<script src="app/js/angular.min.js" type="text/javascript"></script>
<script src="App/js/angular-table.js" type="text/javascript"></script>
<script src="App/js/angular-table.min.js" type="text/javascript"></script>
<!-- Include the AngularJS routing library -->
<script src="App/js/angular-route.min.js" type="text/javascript"></script>
<script src="App/js/angular-ui-router.min.js" type="text/javascript"></script>
<script src="App/js/angular-ui-router.js" type="text/javascript"></script>
<!-- Jquery -->
<script src="app/js/jquery-2.2.0.js" type="text/javascript"></script>
<!-- Bootstrap js -->
<script src="app/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Modules-->
<script src="App/js/app.js" type="text/javascript"></script>
<!-- Controllers -->
<script src="App/controllers/homeController.js" type="text/javascript"></script>
<script src="App/controllers/hydrotelController.js" type="text/javascript"></script>
<script src="App/controllers/overviewController.js" type="text/javascript"></script>
<script src="App/controllers/interfaceController.js" type="text/javascript"></script>
<script src="App/controllers/dataTransferController.js" type="text/javascript"></script>
<script src="App/controllers/hydstraController.js" type="text/javascript"></script>
<!-- Angular google charts-->
<script src="App/js/ng-google-chart.min.js" type="text/javascript"></script>
<script src="App/js/ng-google-chart.js" type="text/javascript"></script>
<!-- Smart Table-->
<script src="App/js/smart-table.min.js" type="text/javascript"></script>
<script src="App/js/smart-table.js" type="text/javascript"></script>
</body>
</html>
我的 app.js，我在其中声明模块和路由。
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var app = angular.module('myApp',['ui.router','googlechart','smart-table']);
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider,$urlRouterProvider){
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'app/views/home.html',
controller: 'homeController'
})
.state('hydstra',{
url: '/hydstra',
templateUrl: 'app/views/hydstra.html',
controller: 'hydstraController'
})
.state('hydrotel', {
url: '/hydrotel',
templateUrl: 'app/views/hydrotel.html',
controller: 'hydrotelController'
})
.state('hydrotel.overview',{
url: '/overview',
templateUrl: 'app/views/hydrotelOverview.html',
controller: 'overviewController'
})
.state('hydrotel.interfaces',{
url: '/interfaces',
templateUrl: 'app/views/Interfaces.html',
controller: 'interfaceController'
})
.state('hydrotel.dataTransfer',{
url: '/dataTransfer',
templateUrl: 'app/views/dataTransfer.html',
controller: 'dataTransferController'
});
$urlRouterProvider.otherwise('/home');
}]);
如果这还不足以提供足够的信息，请告诉我。
最佳答案
如果你只是使用<a ui-sref="home">Home</a>而不是<a href="/home">Home</a>它应该可以解决问题。当您使用 ui-router 时，最好链接到状态而不是 url。 ui-sref 将在您的浏览器中添加 href。
关于javascript - Angularjs 应用程序未使用 ui-router 路由回主页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35883187/