如何在Angular的Yoeman Generator中查看單個項目？

Question

我有一個項目，我正在使用yeoman fullstack生成器來處理用戶登錄，發佈和刪除的身份驗證。我希望能夠點擊列表中的項目，並在其他頁面上查看該項目的更多詳細信息。

這是HTML

<div id="eventsListContainer" class="row"> 
<div class="col-lg-12"> 
    <h1 class="listHeader">Nightlife</h1> 
    <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in awesomeThings | orderBy: '-date' | filter: 'Nightlife'"> 
    <li><a class="eventItem" ng-href="/things/:id"> 
     <p class="eventName">{{thing.name}}</p> 
     <p class="eventDate">{{thing.date}}</p> 
     <!-- <button type="button" class="close" ng-click="deleteThing(thing)">&times;</button> --> 
    </a></li> 
    </ul> 
</div> 

這是我的視圖控制器（所以在我心中的函數來調用一個獲取特定的ID應該在這裏，糾正我，如果我錯了）

angular.module('applicationtonightApp') 
.controller('ViewCtrl', function ($scope, $http, socket, $stateParams) { 
$scope.awesomeThings = {}; 

$http.get('/api/things/'+$stateParams._id).success(function(thing) { 
    $scope.awesomeThings = awesomeThings; 
    socket.syncUpdates('thing', $scope.awesomeThings); 
}); 

$scope.$on('$destroy', function() { 
    socket.unsyncUpdates('thing'); 
}); 

}）

這是我的控制器處理所有的功能，TH是由全堆生成器生成的。

/** 
* Using Rails-like standard naming convention for endpoints. 
* GET  /things    -> index 
* POST /things    -> create 
* GET  /things/:id   -> show 
* PUT  /things/:id   -> update 
* DELETE /things/:id   -> destroy 
*/ 

'use strict'; 

var _ = require('lodash'); 
var Thing = require('./thing.model'); 

// Get list of things 
exports.index = function(req, res) { 
Thing.find(function (err, things) { 
if(err) { return handleError(res, err); } 
return res.json(200, things); 
}); 
}; 

// Get a single thing 
exports.show = function(req, res) { 
Thing.findById(req.params.id, function (err, thing) { 
    if(err) { return handleError(res, err); } 
    if(!thing) { return res.send(404); } 
    return res.json(thing); 
}); 
}; 

// Creates a new thing in the DB. 
exports.create = function(req, res) { 
Thing.create(req.body, function(err, thing) { 
if(err) { return handleError(res, err); } 
return res.json(201, thing); 
}); 
}; 

// Updates an existing thing in the DB. 
exports.update = function(req, res) { 
if(req.body._id) { delete req.body._id; } 
Thing.findById(req.params.id, function (err, thing) { 
if (err) { return handleError(res, err); } 
if(!thing) { return res.send(404); } 
var updated = _.merge(thing, req.body); 
updated.save(function (err) { 
    if (err) { return handleError(res, err); } 
    return res.json(200, thing); 
}); 
}); 
}; 

// Deletes a thing from the DB. 
exports.destroy = function(req, res) { 
Thing.findById(req.params.id, function (err, thing) { 
if(err) { return handleError(res, err); } 
if(!thing) { return res.send(404); } 
thing.remove(function(err) { 
    if(err) { return handleError(res, err); } 
    return res.send(204); 
}); 
}); 
}; 

function handleError(res, err) { 
return res.send(500, err); 
} 

請讓我知道我做錯了什麼或需要改變什麼！預先感謝您的時間。

Answer 1

我似乎通過擺弄代碼並在線查找不同的答案來解決它。我沒有在我的view.js中正確調用我的視圖，我需要添加：id，如下所示。

angular.module('applicationtonightApp') 
.config(function ($routeProvider) { 
    $routeProvider 
    .when('/view/:id', { 
    templateUrl: 'app/view/view.html', 
    controller: 'ViewCtrl' 
    }); 
}); 

並且還將我的view.controller.js更新爲以下內容。

angular.module('applicationtonightApp') 
.controller('ViewCtrl', function ($scope, $http, socket, $routeParams) { 
    $scope.awesomeThings = {}; 

    $http.get('/api/things/'+ $routeParams.id).success(function(thing) { 
    console.log('WORKING'); 
    $scope.thing = thing; 
    socket.syncUpdates('thing', $scope.awesomeThings); 
}); 

$scope.$on('$destroy', function() { 
    socket.unsyncUpdates('thing'); 
}); 

}) 

這似乎現在工作正常。