Angularjs 应用程序不会使用 ui-router 路由回主页

Angularjs app not routing back to homepage with ui-router

本文关键字：ui-router 路由回主页应用程序 Angularjs 更新时间：2023-09-26

我在angularjs应用程序中遇到了ui路由的障碍。以前它工作正常，老实说，我不记得更改了任何会影响路由的内容。

当我第一次开始调试时，应用程序加载正常，索引导航栏和主视图显示。然后，我可以毫无问题地导航到应用程序的其他区域，只有当我单击导航栏中的主页链接时，请求才会失败，并且索引页面和主页视图不会加载。

我正在使用 netbeans 来构建我的应用程序。

我的文件夹结构根--.app----服务业----控制器----.css----数据----.js----视图索引.html

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

我的应用程序.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。

UI路由器，你只需要记住状态。 <a data-ui-sref="home">Home</a> .请注意，即使您在UI-Router中使用<a href="">，就像在ng-router中一样，它仍然可以工作。但这不是最佳做法。如果要使用此方法<a href="">可以使用$routeProvider而不是$stateProvider