2016-05-17 70 views
0

我顯示產品列表;一旦點擊了產品行,就會顯示全屏詳細視圖。我正在使用ui-router進行前端路由以從列表視圖到詳細視圖。地址網址示例:http://localhost:3000/detail/product1重定向到Node.js中的UI路由器狀態

如果我在瀏覽器地址中輸入此URL,它不會重定向到該產品詳細信息,而是嘗試加載index.html,因爲它是nodejs中的默認頁面。我怎樣才能重定向到ui路由器狀態在node.js?

角App.js

'use strict'; 

/* App Module */ 

var myApp = angular.module("myApp", ['ui.router']); 

myApp.config(['$stateProvider', '$urlRouterProvider','$locationProvider', 
      function($stateProvider, $urlRouterProvider,$locationProvider) { 


$urlRouterProvider.otherwise('/'); 

$stateProvider 

.state('/', { 
    url: '/', 
    templateUrl: 'partials/listView.html' 
}) 

    .state('list', { 
     url: '/', 
     templateUrl: 'partials/listView.html' 
    }) 
    .state('detail', { 
     url: '/detail/:key', 
     params: { 
      key: { value: "" } 
     }, 
     templateUrl: 'partials/detailView.html', 
     controller: 'DetailController' 
    }) 

// use the HTML5 History API 
$locationProvider.html5Mode(true); 
}]); 

的NodeJS app.js:

var express = require('express') 
    , routes = require('./routes') 
    , http = require('http') 
    , path = require('path') 
    , bodyParser = require("body-parser"); 

    var app = express(); 

    app.set('port', process.env.PORT || 80); 

    //front end views are in /public folder; using html for views 
    app.set('views', __dirname + '/public'); 
    app.engine('html', require('ejs').renderFile); 
    app.set('view engine', 'html'); 

    app.use(bodyParser.json()); 
    app.use(bodyParser.json({ type: 'application/vnd.api+json' })); 
    //parse application/x-www-form-urlencoded 
    app.use(bodyParser.urlencoded({ extended: true })); 


    //using index.html as starting point 
    app.use(express.static(path.join(__dirname, '/public'))); 
    app.use(express.logger('dev')); 

    app.use(express.methodOverride()); 
    app.use(app.router); 


    //development only 
    if ('development' == app.get('env')) { 
     app.use(express.errorHandler()); 
    } 

    app.get('/', routes.index); //redirect to index.html on page load 
    app.get('/detail/*', function(req, res){ 

    var urlSegments = req.url.split('/',3); 
    var key=urlSegments[2]; // product id 


    // ??? How can I redirect to detail state in angular ui-router here passing the key of the product ??? 
    }); 



app.get('*', function(req, res) { 
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end) 
}); 

http.createServer(app).listen(app.get('port'), function() { 
    console.log('Express server listening on port ' + app.get('port')); 
}); 

謝謝

+0

檢查瀏覽器中是否有錯誤控制檯並張貼在這裏。 –

+0

有錯誤。 Node.js發送文件到index.html,但它沒有正確解析: angular.min.js:1未捕獲的SyntaxError:意外的標記< – kaplievabell

+0

其中「<」從「」標記 – kaplievabell

回答

0

問題被固定時的狀態改爲在URL中使用的查詢爲:

.state('detail', { 
    url: '/detail?key', 
    params: { 
    key: { value: "" } 
    }, 
    templateUrl: 'partials/detailView.html', 
    controller: 'DetailController' 
})