Question

我正在使用Node，Express，Mongoose和Angular编写应用程序。我可以在页面上显示所有项目。我的下一步是为数据库中的项目编写单独的页面，因此我创建了路径：

app.get '/products/:product_id', (req, res) ->
    Product.findById req.params.product_id,  (err, product) ->
        res.send(err) if (err)
        res.render('product.html', { name: product.name } )     
        return      
    return

一切都很酷，我可以用＆lt;％= name％＆gt;显示名称在product.html中，但Angular不起作用。没有'/：product_id'工作。这是获取所有产品的途径：

app.get '/api/products', (req, res) ->
    Product.find (err, products) ->
       if (err)
            res.send(err)
        res.json(products); # return all products in JSON format
        return
    return

在正面：

$http.get('/api/products')
    .success (data) ->
        $scope.products = data
        console.log(data)
        return
    .error (data) ->
        console.log('Error: ' + data)
        return

那么，我如何编写应用程序，我将转到http://mydomain.com/products/53c68728c7e5a5381a000002然后会显示一个项目？（53c68728c7e5a5381a000002是id）

Answer 1

如果我理解正确，你就不会在角度方面发送id。

在这种情况下，您应该创建一个$ resource服务：

myApp.factory('ProductService', [ '$resource', function($resource) {
    return $resource('http://mydomain.com/products/:id', {
        id : '@_id'
        });
} ]);

然后在你的控制器中调用它：

myApp.controller('MyCtrl', ['$scope', 'ProductService', '$routeParams',
    function($scope, ProductService, $routeParams) {

    $scope.findOne = function() {
        $scope.product = ProductService.get({
            id : $routeParams.id
        });
    };
} ]);

只有在控制器声明中包含您的服务时才会有效（如果它已经存在，则还有routeParams），并且如果您在前端端设置了正确的路由：

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/product/:id', {templateUrl: 'partials/product.html', controller: 'MyCtrl'});
}]);

Answer 2

仍然无法运作。路线（后端）：

app.get '/products/:product_id', (req, res) ->
    Product.findById req.params.product_id,  (err, product) ->
        res.send(err) if (err)
        res.render('product.html', { name: product.name } )     
        return      
    return

App.js（Front）：

config(['$routeProvider', ($routeProvider) ->
   $routeProvider.when('/products/:id', {templateUrl: 'views/product.html', controller: 'StoreControllerOne'});

Controllers.js（正面）：

.controller 'StoreControllerOne', ['$scope', '$http', 'ProductService', '$routeParams', 
($scope, $http, ProductService, $routeParams) ->

$scope.findOne = ->
    $scope.product = ProductService.get({
        id : $routeParams.id
    });
    console.log($scope.product.id)
    return
]

Services.js（Front）：

.factory('ProductService', [ '$resource', ($resource) ->
    return $resource('/products/:id', {
        id : '@_id'
       });
 ]);

当我访问www.mydomain.com/products/53c92d5dda9cef6c23000002时，JS控制台说，例如，找不到www.mydomain.com/products/javascripts/app.js，这个文件在www中.mydomain.com来/ Javascript角/ app.js。因为在html文件中添加../不是一种好的做法，它不适用于指令。

Answer 3

我必须做一些研究，以确保我没有错，因为我没有很多MEAN的经验。然而，看看meanjs及其实现，它似乎保持不变。

根据示例文章routes.js https://github.com/meanjs/mean/blob/master/app/routes/articles.server.routes.js

app.route('/articles/:articleId')
    .get(articles.read)    //<----THIS GUY RIGHT HERE
    .put(users.requiresLogin, articles.hasAuthorization, articles.update)
    .delete(users.requiresLogin, articles.hasAuthorization, articles.delete);

他们调用articles.read。所以我们在控制器部分找到了这个功能。 https://github.com/meanjs/mean/blob/master/app/controllers/articles.server.controller.js

此函数抓取并返回req.article

exports.read = function(req, res) {
    res.jsonp(req.article);
};

如果你挖得更深，可以使用猫鼬找到并添加到请求中。

exports.articleByID = function(req, res, next, id) {
    Article.findById(id).populate('user', 'displayName').exec(function(err, article) {
        if (err) return next(err);
        if (!article) return next(new Error('Failed to load article ' + id));
        req.article = article;
        next();
    });
};

和文章中的角度控制器 https://github.com/meanjs/mean/blob/master/public/dist/application.js

 $scope.findOne = function () {
      $scope.article = Articles.get({ articleId: $stateParams.articleId });
    };

您仍在返回HTML作为请求的一部分。让angular处理路由并将请求中的数据提取到节点服务器。

app.get '/products/:product_id', (req, res) ->
    Product.findById req.params.product_id,  (err, product) ->
        res.send(err) if (err)
        res.json({ name: product.name })     
        return      
    return

或者那种效果。当您的资源或甚至简单的http请求发送到/products/:product_id时，无论您通过res返回的是它尝试解析的内容。如果你正在做res.render它将作为一个回应和休息返回，因为你期待别的东西。

编辑参考您正在使用的教程的评论*

添加到服务器端 - 这将添加api路由以返回该产品/ product_id的JSON数据

//View a product
    app.get('/api/products/:product_id', function(req, res) {
        Product.findOne({
            _id : req.params.product_id
        }, function(err, product) {
            if (err)
                res.send(err);

            res.json(product);
        });
    });

添加到前端角度控制器 - 无论您在哪里为产品执行http.get，都要执行此操作

   //id is a placeholder for however you are passing in the product id
    $http.get('/api/products/' + id)
        .success(function(data) {
            $scope.product = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

MEAN应用程序中项目的单独页面

3 个答案: