2016-10-10 3 views
0

MEANを使用して簡単なWebアプリケーションを作成するためのオンラインチュートリアルを行っています。下のコードはJSONオブジェクトのコレクションを編集するためのコードですここで) コレクションは /api/videos ですので、私はhref="/#/video/{{video._id}}をクリックしてform.htmlに行きます。JSONオブジェクトの 'title'と 'description'パラメータを編集するオプションがあります。私が理解するように見えることはできません何 は次のとおりです。このコードのワークフローを理解できません

A)私は私が直接からIDを取ることができないhref="/#/video/{{video._id}}にしていますので、問題の下に、この(フルコード)

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

を必要とする理由ワークフロー(すなわちrouter.get(ある)私は保存をクリックした際に作られたrouter.put()要求があるときに正確に作られたとリクエスト) は私によると、あるWhait URL

var Videos=$resource('api/videos) 

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

B)ボタンを押すと、コントローラはput要求を出します。 o APIは使用できますが、router.get()リクエストがいつ行われたかはわかりません。

私は明示的で角度のあるドキュメントを読み込もうとしていますが、ワークフローを説明していないようです。 また、理解を深めるために何を読みかけるべきですか教えてください。

これはこれはこれは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によると、$であるコントローラコード

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

ある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> 

ですリソースは

です

RESTfulサーバー側のデータソースと対話できるリソースオブジェクトを作成するファクトリです。

つまり、RESTfulサービス操作のショートカットです。このコードでは、REST操作をより簡単に行うためのAPIエンドポイントとのインターフェースを作成しています。あなたはこのたら は:RESTfulなは標準で、$resourceは、この規格ではAPIの消費の角度の実装であるため

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

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

これを行うためにはるかに簡単です。彼の内部では、あなたがconiguredとchoosed操作に従って、プロッパーのヘッダーとメソッドで非同期要求が行われます。

関連する問題