Я новичок в Angular, но это было проблемой.Снятие #! из маршрутов Угловая 1.6. Браузер прерывается при обновлении

Так что если я посещаю localhost: 9000 Меня встречает вид index. Если я нажму на мою навигационную ссылку на ссылку /about, я попал в http://localhost:9000/about, и меня приветствует представление о просмотре.

Однако, если я обновляю эту страницу, когда я нахожусь на маршруте /about. Это ломается и говорит мне: Cannot GET /about Если я вернусь к индексу, он снова начнет работать. Если я обновляюсь по индексу, он не сломается.

Я установил $locationProvider.html5Mode(true);, а также добавил <base href="/"> в файл head моего файла index.html.

Вот уместная информация из моих файлов. (Также я использую Chrome)

app.js

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

    myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 

     $routeProvider 

     .when('/', { 
      templateUrl: 'views/main.html', 
      controller: 'mainController' 
     }) 

     .when('/about', { 
      templateUrl: 'views/about.html', 
      controller: 'aboutController' 

     }) 

     $locationProvider.html5Mode(true); 

    }]); 

    myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) { 
     $log.info($location.path()); 

    }]); 

    myApp.controller('aboutController', ['$scope', function($scope) { 

    }]);

index.html

<!DOCTYPE html> 
<html lang="en-us" ng-app="myApp"> 
    <head> 
    <title>myapp</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script> 

    <script src="/scripts/app.js"></script> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <base href="/"> 
    </head> 
    <body> 

     <!-- Removed non relevant bootstrap nav bar stuff --> 
     <ul class="nav navbar-nav"> 
     <li><a href="/about">About</a></li> 
     </ul> 


     <div class="container"> 
     <div ng-view></div> 
     </div> 


</body>

источник

2017-01-31 Antonio

Это проблема с сервером; ваш сервер должен вернуть 'index.html' на неизвестных маршрутах. Какой сервер вы используете? – Claies

Возможный дубликат [Перезагрузка страницы дает неправильный запрос GET с режимом AngularJS HTML5] (http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5- mode) – Phil

@Claies Я использовал yeoman для эшафот Angular app с использованием Grunt. Конечно, я мало знаю о том, как он настроен, но я изменил имя приложения внутри bower.json и изменил версию Angular до версии 1.6.0, а также мое имя приложения и re-'bower install. Помимо этого, я оставил все отдельно от страницы index и app.js. – Antonio

использование HREF = "#!/О /" в HTML потому, что он изменяется в угловом режиме.1.6 href = "#/about" не работает для него

использование ниже Код HTML

<!DOCTYPE html> 
<html lang="en-us" ng-app="myApp"> 
    <head> 
    <title>myapp</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script> 
    <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script> 

    <script src="/scripts/app.js"></script> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <base href="#!/"> 
    </head> 
    <body> 

    <!-- Removed non relevant bootstrap nav bar stuff --> 
    <ul class="nav navbar-nav"> 
    <li><a href="#!/about">About</a></li> 
    </ul> 


    <div class="container"> 
    <div ng-view></div> 
    </div> 


</body>

источник

2017-03-10 13:34:16

Снятие #! из маршрутов Угловая 1.6. Браузер прерывается при обновлении

app.js

index.html

ответ

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