AngularJS新手求助：创建服务迁移登录验证HTTP请求逻辑

嘿，我懂你现在的处境——作为AngularJS新手，把控制器里的业务逻辑抽离到Service确实有点懵，但这是规范的做法，而且做完之后代码会更整洁、易维护。咱们直接上手改，保证功能和原来完全一致！

第一步：创建登录Service #

首先，我们要把原来控制器里的HTTP请求逻辑移到一个专门的Service里。AngularJS的Service是单例的，意味着你可以在多个控制器里复用它，这也是咱们抽离的核心原因之一。

创建一个AuthService，专门封装登录相关的业务逻辑：

var app = angular.module("myapp", []);

// 先定义登录Service
app.factory('AuthService', function($http, $log) {
  return {
    login: function(loginId, password) {
      var obj = { login_id: loginId, password: password };
      var mydata = JSON.stringify(obj);
      
      // 返回HTTP请求的Promise，让控制器去处理结果
      return $http({
        method: 'POST',
        url: "http://myapiurl.com/signin/",
        headers: {
          "authorization": "oauth mytoken",
          'Access-Control-Allow-Origin': '*' // 注：这个头其实是后端响应时返回的，不过保留你原代码的设置
        },
        data: mydata
      }).catch(function(reason) {
        // 这里可以统一处理错误日志，也直接把错误抛回控制器
        $log.info(reason.data);
        return Promise.reject(reason);
      });
    }
  };
});

第二步：修改控制器，使用Service #

现在控制器只需要负责视图绑定和调用Service的方法，不用再处理HTTP请求的细节了，让控制器专注于它该做的事——连接视图和数据：

app.controller("mycontroller", function($scope, AuthService, $log) { 
  $scope.login = ""; 
  $scope.pass = ""; 

  $scope.myfunc = function() { 
    // 调用Service的login方法，传入用户名和密码
    AuthService.login($scope.login, $scope.pass)
      .then(function(response) {
        console.log(response);
        $scope.success = response.data;
        // 清空之前的错误信息（如果有的话）
        $scope.error = null;
      })
      .catch(function(reason) {
        $scope.error = reason.data;
        console.log(reason);
        // 清空之前的成功信息（如果有的话）
        $scope.success = null;
      });
  };
});

第三步：页面保持不变 #

你的sample.html不需要任何修改，因为我们只是改变了逻辑的存放位置，视图绑定和点击事件的触发方式完全和原来一致，用户体验不会有任何变化。

这么做的好处 #

• 复用性：以后如果其他页面也需要登录功能，直接注入AuthService调用login方法就行，不用重复写HTTP请求代码。
• 可测试性：Service的逻辑可以单独写单元测试，比测试控制器里的嵌套逻辑简单多了。
• 职责分离：控制器只负责视图和数据的绑定，业务逻辑放在Service里，完全符合AngularJS的设计理念。

内容的提问来源于stack exchange，提问作者Ashok