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

我在当前的应用程序中有两种状态，即登录和注册。如果我刚打开我的网站对localhost:8001，它会自动重定向到/登录，因为我已经设置AngularJS UI路由器重新加载不起作用

$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>

来源

2015-05-29 euclid135

*未找到是服务器响应。这意味着，你应该配置不同的服务器。 UI-Router应用程序在该网址上实际上未找到...没有开始......没有接管网址处理。* –

所以这很麻烦。我使用html5mode来使url看起来很自然。但是当用户手动输入时，服务器不会像处理旧的'＃'角度方式那样处理它。你有什么建议来处理这个问题？我应该创建一个自定义的404页面吗？但我似乎在我的角度项目中找不到像这样的任何页面。它位于另一个文件夹中吗？ – euclid135

问题是您正在使用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，使角可以处理路由的例子。

来源

2015-05-29 20:31:27 joshuahiggins

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

回答

相关问题