シングルページアプリケーションAngularjs Djangoログインフォーム

私はDjango + Django Rest Framework + Angularjsを使用して、単純な単一ページアプリケーションを作成しようとしています。成功したログイン/パスワードフォームの後、連絡先リストのあるページにリダイレクトして、追加または削除できるようにしてください。私のバックエンドのために私はここにhttp://www.django-rest-framework.org/tutorial/quickstart/からチュートリアルを使用するつもりだ、と簡単なログイン/パスワードのページには、シングルページアプリケーションAngularjs Djangoログインフォーム

<html ng-app="myApp"> 
    <head> 
    <title></title> 
    </head> 
    <body ng-controller="AppController as ctrl"> 

     <form ng-submit="ctrl.submit()"> 
      <input type="text" ng-model="ctrl.user.username" placeholder="Enter your name"/><br/><br/> 
      <input type="text" ng-model="ctrl.user.password" placeholder="Enter your Password"/><br/><br/> 

      <input type="submit" value="Submit"> 
     </form> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"> 
     </script> 
     <script> 
      angular.module('myApp', []) 
      .controller('AppController', [function() { 
       var self = this; 
       self.submit = function() { 
        console.log('Form is submitted with following user', self.user); 
      }; 
     }]); 
    </script> 
    </body> 
</html>

次のようになります。そして、私は、私はフロントからログイン/パスワードフォームを送信することができる方法を理解することはできませんエンド側からアプリケーションのバックエンド側へ？その後 ngResourceモジュールはバックエンドにリクエストを送信するために使用することができる

<form ng-submit="ctrl.submit()" method="POST">

：

出典

2016-03-31 user3600840

まず、あなたのフォームデータを送信するためにPOSTを使用する必要があります。

1：インストール角度リソース。使用亭：bower install --save angular-resource

2：あなたのモジュール定義にngResourceのdependencieを追加します。

angular.module('myApp', ['ngResource'])

3：

.controller('AppController', ['$resource', function($resource) {

4：あなたのコントローラに$resourceサービスを注入$リソースサービスを使用しますリソースを作成してリクエストを送信する

self.submit = function() { 
    // path to the login endpoint, and custom submit method to send the login data. 
    var loginResource = $resource('/api/login/', {}, {submit: {method: 'POST'}}); 
    loginResource.submit(self.user, function(response) { 
     console.log('LOGIN Success', response); 
    }, function(err) { 
     console.error('LOGIN Error', err); 
    }); 
    console.log('Form is submitted with following user', self.user); 
};

詳細については、docs for $resource service

をご覧ください。

出典

2016-03-31 17:14:25 slackmart

シングルページアプリケーションAngularjs Djangoログインフォーム

答えて

関連する問題