AngularJS ngRoute не загружается при прямом доступе к URL-адресу

Я только начал работать с AngularJS, но имею богатый опыт работы с JavaScript, PHP, HTML, CSS и т. Д. У меня есть базовый шаблон, и все работает отлично, когда вы начинаете с '/'. Однако, если я попытался загрузить '/ contact' или любую другую страницу вместо того, чтобы начинать с '/', я получаю 404 не найден. Теперь я понимаю основы, почему: AngularJS загружает различный контент на основе шаблонов через AJAX, поэтому страница никогда не изменяется. Вопрос: как мне это исправить? Я не могу быть первым, у кого есть эта проблема, но я сделал несколько Googling и не нашел никакой помощи.AngularJS ngRoute не загружается при прямом доступе к URL-адресу

файла: index.html

<!DOCTYPE html> 
<html ng-app="alertBlaze"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>AlertBlaze</title> 
    <link href="stylesheet/bootstrap.min.css" rel="stylesheet"> 
    <link href="stylesheet/app.min.css" rel="stylesheet"> 
    <base href="/"> 
</head> 
<body ng-controller="mainController"> 

<nav class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="/">AlertBlaze</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/">Home</a></li> 
       <li><a href="/platform">Platform</a></li> 
       <li><a href="/about">About</a></li> 
       <li><a href="/contact">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<div ng-view></div> 

<script src="javascript/jquery.min.js"></script> 
<script src="javascript/angular.min.js"></script> 
<script src="javascript/bootstrap.min.js"></script> 
<script src="javascript/app.min.js"></script> 

</body> 
</html>

Файл: app.min.js

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

alertBlaze.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.hashPrefix(''); 
}]); 

alertBlaze.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl : 'pages/home.html', 
     controller : 'mainController' 
    }) 
    .when('/platform', { 
     templateUrl : 'pages/platform.html', 
     controller : 'platformController' 
    }) 
    .when('/about', { 
     templateUrl : 'pages/about.html', 
     controller : 'aboutController' 
    }) 
    .when('/contact', { 
     templateUrl : 'pages/contact.html', 
     controller : 'contactController' 
    }) 
    .otherwise({ 
     redirectTo : '/' 
    }); 
    $locationProvider.html5Mode(true) 
}); 

alertBlaze.controller('mainController', function($scope) { 

}); 

alertBlaze.controller('platformController', function($scope) { 

}); 

alertBlaze.controller('aboutController', function($scope) { 

}); 

alertBlaze.controller('contactController', function($scope) { 

});

Любая помощь приветствуется.

Спасибо!

источник

2017-01-26 recoilnetworks

Пожалуйста, поделитесь некоторым кодом, чтобы мы могли видеть, что может быть проблемой. – Dario

Мой плохой! Я забыл, вы не можете просто просмотреть исходный код с помощью Angular. Обновлен с кодом! – recoilnetworks

Ваш код выглядит отлично, и http://alertblaze.com/, кажется, работает правильно ... – Dario

Я думаю, что проблемы в $ locationProvider.hashPrefix ('');

Если вы можете пойти в http://alertblaze.com/contact, вы поймаете 404, но если вы можете пойти на http://alertblaze.com/#/contact - это успех.

попытаться изменить

$locationProvider.hashPrefix('');

$locationProvider.hashPrefix('!');

или удалить

$locationProvider.html5Mode(true)

и изменить свой маршрут с #/

источник

2017-01-26 08:18:46

Вы правы! Я отправил ответ, который добавлял правила перезаписи. – recoilnetworks

@recoilnetworks Я рад, что помогаю;) –

Хорошо, так что да, по-видимому, речь идет именно Тары сказал, что это было, однако, я хочу знак фунта удалить для очистки URL, так что я добавил Apache Rewrite Rules переписать все, чтобы index.html:

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 
RewriteRule^index.html [L]

Добавить выше как переписывать, и все будет работать!

источник

2017-01-26 08:21:40 recoilnetworks

AngularJS ngRoute не загружается при прямом доступе к URL-адресу

ответ

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