I can't understand the workflow of this code

Question

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:

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

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

var Videos=$resource('api/videos)   

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

b)Whait is the workflow(ie 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

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

<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

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);
     });
 });

Answer 1

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

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

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:

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.