[angularJS] 동적 뷰와 라우팅

동적 뷰와 라우팅

angular를 이용해서 웹 사이트의 header, footer, left, right로 나누는 것을 쉽게 할 수 있다.

angular의 동적 뷰를 이용하면 되는데, 그 방법은 URL을 기준으로 $routeProvider를 통해서 특정 뷰를 얻어온 다음 적용하면 된다.

myApp.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl:'views/main.html' }); .when('/emails', { templateUrl:'views/emails.html' }); .otherwise({ redirectTo:'/' }); }]);

- URL이 '/'이면 main.html로 주입되는 것이다. 초기 뷰로 index.html 대신 main.html을 설정하는 게 좋다. 왜냐하면 index.html은 이미 단일 페이지 셋업을 사용했기 때문이다. 

- 이렇게 추가하면 간단하게 애플리케이션을 만들 수 있다.

$routeProvider의 기능은 더욱 많다. 또한, Ajax 호출이 진행 중일 때 이벤트를 보내는 $http 인터셉터 같은 것도 있다. $http인터셉터는 새로운 데이터를 받아오는 동안에 로딩 표시를 보여주는 용도로 사용할 수 있다.

*출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/