위의 글에서 프로젝트 생성까지 진행했다.
>> ionic start test-ionic tabs --type=angular
>> cd test-ionic
>> ionic serve
아래 3개의 탭을 가진 tabs의 형태로 생성된 프로젝트를 확인할 수 있다.
5개의 탭으로 코드를 수정해보자.
일단 코드를 살펴보면
test-ionic/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
</html>
<app-root></app-root> 로 구성되어있다.
test-ionic/src/app/app.component.ts
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})app-root 는 app.component.html 이다.
test-ionic/src/app/app.component.ts
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
즉 현재 아래와 같은 코드라고 볼 수 있다.
<app-root>
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
</app-root>
ion-router-outlet을 찾기위해 아래 경로의 소스를 보면
test-ionic/src/app/app-routing.module.ts
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];route가 /tabs/tabs.module의 #TabsPageModule 이라고 지정했다.
test-ionic/src/app/tabs/tabs.module.ts
import { TabsPage } from './tabs.page';
export class TabsPageModule {}
test-ionic/src/app/tabs/tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
그럼 현재 탭메뉴까지 왔다.
<app-root>
<ion-app>
<ion-router-outlet>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-router-outlet>
</ion-app>
</app-root>
test-ionic/src/app/tabs/tabs.router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}각 tab1 tab2 tab3의 경로에 따라 loadChidren이 설정되어있다.
경로가 '' 없으면 /tabs/tab1 으로 연결한다.
자 그럼 탭을 추가해 보자
test-ionic/src/app/tabs/tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="filing"></ion-icon>
<ion-label>Tab four</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab5">
<ion-icon name="heart"></ion-icon>
<ion-label>Tab five</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
아이콘도 넣어주고 tab4 와 tab5 를 추가 했다.
모양은 갖춰줬지만 탭이 정상적으로 작동하지 않는다.
test-ionic/src/app/tabs/tabs.router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: 'tab4',
children: [
{
path: '',
loadChildren: '../tab4/tab4.module#Tab4PageModule'
}
]
},
{
path: 'tab5',
children: [
{
path: '',
loadChildren: '../tab5/tab5.module#Tab5PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
라우터에 tab4와 tab5를 추가한다.
하지만 아직 /tab4/tab4.module#Tab4PageModule 과 /tab5/tab5.module#Tab5PageModule 는 없다!
tab3 을 복사해 tab4와 tab5를 만들어주자 .
이름뿐만 아니라 코드 내용의 tab3도 보두 4나5로 맞추어 바꿔준다.
그럼 정상적으로 탭메뉴가 생성되었다! 각각의 해당 내용을 채워넣으면 원하는 모양의 프로젝트를 만들 수 있다.
'아이오닉' 카테고리의 다른 글
| [하이브리드앱 ionic]시작해보기 6 - 컴포넌트 css 적용하기 (0) | 2019.07.02 |
|---|---|
| [하이브리드앱 ionic]시작해보기 5 - 다양한 컴포넌트 만들기 (0) | 2019.06.28 |
| [하이브리드앱 ionic]시작해보기 4 - alert창 띄우기 (0) | 2019.06.28 |
| [하이브리드앱 ionic]시작해보기 3 - 새로운 페이지 추가 (0) | 2019.06.28 |
| [하이브리드앱 ionic] 시작해보기 1 - 프로젝트 생성 (0) | 2019.06.28 |
댓글