Question

我目前的应用程序中有两种状态，即登录和注册。如果我只是向localhost:8001打开我的网站，它会自动重定向到/ login，因为我已经设置了

$urlRouterProvider.otherwise('/login')

但是如果我向localhost:8001/asdf打开我的网站，它就不会重定向到/login。它只是打印未找到。

我错过了什么？

这是我的完整代码

app.module.js

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

app.routes.js

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

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

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

login.routes.js

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

register.routes.js

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

login.controller.js

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>

Answer 1

问题是您正在使用html5mode，但似乎您的服务器未设置为正确地将请求转发到索引以供Angular处理。

服务器正在尝试在此位置查找资源并失败。以前没有发生这种情况的原因是因为#被禁用时出现的html5mode会导致浏览器识别出URL的其余部分不是可导航路径。 #之前的路径是您的index.html文件，其中Angular存在并且知道根据前面的URI路径处理路由。

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

How to: Configure your server to work with html5Mode

请注意，您还需要在本地版本中进行更改。以下是使用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可以处理路由。

AngularJS UI路由器重新加载无法正常工作

1 个答案: