Ionic에는 실제로 응용 프로그램을 만들려는 튜토리얼이 없습니다!

(적어도 공식적으로는) 없다. 없었다.
그래서 Angular4의 튜토리얼을 읽고 Ionic에서 실행해 본다.
튜토리얼 페이지는 이쪽.
htps // 앙구 r. jp/트리어 l
일본어화되어 있기 때문에 (오랜만에) 일본어로 읽을 수 있어!
전제로 ionic의 blank 프로젝트를 만들어 둡니다.

튜토리얼: 투어 오브 히어로즈

투어 오브 히어로즈 튜토리얼은 Angular의 기초를 다룹니다.
이 튜토리얼에서는 인재 파견 회사가 영웅 집합을 관리하는 응용 프로그램을 개발합니다.
과연. 그렇다 치더라도 준비되어 있는 영웅이 너무 많아서 너무 핀이 오지 않는다.

튜토리얼에서는 다음을 다루는 것 같다.

요소를 표시하고 은폐하고 영웅 데이터 목록을 표시하기 위해 내장 Angular 지시문을 사용합니다.

영웅 세부사항과 영웅 목록을 표시하기 위한 Angular 구성요소를 작성하십시오.

읽기 전용 데이터에 단방향 데이터 바인딩을 사용합니다.

양방향 데이터 바인딩을 사용하여 모델을 업데이트하기 위한 편집 가능한 필드를 설치합니다.

키 입력 및 클릭과 같은 사용자 이벤트에 대해 구성 요소가 포함하는 메서드를 바인딩합니다.

사용자가 마스터 목록에서 영웅을 선택하여 상세 화면에서 영웅을 편집할 수 있습니다.

파이프로 데이터를 성형한다.

영웅을 조립하기 위한 공유 서비스 만들기.

다양한 뷰와 그 컴포넌트 사이를 전환할 수 있도록 라우팅을 사용한다.

튜토리얼 페이지에는 실제의 동작 이미지의 애니메이션이 있으므로 꼭 보는 것을 추천한다.

애플리케이션 쉘

ionic의 튜토리얼로 거기는 했으므로, AngularCLI의 이용 방법은 패스.

애플리케이션의 제목 변경

파일 이름이 다릅니다. (우선 ionic의 시작 프로젝트와 Angular의 시작 프로젝트가 다르다고 생각하기 때문에…)

app.component.ts → app.component.ts : TypeScript로 작성된 컴포넌트 클래스의 코드입니다.
app.component.html → app.html : HTML로 작성된 구성 요소의 템플릿입니다.
app.component.css → app.scss : 이 컴퍼넌트 전용의 CSS(scss)입니다.
잘 보면 css에서 scss로 바뀌고 있기 때문에 완전히 동일하지 않습니다. 하지만 지금은별로 신경 쓰지 마십시오.

구성 요소 클래스 파일(app.component.ts)을 열고 title 속성의 값을 Tour of Heroes로 변경합니다.
ionic의 blank 프로젝트에서는 무언가와 여러 가지 글을 쓰고 있습니다.
아래와 같이 바꿉니다.
ionic 유래의 것도 모두 지우고 완전하게 Angular 튜토리얼에 따라 봅시다.

app.component.ts

import { Component } from '@angular/core';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  title = "Tour of Heroes";
}

app.html

<h1>{{title}}</h1>

상당히 외로워졌습니다.

애플리케이션 스타일 추가

자습서의 CSS 코드를 app.scss에 그대로 붙여 봅니다.



아주 조금 화려해졌습니다.