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)
如果我理解正确的话,你不会在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文件中添加../不是很好的做法,它不适用于指令。