0
MongoDB（と一般的にはコーディング）を使い慣れていて、簡単なコンタクトリストアプリケーションを作成しようとしていましたが、編集ボタンが機能しません。具体的には、controller.jsの$ scope.editが動作していないようです。私は2つの異なる方法を試してみた：ここ
app.get('contactList/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.contactList.findOne({_id: mongojs.ObjectId(id)}, function(err, doc) {
res.json(doc);
});
})
はcontroller.js（第一の方法）です：私のブラウザで
$scope.edit = function(id) {
// Displays the user ID in the browser console
console.log(id);
$http.get('/contactList/' + id).success(function(response) {
$scope.contact = response;
});
}
、私はこのエラーを取得：
はここにserver.jsです
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (57fa05975770e4ae924269ba, line 0)
Iは、この（第2方法）にcontroller.jsを変更しようとした：
$http.get('/contactList/' + id).then(success, fail);
function success(response) {
console.log("Success!");
}
function fail(err) {
console.log(err.message);
}
そして、私は、このエラーメッセージが出ます：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Contact List App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1 align="center">Contact List Header</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number</th>
<th>Action</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-control" ng-model="contact.name" type="" name="">
</td>
<td>
<input class="form-control" ng-model="contact.email" type="" name="">
</td>
<td>
<input class="form-control" ng-model="contact.number" type="" name="">
</td>
<td>
<button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
</td>
<td>
<button class="btn btn-info" ng-click="update()">Update</button>
</td>
</tr>
<tr ng-repeat="contact in contactList">
<td>{{contact.name}}</td>
<td><a href="mailto:{{contact.email}}">{{contact.email}}</a></td>
<td><a href="tel:{{contact.number}}">{{contact.number}}</a></td>
<td>
<button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button>
</td>
<td>
<button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="controllers/controller.js"></script>
</body>
</html>
マイフルcontroller.jsファイル：ここで
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (57fa05975770e4ae924269ba, line 0)
[Log] undefined (controller.js, line 53)
は私の完全なのindex.htmlファイルである
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
var refresh = function() {
$http.get('/contactList').then(success, fail);
function success(response) {
console.log("I got the data I requested");
$scope.contactList = response.data;
$scope.contact + "";
}
function fail(err) {
console.log(err.message);
}
}
refresh();
$scope.addContact = function() {
// This adds the contact info to the console in the browser
console.log($scope.contact);
// This posts the contact info to the server, which can be viewed in terminal
$http.post('/contactList', $scope.contact).success(function(response) {
console.log(response);
refresh();
});
}
$scope.remove = function(id) {
console.log(id);
$http.delete('/contactList/' + id).success(function(response) {
refresh();
})
}
$scope.edit = function(id) {
// Displays the user ID in the browser console
console.log(id);
// $http.get('/contactList/' + id).success(function(response) {
// $scope.contact = response;
// });
$http.get('/contactList/' + id).then(success, fail);
function success(response) {
console.log("Success!");
}
function fail(err) {
console.log(err.message);
}
}
// $scope.update = function() {
// console.log($scope.contact._id);
// $http.put('/contactList/' + $scope.contact._id, $scope.contact)
// }
}]);
そして、私の完全なserver.jsファイル：
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('contactList', ['contactList']);
var bodyParser = require('body-parser');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/contactList', function (req, res) {
console.log("I got a GET request");
db.contactList.find(function (err, docs) {
console.log(docs);
res.json(docs);
});
})
app.post('/contactList', function (req, res) {
console.log(req.body);
db.contactList.insert(req.body, function(err, doc) {
res.json(doc);
})
});
app.delete('/contactList/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.contactList.remove({_id: mongojs.ObjectId(id)}, function(err, doc) {
res.json(doc);
});
})
app.get('contactList/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.contactList.findOne({_id: mongojs.ObjectId(id)}, function(err, doc) {
res.json(doc);
});
})
app.listen(3000);
console.log("Server running on port 3000");
[編集]ボタンをクリックすると、連絡先を編集できるはずですが、そうしていません。助けてもらえますか？
それがうまくいった！余計なスラッシュがありませんでした。簡単な修正。ありがとう！ :) – Farid
ニース:)あなたがすべて設定されている場合は、答えを "受け入れ"と設定してください！ – Walker
完了。私はあなたの答えをupvoteしようとしましたが、私は明らかにこのサイトにはあまりにも新しいです。いずれにせよ、私はあなたの助けに感謝します！ – Farid