$resoure는 앵귤러에서 백엔드 자원을 추상화한 서비스다. 레스트(REST) 방식의 백엔드 프로토콜이 지원된다면 $resoure의 장점을 충분히 활용할 수 있다. url로 $resoure 서비스를 생성하고 사용할때는 get(), query(), post() 등 메소드 이름으로 함수를 호출하면 된다. 또한 프라미스(promise)를 반환하기 때문에 비동기 방식의 코딩도 깔끔하게 유지할 수 있다.
이번엔 캐쉬 사용법을 알아보자. 앵귤러에서 캐쉬는 $cacheFactory 서비스가 담당한다. var cache = $cacheFactory('myCache')
로 캐쉬 저장소를 생성한다. cache.put("key1", "value1")
으로 캐쉬에 키/밸류 방식으로 데이터를 저장하고 cache.get("key1")
을 저장한 value1을 찾을 수 있다.
$resouce 서비스도 내부적으로는 $cacheFacotry 서비스를 사용한다. 기본적으로 $resouce는 캐쉬를 사용하지 않지만 cache: true
옵션으로 추가하여 사용하면 $cacheFactory 서비스를 사용하여 백엔드 데이터를 캐쉬에 저장한다. $resource 서비스는 백엔드 호출후 $cacheFactory("$http")
을 사용해 캐슁한다. 아래 코드를 보자.
var r = $resouece("/api/books", {}, { get: { cache: true } }); var books = r.get(); // books는 booksCahce에 데이터를 캐쉬한다. var booksCache = $cacheFactory.get("$http").get("/api/books");
$resource 서비스로 백엔드 호출한 데이터는 cache: true
옵션에 의해 캐쉬 데이터로 저장된다. $http
이름으로 생성된 캐쉬팩토리 인스턴스는 "/api/books"라는 키와 백엔드 리턴값을 밸류로하는 키/밸류 데이터를 이 인스턴스에 저장한다.
캐쉬를 리프레시 할수도 있다. 어떤 상황일까? 만약 /api/books (update) 프로토콜로 백엔드 자원을 수정했다면 캐쉬에도 반영해야한다. $cacheFactory("$http").remove("/api/books")
로 캐쉬 데이터를 삭제한다. 그러면 $resource가 다음 호출시 캐쉬 데이터가 비어있는 것을 확인하고 백엔드 통신을 시도하고 그 결과를 다시 캐쉬에 저장한다. 참고로 removeAll()
은 $cacheFactory("$http") 의 모든 캐쉬를 비운다.