其上呈现数据，以角麻烦 [英] Having trouble on rendering data to angular
问题描述
目前我正在上呈现的角度与节点/ EX preSS作为后端的特定数据。
Currently I'm trying to render a specific data on angular with node/express as the backend.
我想要实现的是每当用户点击一个特定的故事，它会链接到属于谁创造的故事用户特定的故事页。
What I'm trying to achieve is whenever a user clicks a specific story, it will link to that specific story page that belongs to a user who created the story.
api.js
apiRouter.get('/:user_name/:story_id', function(req, res) {
User.findOne({ name: req.params.user_name }, function(err, user, next) {
if(err) return next(err);
Story.findById(req.params.story_id, function(err, story) {
if(err) {
res.send(err);
return;
}
res.json({
name: user.name,
story_id: story._id,
content: story.content
});
});
});
});
对于后端（API），它确实表明我想与邮差铬工具，但是当它涉及到的角度，我确实让人困惑的是如何将数据呈现到HTML的特定数据。
As for the backend(api) It does show the specific data that I wanted with POSTMAN chrome tool but when it comes to angular I'm really confuse of how to render the data to the html.
service.js
service.js
storyFactory.getSingleStory = function(user_name, story_id) {
return $http.get('/api/' + user_name + story_id);
}
controller.js
controller.js
angular.module('storyCtrl', ['storyService'])
.controller('StoryController', function(Story, $routeParams) {
var vm = this;
Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
.success(function(data) {
vm.storyData = data;
});
});
app.routes.js
app.routes.js
.when('/:user_name/:story_id', {
templateUrl: 'app/views/pages/users/single.html',
controller: 'StoryController',
controllerAs: 'story'
})
index.html的（只是要显示它转到single.html行了）
index.html ( Just going to show the line where it goes to the single.html )
＆LT; A HREF =/ {{main.user.name}} / {{each._id}}＆GT;＆LT; H4＆GT; {{each.content}}＆LT; / H4＆GT;
single.html
single.html
Hello {{ main.user.name }}
<p>{{ story.content }}</p>
到目前为止，我无法管理与角度正确渲染数据，而与节点/ EX preSS我可以查询，我想与邮差的数据。我无言以对，并请救我脱离这混乱的角度给我：）
So far I couldn't manage to render the data properly with angular while with node/express I could query the data that I wanted with POSTMAN. I'm clueless and please save me from this confusion that angular giving me :)
推荐答案
我已通过您的code就去了，你可以在以下几个部分改进：
I have went through your code, and you can improve in following parts:
-
而不是在你的控制器使用
VAR VM =此，你应该绑定所有对象$范围，这是关键的双向数据绑定。例如
Instead of using
var vm = thisin your controller, you should bind all objects to$scope, which is the key to two-way data binding. For instance
angular.module('storyCtrl', ['storyService'])
.controller('StoryController', function($scope, Story, $routeParams) {
var vm = this;
Story.all().success(function(data) {
$scope.stories = data;
});
然后的故事可以在视图直接访问。这将是比在HTML controllerName.stories 更具可读性。
Then stories can be accessed in View directly. It would be more readable than controllerName.stories in HTML.
<div class="col-md-6" ng-controller="StoryController as story">
<div class="panel-body" ng-repeat="story in stories">
<div class="comment-text">
<a href="/{{ main.user.name }}/{{ story._id }}"><h4>{{ story.content }}</h4></a>
</div>
</div>
</div>
请记住，则（功能（响应））将只有一个参数传递给链接功能，而 .success（功能（数据，状态，头，配置））将检索HTTP响应数据。那么你的code加载单一的故事可以被转换成
Keep in mind, then(function(response)) will only pass one parameter to the chained function while .success(function(data, status, headers, config)) will retrieve data from HTTP response. Then your code to load single story can be converted to
Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
.then(function(data, status, headers, config) {
$scope.storyData = data;
});
现在我们可以访问 storyData 在View。
Now we can access storyData in View.
有在你的故事服务一个微小的错误。更改 generateReq（GET，/ API /+ USER_NAME + story_id）到 generateReq（GET，/ API /+ USER_NAME +'/'+ story_id）
There is a tiny bug in your Story Service. Change generateReq('GET', '/api/' + user_name + story_id) to generateReq('GET', '/api/' + user_name + '/' + story_id)
这篇关于其上呈现数据，以角麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
