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

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

一切都很酷，我可以在 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（正面）：

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（前面）：

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

如果您深入挖掘，使用 mongoose 会发现并添加到 req 中。

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

添加到前端 Angular 控制器 - 无论您在为产品执行 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);
        });