Как просмотреть один элемент из списка в Angular's Yoeman Generator?

Question

У меня есть проект, в котором я использую генератор полного стека yeoman, который обрабатывает мою аутентификацию для входа пользователя, публикации и удаления. Я ищу возможность щелкнуть элемент, который заполняется в списке, а на другой странице просмотреть более подробную информацию об этом элементе.

Это 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>

Это мой View Controller (поэтому, на мой взгляд, здесь должна быть функция для вызова определенного идентификатора, исправьте меня, если я ошибаюсь)

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

})

Это мой контроллер, который обрабатывает все функции, сгенерированные генератором полного стека.

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

})

Кажется, сейчас это работает правильно.