在根上表示指定的占位符路由

我目前正在构build一个MEAN应用程序,并且按照您的预期(/ login,/ profile,/ logout等)设置了路由设置。 我现在已经在我的应用程序中创build了用户configuration文件页面,我希望用户configuration文件可以从域的根目录访问,例如: www.domain.com/:username : www.domain.com/:username

我目前有我的routes.js文件的末尾定义以下路线,就在我的catchall /通配符路线之前。

 app.get('/:username', function (req, res) { var username = req.params.username; usersTable.findOne({ 'local.username': username }, function (err, user) { if (err) return err; if (!user) res.redirect('/'); res.render('public-profile.ejs', { user: user }); }); }); app.all('/*', function (req, res, next) { if (req.user) { res.sendfile('views/dashboard.html'); // for angular routing } else { res.redirect('/login'); } }); 

就目前而言,Express / Angular之间存在一些干扰。 如果我访问/ matthew这是一个用户名,然后尝试从URL栏加载/configuration文件,Angular不会捕获这个(/ *路由),而是加载默认('/')angular路由。

我担心的是,我无法在Angular中创build一个/:username路由,因为那个页面将如何知道要显示哪些用户数据? 我将不得不创build一个API调用来读取给定的URL,然后用该名称查找数据库中的用户? (看起来笨拙?)

我对构build大型web应用程序相当陌生,所以对架构的build议将非常棒。

您的文章中的代码只configuration服务器端路由,实际上与Angular路由无关。

Angular适用于单页面应用程序(SPA)。 如果你想在客户端上使用AngularJS,你可能不想从服务器提供页面,而是返回数据,也就是说你的路由只能用于API调用。

所以,在客户端,你应该有这样的东西:

 myApp .constant('MY_BACKEND_URL', 'http://www.domain.com') .config(['$stateProvider', function ($stateProvider) { // client-side route config $stateProvider .state('userProfile',{ url: '/:username', templateUrl: 'views/user-profile.html', controller: 'UserProfileCtrl', resolve: { // lets you resolve asynchronously before page is loaded. userData: ['$http', 'MY_BACKEND_URL', '$stateParams', '$state', function ($http, MY_BACKEND_URL, $stateParams, $state) { return $http .get(MY_BACKEND_URL + '/' + $stateParams.username)// returns a promise of the user data fetch from the API. .catch(function (err) { $state.go('dashboard'); }); }] } }); $stateProvider.state('dashboard',{ url: '/', template: 'views/dashboard.html', controller: 'DashboardCtrl' }); }]); 

而在服务器端:

 // config route for API call to user resource app.get('/user/:username', function (req, res) { var username = req.params.username; usersTable.findOne({ 'local.username': username }, function (err, user) { if (err) { res.json(500, err); } else if (!user) { res.json(404, {reason: "No such username", username: username}); } else { res.json(200, user); } }); }); 

作为一个经验法则,客户端(Angular)configuration页面上的路由,而服务器端上的路由configuration您的API,即您要调用的端点来获取数据。

顺便说一句,你应该删除return err; 来自callback的语句,因为从仅用于副作用的callback函数返回值没有意义。 你可能想用下面的东西replace它:

 if(err){ res.json(500, err); // return internal server error response. }