Codecademy AngularJS 1.X service 관련 내용 정리

Service 를 사용하지 않아도 Controller에 데이타를 추가하고, View에서 보여줄 수는 있다.

하지만 100개의 아이템을 담는 데이터를 포함하고 있거나, 날씨나 금융처럼 끊임없이 변화하는 데이터는 어떻게 하겠는가?

데이터를 하드 코딩하는 것은 더 이상 아무의미가 없을 것이다.

더 나은 방법은 서버로부터 라이브 데이터를 읽어오는 것이다. 이것은 service를 통해서 수행할 수 있다.

다음은 서비스를 만드는 순서이다.

서비스 만드는 순서

1. factory 를 만든다.

<forecast.js>

app.factory('forecast', ['$http', function($http) { 
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

2. index.html 에 forecast.js 경로를 추가한다.

<script src="js/services/forecast.js"></script>

3. controller가 forecast service 를 전달받을 수 있도록 수정한다.

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) { 
  // ... 
}]);

4. Controller 내에서, forecast 서비스를 사용한다. 여기서는 날씨 데이터를 $scope.fiveday 에 저장하는 서비스를 수행했다.

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {    
forecast.success(function(data){
  		$scope.fiveDay = data;
});
}]);

위의 소스코드에 대한 설명

1. 첫째로 js/services/forecast.js 에서 새로운 서비스를 만들었는데, 이 때 app.factory를 사용하여 forecast라 명명하여 새로운 서비스를 만들었다.

2. forecast 서비스는 서버로부터 JSON 을 가져오기 위해서 AngularJS에 내장된 $http 를 필요로 한다. 따라서 forecast 서비스가 $http를 의존하도록 추가했다 추가했다.

['$http', function($http)]{
    //...
}]

이렇게 함으로써 $http는 forecast 안에서 사용가능한 상태가 되었다.

3. 그리고 난 후 forecast 안에서, 날씨 데이터를 받는 HTTP GET REQUEST를 수행하기 위해서 $http를 사용했다. request가 성공하면 날씨 데이타가 반환되고, 실패하면 error 정보가 반환되게 된다.

4. 다음 단계로 controller에서는, 서버로부터 데이터를 가져오기 위해 forecast 서비스를 사용한다. 먼저 forecast를 사용가능한 상태로 만들기 위해서 MainController에 forecast 의존을 주입했다. 그런 후 Controller 내에서 비동기 방식으로 서버로부터 날씨데이터를 가져오고 $scope.fiveDay에 저장한다.

5. 이전과 마찬가지로, $scope에 첨부된 모든 속성은 view에서 사용할 수 있다. 이것은 index.html에서 우리는 city_name 을 보여줄 수 있다는 의미이다.