Question

我一直在寻找有关如何将Angular与Express + Node连接起来的想法，this article是一个巨大的帮助。我可以做的事实：

app.set('views', __dirname + '/views');

仍然可以从同一个views目录中提供我的Angular模板对我来说是一个巨大的启示，因为我一直假设所有Angular模板都进入public目录。这可以通过以下方式实现：

app.get('/templates/:name', function(req, res) {
    var name = req.params.name;
    res.render('templates/' + name);
});

其中templates/是views的子目录。但是，前端的代码并不是那么光滑：

angular.module('myApp', ['myApp.controllers'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/createPost', {
        templateUrl: 'templates/createPost',
      })
      .when('/readPost/:id', {
        templateUrl: 'templates/readPost',
      })
      .when('/updatePost/:id', {
        templateUrl: 'templates/updatePost',
      })
      .when('/deletePost/:id', {
        templateUrl: 'templates/deletePost',
      })
  }]);

上述路线负责显示post资源。如果我想添加author和category资源，这个文件显然会得到很多样板代码，所有这些新路由都必须考虑在内。例如，在Express中，我可以这样做：

app.use('/posts', posts);
app.use('/authors', authors);
app.use('/categories', categories);

如何在Angular中执行类似的操作，或者至少将前端路由分组到相关的块中？

请告知。

Answer 1

您可以将代码的重复部分提取到函数中，然后使用该函数为每个资源构建路由。也许类似于以下内容:(请注意，这不是测试，但应该给你一个好主意）

function routeResources(provider, resources)
{
    for( var i = 0, len = resources.length; i < len; i++)
    {
        var resource = resources[i];

        provider
        .when('/create' + resource {
            templateUrl: 'templates/create' + resource
        })
        .when('/read' + resource + '/:id/' {
            templateUrl: 'templates/read' + resource
        })

        // etc. etc. repeat for each route
    }
}

然后在你的配置功能里面：

routeResources($routeProvider, ['Post','Author','Category']);

在一个文件中有太多$ routeProvider路由，我该如何重构这段代码？

1 个答案: