컨트롤러에 서비스 제공

Question

Angular를 처음 사용했습니다. 간단한 웹 페이지가 있지만 컨트롤러 코드가 작동하지 않습니다. 그것은 전화를하거나 "ListLogsFactory"컨트롤러에 서비스를 제대로 삽입하지 않는 것 같습니다. 도와주세요. 고맙습니다. 당신은 당신이 뭔가를 반환해야 factory 사용하는 경우

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


    myApp.factory('ListLogsFactory', function ($http) { 
      var thisPageNumber = 1; 
      var thisPageSize = 10; 
      var baseUrl = '../Api/LogApi/GetLogsByPage'; 

      var items = {}; 

      $http({ 
       method: 'GET', 
       url: baseUrl, 
       data: $.param({ pageNumber: thisPageNumber, pageSize: thisPageSize }) 
      }) 
      .success(function (data, status, headers, config) { 
       items = data; 
       console.log(items); 
      }) 
      .error(function (data, status, headers, config) { 
       alert('error: ' + status); 
      }); 

      function getData() { 
       return items; 
      } 
    }); 

    // The error is seen in FireFox and happens in the controller code: 
    myApp.controllers.ListLogsController = function ($scope, ListLogsFactory) { 
     $scope.logs = ListLogsFactory.getData(); // NOTE: this line throws error on running with something like "ListLogsFactory" is undefined 
    } 

Answer 1

해야한다 :

내 코드는 다음과 같이 모든/선언 정의 된 모듈, 서비스 및 컨트롤러를 포함 . 당신은 거기에 많은 방법들을 정의하고 있지만, 그들은 아무에게도 이용 가능하지 않습니다.

다른 이름 지정 규칙을 사용하는 것도 좋습니다. 예를 들어, LogsController 대신 LogsCtrl을 사용하십시오. AngularJS는 "Controller"를 내부적으로 추가하고 "LogsControllerController"와 같은 이름을 처리하는 이국적인 상황이 될 수 있습니다.

A는 approach of using factory and returning the service을 단순화 :

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

ListLogsModule.factory('ListLogsSrv', function ($http) { 
    // first define the service (you're using a factory) 
    var getData = function() { 
     return "hey";//items; 
    }; 

    // then return it. 
    // offer a public method "getData" that uses your internal getData() 
    return { 
     getData : getData 
    } 
}); 

ListLogsModule.controller("ListLogsCtrl", function ($scope, ListLogsSrv) { 
    $scope.w = "world"; 
    $scope.logs = ListLogsSrv.getData(); 
}); 

당신은 또한 공장의 $http 요청을해야합니다. 즉, 서비스를 인스턴스화 할 때 (처음 사용할 때) 비동기 요청을 트리거하므로 아무도 서비스가 완료 될 때까지 기다리지 않고 undefined이됩니다. 컨트롤러에서이 서비스를 사용하는 경우 아마도 resolve의 약속이 필요합니다.

약속을 사용하는 예 :

var promise = $q.defer(); 
var thisPageNumber = 1; 
... 
var baseUrl = '../Api/LogApi/GetLogsByPage'; 
... 
promise = $http.get(... 

지금 당신은 예를 들어, 컨트롤러에이 약속을 사용하거나 서비스의 방법으로 할 수 있습니다.

나는 이틀 전에 관련 질문에 대답 Angular Service Definition: service or factory

Answer 2

myApp.controllers.ListLogsController = function ($scope, ListLogsFactory) { 
     $scope.logs = ListLogsFactory.getData(); 
} 

이

myApp.controller("ListLogsController", function ($scope, ListLogsFactory) { 
     $scope.logs = ListLogsFactory.getData(); 
}); 

Answer 3

각도 서비스 나 공장의 변수/메소드를 만드는 @Eduard Gamonal의 제안을 확장 다음, 그래서는 각 서비스의 구문을 기억하는 트릭 간주됩니다 또는 공장.

트릭은 "서비스"또는 "서비스"키워드와 연결되어 각도

서비스에서 "공장"의 구문을 암기하는; "this"함수 인스턴스 멤버를 public으로 만드는 키워드입니다. 및 "=" "함수 인스턴스 구성원"에게 배정을 할 수 있습니다.

공장은 "공장"키워드로 묶여 있습니다. "return"키워드를 사용하여 공용 객체를 만들거나 반환합니다. 모든 키/값 쌍 할당에 ":"을 입력합니다.

세부 사항.

"변수"(또는 "인스턴스 멤버")와 서비스 거래를하고는 "공공"하게, 나는 "이"키워드를 사용하고, "변수와 서비스 계약 때문에 "(또는"인스턴스 멤버 ") public 일 때"= "을"변수 "이름 다음에 사용합니다.

"getLogs는"이 .getLogs에게 같이 (즉 "할당"에서) = 함수는 "공용 변수"또는 "인스턴스 부재"와 같이 처리하고, 기록 될 수있다() {...}.

<script type="text/javascript"> 
    var myApp = angular.module("ListLogsModule", []); 

    myApp.service('ListLogsService', function() { 


      this.getLogs = function() { 
       var logs = [ 
          {"LogId":5405,"RecordedDate" : "2012-11-19T14:22:02.247", "Event" : "Log On"}, 
          {"LogId":5416,"RecordedDate" : "2012-11-19T14:55:02.247", "Event" : "Log Out"} 
       ]; 
       return logs; 
      } 
    }); 


    myApp.controller('ListLogsCtrl', function ($scope, ListLogsService) { 
     $scope.logs = ListLogsService.getLogs();    
    }); 

</script> 

공장 반환 "개체"와 거래 및 수 있도록 그들을 "공공"나는를 사용하기 :

그리고 전체 서비스

는 "서비스"로 핵심 단어를 정의 "return"키워드가 있고 공장에서 "object"to-look-like-JSON- 개체를 처리하기 때문에 "return"문의 {} 안에 각 속성 이름 뒤에 ":"을 사용합니다.

"getLogs"는 getLogs : function() {...}과 같이 반환 된 JSON 객체의 속성 (또는 키)처럼 처리 될 수 있으며 "키/값"쌍으로 작성됩니다. 요약

<script type="text/javascript"> 
    var myApp = angular.module("ListLogsModule", []); 

    myApp.factory('ListLogsFactory', function() { 


      return { 
       getLogs: function() { 
        return[ 
           {"LogId":5405,"RecordedDate" : "2012-11-19T14:22:02.247", "Event" : "Log On"}, 
           {"LogId":5416,"RecordedDate" : "2012-11-19T14:55:02.247", "Event" : "Log Out"} 
        ]; 
       } 
      } 
    }); 


    myApp.controller('ListLogsCtrl', function ($scope, ListLogsFactory) { 
     $scope.logs = ListLogsFactory.getLogs(); 
    }); 

</script> 

:

그리고 전체 공장

는 "공장"로 핵심 단어를 정의 "서비스"또는 각도

서비스에서 "공장"의 구문을 암기에 묶여 "service"키워드로; "this"함수 인스턴스 멤버를 public으로 만드는 키워드입니다. 및 "=" "함수 인스턴스 구성원"에게 배정을 할 수 있습니다.

공장은 "공장"키워드로 묶여 있습니다. "return"키워드를 사용하여 공용 객체를 만들거나 반환합니다. 모든 키/값 쌍 할당에 ":"을 입력합니다.