Question

我是MEAN堆栈的新手，我正在尝试找出处理我的路由的最佳方法，express.Router()或AngularJS的控制器（https://docs.angularjs.org/tutorial/step_07）。

我正在使用Express v4.12.0，Angular v1.3.13，EJS v1（用于模板化）。

我真的很喜欢Express的路由（/items/itemId）有多干净，而且我不太喜欢Angular，因为它在URL中使用了哈希值（/items#/items/itemId）。

现在我有一个列出我的项目的页面（players.ejs）：

<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
    <title>Fantasy Football Helper | <%- title %></title>
    <% include partials/head %>
    <script type="text/javascript" src="/javascript/app/playersApp.js"></script>
</head>
<body class="container">

    <% include partials/header %>

    <main>
        <div class="row">
            <div class="col-sm-8">

                <h2>Fantasy Players</h2>

                <div ng-controller="PlayerController">
                    <div class="player" ng-repeat="player in players">
                        <p>
                            <a href="/players/{{ player._id }}"><strong>{{ player.name }} - {{ player.position }} - {{ player.team }}</strong></a>
                        </p>
                    </div>
                </div>
                <!-- Ideally, other CRUD UI goes here -->

            </div>

            <% include partials/sidebar %>
        </div>
    </main>

    <footer>
        <% include partials/footer %>
    </footer>

</body>
</html>

我想为这些players.ejs的每个CRUD操作重用此players模板。目前我正在使用Express的路由。我的主app.js中有以下路线：

var players = require('./routes/players');
app.use('/players', players);

我在players路线（routes/players.js）内有以下路线：

var express = require('express');
var router = express.Router();

/* GET /players listing. */
router.get('/', function(req, res, next) {
    res.render('players', { title: 'Players'});
});

/* GET /player details. */
router.get('/:id', function(req, res, next) {
    res.render('players', { title: 'Fantasy Players'});
});

module.exports = router;

有没有办法，使用Express的路由，有一个单独的EJS模板，根据http操作提供不同的部分？

注意：我一直在参考以下指南：

Answer 1

您可以将布尔值传递给模板：

router.get('/', function(req, res, next) {
    res.render('players', { title: 'Players', foo: true});
});

router.get('/:id', function(req, res, next) {
    res.render('players', { title: 'Fantasy Players', foo: false});
});

根据布尔值渲染不同的部分：

<%if (foo) { %>
 <% include partials/foo %>
<% } else { %>
  <% include partials/bar %>
<% } %>

Answer 2

我确信有很多方法和方法。我可以告诉你什么对我有用，这是我从多元视角采用的方法。

让您的快递路线全部提供相同的index.ejs文件：

app.get('/', function(req, res, next) {  
 res.render('index.ejs',{
   page: 'home'
 });
}); 

app.get('/about', function(req, res, next) {  
 res.render('index.ejs',{
       page: 'about'
     });
    }); 

app.get('/about/:id', function(req, res, next) {
 res.render('index.ejs',{
       page: 'about'
     });
    });

我的index.ejs大部分都是使用导航ng-view和页脚来删除的。

我的快速路由处理http请求中的所有服务器逻辑：

router.get('/abo', aboutController.list);
router.post('/abo', aboutController.create);
router.route('/abo/:_id')
    .get(function(req, res) {
        About.findById(req.params._id, function(err, result) {
            if (err)
                res.send(err);
            res.json(result);
        });
    })
.put(function(req, res) {
        About.findById(req.params._id, function(err, abo) {
            if (err)
                res.send(err);
            abo.title = req.body.title;     // update the items info
            abo.shortname = req.body.shortname;
            abo.contents = req.body.contents;
            // save the items
            abo.save(function(err) {
                if (err)
                    res.send(err);
                res.json({ message: 'About content updated!' });
            });
        });
    })
.delete(function(req, res) {
        About.remove({
            _id: req.params._id
        }, function(err, service) {
            if (err)
                res.send(err);

            res.json({ message: 'Successfully deleted' });
        });
    });

Angular匹配快速网址：

.when('/', {
        templateUrl: 'templates/home.html',
        controller:'homeController'

    })
.when('/about/:id', {
        templateUrl: 'templates/template.html',
        controller: 'refactoredController'
    })

我也在使用：

$locationProvider.html5Mode(true);

允许没有＃

的干净网址

我的角度控制器与我为http调用设置的角度服务进行通信，http服务将数据传递到后端（express），路由接管。

function getByID(shortname, api) { 
return $http({
  method: 'GET',
  url: '/api/' + api,
  shortname: shortname
})
.then(getVolunteerByIDSuccess)
.catch(sendGetVolunteerError);

} 

function updateItem(data, api) {
  console.log(data);
  return $http({
    method: 'PUT',
    url: 'api/'+ api + "/" + data._id,
    data: data  
  })
  .then(updateItemSuccess, data)
  .catch(updateItemError);
}


function addItem(newItem, api){
  return $http({
    method: 'POST',
    url: 'api/' + api,
    data: newItem  
  })
  .then(updateItemSuccess, newItem)
  .catch(updateItemError);
}

function deleteItem(data, api){
  var titleDeleted = data.title;
  return $http({
    method: 'DELETE',
    url: 'api/'+ api + "/" + data._id,
    titleDeleted: titleDeleted
  })
  .then(updateItemSuccess, titleDeleted)
  .catch(updateItemError);
}

要经过很多工作，但希望能给你一个想法。这些只是代码的一小部分。我从所有不同来源获取了平均堆栈的信息，但重新构建了所有内容，主要是基于复数的课程。

使用ExpressJS路由器进行CRUD

有没有办法，使用Express的路由，有一个单独的EJS模板，根据http操作提供不同的部分？

2 个答案: