2013-12-08 11 views
15

IURL doğrudan tarayıcıda ziyaret edildiğinde ancak tıklandığında çalıştığı zaman açısal yönlendirme çalışmaz.

app 
..views 
....partials 
......main.jade 
......foo.jade 
....index.jade 

ve yolları gibi tanımlanmış bir dizin yapısı ile açılı bir uygulaması vardır:

'katı kullanmak';

angular.module('myApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute', 
    'firebase', 
    'myApp.config' 
]) 
    .config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
     templateUrl: '/partials/main', 
     controller: 'MainCtrl' 
     }) 
     .when('/foo/:fooName', { 
     templateUrl: '/partials/foo', 
     controller: 'FooCtrl' 
     })    
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

Ben sunucu tarafında ekspres kullanıyorum ve ilgili kodudur:

// server.js 
    app.configure('development', function(){ 
    app.use(express.static(path.join(__dirname, '.tmp'))); 
    app.use(express.static(path.join(__dirname, 'app'))); 
    app.use(express.errorHandler()); 
    }); 

    app.configure('production', function(){ 
    app.use(express.favicon(path.join(__dirname, 'public/favicon.ico'))); 
    app.use(express.static(path.join(__dirname, 'public'))); 
    }); 

    app.get('/', routes.index); 
    app.get('/partials/:name', routes.partials); 

    //routes.js 
    exports.index = function(req, res){ 
     res.render('index'); 
    }; 


    exports.partials = function(req, res){ 
     var name = req.params.name; 
     res.render('partials/' + name); 
    }; 

ana rota "/" yükler ince ve beklendiği gibi zaman ben "/foo/bar" kısmi bir görünüm foo.jade yükler için tıklayın. Ancak, doğrudan URL'de "/foo/bar" adresini ziyaret ettiğimde, Express "cannot GET /foo/bar"'dan bir 404 yanıtı alıyorum; bu, ifade içinde tanımlanmış bir yol olmadığı için anlamlıdır. Bununla birlikte, bunun açısal yönlendiriciyi tanımlamanın tüm noktası olduğunu sanmıştım. Bu talebi durdurmak ve aslında "/partials/foo" sormak gerekiyordu. Ben

//redirect all others to the index (HTML5 history) 
app.get('*', routes.index); 

ekleyerek denedim ama sorunu çözmek ve statik js varlıklar için bile istekleri yakalamak ve oldukça kötü index.html içeriği ile yanıt gibiydi yoktu. Eminim yanlış bir şey yapıyorum. URL'leri doğrudan ziyaret edebilmem için işleri nasıl düzeltebilirim?

cevap

17

Yönlendirme bunun gibi davranmanın nedeni, html5mode'un açık olmasıdır. Bildirim hattı: $locationProvider.html5Mode(true); Sen "/foo/bar" erişmeye çalıştığınızda doğrudan tarayıcı bu URL'ye HTTP GET isteği gönderir anlamak gerekir

. Bu URL'ye eriştiğiniz gibi, bağlantıya tıklayarak erişmeye çalıştığınızda, Angular bu eylemi durdurur ve yalnızca tarayıcının bağlantısını güncelleyen History.pushState öğesini çağırır.

html5mode yönlendirme işi yapmak için yapmanız gerekenler URL yeniden yazımını uygulamaktır. Her istek, AngularJS uygulamasını önyükleyen dizin dosyanıza yönlendirilmelidir, ancak bunun sunucunuzda yapılması gerekir. Açısal, istenen sayfayı kendiliğinden oluşturacaktır.

Tam olarak bunu yapan connect mod rewrite öğütme işine göz atın.

Ayrıca doğrudan this middleware da yapabilirsiniz.

+0

Ancak bunu şu sunucuda yapmayı denedim: app.get ('*', routes.index); ve bu işe yaramadı. – algorithmicCoder

+0

Bunu yapabileceğinizi sanmıyorum. Eğer ekspres kullanıyorsanız, kullanmanız için connect-mod-rewrite kolay olmalıdır. Express, bağlantının üstüne yazılır. –

+0

Ancak burada tam olarak yapılan şey şu: https://github.com/btford/angular-express-seed/blob/master/app.js ve bu standart Açısal referans. Neden bu durumda çalışıyor? – algorithmicCoder

İlgili konular