cordova에서 스마트 폰 앱 개발 3

Ionic 구성

작성한 애플리케이션의 폴더 구성은 다음과 같습니다.

[C:\cordova_app\helloIonic]
├─e2e
├─node_modules
├─플랫폼
├─plugins
├─resources
├─src
└─www

기능을 추가하려면/src 다음을 편집하십시오.

마지막으로 응용 프로그램을 만들 때 템플릿으로 tab을 선택했기 때문에/src/app 아래에 TAB 구성이 만들어졌습니다.

[C:\cordova_app\helloIonic\src]
├─app
│ ├─tab1
│ ├─tab2
│ ├─tab3
│ └─tabs
├─assets
│ └─icon
├─environments
└─theme

파일 형식

템플릿 또는 generate로 page를 만들면 다음 파일이 만들어집니다.

app-routing.module.ts : 라우팅 정의

app.module.ts : component 정의 및 읽기

app.component.html : html 설명

app.component.scss : css 기재

app.component.spec.ts: 테스트용

app.component.ts : 인페이지 처리

app-routing.module.ts는 app, tabs, app.component.scss는 다른 폴더에만 생성됩니다.

전화

\src\main.ts

AppModule의 시작 정의를 설명합니다.

import { AppModule } from './app/app.module';

\src\app\app.module

라우팅 로드

import { AppRoutingModule } from './app-routing.module';

\src\app\app-routing.module.ts

라우팅 정의

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

\src\app\tabs\tabs.module.ts

라우팅 로드

import { TabsPageRoutingModule } from './tabs.router.module';

\src\app\tabs\tabs.router.module.ts

라우팅 정의

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'
  }
];

탭 추가

tab을 추가하려면 먼저 page를 새로 만들어야합니다.

다른 탭을 복사해도 되지만, ionic 에서는 명령으로 page 를 작성할 수 있으므로 그쪽을 이용한다

C:\cordova_app\helloIonic>ionic g
? What would you like to generate? (Use arrow keys)
> page
  component
  service
  module
  class
  directive
  guard
(Move up and down to reveal more choices)

C:\cordova_app\helloIonic>ionic g
? What would you like to generate? page
? Name/path of page: tab4
> ng.cmd generate page tab4
CREATE src/app/tab4/tab4.module.ts (533 bytes)
CREATE src/app/tab4/tab4.page.html (123 bytes)
CREATE src/app/tab4/tab4.page.spec.ts (677 bytes)
CREATE src/app/tab4/tab4.page.ts (248 bytes)
CREATE src/app/tab4/tab4.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (538 bytes)
[OK] Generated page!

ionic g 명령을 사용하여 각 기능을 애플리케이션에 추가할 수 있습니다.

이전 버전에서는 tabs가 후보에 있었던 것처럼 보이지만 ionic5에서는 사라졌으므로 page로 작성

※헬프를 참조하는 것으로, 어떤 기능을 작성할 수 있는지는 참조 가능

C:\cordova_app\helloIonic>npx ng g --help
Generates and/or modifies files based on a schematic.
usage: ng generate <schematic> [options]

arguments:
  schematic
    The schematic or collection:schematic to generate.

options:
  --defaults
    When true, disables interactive input prompts for options with a default.
  --dry-run (-d)
    When true, runs through and reports activity without writing out results.
  --force (-f)
    When true, forces overwriting of existing files.
  --help
    Shows a help message for this command in the console.
  --interactive
    When false, disables interactive input prompts.

Available Schematics:
  Collection "@schematics/angular":
    application
    class
    component
    directive
    e2e
    enum
    guard
    interface
    library
    module
    page
    pipe
    service

page 를 작성 후, 이름을 지정 (위에서는 tab4 로 하고 있다) 하는 것으로 생성이 시작된다

\src\app\app-routing.module.ts 수정

추가 된 페이지는 자동으로 app-routing.module.ts에 추가됩니다.

이번에는 tab로 사용하므로 삭제합니다.

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'tab4', loadChildren: './tab4/tab4.module#Tab4PageModule' }
];

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

\src\app\tabs\tabs.router.module.ts 수정

반대로 abs.router.module.ts에 라우팅 정의 추가

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'
  }
];

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: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

\src\app\tabs\tabs.page.html 수정

tabs.page.html에는 탭 표시부의 내용이 기재되어 있으므로 추가

    <ion-tab-button tab="tab4">
      <ion-icon name="pulse"></ion-icon>
      <ion-label>Tab Four</ion-label>
    </ion-tab-button>

컴파일하고 확인하기

C:\cordova_app\helloIonic>ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] i ｢wdm｣: wait until bundle finished: /
[ng] Date: 2019-07-18T05:52:25.384Z
[ng] Hash: 2f715eebf9043dbf4796
[ng] Time: 10432ms
[ng] chunk {common} common.js, common.js.map (common) 14.2 kB  [rendered]
[ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[ng] chunk {main} main.js, main.js.map (main) 23.9 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.94 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 67.6 kB [initial] [rendered]
[ng] chunk {tab1-tab1-module} tab1-tab1-module.js, tab1-tab1-module.js.map (tab1-tab1-module) 6.42 kB  [rendered]
[ng] chunk {tab2-tab2-module} tab2-tab2-module.js, tab2-tab2-module.js.map (tab2-tab2-module) 4.6 kB  [rendered]
[ng] chunk {tab3-tab3-module} tab3-tab3-module.js, tab3-tab3-module.js.map (tab3-tab3-module) 4.6 kB  [rendered]
[ng] chunk {tab4-tab4-module} tab4-tab4-module.js, tab4-tab4-module.js.map (tab4-tab4-module) 4.68 kB  [rendered]
[ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 8.03 kB  [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.45 MB [initial] [rendered]
[INFO] ... and 95 additional chunks
[ng] i ｢wdm｣: Compiled successfully.

정의를 수정하지 않으면 안되므로 명령으로 생성되는 이점은별로 느껴지지 않습니다.

blank 페이지를 만드는 경우를 제외하고는 복사하는 것이 더 빠릅니다.

cordova에서 스마트 폰 앱 개발 4