Angular

Angular

과거에는 AngularJS, AngularJS2 라는 이름으로 발표되었지만, 현재는 Angular 라는 이름으로 변경되어 구글에서 개발한 타입스크립트 기반의 프레임워크 입니다. js, dart 같은 언어도 지원하고 기본적으로 타입스크립트를 바탕으로 빌드, 테스트, 배포, 라이브러리 등 모든 기능을 지원하는 프레임워크로 설계되어 있습니다.

설치

앵귤러는 자체적인 cli 를 이용하여 간단하고 쉽게 프로젝트를 만들 수 있도록 지원합니다.
그렇지 않으면 프레임워크 단위이기 때문에 설치하기가 매우 복잡하다고함.. (가능한가??)

우선 기본적으로 타입스크립트 기반이기 때문에 타입스크립트를 설치해주셔야 합니다.

yarn global add typescript

설치가 완료되면 angular 를 설치해줍시다.

yarn global add @angular/cli

angular 설치가 완료되면, 프로젝트를 만들어봅시다.

ng new ng-Study

설치 완료되면, 서버를 실행시켜봅시다.

// angular
ng serve
// yarn
yarn start

서버 실행시 아래와 같은 화면이 나오면 성공입니다!.

마무리

간단하게 각 폴더의 파일에 대한 설명을 적고 마무리 하겠습니다.

main.ts 는 최초실행시 실행되는 파일
app.module.ts 는 다른 앵귤러 모듈을 관리하며, ts파일(컴포넌트) 작성시 여기에 등록해주셔야만 사용이 가능해집니다.
app.component.ts 는 화면에 그려지는 요소를 관리하는 컴포넌트 파일입니다.
.html 파일은 해당 ts 에 템플릿입니다.
NgModule 이라는 데코레이터는 화면을 구성하는 컴포넌트를 관리하는 역할을 합니다. NgModule 에는 다음과 같은 속성이 있습니다.

• declarations: 해당 NgModule에 포함될 컴포넌트나 디렉티브, 파이프 를 선언합니다.

• exports: 모듈의 구성 요소를 다른 NgModule이나 컴포넌트 템플릿 으로 재사용할 수 있도록 외부로 공개합니다.

• imports: 다른 모듈에서 공개한 클래스를 지금 정의하는 NgModule에 가져올 때 사용합니다.

• providers: NgModule 컨텍스트 안에서 사용하는 서비스 프로바이더를 지정합니다. NgModule 안에서 사용하는 서비스는 이렇게 지정된 서비스 프로바이더를 사용해서 생성되며, 필요한 경우에는 하위 계층에 사용할 서비스 프로바이더를 따로 지정할 수도 있습니다.

• bootstrap: 애플리케이션의 최상위 뷰로 표시될 최상위 컴포넌트 를 지정합니다. bootstrap 프로퍼티는 최상위 NgModule 에만 지정할 수 있습니다.