Javascript 在根目录上表示命名占位符路由

我目前正在构建一个MEAN应用程序，并且我已经按照您的预期进行了路由设置（/login、/profile、/logout等）。现在，我在我的应用程序中已经到了一个关键点，我正在构建用户配置文件页面，我希望可以从域的根目录访问用户配置文件，比如：

www.domain.com/：username

我目前有以下路由，它是在我的routes.js文件的末尾和catchall/wildcard路由之前定义的

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栏加载/profile，Angular不会捕获此（/*路由），而是加载默认（'/'）Angular路由

我担心的是，我无法在Angular中创建/：username路由，因为该页面如何知道要显示哪些用户数据？我是否必须创建一个API调用来读取给定的URL，然后在数据库中查找具有该名称的用户？（看起来很笨重？）

---

我对构建大规模Web应用程序还很陌生，所以关于架构的建议会很好。

你文章中的代码只配置服务器端路由，实际上与角度路由无关

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

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

在服务器端：

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

根据经验，客户端（角度）上的路由配置页面，而服务器端的路由配置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'
  });
}]);

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

如果你想要有角度的单页应用程序，你不会从服务器渲染视图，你会修改回应用程序条目point@charlietfl这就是my/*Route中发生的情况。我看到您选择使用Angular UI进行角度布线。在这种情况下，Angulars UI与Angulars的内置$routeProvider相比有什么好处吗？在这种情况下，没有明显的好处，但这似乎是使用平均堆栈进行操作的常规方法，从我在上一节中看到的。如果一次似乎需要学习很多东西，请不要使用它。我对函数的“MY_BACKEND_URL”部分有点困惑，如果我用API端点（/users/：username）替换它，那么函数将不会运行，因为/是参数中的非法字符？我已经用更正函数修改了您的答案。谢谢你的帮助！MY_BACKEND_URL与端点无关，而是与域有关（我输入了一个错误，现在已更正）。“MY_BACKEND_URL”是AngularJS服务的名称，建议您只在一个位置配置后端URL。我修改了代码，向您展示了如何操作。