Related
I've been following the Thinkster Mean Stack tutorial, and it works wonderfully. So I have created my own project, and so far everything works fine.
However, they didn't cover how to delete posts.
And I can for the life for me not figure out how to delete an element from the data.
AngularApp.js
var app = angular.module('KOL', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: "/views/home.ejs",
controller: 'kolCtrl',
resolve: {
patientPromise: ['patients', function(patients) {
return patients.getAll();
}]
}
})
.state('details', {
url: '/details/{id}',
templateUrl: './views/details.html',
controller: 'detailsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('patients', ['$http', function($http){
var object = {
patients: []
};
object.getAll = function() {
return $http.get('/patients').success(function(data) {
angular.copy(data, object.patients);
});
}
object.create = function(patient) {
return $http.post('/patients', patient).success(function(data){
object.patients.push(data);
});
}
};
return object;
}])
.controller('kolCtrl', ['$scope', 'patients',
function($scope, patients){
$scope.patients = patients.patients;
$scope.selectedItem = $scope.patients[0];
$scope.addPost = function() {
if(!$scope.title || $scope.title === '') { return; }
if(!$scope.age || $scope.age === '') { return; }
patients.create({
name: $scope.title,
age: $scope.age,
})
$scope.title = '';
$scope.age = '';
};
object.delete = function(patient)
}])
.controller('detailsCtrl', [
'$scope',
'$stateParams',
'patients',
function($scope, $stateParams, patients){
$scope.patient = patients.patients[$stateParams.id];
}])
;
Home.ejs
<div class="container">
<div clas="row">
<div style="width: 200px; margin-top: 100px">
<select ng-model="selectedItem" ng-options="patients.name for patients in patients" class="pull-left form-control" name="Vælg"></select>
</div>
<div class="viewbox pull-right">
<h3>Patient: {{selectedItem.name}}</h3>
<p>Age: {{selectedItem.age}} </p>
<p>index: {{patients.indexOf(selectedItem)}}</p>
<button>Rediger</button>
<button ng-click="deleteItem(patients.indexOf(selectedItem))">Delete</button>
</div>
</div>
<div class="row" class="pull-left">
<div style="width: 200px; margin-top: 100px">
<form role="form" class="form-group" ng-submit="addPost()">
<input class="form-control" type="text" ng-model="title" />
<input class="form-control" type="text" ng-model="age" />
<button type="submit">Add</button>
</form>
</form>
</div>
</div>
</div>
index.js (route get and post)
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
var mongoose = require('mongoose');
var Patient = mongoose.model('Patient');
router.get('/patients', function(req, res, next) {
Patient.find(function(err, patients){
if(err){ return next(err); }
res.json(patients);
});
});
router.post('/patients', function(req, res, next) {
var patient = new Patient(req.body);
patient.save(function(err, post){
if(err){ return next(err); }
res.json(patient);
});
});
router.delete('/patients/:patient', function(req, res, next) {
req.patient.remove(function(err, patient){
if (err) { return next(err); }
res.json(patient);
});
});
router.param('patient', function(req, res, next, id) {
var query = Patient.findById(id);
query.exec(function (err, patient){
if (err) { return next(err); }
if (!post) { return next(new Error('can\'t find patient')); }
req.patient = patient;
return next();
});
});
router.get('/details/:patient', function(req, res) {
res.json(req.patient);
});
module.exports = router;
I suspect the answer is quite straightforward, given the other code, but maybe not?
Thanks.
According to your function that you are passing to the router.delete in your index.js file:
router.delete('/patients/:patient', function(req, res, next) {
req.patient.remove(function(err, patient){
if (err) { return next(err); }
res.json(patient);
});
});
You'll have to append the patients.id to the url when using the delete verb with the $http service. So you can add a delete method to the object in your patients factory:
.factory('patients', ['$http', function($http){
var object = {
patients: []
};
object.getAll = function() {
return $http.get('/patients').success(function(data) {
angular.copy(data, object.patients);
});
}
object.create = function(patient) {
return $http.post('/patients', patient).success(function(data){
object.patients.push(data);
});
}
//add patient id to the url
object.delete = function(patient) {
return $http.delete('/patients/',patient).success(function(data){
console.log(data);
});
}
}
};
return object;
}])
object.delete = function(patient) {
return $http.delete('/patients', patient).success(function(data){
for(var i = 0; i < object.patients.length; i++) {
if(object.patients[i].id == patient.id) {
object.patients.splice(i, 1);
}
});
Something like that maybe, hard to say without knowing the response. If the response (data) is the deleted patient then you can use "if(object.patients[i].id == data.id)" instead
I am making a small polls app with Yeoman's angular-fullstack generator. I have got to the stage where I am implementing user selection to increment a polls count, which then updates my MongoDB database via a PUT request.
Question is set up ready for the user to vote:
The object has individual IDs:
Then, a user goes to vote on an answer. Looks fine on the client:
But it's not updating correctly in the server. All items in the array change to the first item, with identical IDs:
When the client is refreshed, it loads the data from the server and obviously this is not what I want:
What am I doing wrong?
Here is the view:
<form ng-submit="submitForm()">
<div ng-repeat="answer in poll.answers">
<label><input type="radio" name="option" ng-model="radioData.index" value="{{$index}}"/>
{{ answer.value }} - {{ answer.votes }} Votes
</label>
</div>
<button class="btn btn-success" type="submit">Vote!</button>
</form>
Here is the controller:
'use strict';
angular.module('angFullstackCssApp')
.controller('ViewCtrl', function ($scope, $routeParams, $http) {
$http.get('/api/polls/' + $routeParams._id).success(function (poll) {
console.log(poll);
$scope.poll = poll;
$scope.radioData = {
index: 0
};
$scope.submitForm = function () {
console.log($scope.radioData.index);
$scope.poll.answers[$scope.radioData.index].votes += 1;
console.log('scope poll answers:- ', $scope.poll.answers);
console.log('scope poll answers[index]:- ', $scope.poll.answers[$scope.radioData.index]);
console.log('votes:- ', $scope.poll.answers[$scope.radioData.index].votes);
// Change database entry here
$http.put('/api/polls/' + $routeParams._id, {answers: $scope.poll.answers}).success(function () {
console.log('success');
});
};
});
});
Here is the relevant server-side code, all left from the default of my route and endpoint setting up:
router.put('/:id', controller.update);
// Updates an existing poll in the DB.
exports.update = function(req, res) {
if(req.body._id) { delete req.body._id; }
Poll.findById(req.params.id, function (err, poll) {
if (err) { return handleError(res, err); }
if(!poll) { return res.status(404).send('Not Found'); }
var updated = _.merge(poll, req.body);
updated.save(function (err) {
if (err) { return handleError(res, err); }
return res.status(200).json(poll);
});
});
};
And the schema:
var PollSchema = new Schema({
creator: String,
title: String,
answers: [{
value: String,
votes: Number
}]
}, { versionKey: false });
I am building up an mobile application using Ionic Framework and Cordova Sqlite. I am displaying the data from the sqlite database in an ionic list. Each of the ionic list item has a button to delete the corresponding item from the database. On the click of the button, the data gets deleted from the database, but it continues to appear in the ionic list, until I go back to some other view and come back to it. I need to refresh the view immediately and remove that item from the list also. Also, all my SQL codes are in controller, so I also need to reload the controller, it seems.
app.js
.state('app.cart', {
url: '/cart',
views: {
'menuContent': {
cache: false,
templateUrl: 'templates/cart.html',
controller: 'NFController'
}
}
})
controller.js
.controller('NFController', ['$scope', '$cordovaSQLite','$cordovaToast','$state','$stateParams', function($scope, $cordovaSQLite, $cordovaToast, $state,$stateParams) {
$scope.listItems= [];
$cordovaSQLite.execute(db, 'SELECT * FROM cart ORDER BY id DESC')
.then(
function(res) {
$scope.cartTotal=0;
$scope.crtPP=0;
if (res.rows.length > 0) {
for (var i=0; i<res.rows.length; i++) {
**$scope.crtPP=res.rows.item(i).productPrice*res.rows.item(i).productQuantity;
$scope.cartTotal=$scope.cartTotal+$scope.crtPP;
$scope.CProductName=res.rows.item(i).productName;
$scope.listItems.push(res.rows.item(i));**
}
}
else{
$scope.status = "No Products in the Cart";
}
},
function(error) {
$scope.statusMessage = "Error on loading: " + error.message;
}
);
$scope.remove = function(id) {
$cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [id])
.then(function(res) {
//$state.go($state.current, {}, {reload: true});
var current = $state.current;
var params = angular.copy($stateParams);
$state.transitionTo(current, params, { reload: true, inherit: true, notify: true });
$cordovaToast.show('Removed from Cart','short','bottom');
}, function(error) {
console.log(error.message);
})
}
}])
remove() is called on the button click.
Updated Code :
.controller('NFController', ['$scope', '$cordovaSQLite','$cordovaToast', function($scope, $cordovaSQLite, $cordovaToast) {
$scope.listItems= [];
$cordovaSQLite.execute(db, 'SELECT * FROM cart ORDER BY id DESC')
.then(
function(res) {
$scope.cartTotal=0;
$scope.crtPP=0;
if (res.rows.length > 0) {
for (var i=0; i<res.rows.length; i++) {
$scope.listItems.push(res.rows.item(i));
}
cartTotal(); //cartTotal() called initially when the controller loads
console.log("Cart Total : " + $scope.cartTotal);
}
else{
console.log("####console######## NO results found #######"+"Table record #: ");
}
},
function(error) {
}
);
$scope.remove = function(id) {
$cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [id])
.then(function(res) {
var index=$scope.listItems.indexOf(id)
$scope.listItems.splice(index,1);
cartTotal(); //CartTotal() called second time
$cordovaToast.show('Removed from Cart','short','bottom');
}, function(error) {
console.log(error.message);
})
console.log(id);
}
function cartTotal()
{
angular.forEach($scope.listItems, function(item, key) {
$scope.crtPP = item.productPrice * item.productQuantity;
$scope.cartTotal += $scope.crtPP;
console.log($scope.cartTotal);
});
}
}])
When you execute the delete in your
$scope.remove = function(id) {
...
}
you don't need to the reload of the view. You can easily remove all this:
var current = $state.current;
var params = angular.copy($stateParams);
$state.transitionTo(current, params, { reload: true, inherit: true, notify: true });
you array of items $scope.listItems= []; should be bound to the view so you simply have to remove the item from the array or reload it and your view will update automatically.
$scope.remove = function(id) {
$cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [id])
.then(function(res) {
$scope.listItems = <find the id in the list and remove it>;
$cordovaToast.show('Removed from Cart','short','bottom');
}, function(error) {
console.log(error.message);
})
}
instead of passing the id only to your $scope.remove method you can pass the whole item and use it to find the element in the array so it can be removed:
$scope.remove = function(item) {
$cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [item.id])
.then(function(res) {
var index = $scope.listItems.indexOf(item);
$scope.listItems.splice(index, 1);
$cordovaToast.show('Removed from Cart','short','bottom');
}, function(error) {
console.log(error.message);
})
}
and your HTML:
<a class="btn" ng-click="remove(item)">Delete</a>
UPDATE:
Regarding the question in your comments, I would calculate the total using the array $scope.listItems.
I guess you have defined a property in your scope:
$scope.cartTotal = 0;
I would add a function:
function calculateCartTotal()
{
angular.forEach($scope.listItems, function(item, key) {
$scope.cartTotal += item.amount;
});
}
PS: item.amount or whatever your value is.
and recalculate after the splice:
$scope.remove = function(item) {
$cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [item.id])
.then(function(res) {
var index = $scope.listItems.indexOf(item);
$scope.listItems.splice(index, 1);
calculateCartTotal();
$cordovaToast.show('Removed from Cart','short','bottom');
}, function(error) {
console.log(error.message);
})
}
If you cannot do that cause you don't have a value item.amount (or similar) you can always re-execute the query in that function and feed $scope.cartTotal.
UPDATE:
function cartTotal()
{
$scope.cartTotal = 0;
angular.forEach($scope.listItems, function(item, key) {
$scope.crtPP = item.productPrice * item.productQuantity;
$scope.cartTotal += $scope.crtPP;
console.log($scope.cartTotal);
});
}
I have 2 models(Project and Task) to show in my home.html, and I want my them to be displayed like this: http://plnkr.co/edit/ItNvBNBIrLxqwRrhye5p, where both scope of data is shown and filtered based on the same color.
I use an Angular controller (projectCtrl.js) to control data on my web page(home.html), and use an Angular service (projectService.js) to grab data from my api file (api.js) written with express framework and mongoose.
But my code doesn't show anything, so I have no idea what's wrong.
home.html:
<div class="row" ng-if="main.loggedIn">
<div ng-controller="ProjectController">
<div class="panel col-md-8">
<!-- Project heading setup -->
<div class="panel-group" ng-repeat="eachProject in project.projects | reverse track by $index">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" ng-click="true" data-target="#projectDetails{{$index}}" href="#projectDetails{{$index}}">
<h4>{{eachProject.title}}: {{eachProject.short_description}}</h4>
</div>
<div class="panel-collapse collapse out" id="projectDetails{{$index}}">
<p class="panel-body">
<!-- Project detail table, where project data displays-->
<table class="table table-responsive table-bordered table-hover">
<tr>
<th>Description: </th>
<td>{{eachProject.description}}</td>
</tr>
</table>
<!-- Task heading setup -->
<div class="panel-group" ng-repeat="eachTask in task.tasks | filter: { projectID: eachProject.id }">
<div class="panel panel-success">
<div class="panel-heading" data-toggle="collapse" ng-click="true" data-target="#taskDetails{{$index}}" href="#taskDetails{{$index}}">
<h5>{{eachTask.title}}</h5>
</div>
<div class="panel-collapse collapse out" id="taskDetails{{$index}}">
<p class="panel-body">
<!-- Task detail table, where tasks data displays -->
<table class="table table-responsive table-bordered table-hover">
<tr>
<th>Description: </th>
<td>{{eachTask.description}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
ProjectCtrl.js
angular.module('projectCtrl', ['projectService'])
.controller('ProjectController', function(Project, Task, socketio) {
var vm = this;
Project.all()
.success(function(data) {
vm.projects = data;
})
vm.createProject = function() {
// Wrong due date prevention
var start = new Date(vm.projectData.start_date);
var due = new Date(vm.projectData.due_date);
if (start > due) {
alert("Due date can't be earlier than start date, please decide a new due date.");
return;
}
// Create project
vm.message = '';
Project.create(vm.projectData)
.success(function(data) {
// Clear up the project
vm.projectData = '';
vm.message = data.message;
$('#createProject').modal('hide');
})
}
Task.all()
.success(function(data) {
vm.tasks = data;
})
vm.createTask = function() {
// Wrong due date prevention
var start = new Date(vm.taskData.taskStart_date);
var due = new Date(vm.taskData.taskDue_date);
if (start > due) {
alert("Due date can't be earlier than start date, please decide a new due date.");
return;
}
// Create task
vm.message = '';
Task.create(vm.taskData)
.success(function(data) {
// Clear up the task
vm.taskData = '';
vm.message = data.message;
$('#createTask').modal('hide');
})
}
socketio.on('project', 'task', function(data) {
vm.projects.push(data);
vm.tasks.push(data);
})
})
.controller('AllProjectsController', function(projects, socketio) {
var vm = this;
vm.projects = projects.data;
socketio.on('project', function(data) {
vm.projects.push(data);
})
})
projectService.js
angular.module('projectService', [])
.factory('Project', function($http) {
var projectFactory = {};
projectFactory.create = function(projectData) {
return $http.post('/api', projectData);
}
projectFactory.allProjects = function() {
return $http.get('/api/all_projects');
}
projectFactory.all = function() {
return $http.get('/api');
}
projectFactory.deleteProject = function(id) {
return $http.post('/api/deleteProject', {id: id});
}
return projectFactory;
})
.factory('Task', function($http) {
var taskFactory = {};
taskFactory.create = function(taskData) {
return $http.post('/api', taskData);
}
taskFactory.allTasks = function() {
return $http.get('/api/all_tasks');
}
taskFactory.all = function() {
return $http.get('/api');
}
taskFactory.deleteTask = function(id) {
return $http.post('/api/deleteTask', {projectID: id});
}
return taskFactory;
})
.factory('socketio', function($rootScope) {
var socket = io.connect();
return {
on: function(eventName, callback) {
socket.on(eventName, function() {
var args = arguments;
$rootScope.$apply(function() {
callback.apply(socket, args);
})
})
},
emit: function(eventName, data, callback) {
socket.emit(eventName, data, function() {
var args = arguments;
$rootScope.apply(function() {
if(callback) {
callback.apply(socket, args);
}
})
})
}
}
})
api.js
var User = require('../models/user');
var Project = require('../models/project');
var config = require('../../config');
var secretKey = config.secretKey;
var jsonwebtoken = require('jsonwebtoken');
var fields = '...'; // a lot of fields, deleted them just to make it short
// Create tokens for users with jsonwebtoken
function createToken(user) {
var token = jsonwebtoken.sign({
id: user._id,
firstname: user.firstname,
lastname: user.lastname,
username: user.username
}, secretKey, {
expirtesInMinute: 1440
});
return token;
}
module.exports = function(app, express, io) {
var api = express.Router();
api.get('/all_projects', function(req, res) {
Project.find({}, function(err, projects) {
if (err) {
res.send(err);
return;
}
res.json(projects);
})
})
// login api
api.post('/login', function(req, res) {
User.findOne({
username: req.body.username
}).select(fields).exec(function(err, user) {
if(err) {
throw err;
}
if (!user) {
res.send({ message: "User doesn't exist"});
} else if(user){
var validPassword = user.comparePassword(req.body.password);
if (!validPassword) {
res.send({ message: "Invalid Password"});
} else {
var token = createToken(user);
res.json({
success: true,
message: "Login Successfully !",
token: token
});
}
}
});
});
//middleware
api.use(function(req, res, next) {
console.log("Somebody just logged in!");
var token = req.body.token || req.param('token') || req.headers['x-access-token'];
if (token) {
jsonwebtoken.verify(token, secretKey, function(err, decoded) {
if (err) {
res.status(403).send({success: false, message: "Failed to authenticate user."});
} else {
req.decoded = decoded;
next();
}
});
} else {
res.status(403).send({ success: false, message: "No Token Provided." });
}
});
//api for projects handling
api.route('/')
.post(function(req, res) {
var project = new Project({
creatorID: req.decoded.id,
creator: req.decoded.firstname + " " + req.decoded.lastname,
creator_dept: req.decoded.department,
title: req.body.title,
short_description: req.body.short_description,
description: req.body.description,
priority: req.body.priority,
status: calcStatus(),
assign_dept: req.body.assign_dept,
estimate_cost: req.body.estimate_cost,
actual_cost: req.body.actual_cost,
last_modified_date: req.body.last_modified_date,
due_date: req.body.due_date,
start_date: req.body.start_date,
complete_date: req.body.complete_date,
});
project.save(function(err, newProject) {
if (err) {
res.send(err);
return;
}
io.emit('project', newProject);
res.json({
message: "New Project Created!"
});
});
})
.get(function(req, res) {
Project.find( {creatorID: req.decoded.id}, function(err, project) {
if (err) {
res.send(err);
return;
}
res.json(project);
});
});
//api for tasks handling
api.route('/')
.post(function(req, res) {
var task = new Task({
creatorID: req.decoded.id,
creator: req.decoded.firstname + " " + req.decoded.lastname,
projectID: req.body.taskProjectID,
title: req.body.taskTitle,
description: req.body.taskDescription,
status: calcStatus(),
assigneeName: req.body.assigneeName,
assigneeID: req.body.assigneeID,
assignee_dept: req.body.assignee_dept,
estimate_cost: req.body.taskEstimate_cost,
actual_cost: req.body.TaskActual_cost,
last_modified_date: req.body.taskLast_modified_date,
due_date: req.body.taskDue_date,
start_date: req.body.taskStart_date,
complete_date: req.body.taskComplete_date,
});
task.save(function(err, newTask) {
if (err) {
res.send(err);
return;
}
io.emit('tasks', newTask);
res.json({
message: "New Task Created!"
});
});
})
.get(function(req, res) {
Task.find( {projectID: req.decoded.id}, function(err, task) {
if (err) {
res.send(err);
return;
}
res.json(task);
});
});
// api for angular
api.get('/me', function(req, res) {
res.json(req.decoded);
});
return api;
}
Thanks for the help.
You reference project.projects here:
<div class="panel-group" ng-repeat="eachProject in project.projects | reverse track by $index">
But project is never in ProjectController... I think you may want to set project to refer to your ProjectController, try this:
<div ng-controller="ProjectController as project">
EDIT
A few other problems. You mentioned you wanted to show all Tasks as well, in ProjectController you populate projects and tasks like so:
Project.all()
.success(function(data) {
vm.projects = data;
})
....
Task.all()
.success(function(data) {
vm.tasks = data;
})
That's good, except the definitions for Project.all and Task.all are referencing the same data source:
projectFactory.all = function() {
return $http.get('/api');
}
taskFactory.all = function() {
return $http.get('/api');
}
They both reference /api. How can they both expect different data from the same route? They should likely be two distinct routes.
In addition, your definition in api.js for this end point requires an ID to be passed to get a single project:
.get(function(req, res) {
Task.find( {projectID: req.decoded.id}, function(err, task) {
if (err) {
res.send(err);
return;
}
res.json(task);
});
});
.get(function(req, res) {
// The request must contain a creatorId, otherwise you're not going to find your project
Project.find( {creatorID: req.decoded.id}, function(err, project) {
if (err) {
res.send(err);
return;
}
res.json(project);
});
});
Perhaps your projectService should be pointing to the /all_projects end point instead for .all. So to sum up:
API end points for Project/Task should be different
Be sure to pass the project ID/task if necessary, otherwise you're not going to get the data you're expecting.
Set breakpoints and log output to trace your code path to see where other mistakes may be.
I am trying to figure out how to pass an Id into my PlayerDetailController and then use it in my service.
I have the following route in my main app.js:
var players = require('./routes/players');
app.use('/players', players);
And I have the following routes inside of the players route (routes/players.js):
var express = require('express');
var router = express.Router();
/* GET /players listing. */
router.get('/', function(req, res, next) {
res.render('players', { title: 'Players', action: 'list'});
});
/* GET /player details. */
router.get('/:id', function(req, res, next) {
res.render('players', { title: 'Player Details', action: 'details'});
});
module.exports = router;
And the following in my main players.ejs template:
<!-- other layout elements -->
<% if (action === 'details') { %>
<% include partials/players/details %>
<% } else if (action === 'update') { %>
<% include partials/players/update %>
<% } else if (action === 'remove') { %>
<% include partials/players/remove %>
<% } else { %>
<% include partials/players/list %>
<% } %>
<!-- other layout elements -->
And my deatils.ejs partial:
<div ng-controller="PlayerDetailsController">
<div class="playerDetails">
<p>
<strong>{{ player.name}} - {{ player.position }} - {{ player.team }}</strong><br/>
Touchdowns: {{ player.touchdowns }}<br/>
Yards: {{ player.yards }}
</p>
</div>
</div>
And my PlayerDetiails service:
// PlayerDetails Service
app.factory('PlayerDetails', ['$http', function($http){
// below is where I'm trying to inject the Id
return $http.get('/api/player/:id');
}]);
But I have no idea how I can pass the Id that shows up in my route (ex. http://localhost:3000/players/550130d32f3345bc065f2ecf) into my controller so that my controller calls and receives the correct player data. How would I do this? I thought I could add a id property to the res.render call, but I'm not sure what I would do with it in the EJS template. Any help would be greatly appreciated!
Pass the id to your template:
router.get('/:id', function(req, res, next) {
res.render('players', { title: 'Player Details', action: 'details', id: req.params.id});
});
ng-init receives the id:
<div ng-controller="PlayerDetailsController" ng-init="id = <%= id %>">
PlayerDetails service:
app.service('PlayerDetails', ['$http', function($http){
return {
get: function(id) {
return $http({
url: '/api/player/:id',
params: {id: id},
method: 'GET'
});
}
};
}]);
Somewhere in PlayerDetailsController:
// id is from ng-init
PlayerDetails.get($scope.id).success(function(player) {
$scope.player = player;
}).error(function(error) {
console.error(error);
});
The ID passed to the route will be available in req.params.id. You can retrieve the player from the database using the ID and pass the object to the view.
Something like this, using Mongoose ODM. If you are using another database/ODM/ORM the code will be different but the idea is the same:
/* GET /player details. */
router.get('/:id', function(req, res, next) {
Player.find({ _id: req.params.id }, function(err, player) {
if(err) return next(err);
res.render('players', { title: 'Player Details', action: 'details', player: player });
});
});
Then you will have access to the Player document via player attribute.
If you want to create an API that will return all the player data in JSON format, you can do it like this:
/* GET /api/player/:id */
router.get('/:id', function(req, res, next) {
Player.find({ _id: req.params.id }, function(err, player) {
if(err) return next(err);
res.json(player);
});
});