ngRoute- прямой URL-адрес, не отображающий шаблон

Я новичок в угловом, поэтому я сожалею, если это действительно очевидно! Я делаю супер базовое приложение, и сейчас все, что я хочу, - это когда пользователь напрямую переходит на страницу, он всегда должен отображать макет и контент. Я использую угловой ng-route.ngRoute- прямой URL-адрес, не отображающий шаблон

На данный момент, если я перехожу к localhost: 8080/отображает макет (index.html) и контент (view/home.html). Если я нажму ссылку «О», он перейдет на localhost: 8080/about и отобразит макет (index.html) и правильный контент (view/about.html). Теперь, если я набираю localhost: 8080/about в моей адресной строке, нажмите enter, я получаю ошибку 404 из журнала моего сервера. Я не уверен, что мне не хватает. Любой вход оценивается!

app.js

angular 
    .module('TestProject', ['ngRoute']);

routes.js

angular.module('TestProject') 
    .config(function($routeProvider, $locationProvider) { 

    $routeProvider 
     .when('/', { 
     templateUrl : 'views/home.html' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html' 
     }) 
     .when('/contact', { 
     templateUrl: 'views/contact.html' 
     }) 
     .otherwise({ 
     redirectTo: "/" 
     }); 

     $locationProvider.html5Mode(true); 

    });

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="TestProject"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test!</title> 

    <base href="/"> 
    <link rel="stylesheet" href="assets/styles/app.css"> 
    </head> 
    <body> 
    <header><h1>Logo</h1></header> 
    <nav> 
     <ul class="main"> 
     <li> 
      <div class="navBorder"> 
      <a href="about">About</a> 
      </div> 
     </li> 
     <li> 
      <div class="navBorder"> 
      <a href="contact">Contact</a> 
      </div> 
     </li> 
    </ul> 
    </nav> 

    <div ng-view></div> 

    <script src="../bower_components/angular/angular.js"></script> 
    <script src="../bower_components/angular-route/angular-route.js"></script> 
    <script src="app.js"></script> 
    <script src="routes.js"></script> 
    </body> 
</html>

Я знаю, что у меня нет каких-либо контроллеров еще, я только начал этот проект и там ничего нет.

Вот как организованы мои файлы:

Моя структура файла ниже:

/index.html 
/app.js 
/routes.js 

/views/home.html 
/views/about.html 
/views/contact.html

источник

2015-06-11 Kai

Откуда: index.html? – nikhil

index.html находится в основном каталоге, я обновлю свой вопрос с каталогами, где мои файлы: – Kai

. Какую бэкэнд-технологию вы используете? – scniro

При использовании AngularJS 1.3+, вы должны включать в себя понятие <base href="" />. Вы можете сделать это в вашем <head> теге как таковой

<head> 
    <base href="/"> 
...

От docs

Перед угловыми 1.3 у нас не было этого жесткого требования, и это было легко писать приложения, которые работали при развертывании в корневой контекст, но были разбиты при перемещении в подконтекст, потому что в подконтексте все абсолютные URL-адреса будут разрешены в корневом контексте приложения. Чтобы предотвратить это, использовать относительные URL-адрес в течение вашего приложения:

Кроме того, без этого <base /> тега, вы можете объявить .html5Mode() как таковые ... Вам нужно взять один из этих двух подходов.

$locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false 
});

источник

2015-06-11 21:38:15 scniro

У меня есть это в моем файле index.html. Я обновлю свой вопрос, чтобы включить источник. – Kai

Ahhh Я понял, это была проблема с моим сервером. Я не настроил mod_rewrite, чтобы он работал правильно. Пока я выключил html5Mode(), и все работает нормально.

источник

2015-06-11 22:54:28 Kai

ngRoute- прямой URL-адрес, не отображающий шаблон

ответ

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