Question

我正在使用Angular for client和Nodejs（Express）来为服务器端构建单页面应用程序。为了支持不同视图的浏览器历史记录，我使用的是$ routeProvider。如果我不刷新浏览器，它运行良好。但每当我刷新浏览器时，我都会注意到URL已更改，这会导致问题，因为服务器上不存在该URL模式。以下是更多细节。

Angular js路由器代码：

 $routeProvider.
                when('/categoryview', {
                    templateUrl: 'templates/partials/app/categoryview/CategoryView.html',
                    controller: 'ApplicationController'
                }).
                when('/:categoryId/themes', {
                    templateUrl: 'templates/partials/app/themeview/ThemeView.html',
                    controller: 'ThemeViewController'
                })
                .otherwise({redirectTo: '/categoryview'});

首次启动的应用程序中的浏览器中的网址： http://localhost:3000/themelibrary#/categoryview

刷新时浏览器中的网址 http://localhost:3000/categoryview#/categoryview

如果您发现，则会发现根网址“/ themelibrary”更改为“/ categoryview”，这会导致问题，因为不支持“/ categoryview”由服务器。我也尝试过不同版本的Angularjs，但没有成功。

请帮助并告诉我是否需要更多代码来解释此问题。

编辑：添加了Nodejs路由器详细信息 UI路线：

module.exports = function(app, passport) {
    // route for home page
    app.get('/', function(req, res) {      
        res.redirect('/login');
    });
    //Route for login to present the login page back to user
    app.get('/login', function(req, res) {       
        res.set({'content-type': 'text/html; charset=utf-8'})
        res.render('login.ejs', {message: req.flash('loginMessage')})
    });

 //Route to get the username and password and authenticate
    app.post('/authenticate', passport.authenticate('local-login', {
        successRedirect: '/themelibrary', // redirect to the secure themelibrary section
        failureRedirect: '/login', // redirect back to the signup page if there is an error
        failureFlash: true // allow flash messages
    }));

     // route for default lending page
    app.get('/themelibrary', isLoggedIn, function(req, res) {       
        var url= require('url');
        console.log("themelibrary hash url >> " + url.hash);
        res.charset = 'utf8';
        res.set({'content-type': 'text/html; charset=utf-8'})
        res.render('index.ejs', {
            user: req.user
                    // get the user out of session and pass to template
        });
    });

// route middleware to make sure a user is logged in
function isLoggedIn(req, res, next) {    
    // if user is authenticated in the session, carry on
    if (req.isAuthenticated())
        return next();
    // if they aren't redirect them to the home page
    res.redirect('/');
}

API路线：

module.exports = function(app) {
    app.get('/users/:id', userService.getUserById);
    app.get('/users', userService.getAllUsers);
    app.post('/themes', themeService.addTheme);
    app.get('/themes/:id', themeService.getThemeById);
    app.put('/themes/:id', themeService.updateTheme);   
    app.delete('/themes/:id', themeService.deleteTheme);
    app.get('/themes', themeService.getThemes); 
    app.get('/resources/:code', languageResourceService.getLanguageResourceByCode); 
    app.get('/config', applicationConfigService.getApplicationConfig);  
    app.post('/keepalive', applicationConfigService.keepAlive); 
    app.get('/categories', categoryService.getAllCategories);
};

Answer 1

我需要看到您的快速路由规则才能给出完整的答案，但由于根据$ routeProvider，主题库不是有效路由，因此如果您从您的内部浏览到这个规则，则会激活您的otherwise规则应用

如果您在此URL刷新浏览器，则绕过$ routeProvider并将请求直接发送到您的node.js实例，其中express将处理该路由。

至于哈希路由，所有这些都取决于你是否启用了html5mode @ david-spence指出。

修改

便士终于放弃了这一点。如果您的角度应用已加载（并且唯一的方式是通过/themelibrary路径加载），它将接管您的所有路由，因此通过应用程序的任何路由更改都将由{{1}处理}。也就是说，将不会有页面重新加载。因此，如果后端服务器被ngRoute的请求命中，则应用程序的其他部分正在通过/categoryview或类似内容请求完整页面重定向。

简而言之，您的路线很好，应用程序的其他部分正在绕过您的路线并直接返回服务器（它不应该）。

浏览器刷新时URL被更改（$ routeProvider用于客户端路由）

1 个答案:

修改