2016-10-10 37 views
0

我在做一个在线教程,他们教你使用MEAN制作一个简单的web应用程序。下面的代码用于编辑给定的JSON对象集合(视频是JSON对象这里) 集合在 /api/videos 所以我必须点击一个href="/#/video/{{video._id}}这需要我到form.html,我可以选择编辑JSON对象的'标题'和'描述'参数。 似乎我无法理解的是:我无法理解此代码的工作流程

一)这是为什么(全在问题下面的代码)需要

var Videos = $resource('/api/videos/:id', { id: '@_id' }, 
     { 
      update: { method: 'PUT' } 
     }); 

因为我对href="/#/video/{{video._id}}我不能直接把ID从网址

var Videos=$resource('api/videos) 

Videos.get({ id: $routeParams.id }, function(video){ 
      $scope.video = video; 
     }); 

b)Whait是工作流(即当是router.get()请求正好制成,)提出的router.put()请求 根据我的时候,当我点击保存按钮控制器发出放置请求t o的API,但我不知道什么时候router.get()请求正在作出

我想读取明确和角度的文件,但他们似乎并没有解释工作流程。 你能否也请告诉我应该阅读哪些内容以获得更好的理解?

这是form.html代码

<h1>Add a Video</h1> 

<form> 
    <div class="form-group"> 
     <label>Title</label>   
     <input class="form-control" ng-model="video.title"></input> 
    </div> 
    <div> 
     <label>Description</label> 
     <textarea class="form-control" ng-model="video.description"></textarea> 
    </div> 
    <input type="button" class="btn btn-primary" value="Save" ng-click="save()"></input>  
</form> 

这是控制器代码

app.controller('EditVideoCtrl', ['$scope', '$resource', '$location', '$routeParams', 
    function($scope, $resource, $location, $routeParams){ 
     var Videos = $resource('/api/videos/:id', { id: '@_id' }, 
     { 
      update: { method: 'PUT' } 
     }); 

     Videos.get({ id: $routeParams.id }, function(video){ 
      $scope.video = video; 
     }); 

     $scope.save = function(){ 
      Videos.update($scope.video, function(){ 
       $location.path('/'); 
      }); 
     } 
    }]); 

这是API端点代码

router.get('/:id', function(req,res){ 
    var collection =db.get('videos'); 
    collection.findOne({_id: req.params.id},function(err,video){ 
     if(err) throw err; 
     res.json(video); 
    }); 
}); 
router.put('/:id', function(req, res){ 
    var collection=db.get('videos'); 
    collection.update({_id:req.params.id}, 
    {title: req.body.title, 
    description: req.body.description 
    }, 
    function (err,video) 
    {if (err) throw err; 

     res.json(video); 
    }); 
}); 

回答

1

那么,根据AngularJS docs for $resouce,$资源是:

创建资源对象的工厂,可让您与服务器端数据源进行交互。

换言之,它是RESTful服务操作的捷径。下面的代码创建与API端点的接口,以使REST操作更容易完成。 一旦你有这样的:

var User = $resource('/user/:userId', {userId:'@id'}); 

是很容易做到这一点:

User.get({userId:123}, function(user) { 
    user.abc = true; 
    user.$save(); 
}); 

因为REST风格是标准的,并且$resource是角的实现的API在这个标准中的消耗。在他的内部,根据您所配置和选择的操作,使用propper头文件和方法进行了一个assynchronous请求。