Ionic은 표준으로 아름다운 구성 요소를 제공하며,
"비 디자이너 ✕ 멀티 플랫폼 앱을 한 번에 만들고 싶습니다"개발자에게 매우 고마운 프레임 워크입니다.


Ionic - Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular
htp // 이오니 cf 라메를 rk. 코m/

Ionic에 준비된 표준 컴포넌트를 자유롭게 사용하여,
UI의 톤마나가 통일되어 누구나 세련된 인터페이스를 가지는 어플리케이션을 만들 수 있습니다.

톤마나는 '톤 & 매너'의 약자로 광고에서 디자인의 일관성을 갖게 하는 것을 말합니다. 또, 브랜드의 이미지 칼라와 홈페이지의 디자인 칼라를 맞출 필요가 있는 등, 「톤마나」는 기업부 브랜딩에 있어서도 중요합니다.
h tps // 푹신 tpぅs. 코m/980

Ionic 표준 구성 요소만으로 앱을 만들 수 있습니까?

그렇다고는 해도, 표준 컴퍼넌트로 할 수 있는 것은, 대 프레임의 UI를 정돈하는 곳에 시종하는 케이스가 많아,
조금 세밀한 인터페이스를 만들고 싶다고 생각하면 종래와 같이 표준 HTML 태그를 사용하면서 레이아웃을 만들어 가게 됩니다.

그리고
"여기도 표준 플러스 알파 UI 필요"
「이쪽도다・・・」
「아, 여기도」
그리고 HTML을 점점 몰아 넣으면,
점차 HTML 가독성이 떨어지고 유지 보수 및 개발 효율성이 떨어집니다.

또
「이 화면과 이 화면의 UI는 매우 비슷하구나・・」
「코피페 해버려!」
같은 것도 현장에서 있는 것이 아닐까요?

이를 해결하는 것은 "사용자 정의 구성 요소"라고합니다.

커스텀 컴포넌트

커스텀 컴포넌트는 복잡해지거나 반복적으로 이용될 것 같은 UI를 새로운 HTML 태그로 독자적으로 정의하고,
응용 프로그램 내에서 사용할 수있는 HTML의 표준 기능입니다.

HTML에 새 요소 정의
htps //w w. HTML5 여과 cks. 코 m / 자 / 쓰리 리아 ls / u b b m 포넨 ts / 쿠 s 토메 멘 ts /

Ionic의 사용자 지정 구성 요소

Ionic에서 사용자 정의 구성 요소를 준비하는 것은 간단합니다.
자세한 것은 이쪽의 공식 블로그에서 소개되고 있습니다.

Custom Components in Ionic 2
htps //w w. 조 sh모로 ny. 코 m / 쿠 s와 m 코 m 포넨 ts - 니 - 이오니 c-2 /

IonicPage

Ionic에는 LazyLoading을 지원하는 IonicPage라는 생각이 있습니다.

※LazyLoading은, 앱 기동 시간의 단축을 목적으로, 모듈의 분할을 실시해, 필요시에 다운로드를 실시하게 하는 사고 방식입니다

참고 : [Ionic] LazyLoading에서 파일 크기 또는로드 시간
htps : // 이 m/좋아 067/이고 ms/383나 4아 d906905c59f57

IonicPage를 지원하는 새 페이지를 만들려면 ionic g page와 같은 CLI 명령으로 만들 수 있습니다.
(아래는 home이라는 새 페이지를 만든 샘플)

주의:ionic start 등으로 프로젝트를 만든 경우 사전에
./src/pages/home 폴더 삭제
./src/app/app.module.ts에서 HomePage 관련 설정 제거
./src/app/app.component.ts에서
import { HomePage } from '../pages/home/home'; 삭제
rootPage:any = HomePage;
↓
rootPage:any = "HomePage";
수정이 필요합니다.

$ ionic g page

? What should the name be? home
[OK] Generated a page named home!

위의 명령을 실행하면 IonicPage에 해당하는 페이지가 생성되었는지 확인할 수 있습니다.



약간의 수정으로서, HomePage를 import하고 있는 개소등이 불필요하게 됩니다. (아래에서 댓글을 달고 있습니다)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
// import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    // HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

또, 화면 천이에 대해서도, 인스턴스 제휴가 아니고, 캐릭터 라인에서의 천이에 대신합니다.

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  // rootPage:any = HomePage;
  rootPage:any = "HomePage";

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

여기까지가 IonicPage의 설명이나 작성 샘플이 됩니다.
다음에 IonicPage에 HTML 태그 확장(Custom Components)을 추가하는 순서를 기재합니다!