Угловая: перезагрузка/переадресация URL-адресов по умолчанию по умолчанию

Question

Я использую Angular 1.3.10, ui-router 0.2.10 и Express 4.14.0 для базового клона Reddit, и у меня возникают проблемы с маршрутизацией.

Мой (сокращенные) Экспресс-маршруты:

router.get('/api/home', function (req, res, next) { 
    res.render('index', { 
    title: 'Meanit' 
    }); 
}); 

router.get('*', function (req, res, next) { 
    res.redirect('/api/home'); 
}); 

Моя Угловая конфигурация состояние:

app.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    '$locationProvider', 
    function ($stateProvider, $urlRouterProvider, $locationProvider) { 
    $stateProvider 
     .state('home', { 
     url: '/home', 
     templateUrl: '/views/home.html', 
     controller: 'MainCtrl', 
     resolve: { 
      postPromise: [ 
      'posts', 
      function (posts) { 
       return posts.getAllPosts(); 
      } 
      ] 
     }      
     }) 
     .state('posts', { 
     url: '/posts/{id}', 
     templateUrl: '/views/posts.html', 
     controller: 'PostsCtrl', 
     resolve: { 
      post: [ 
      '$stateParams', 
      'posts', 
      function ($stateParams, posts) { 
       return posts.getPost($stateParams.id); 
      } 
      ] 
     } 
     }) 
     .state('register', { 
     url: '/register', 
     templateUrl: '/views/register.html', 
     controller: 'AuthCtrl', 
     onEnter: [ 
      '$state', 
      'auth', 
      function ($state, auth) { 
      if (auth.isLoggedIn()) 
       $state.go('home') 
      } 
     ] 
     }) 
     .state('login', { 
     url: '/login', 
     templateUrl: '/views/login.html', 
     controller: 'AuthCtrl', 
     onEnter: [ 
      '$state', 
      'auth', 
      function ($state, auth) { 
      if (auth.isLoggedIn()) 
       $state.go('home') 
      } 
     ] 
     }); 

    $locationProvider.html5Mode(true); 
    $urlRouterProvider.otherwise('home'); 
    } 
]); 

Моя иерархия папок выглядит следующим образом:

meanit 
    public 
    js 
     app.js (Angular) 
    routes 
    index.js (Express routes) 
    views (Angular templates) 
    index.html 
    home.html 
    posts.html 
    register.html 
    login.html 
    server.js 

Все маршруты работают по назначению , но когда я перезагружаю страницу на одном из маршрутов или перехожу непосредственно к URL маршрута (/ posts/579d17934b0f5f6b2ff5c72c), я перенаправлен сначала в/api/home через Express (предполагается, я думаю), а затем в/home через Angular вместо маршрута/posts/579d17934b0f5f6b2ff5c72c (НЕ предназначен).

Как заставить навигацию/перезагрузку URL оставаться на подпункте?

(я смотрел на AngularJS. Retain state after page reload, но я не понимаю, как настроить URL-синтаксический анализ/как адаптировать код из принятого ответа с учетом моего проекта.)

Answer 1

Кажется, ваша проблема с экспрессом. Ваш catchall делает res.redirect(), который, я думаю, обновляет URL-адрес браузера. Я предлагаю вам просто сделать простой sendfile() или render() вместо redirect().

Ваш экспресс-маршрут сервер неоднородного должен измениться:

//This is assuming the index.html file exists on the same directory the server is launched from 
router.get('*', function (req, res, next) { 
    res.render('index', { 
     title: 'Meanit' 
    }); 
}); 

Answer 2

У меня была аналогичная проблема когда я начал один из моих проектов angularjs. В моем случае у меня было 2 разных сервера; один для API, а другой предназначен для обслуживания статических файлов. Вот что моя курьерский статический сервер выглядит следующим образом:

server.js

//server.js 

var express = require('express'); 

var app = express(); 

//use very specific paths to the different resource folders 
app.use('/js', express.static('public/js')); 
app.use('/css', express.static('public/css')); 
app.use('/img', express.static('public/img')); 
app.use('/views', express.static('public/views')); 
app.use('/bower_components', express.static('public/bower_components')); 

var port = process.env.PORT || 80; 
var staticExtensions = ['css','js','png','gif','jpg','woff','woff2','ttf','map']; 
var deeperPaths = ['/posts']; //an array of deeper paths that need special treatment 

//cater specifically for post, since it's deeper than other paths (relative to the other assets /css, /js etc) 
app.get('/posts/:postId', function(req,res){ 
    console.log('fetching matched request: '+ req.path + '...'); 
    res.sendFile(__dirname +'/public/index.html'); 
}); 

//any other request returns the index.html file, where angularjs routing takes over 
app.get('*', function(req, res) { 
    console.log('fetching '+ req.path + '...'); 
    var filePath = __dirname +'/public/index.html'; 

    var requestPath = req.path.split('?')[0]; 
    var fileExtension = requestPath.split('.').pop(); 
    //if it's a static resource make relative to /public 
    if(staticExtensions.lastIndexOf(fileExtension)>-1){ 
     deeperPaths.forEach(function(path, index){ 
      //this is not a very reliable test, but it works for now 
      if(req.path.indexOf(path)===0){ 
       filePath = __dirname + '/public' + req.path.replace(path, ''); 
      } 
     }); 
    } 
    res.sendFile(filePath); // load our public/index.html file 
}); 

// START THE SERVER 
app.listen(port); 
console.log('Website started on port ' + port); 

Надеется, что это помогает ...