AngularJS UI路由器重新加載不起作用

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時html5mode的#會導致瀏覽器識別出URL的其余部分不是可導航的路徑。 #之前的路徑是您的index.html文件，Angular存在index.html文件中，並且知道根據前進的URI路徑處理路由。

由於我不確定您在哪台服務器上運行，因此無法提供具體答案，但是此鏈接提供了許多常用服務器的答案：

如何：配置服務器以使用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 個解決方案

解決方案1
0 已采納 2015-05-29 20:31:27

AngularJS UI路由器重新加載不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2015-05-29 20:31:27

解決方案1
0 已采納 2015-05-29 20:31:27