如何在Angular中为$ HTTP创建动态服务和工厂，并使用控制器发布

Question

var drc = angular.module('DirectiveControllers',[]);
drc.controller('HeaderDrcCtrl', ['$scope','$http', function ($scope,$http) {
  if($.cookie('userEmail') != '') {
    $('#logout').show();
    $('#login').hide();
  }   
  $(document).on('click','#editForm', function() {
    $('#showEdit').show();
    $('#hideRegister').hide();
  });
  $scope.user = {};
  $scope.customers = {};
  $scope.signUp = function () {
    $http.post('/api/customers', {firstname: $scope.user.firstname, lastname: $scope.user.lastname, username:$scope.user.username, email:$scope.user.email, password: $scope.user.password})
      .success(function(data){
        $scope.customers.push({firstname: $scope.user.firstname, lastname: $scope.user.lastname, username:$scope.user.username, email:$scope.user.email, password: $scope.user.password});
        $scope.regMessage = data.Message;
        $scope.user = {};
      })
      .error(function(data){
          console.log('Error: ' + data);
      });
    }
  }]);

这是直接使用控制器的我的代码。但是我想分割服务和控制器，这是做到这一点的最佳方法。任何快速帮助将不胜感激。

感谢Raghvendra

Answer 1

您服务将从中返回Ajax承诺。关于控制器，您不应该有jQuery。您可以轻松替换ng-show或ng-if指令的jQuery。

服务

drc.service('ajaxService',['$http' function($http){
  this.get = function(url){
    reutrn $http.get(url);
  }
  this.post = function(url, data){
    reutrn $http.post(url, data);
  }
}]);

控制器

drc.controller('HeaderDrcCtrl', ['$scope', 'ajaxService', function($scope, ajaxService) {
    if ($.cookie('userEmail') != '') {
        //alert($.cookie('userEmail'));
        $scope.showLogout = true;
        $scope.showLogin = false;
    }
    $(document).on('click', '#editForm', function() {
        //alert(1);
        $scope.showEdit = true;
        $scope.hideRegister = true;
    });
    $scope.user = {};
    $scope.customers = {};
    $scope.signUp = function() {
        ajaxService.post('/api/customers', {
                firstname: $scope.user.firstname,
                lastname: $scope.user.lastname,
                username: $scope.user.username,
                email: $scope.user.email,
                password: $scope.user.password
            })
            .success(function(data) {
                $scope.customers.push({
                    firstname: $scope.user.firstname,
                    lastname: $scope.user.lastname,
                    username: $scope.user.username,
                    email: $scope.user.email,
                    password: $scope.user.password
                });
                $scope.regMessage = data.Message;
                console.log($scope.regMessage);
                $scope.user = {};
                // console.log( $scope.customers);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    }
}]);

标记

<div ng-if="showLogin">Login</div>
<div ng-if="showLogout">Logout</div>

标记包含在只有showlogin为true的情况下将显示的登录div，将显示为注销div。

我是第一个用户，我正在登录页面。还有另一位也可以登录网站的用户。

我首先登录到网站，第二个用户之后的用户。因此，我必须参加20秒的转弯，第二次用户转弯在20秒之后开始我的转弯再次来了。我正在socket.io和node.js和jquery and html中执行此代码，所以任何人都可以帮助我。

感谢Raghvendra Singh