这是我在app.js文件中的AngularJs代码
var CarApp = angular.module('CarApp',['ngResource'])
CarApp.config(function($routeProvider){
$routeProvider
.when('/',{controller:ListCtrl,templateUrl:'partials/list.html'})
.when('/edit/:id',{controller:EditCtrl,templateUrl:'partials/details.html'})
.otherwise({redirectTo:'/'})
});
// to map update method
CarApp.factory('CarsService',function($resource){
return $resource('/api/cars/:id',{id:'@_id'} , {update:{method:'PUT'}})
});
function EditCtrl($scope,$location,$routeParams,CarsService){
var id = $routeParams.id;
//console.log(id);
CarsService.get({id: id},function(resp){
$scope.car = resp;
});
// Update Page title
$scope.action = "Update";
$scope.save = function() {
CarsService.update({id:id},$scope.car,function(){
$location.path('/')
});
}
}
这是我的Express server.js代码
var express = require('express');
var http = require('http');
var path = require('path');
var cars = require('./server/api/cars.js')
var app = express();
var client_dir = path.join(__dirname, '/client')
// all environments
app.set('port', process.env.PORT || 3000);
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(app.router);
app.use(express.static(client_dir));
app.use(express.static(path.join(__dirname, '/image')));
app.get('/', function(req,res){
res.sendfile(path.join(client_dir,'index.html'))
});
// ordering is important to for angularJs to differentiate between list all and read
app.get('/api/cars',cars.list);
app.get('/api/cars/:id',cars.read);
app.post('/api/cars/',cars.create);
app.put('/api/cars/:id',cars.update);
app.del('/api/cars/:id',cars.delete);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
这是我的details.html代码
<h2>{{action}} Ferrari</h2>
<form name="carform" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="year">Year</label>
<div class="controls">
<input type="text" ng-model="car.year" id="year" name="year" placeholder="">
</div>
</div>
<div class="form-actions">
<button ng-click="save()" class="btn btn-primary">
Update
</button>
<a href="/" class="btn">Cancel</a>
</div>
</form>
这是我的mongodb后端服务
function update(req,res){
var newCarData = req.body;
var id = req.params.id;
newCarData._id = ObjectId(id);
updateCar(newCarData,function(err){
if(err) throw new Error("unable to update");
else{
res.json();
}
});
}
function updateCar(car,callback){
db.collection(collectionName,function(error,collection){
if(error) callback(true);
else {
collection.save(car,function(){
//console.log("updated data") ;
});
}
});
}
我面临的问题是,当我在details.html中按更新按钮时,我可以更新我的mongodb后端服务中的详细信息。
在控制台中调用put方法,但我无法使用angularJs app.js中的 $ location.path('/') 重定向到'/'路径档案?任何帮助将受到高度赞赏。
答案 0 :(得分:2)
根据docs,$location
在更改浏览器网址时不会导致整页重新加载。要在更改URL后重新加载页面,请使用较低级别的API $window.location.href
。
答案 1 :(得分:0)
你需要创建一个控制器ListCtrl,即使它没有任何内容。 您的Web检查器中可能有一个错误,说它无法找到ListCtrl。
答案 2 :(得分:0)
看起来在你的updateCar函数中,你没有在成功时调用你的回调试试:
function updateCar(car,callback){
db.collection(collectionName,function(error,collection){
if(error) callback(true);
else {
collection.save(car,function(){
//console.log("updated data") ;
callback(null, { ok: true }); //something like this.
});
}
});
}
因此,在编辑ctrl中调用location.path的回调从未被调用过。 :d