이번 스텝에서는 layout template을 생성하는 방법과 routing을 추가해서 multiple view를 가지는 app를 만드는 방법을 배울 것 입니다.
app/index.html로 이동했을 때, app/index.html#/phones로 redirect되고 브라우저에 동일한 폰 목록이 표시되는 것을 확인할 수 있습니다. 폰 링크를 클릭하면 폰의 상세 페이지 내용이 표시됩니다.
스텝 6와 7의 중요한 차이점들은 아래와 같습니다.
Multiple Views, Routing and Layout Template
app이 천천히 커져가고 있고, 복잡해 지고 있습니다. 7 스텝 이전까지는 app이 사용자에게 단일 view(모든 폰 목록)를 제공되고 모든 template 코드는 index.html에 위치했습니다. app을 만들어가는 다음 단계는 목록의 각 기계에 대한 상세 정보를 표시하는 view를 추가하는 것입니다.
상세 view를 추가하기 위해서 두 view에 대한 template 코드를 포함하는 index.html 파일을 확장할 수 있습니다. 하지만 이 방법은 매우 빠르게 코드를 지저분하게 만들 것입니다. 그래서 이 문제를 해결하지 위해서 index.html template을 "layout template"으로 변경할 것입니다. 이것은 응용프로그램에서 모든 view들에 공통적인 template 입니다. 다른 "partial templates"은 현재 "route"에 따라서 layout template 안에 포함될 것입니다. - view는 현재 사용자에게 표시되는 것 입니다.
Angular에서 응용프로그램 route는 $route service의 provider인 $routeProvider를 통해서 정의됩니다. 이 service는 controller들, view template들 및 브라우저의 현재 URL 위치들이 함께 동작하는 것을 쉽게 만듭니다. 이 기능을 사용해서 브라우저의 히스토리(back and forward 네이게이션) 및 북마크(bookmark) 할용 할 수 있게하는 deep linking을 구현할 수 있습니다.
A Note About DI, Injector and Providers
스텝 5에서 확인한 것과 같이 dependency injection (DI)는 AngularJS의 핵심이기에, 이것이 어떻게 동작하는지 이해하는 것은 중요 합니다.
응용프로그램이 bootstrap 되었을 때, Angular는 app내 모든 DI 요소에서 사용되는 injector를 생성합니다. Injector는 $http 또는 $route 서비스가 하는 일이 무엇인지 알지 못합니다. 사실 적절한 module 정의가 설정되지 않는다면 이러한 service들이 존재하는지도 알지 못합니다. injector의 유일한 책임은 명시된 module 정의를 로드하고 이런한 module들 내에 정의된 모든 service provider들을 등록하고, 요청이 있을 때, provider들을 통해서 늦게(lazy) 초기화되는 dependency (service)들이 명시된 function에 주입해 주는 것 입니다.
provider들은 service의 객체를 생성 또는 제공하고, service의 실시간 동작(runtime behavior)과 생성을 제어할 수 있는 설정 API(configuration API)들을 노출하는 객체입니다. $route service의 경우 $routeProvider가 응용프로그램의 route들을 정의할 수 있는 API들을 노출합니다.
Note: provider들은 config 함수들에서만 inject되어 질 수 있습니다. 그러므로 PhoneListCtrl에 $routeProvider를 inject 할 수 업습니다.
Angular module은 응용프로그램에서 전역 상태(global state)를 제거하는 문제를 해결하고 injector를 설정하는 방법을 제공합니다. AMD 또는 require.js module들과는 대조적으로 Angular module은 script 로드 순서 또는 늦은 script 가져오기(lazy script fetching) 문제를 해결하지 않습니다. 이러한 목표는 완전히 독립적입니다. 또한 양 module 시스템들은 함께 사용될 수 있고 각각의 사용 목적을 달성할 수 있습니다.
아래는 require.js와 Angular를 연동하는 방법을 설명하는 동영상이나, Angular의 Module 시스템과 require.js의 Module 시스템의 차이점에 대해서 간단히 알아볼수 있는 동영상 입니다. 시작부터 5분 30초까지 정도 보시면 좋겠습니다.
The App Module
app/js/app.js
route를 이용해서 응용프로그램을 설정하기 위해서는 응용프로그램 module을 생성하는 것이 필요합니다. 이것을 phoncatApp module이라고 부르겠습니다. angular.module에 두번째 argument가 ['ngRoute', 'phonecatControllers'] 인것을 확인해 주십시요. 이 배역은 phonecatApp이 종속성을 가지는 module들의 목록 입니다.
위에서 index.html에 angular-route.js를 추가했습니다. 하지만 route 기능을 사용하기 위해서는 app의 dependency로서 ngRoute를 반드시 추가해야 합니다. app의 구조를 개선하기 위해서 controller들을 자신만의 파일로 이동시키고, phoncatControllers module을 호출 할 것입니다. pnonecatApp의 dependency들로 위의 2 module을 정의함으로써 module들이 제공하는 directive들과 service들을 사용할 수 있습니다.
따라서 config API 사용할 때 config 함수에 $routeProvider가 inject되도록 요청하고, route를 정의하기 위해서 $routeProvider.when API를 사용합니다.
응용프로그램의 route는 아래와 같이 정의 되었습니다.
- 폰 목록 view는 URL hash fragment(?)가 /phones 일 때 보여질 것입니다. 이 view를 구성하기 위해서 Angular는 phone-list.html template과 PhoneListCtrl controller를 사용할 것 입니다.
- 폰 상세 view는 URL hash fragment가 '/phone/:phoneId' 와 매치될 때 보여질 것입니다. :phoneid는 URL의 변수 부분 입니다. 폰 상세 view를 구성하기 위해서 Angular는 phone-detail.html template과 PhoneDetailCtrl controller를 사용 할 것입니다.
Controllers
app/js/controllers.js
다시 한번, 이름이 phonecatControllers 인 새로운 module를 생성한 것을 확인 할 수 있습니다. 작은 AngularJS 응용프로그램을 위해서 일반적으로 모든 controller들을 위해서 하나의 module를 생성할 것 입니다. 보다 큰 app을 위해서는 중요한 기능들을 분리된 module로 생성하고 싶을 것 입니다.
예제 앱은 상대적으로 작기 때문에 모든 controller를 이 module에 추가 할 것 입니다.
Template
$route service는 보통 ngView directive와 연계해서 사용 됩니다. ngView directive의 역활은 layout template에 현재 route를 위한 view template를 포함시키는 것 입니다.
Note: AngularJS version 1.2를 사용한다면, ngRoute 는 독립된 module이기 때문에 반드시 Angular와 함께 배포되는 angular-route.js 파일을 로딩해서 로드해야 합니다. 파일을 로드하는 가장 쉬운 방법은 아래와 같이 <script> 태그를 index.html 파일에 추가하는 것입니다.
app/index.html
Controllers
app/js/controllers.js (tistory 일부 태그들이 별도 처리되는 것을 막기 위해서 '//'가 사용된 부분이 있습니다.)
index.html template에서 대부분의 코드를 제거하고 ng-view attribute가 있는 div 로 대체되었습니다. 제거된 코드는 phone-list.html template으로 이동하였습니다.
또한 폰 상세 view를 위한 placeholder(?) template을 추가했습니다.
app/partials/phone-list.html
PhoneDetailCtrl controller에 정의된 phoneId model를 사용하는 것을 확인 할 수 있습니다.
Test
자동적으로 모든것이 적절히 동작하는 것을 검증하기위해서 다양한 URL로 navigate하고 정확한 view가 render되는지 검증하는 end-to-end 테스트를 작성하였습니다.
- ./scripts/e2e-test.sh 를 재실행 합니다.
- end-to-end test runner의 브라우저 탭을 refresh 합니다.
- Angular 서버를 실행해서 확인 해 볼 수 있습니다.
Experiments
'Dev > AngularJS' 카테고리의 다른 글
| Tutorial - 9 - Filters (0) | 2014.02.23 |
|---|---|
| Tutorial - 8 - More Templating (0) | 2014.02.23 |
| Tutorial - 6 - Templating Links & Images (0) | 2014.02.21 |
