Угловой $ routeProvider http: // localhost/thisapp/== ok, http: // localhost/thisapp/#/== ошибка. Зачем?

У меня (хотя и незначительные) проблемы с $routeProvider.

http://localhost/thisapp/ отлично работает и переадресовывает на .otherwise() отлично. Но кажется, что когда приложение загружено и приземляется на «домашний» URL-адрес (http://localhost/thisapp/#/)

Затем он ломается.

Если я перейти к http://localhost/thisapp$location решает http://localhost/thisapp/#/

Если я обновить (потому что вы знаете, что пользователь будет делать это), то код разбивает

Я попытался с помощью $locationProvider, но это еще больше сбивает с толку. Кажется, чем больше я его читаю, тем больше смущает, потому что то, что задокументировано, похоже, не работает. (Если я раскомментирую строку $locationProvider ниже, ничего не генерируется). Я просмотрел различные уроки и проблемы в StackOverflow, но не работает, как кажется.

Вот мой конфиг код:

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

    // commented cuz it's not working 
    // $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
      templateUrl: 'app2/components/templates/overview.html', 
      controller: 'overviewController' 
     }) 
     .when('/all_overview', { 
      templateUrl: 'app2/components/templates/overview.html', 
      controller: 'overviewController' 
     }) 
     .when('/all_procurement', { 
      templateUrl: 'app2/components/templates/procurement.html', 
      controller: 'procurementController' 
     }) 
     .when('/all_social', { 
      templateUrl: 'app2/components/templates/social.html', 
      controller: 'socialController' 
     }) 
     .when('/all_strengthening', { 
      templateUrl: 'app2/components/templates/strengthening.html', 
      controller: 'strengtheningController' 
     }) 
     .when('/all_sales', { 
      templateUrl: 'app2/components/templates/sales.html', 
      controller: 'salesController' 
     }) 

     // otherwise go to all_overview 
     .otherwise({ 
      redirectTo: '/all_overview' 
     }); 
});

источник

2015-05-20 MaxRocket

Вы получаете сообщение об ошибке в своей консоли? Как это точно ломается? –

Эта проблема сохраняется во всех браузерах? –

удалите это. .when ('/', { templateUrl: 'app2/components/templates/overview.html', controller: 'overviewController' }) –

Похоже, поведение маршрутизации по умолчанию (#) и пытается включить маршрутизацию html5 вызывает Вас вопросы. Несмотря на вашу попытку .html5Mode(true), более новые версии AngularJS имеют понятие <base href /> и требуют дополнительных действий для работы.

Before Angular 1.3 we didn't have this hard requirement and it was easy to write apps that worked when deployed in the root context but were broken when moved to a sub-context because in the sub-context all absolute urls would resolve to the root context of the app. To prevent this, use relative URLs throughout your app

Чтобы решить, что он имел в виду относительных URL-адресов, вот быстрый пример ...

<!-- wrong: --> 
<a href="/userProfile">User Profile</a> 


<!-- correct: --> 
<a href="userProfile">User Profile</a>

Итак, когда вы говорите «ничего не создает» (белый экран я думаю?) , проверьте свою консоль браузера, и вы обнаружите следующую ошибку:

Uncaught Error: [$location:nobase]

Существует несколько способов решить эту проблему. Вы можете включать в себя понятие <base href /> в вашем приложении следующим образом

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

<html ng-app="app"> 
    <head> 
    <base href="/"> 
    </head> 
    ...

или вы можете игнорировать этот <base> тег и изменить конфигурацию с помощью следующей

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

Для дополнительную информацию по этой теме см. в разделе Угловые документы

Error: $location:nobase $location in HTML5 mode requires a tag to be present!

источник

2015-05-20 17:50:00 scniro

Угловой $ routeProvider http: // localhost/thisapp/== ok, http: // localhost/thisapp/#/== ошибка. Зачем?

ответ

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