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

我正在用Node,Express,Mongoose和Angular编写应用程序。 我可以在页面上显示所有项目。 我的下一步是为数据库中的项目编写单独的页面,所以我创build了路线:

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中显示名称<%= name%>,但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)

       

网上收集的解决方案 "MEAN应用程序中的项目单独页面"

如果我理解正确的话,你不会在angular度上发送id。

在这种情况下,您应该创build一个$资源服务:

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

我不得不做一些研究,以确保我没有错,因为我没有太多的经验与平均值。 但是,看看它们的实施情况,似乎仍然是一样的。

根据示例文章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。 所以我们在控制器部分find了这个function。 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,并添加到需求。

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

并在文章angular度控制器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返回是什么它试图parsing。 如果你正在做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); }); }); 

添加到前端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); }); 

依然不起作用。 路线(后端):

 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/ Java脚本/ app.js。 因为在html文件中添加../不是很好的做法,它不适用于指令。