我无法理解此代码的工作流程

I am doing an online tutorial where they teach you to make a simple web-app using MEAN.The code below is for editing the given collection of JSON objects(Videos are JSON objects here) The collection is at /api/videos So I have to click on a href="/#/video/{{video._id}} which takes me to form.html and I have the option of editing the 'title' and 'description' parameters of the JSON object. What I can't seem to understand is:

我正在做一个在线教程,他们教你使用MEAN制作一个简单的网络应用程序。下面的代码用于编辑给定的JSON对象集合(视频是JSON对象)这个集合位于/ api / videos所以我有单击一个href =“/#/ video / {{video._id}},它将我带到form.html,我可以选择编辑JSON对象的'title'和'description'参数。我能做什么似乎明白的是:

a)Why is this (full code below in the question) required

a)为什么需要(问题下面的完整代码)

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

Since I am on href="/#/video/{{video._id}} can't I directly take the id from the URL

由于我在使用href =“/#/ video / {{video._id}},因此无法直接从网址获取ID

var Videos=$resource('api/videos)   

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

b)Whait is the workflow(i.e when is the router.get() request exactly made and when is the router.put() request made) According to me when I click on the save button the Controller makes a put request to the API but I can't figure out when the router.get() request is being made

b)Whait是工作流程(即什么时候是router.get()请求的确切完成以及何时是router.put()请求)据我点击保存按钮时,Controller向API发出put请求但我无法弄清楚何时发出router.get()请求

I am trying to read up express and angular documentations but they don't seem to explain the workflow. Could you also please tell me what should I read up to get a better understanding?

我正在尝试阅读快速和有角度的文档,但它们似乎没有解释工作流程。您能否告诉我,为了更好地理解,我应该阅读什么?

This is the form.html code

这是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>

This is the controller code

这是控制器代码

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

This is the API Endpoint Code

这是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 个解决方案

#1

Well, according to AngularJS docs for $resouce, $resource is:

好吧,根据AngularJS文件的$ resouce,$资源是:

A factory which creates a resource object that lets you interact with RESTful server-side data sources.

一个工厂,它创建一个资源对象,使您可以与REST服务器端数据源进行交互。

In other words is a shortcut for RESTful services operations. The code bellow creates an interface with an API endpoint to make REST operations more easy to do. Once you have this:

换句话说,是RESTful服务操作的快捷方式。下面的代码创建了一个带有API端点的接口,使REST操作更容易。一旦你有了这个:

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

Is much easier to do this:

更容易做到这一点:

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

Because RESTful is a standard, and $resource is the Angular's implementation of the consumption of API's in this standard. On his internals, is made an assynchronous request with the propper headers and method according to the operation you conigured and choosed.

因为RESTful是一个标准,而$ resource是Angular在此标准中实现API消耗的实现。在他的内部,根据您配置和选择的操作,使用propper标题和方法进行异步请求。

#1