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

Question

I have two states in my current apps, which is login and register. 我当前的应用程序中有两种状态，分别是登录和注册。 If I just open my website towards localhost:8001 , it is automatically redirect to /login because I've set 如果我只是向localhost:8001打开我的网站，因为我已经设置了它，它会自动重定向到/ login

$urlRouterProvider.otherwise('/login')

But if I open my website towards localhost:8001/asdf , it does not redirect to /login . 但是，如果我向localhost:8001/asdf打开我的网站，则它不会重定向到/login 。 It just print not found. 它只是打印找不到。

What am I missing? 我想念什么？

Here is my full code 这是我的完整代码

app.module.js app.module.js

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

app.routes.js 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 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 register.routes.js

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

login.controller.js 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 的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

The problem is that you are using html5mode but it appears your server is not set to properly forward requests to your index for Angular to handle. 问题是您使用的是html5mode但看来您的服务器未设置为正确地将请求转发到索引以供Angular处理。

The server is attempting to find a resource at this location and failing. 服务器正在尝试在此位置查找资源并失败。 The reason this did not happen previously, is because the # that is present when html5mode is disabled causes the browser to recognize that the rest of the URL is not a navigable path. 以前未发生这种情况的原因是，禁用html5mode时html5mode的#会导致浏览器识别出URL的其余部分不是可导航的路径。 The path prior to the # is your index.html file, where Angular exists and knows to handle routing based on the proceeding URI path. #之前的路径是您的index.html文件，Angular存在index.html文件中，并且知道根据前进的URI路径处理路由。

Since I'm not sure what server you are running on, I can't provide a specific answer, but this link provides answers for many of the commonly used servers: 由于我不确定您在哪台服务器上运行，因此无法提供具体答案，但是此链接提供了许多常用服务器的答案：

How to: Configure your server to work with html5Mode 如何：配置服务器以使用html5Mode

Please note, you'll need to make the change in your local build too. 请注意，您也需要在本地版本中进行更改。 Here's an example using grunt with grunt-contrib-connect and connect-modrewrite 这是将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;

        }
    }
}

What this does is tells the server to route ALL requests back to index.html so that Angular can process the routing. 这样做是告诉服务器将所有请求路由回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