ngModule에 대해서 알아보도록 하자
application에는 여러개의 module이 사용되고 module은 여러개의 component로 구성된다
프로젝트를 만들고 시작해보자
ng new myProject2
cd myProject2
code .
그러면 코드 스튜디오가 나올것이다
app/app.module.ts먼저 보도록 하자
안에 @NgModule 이 선언되어있고
bootstrap이 AppComponent인것을 볼 수 있다
그럼 상단에서 ./app.component에서 AppComponent를 import하기에
app.component파일로 넘어가도록 하자
class AppComponent 는 title = 'app' 을 가지고 있다
해당 component는 app-root라는 이름으로
app.component.html의 templateurl를 가지고 app.component.css파일로 꾸밀 수 있다
뭐 복잡하지만 결론은
AppComponent는 title이라는 변수에 app이라는 값을 넣은 클라스를 정의한 component파일이다
그럼 app.component.html로 가서 어떻게 출력되는지 확인 해보도록 하자
{{title}} 이 4번째 줄에 있는데 어떻게 출력되는지 확인 해보도록 하자
ng serve -o 명령을 아까의 cmd창에 입력하면
위와 같은 화면이 나온다
그럼 app을 바꿔볼까?
app/app.components.ts 파일로 돌아가서 'app'을 원하는 문자열로 변경하고 저장하면? 자동으로 갱신이 된다
오늘은 여기까지.. 모듈, 컴포넌트, html에 연관관계만 대충 알고 넘어가도록 하자
'앱개발 > Ionic 3 / 아이오닉 3' 카테고리의 다른 글
[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 5. ngFor (1) | 2017.09.05 |
---|---|
[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 4. ngIf else (0) | 2017.09.04 |
[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 3. data binding & Two-way data binding (0) | 2017.09.04 |
[ ionic3 / 아이오닉3 ] Angular부터 시작하자 1. 폴더 및 파일 구조 (1) | 2017.09.01 |
[ Ionic3 / 아이오닉3 ] 개발환경 구성하기 (0) | 2017.09.01 |