2016-05-17 105 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' 
})