AngularJS: 개발 단계에서 $routeProvider 캐싱 방지하기

AngularJS로 단일 페이지 웹앱을 설계하다보면 AngularJS에서 제공하는 ngView 디렉티브 및 $route 서비스를 사용하게 된다.

$routeProvider 적용이 주된 내용인 일련의 코드는 다음과 같다.

angular.module('SearchApp', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
	$routeProvider
	.when('/user', {
		templateUrl: 'user.html',
		controller: 'UserController'
	})
	.when('/search/:user', {
		templateUrl: 'search.html',
		controller: 'SearchController'
	})
	.otherwise({
		redirectTo: '/user'
	});
	
	$locationProvider.html5Mode(true);
})

문제는 $routeProvider의 캐싱(caching) 기능 때문에 발생한다.

개발 도중에는 수시로 웹페이지의 내용이 바뀌게 되는데, 

$routeProvider에서 웹페이지를 캐싱해놓기 때문에 변경한 내용이 화면에 반영되지 않는 것.

해당 이슈에 대한 깃헙 이슈 스레드

https://github.com/angular-ui/ui-router/issues/1063

$templateCache.remove()를 활용해보라는 답변이 달린 stackoverflow (이슈를 해결하지 못했다는 의견이 많다.)

http://stackoverflow.com/questions/20284976/angularjs-how-to-clear-routeproviders-caches-of-templateurl

개발 도중이라면, 이와 같은 이슈를 해결할 수 있는 방법이 있다.

(크롬에서 캐싱을 방지하는 것을 확인했으며, 파이어폭스 및 익스플로러는 확인해보지 않았다.)

크롬 개발자도구 옵션을 적용하여 캐싱을 방지하는 솔루션이 등록된 stackoverflow

http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine

크롬에서 개발자도구를 열어 Settings를 클릭하여 설정창을 열면,

본인 기준으로 좌측 상단 General 항목에 Disable cache (while DevTools is open) 옵션이 있다.

이를 체크하면 개발자도구가 활성화되어 있는 동안 브라우저 일체의 캐싱을 막을 수 있다.