Single page application Angularjs Django login form

Question

I'm trying to create a simple single page application make in use Django+Django Rest Framework+Angularjs. After successful login/password form I should redirect to the page with list of contact, where I can add it or remove. For my back-end I'm going to use tutorial from here http://www.django-rest-framework.org/tutorial/quickstart/, and simple login/password page will look like this

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

And I can't understand how can I submit login/password form from front-end side to the back-end side of application?

slackmart · Accepted Answer · 2016-03-31 17:34:30Z

Firstly you must use POST to send your form data:

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

Then the ngResource module can be used to send the request to your back-end.

1: install angular-resource. Using bower: bower install --save angular-resource

2: Add the ngResource dependencie to your module definition:

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

3: Inject the $resource service into your controller:

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

4: Use the $resource service to create a resource and send the request

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

For more details, visit the docs for $resource service

Collectives™ on Stack Overflow

Single page application Angularjs Django login form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related