2016-10-10 2 views
0

Ich mache ein Online-Tutorial, wo Sie lernen, eine einfache Web-Anwendung mit MEAN zu machen. Der folgende Code ist für die Bearbeitung der angegebenen Sammlung von JSON-Objekten (Videos sind JSON-Objekte hier) Die Sammlung ist unter /api/videos So muss ich auf eine href="/#/video/{{video._id}} klicken, die mich zu form.html führt und ich habe die Möglichkeit, die 'Titel' und 'Beschreibung' Parameter des JSON-Objekts zu bearbeiten. Was ich kann nicht scheinen zu verstehen ist:Ich kann den Workflow dieses Codes nicht verstehen

a) Warum ist der (vollständige Code unten in der Frage)

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

erforderlich Da ich auf href="/#/video/{{video._id}} bin kann ich nicht nehmen direkt die ID aus die URL

var Videos=$resource('api/videos) 

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

b) Whait der Workflow ist (dh wenn die router.get() Anforderung genau gemacht und wenn die router.put() Antrag) ist nach mir, wenn ich auf die sparen Knopf Der Controller macht eine Put-Anfrage t o die API, aber ich kann nicht herausfinden, wenn die router.get() Anfrage gemacht wird

Ich versuche, Express-und eckige Dokumentationen zu lesen, aber sie scheinen nicht den Workflow zu erklären. Könnten Sie mir bitte auch sagen, was ich lesen sollte, um ein besseres Verständnis zu bekommen?

Dies ist das 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> 

Dies ist der Controller-Code ist

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

Dies ist die 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); 
    }); 
}); 

Antwort

1

Nun, nach AngularJS docs for $resouce, $ Ressource ist:

Eine Factory, die ein Ressourcenobjekt erstellt, mit dem Sie mit RESTful serverseitigen Datenquellen interagieren können.

Mit anderen Worten ist eine Verknüpfung für RESTful-Dienste-Operationen. Der folgende Code erstellt eine Schnittstelle mit einem API-Endpunkt, um REST-Vorgänge einfacher zu machen. Sobald Sie diese haben:

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

ist viel einfacher, dies zu tun:

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

Da RESTful ein Standard ist, und $resource ist die Umsetzung der Angular des Verbrauchs von API in dieser Norm. Auf seinen Interna wird eine asynchrone Anfrage mit den passenden Kopfzeilen und der Methode entsprechend der Operation gemacht, die Sie konigirten und wählten.

Verwandte Themen