AngularJS UI Router reload не работает

У меня есть два состояния в моих текущих приложениях, которые являются логином и регистрацией. Если я просто открыть свой сайт в сторону localhost:8001, он автоматически перенаправлять/входа в систему, потому что я установилAngularJS UI Router reload не работает

$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 было на том, что URL-адрес фактически не найден ...не начался ... не перехватывая обработку URL. * –

Так что это довольно хлопотно. Я использую html5mode, чтобы сделать URL-адреса естественными. Но когда пользователь вводит его вручную, сервер не будет обрабатывать его, как если бы он имел старый «#» угловой путь. Каково ваше предложение справиться с этим? я должен создать пользовательскую страницу 404? Но я, похоже, не нашел такой страницы в моем угловом проекте. Он расположен в другой папке? – euclid135

Проблема в том, что вы используете html5mode, но, похоже, ваш сервер не настроен на правильную пересылку запросов к вашему индексу для обработки углов.

Сервер пытается найти ресурс в этом месте и не удается. Причина, по которой это не происходило ранее, заключается в том, что #, который присутствует, когда отключен html5mode, заставляет браузер распознавать, что остальная часть URL-адреса не является судоходным путем. Путь до # - это ваш файл index.html, где существует Угловое устройство и известно, что он обрабатывает маршрутизацию на основе исходящего пути 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 Router reload не работает

ответ

Смежные вопросы