重定向到Node.js中的UI路由器状态 [英] Redirect to UI-router state in Node.js

问题描述

显示商品清单；单击产品行后，将为其显示全屏详细信息视图.我正在使用ui-router进行前端路由，以从列表视图到详细信息视图.地址网址示例: http://localhost:3000/detail/product1 .

I display list of the products; once clicked on the product row, the full screen detail view is displayed for it. I am using ui-router for front end routing to to get from list view to detail view. Example of the address url: http://localhost:3000/detail/product1 .

如果我在浏览器地址中输入该URL，它不会重定向到该产品详细信息，而是尝试加载index.html，因为它是nodejs中的默认页面.如何在node.js中重定向到ui-router状态?

If I enter this url into browser address, it does not redirect to that product detail, instead it tries to load index.html since it is the default page in nodejs. How can I redirect to ui-router state in node.js?

Angular App.js

Angular 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:

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

谢谢

推荐答案

状态更改为使用url中的查询时，此问题已解决:

The issue was fixed when state was changed to use query in url as:

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

这篇关于重定向到Node.js中的UI路由器状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！