제 7장: 라우팅 구현하기

이번 장에서 세션 리스트 뷰를 로딩하는 app.sessions과 세션 디테일 뷰를 로딩하는 app.session, 두 개의 라우트(state)를 애플리케이션에 구현합니다.

1단계: app.sessions의 라우트를 정의합니다.

1. conference/www/js에 있는 app.js를 엽니다.

2. app.playlists state를 삭제합니다.

3. app.sessions state 다음과 같이 작성합니다:

   .state('app.sessions', {
     url: "/sessions",
     views: {
         'menuContent': {
             templateUrl: "templates/sessions.html",
             controller: 'SessionsCtrl'
         }
     }
   })
   

Step 2: app.session의 라우트를 정의합니다.

1.app.single state를 삭제합니다.

1. app.session state를 다음과 같이 작성합니다.

   .state('app.session', {
       url: "/sessions/:sessionId",
       views: {
           'menuContent': {
             templateUrl: "templates/session.html",
             controller: 'SessionCtrl'
         }
       }
   });
   

3단계: 기본 라우트를 수정합니다.

기본으로 세션 목록이 나오도록 라우트를 수정합니다 (app.js의 마지막 줄):

$urlRouterProvider.otherwise('/app/sessions');

4단계: 슬라이드 메뉴를 수정합니다.

1. conference/www/templates에서 menu.html를 엽니다.

2. 다음과 같이 Playlists menu item을 수정합니다 (item label과 href도 함께 수정합니다):

   <ion-item menu-close href="#/app/sessions">
       Sessions
   </ion-item>
   

5단계: 애플리케이션을 테스트합니다.

1. ionic serve (로컬 웹 서버)가 여전히 실행중인지 확인하세요.

   • 실행중이지만 브라우저의 앱 페이지를 닫았다면, http://localhost:8100 URL을 접속하여 앱을 재시작 할 수 있습니다.

   • 실행중이지 않다면 커맨드 프롬프트를 열고 ionic-tutorial 디렉토리로 이동후 입력하세요:

     ionic serve
     

2. 회의 앱에서 슬라이드 메뉴를 열고(죄측 상단 구석에 있는 "햄버거" 아이콘) Sessions를 선탁하세요. 자세한 내용을 보기 위해서 목록중에 한 세션을 선택하세요.