Angular JSサービス作成エラー

Question

私はこのサービスを作成しました。 ** enrollments.getProperty（）; **このサービスを呼び出すにはこのステートメントを使用していますが、機能していません。私はangle-JSの新機能です。 serviceとfactory：

var helloAjaxApp = angular.module("myApp", []); 
 
helloAjaxApp.service('enrollments', [ '$scope', '$http', function ($scope, $http) { 
 
\t 
 
\t $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8"; 
 
    var enrollments = null; 
 
    enrollment(); 
 
    $scope.enrollment=function() { 
 
    \t $http({ 
 
    \t url : 'enrollments', 
 
     method : "GET" 
 
    }).then(function(response) { 
 
     
 
    \t enrollments = response.data; 
 
     alert("enrollments"); 
 
    }); 
 
    }; 
 
    return { 
 
     getProperty: function() { 
 
      return enrollments; 
 
     }, 
 
     setProperty: function(value) { 
 
     \t enrollments = value; 
 
     } 
 
    }; 
 
}]);

Answer 1

使用angular.module（）

(function() { 
    'use strict'; 
    angular.module("helloAjaxApp") 
     .service('enrollments', ['$scope', '$http', function ($scope, $http) { 
      $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8"; 
      var enrollments = null; 
      enrollment(); 
      $scope.enrollment = function() { 
       $http({ 
        url: 'enrollments', 
        method: "GET" 
       }).then(function (response) { 

        enrollments = response.data; 
        alert("enrollments"); 
       }); 
      }; 
      return { 
       getProperty: function() { 
        return enrollments; 
       }, 
       setProperty: function (value) { 
        enrollments = value; 
       } 
      }; 
     }]); 
}); 

Answer 2

角度は、サービスを定義する2つの方法を有します。

ここにあなたが違いを見ることができます：https://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

基本的な違いは、そのサービスがコンストラクタのようなものですので、あなたはそれからオブジェクトを返しますが、thisキーワードを使用してプロパティを定義していない：

this.getProperty = function() { 
    return enrollments; 
} 

ファクトリメソッドを使用している場合は、公開されているプロパティ/関数で返されるオブジェクトが必要です。

あなたはこれだけの工場を使用するように定義を変更、工場出荷時の構文を使用している：

helloAjaxApp.factory('enrollments', [ '$scope', '$http', function ($scope, $http) 

Answer 3

あなたがそうのような適切なサービス構造のために行く必要があります。

var helloAjaxApp = angular.module("myApp", []); 

function EnrollmentService($scope, $http) { 
    let _this = this; 
    this.enrollments = null; 
    this.getEnrollments = function() { 
     return $http({ 
      url: 'enrollments', 
      method: 'GET' 
     }).then(function(response) { 
      _this.enrollments = response.data; 
      return _this.enrollments; 
     }) 
    }; 

    this.setEnrollments = function(enrollments) { 
     _this.enrollments = enrollments; 
    } 
} 

helloAjaxApp.service('enrollments', ['$scope', '$http', EnrollmentService]); 

次に、サービスを利用します他の場所：

enrollmentService 
    .getEnrollments() 
    .then(function(enrollments) { 
     // You can use the data here. 
     console.log(enrollments); 
    }); 

Answer 4

コントローラコード

LoginServiceあなたは

var loginModule = angular.module('LoginModule',[]); 
loginModule.controller('logincontroller', ['$rootScope','$scope','$http','$window','$cookieStore', 
                'LoginService',logincontrollerFun ]); 

function logincontrollerFun($rootScope, $scope, $http, $window,$cookieStore, LoginService,RememberService) { 



    $scope.loginTest = function() { 

     LoginService.UserStatus($scope, function(resp) { 
      console.log("response of login controller ::: ", resp); 
      ///write ur code 

     }); 
    } 
} 

サービスコードは、モジュールを定義している

var loginModule = angular.module('LoginModule') 
loginModule.factory("LoginService",[ '$http', LoginServiceFun ]) 

    function LoginServiceFun($http) { 
     function UserStatus($scope,callback){ 

       var targetRequestPath='./url'; 
       var targetRequestParamsREQ={'email':$scope.email,'password':$scope.passWord}; 
      return $http({ 
       method: 'POST', 
       url: targetRequestPath, 
       headers: {'Content-Type': 'application/json'}, 
       data: targetRequestParamsREQ 
      }).then(function (response){ 
       console.log('Response Data : ', response.data); 
       callback(response.data); 
      }) 
     } 
     return { 
      UserStatus:UserStatus 
      } 

     }