2015-05-20 20 views
7

Ben $routeProvider ile ilgili sorunlar (minör de olsa) yaşıyorum.

http://localhost/thisapp/ çalışıyor ve mükemmel .otherwise() yönlendirir. Ama uygulama yüklenir ve "ev" url üzerinde toprakları bir kez (http://localhost/thisapp/#/)

Sonra kırar gibi görünüyor. (Eğer bir kullanıcı yapacak biliyorum çünkü) ben yenilediğinizde

Ben http://localhost/thisapp giderseniz $location sonra kod ben $locationProvider kullanarak denedim

kırar ama bu daha var http://localhost/thisapp/#/

olarak çözümlenir kafa karıştırıcı. Üzerinde daha fazla okudum, daha fazla kafam karıştı, çünkü belgelenen şey işe yaramıyor gibi görünüyor. (Aşağıdaki $locationProvider hattını dikkate almazsam, hiçbir şey üretilmez). StackOverflow ile ilgili çeşitli eğitimlere ve konulara baktım, ancak olması gerektiği gibi çalışmıyor.

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' 
     }); 
}); 
+1

Eğer konsolda şu hata mesajı alıyor musunuz? Tam olarak nasıl kırılır? –

+1

bu sorun tüm tarayıcılarda kalıcı mı? –

+1

bunu kaldır. .when ('/', { templateUrl: 'app2/components/templates/overview.html', denetleyici: 'overviewController' }) –

cevap

1

Bu varsayılan yönlendirme davranışı (#) ve html5 yönlendirmeyi etkinleştirmek için çalışıyor gibi görünüyor size sorunlara yol açıyor:

İşte benim yapılandırma kod. .html5Mode(true) için girişimde rağmen, angularjs yeni sürümleri bir <base href /> bir kavram var ve işe ek adımlar gerekir.

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

o göreli URL'ler tarafından ne anlama geldiğini ele almak için buraya derken ...

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


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

Yani, "hiçbir şey üretir" Hızlı bir örnektir (beyaz ekran sanırım?) , tarayıcı konsolunuzu inceleyin ve aşağıdaki hatayı fark edeceksiniz:

Uncaught Error: [$location:nobase]

Bunu çözmenin birkaç yolu vardır. Aşağıdaki şekilde

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

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

uygulamanızda bir <base href /> kavramını içerebilir veya bu <base> etiketi gözardı aşağıdaki

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

için birlikte yapılandırmasını değiştirebilirler konuyla ilgili daha fazla bilgi, Eğik Dokümanlar

bkz