정적 페이지 내용 변경

안녕하세요, mucun입니다.

이번에는 정적 페이지 내용을 변경하는 방법에 대해 소개하고 싶습니다.
정적 페이지 내용이란, 페이지를 표시했을 때의 조건이 어떠한 경우에도,
변하지 않는 내용을 말합니다.
페이지의 제목과 공통 디자인 등이 그렇습니다.

반대로 조건에 따라 달라지는 내용을 동적 내용이라고 합니다.
사람마다 다른 「환영, ○○씨」등의 메시지나,
EC 사이트에서의 「상품명・상품 화상・가격」등이 그렇습니다.
즉, 일정한 템플릿에 상황에 따라 다양하게 설정되는 내용입니다.

이번은, 상기 전자의 변경 방법에 대해입니다.

"ionic2"모듈의 구성은 3종류의 프로그램으로 구성되어 있습니다.
이것은 일반적인 웹 페이지와 유사한 형식입니다.
　① html : 정적 표시 내용의 직접 쓰기나 동적인 표시 내용용 템플릿을 설정
② scss : 문자 폰트나, 문자색·배경색 등 외형에 관련된 설정
③ typescript : 동적인 표시 내용을 제어하기 위한 알고리즘을 설정


정적인 내용은 주로 「①html」에서 직접 쓰여진 내용입니다.
그럼 변경해 봅시다.
테스트에는 이전 회 ( 그 4 )에서 취득한 공식 튜토리얼을 사용합니다.

먼저 명령 프롬프트에서 대상 "ionic2"모듈의 폴더에서
ionic serve 명령을 실행합니다.

(※전회( 그 4 )에서 "Hello Ionic"이 "Good Morning Ionic"으로 변경되었습니다)

그런 다음 편집기에서 "( "ionic2"폴더)/app/hello-ionic.html"을 엽니 다.


이전의 회 ( 그 4 )로, 문언을 바꾸는 것은 했으므로,
이번에는 공식 페이지의 Cards 표기 방법 을 참고로 표시 항목을 추가해 봅시다.

다음 코드를 마지막 행(이라고 쓰여진 행) 위에 삽입합니다.

추가 코드

<ion-card>

  <ion-card-header>
    Card Header
  </ion-card-header>

  <ion-card-content>
    This is static content!
  </ion-card-content>

</ion-card>

수정 후 소스


그러면 화면에 반영됩니다.


위 코드의 내용은 html에 직접 쓰여져 있으므로,
어떤 조건에서도이 문장으로 페이지에 표시됩니다.
이 의미는 다음 번 ( 그 11 )에서 동적인 페이지 내용 표시를 확인한다고 알 수 있다고 생각합니다.

이상, 정적인 페이지 내용의 변경에 관한 기사였습니다.
이번은 여기까지입니다.
읽어 주신 분, 감사합니다. (*‘∀’)

👈【그의 9·공개 샘플을 움직인다】 👉【그의 11·동적인 페이지 내용을 변경한다】