[ ionic3 / 아이오닉3 ] Angular부터 시작하자 1. 폴더 및 파일 구조

Angular부터 시작하자

기본적으로 Module안에 다수의 component가 있는 구성으로

각 component는 metadata, template, class가 들어있다

angular cli를 설치해보자

npm install -g @angular/cli

ng new newProject

cd newProject

code .

'code . '  은 해당폴더에서 visual studio code를 바로 실행 시키는 명령이다

 

visual studio code가 뜨면

크게 3개의 폴더가 보인다

e2e, node_modules, src

e2e는 end to end test를 위해 있고 지금은 그냥 올바른 테스트를 하기 위해 있는것이다 정도만 알고 넘어가도록 하자

node_modeuls는 @angular 를 비롯한 여러개의 모듈들이 있다

npm으로 설치한 모듈들은 여기에 추가되고 관리된다

src 폴더는 이름 그대로 소스가 있다

app폴더의 파일들을 보면

component, module에 대한 정의들이 있다 자세한 내용 역시 나중에 코딩을 하면서 더 자세히 알아가도록 하자

메인페이지가 되는 index.html에는

 <app-root></app-root> 가 있는데

해당 element는 app/app.component.ts에 

@Component({ selector: 'app-root', 로 정의되어있다

main.ts에는 bootstrap으로 AppModule을 호출하도록 되어있다

platformBrowserDynamic().bootstrapModule(AppModule);

polyfills는 오래된브라우저에 대한 지원관련 정의를 하는 파일이다

styles.css는 글로벌하게 적용되는 스타일 설정 각 component별로 css파일이 있으니 별도로도 스타일을 가져가기도 한다

test.ts 테스트환경에 대한 설정

tsconfig.*.json typescript 세팅을 정의하는 파일

자 그럼 여기까지 간단하게 알아보고 다음으로 넘어가자