Javascript AngularJS UI路由器重新加载不工作

我当前的应用程序中有两种状态，即登录和注册。如果我只是朝着

localhost:8001

打开我的网站，它会自动重定向到/login，因为我已经设置了

$urlRouterProvider.otherwise('/login')

但是如果我打开我的网站指向

localhost:8001/asdf

，它不会重定向到

/login

。只是找不到它

我错过了什么

这是我的全部代码

app.module.js

var myApp = angular.module('myApp', ['routesApp']);

var routesApp = angular.module('routesApp', ['ui.router','loginApp']);

routesApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {  

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/components/login/login.html',
            controller: 'loginController'
        });
});

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('register', {
            url: '/register',
            templateUrl: 'app/components/register/register.html',           
        });
});

var loginApp = angular.module('loginApp', ['ngAnimate']);

loginApp.config(function($sceDelegateProvider, $httpProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self'
    ])
});

var loginController = function($scope){
    //test controller
}

loginApp.controller('loginController', loginController);

app.routes.js

var myApp = angular.module('myApp', ['routesApp']);

var routesApp = angular.module('routesApp', ['ui.router','loginApp']);

routesApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {  

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/components/login/login.html',
            controller: 'loginController'
        });
});

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('register', {
            url: '/register',
            templateUrl: 'app/components/register/register.html',           
        });
});

var loginApp = angular.module('loginApp', ['ngAnimate']);

loginApp.config(function($sceDelegateProvider, $httpProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self'
    ])
});

var loginController = function($scope){
    //test controller
}

loginApp.controller('loginController', loginController);

login.routes.js

var myApp = angular.module('myApp', ['routesApp']);

var routesApp = angular.module('routesApp', ['ui.router','loginApp']);

routesApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {  

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/components/login/login.html',
            controller: 'loginController'
        });
});

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('register', {
            url: '/register',
            templateUrl: 'app/components/register/register.html',           
        });
});

var loginApp = angular.module('loginApp', ['ngAnimate']);

loginApp.config(function($sceDelegateProvider, $httpProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self'
    ])
});

var loginController = function($scope){
    //test controller
}

loginApp.controller('loginController', loginController);

register.routes.js

var myApp = angular.module('myApp', ['routesApp']);

var routesApp = angular.module('routesApp', ['ui.router','loginApp']);

routesApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {  

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/components/login/login.html',
            controller: 'loginController'
        });
});

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('register', {
            url: '/register',
            templateUrl: 'app/components/register/register.html',           
        });
});

var loginApp = angular.module('loginApp', ['ngAnimate']);

loginApp.config(function($sceDelegateProvider, $httpProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self'
    ])
});

var loginController = function($scope){
    //test controller
}

loginApp.controller('loginController', loginController);

login.controller.js

var myApp = angular.module('myApp', ['routesApp']);

var routesApp = angular.module('routesApp', ['ui.router','loginApp']);

routesApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {  

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/components/login/login.html',
            controller: 'loginController'
        });
});

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('register', {
            url: '/register',
            templateUrl: 'app/components/register/register.html',           
        });
});

var loginApp = angular.module('loginApp', ['ngAnimate']);

loginApp.config(function($sceDelegateProvider, $httpProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self'
    ])
});

var loginController = function($scope){
    //test controller
}

loginApp.controller('loginController', loginController);

index.html

<!DOCTYPE html>
<html>

  <head>
    <title>MyApp</title>
    <base href="/">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="assets/less/phinisi.less">
    <link rel="stylesheet/less" type="text/css" href="assets/less/dropdown.less" />
    <!-- JavaScript -->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="assets/js/angular-payments.js"></script>
    <script src="assets/js/jquery-2.1.3.min.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <script src="assets/js/ui-bootstrap-0.12.1.min.js"></script>

    <script src="app/app.module.js"></script>
    <script src="app/app.routes.js"></script>

    <!-- Login Script -->
    <script src="app/components/login/login.controller.js"></script>    
    <script src="app/components/login/login.routes.js"></script>

    <!-- Register Script --> 
    <script src="app/components/register/register.routes.js"></script>    

    <script src="assets/js/less.js"></script>


  </head>

  <body ng-app="myApp">
    <div ui-view></div>  
  </body>

</html>

MyApp

问题在于您使用的是

HTML5模式

，但您的服务器似乎没有设置为正确地将请求转发到您的索引以进行处理

服务器正在尝试在此位置查找资源，但失败。以前没有发生这种情况的原因是，禁用

html5mode

时出现的

会导致浏览器识别URL的其余部分不是可导航路径。

#

之前的路径是您的

index.html

文件，其中存在Angular，并且知道如何根据正在进行的URI路径处理路由

由于我不确定您运行的是哪台服务器，因此无法提供具体答案，但此链接提供了许多常用服务器的答案：

请注意，您还需要在本地版本中进行更改。下面是一个使用

grunt

与

grunt contrib connect

和

connect modrewrite

connect: {
    options: {
        hostname: 'localhost',
        port: 8001,
        middleware: function (connect, options) {

            var modRewrite = require('connect-modrewrite');

            var middlewares = [
              modRewrite(['^[^\\.]*$ /index.html [L]'])
            ];

            options.base.forEach(function (path) {
              middlewares.push(connect.static(path));
            });

            return middlewares;

        }
    }
}

---

这会告诉服务器将所有请求路由回index.html，以便Angular可以处理路由。

未找到是服务器响应。这意味着，您应该以不同的方式配置服务器。UI路由器应用程序位于该url上，但实际上未找到。。。没有开始。。。没有接管url处理。所以这很麻烦。我使用HTML5模式使URL看起来自然。但是，当用户手动输入时，服务器不会像使用旧的“#”角度方式那样处理它。你对处理这件事有什么建议？我应该创建一个自定义404页面吗？但我在我的角度项目中似乎找不到这样的页面。它是否位于另一个文件夹中？