将Angular登录前端添加到Django rest框架后端

时间:2016-01-19 20:22:33

标签: angularjs django authentication django-rest-framework

我已经在教程的指导下创建了一个Django休息框架后端:

http://www.django-rest-framework.org/

我已将后端上传到:

https://github.com/jakkan/grader

我想为djano-rest-framework后端构建一个Angular前端。我对Angular一般都有很好的了解,但不知道如何创建一个登录和退出的前端。

我希望这不是一个太大的问题,但我如何添加Angular前端进行登录和退出?

1 个答案:

答案 0 :(得分:2)

使用django-rest-framework创建休息api后,您可能会创建许多端点,并将其配置为网址。

因此,为了整合其余的api,首先你需要访问你的其他api所暴露的域名,我们将假设localhost:8000

现在你应该创建一个角度常量来保存这个休息端点域信息,因为我们将在我们的角度项目中的许多地方使用很多api。所以为了保持它干净,我们必须使用常量,这可以注入任何地方我们需要休息终点。

AgnularJS中的休息终点常量

angular.module('angularApp')
  .constant('restEndPoint', 'http://localhost:8000');

现在,通过注入服务,这将是项目中的任何地方。

这取决于你如何设计你的休息api但是如果你设计了休息标准的休息api,那么我建议使用$resource而不是$http

我总是喜欢在factory内编写我的持久逻辑,再次选择它。

以下是以角度方式使用休止端点的示例。

<强> 工厂

angular.module('AngularApp')
  .factory('TodoService', ['$resource', 'restEndPoint', function  ($resource, restEndPoint) {
    return $resource(restEndPoint+'/todos/:id')
}]);

<强> 控制器

angular.module('AngularApp')
  .controller('TodoCtrl', function ($scope, TodoService) {
      var Todo = new TodoService();

      // Now Todo is an $resource instance. Which can be used to get/post/patch/delete data on rest api. such as following.

     // GET all records.
     Todo.$query(); 

     // GET specific record based on id.
     Todo.$query({id:1});

     // POST data to create new Todo item.
      newTodo = { title: 'Task 1', completed: false}
      Todo.$save(newTodo)

     // PUT/PATCH specific record base on id.
     editTodo =  { title: 'Task title changed', completed: false}
     Todo.$update({id: 1}, editTodo); 

});

我希望你理解其余的api与angularJS的集成。如果您有任何疑问,请与我们联系。

由于