[앵귤러] 기초 정리

• 앵귤러는?

모바일과 데스크탑을 위한 하나의 완성된 자바스크립트 프레임워크다.

구글의 앵귤러 + 마이크로소프트의 타입스크립트

서버측 프레임워크가 아닌, 클라이언트측 프레임워크다.

jQuery나 React같은 자바스크립트 라이브러리가 아니다. (MVC와 같은 디자인 패턴 X)

최근 추세는, 멀티페이지 (MPA) -> 싱글페이지로 이동 중 (SPA)

Header/Footer 컴포넌트 생성 해보기

• ng generate component header –dry-run
• ng g c header -d
• ng g c header –spec false -d
• ng g c footer –inline-template –spec false -d
• ng g c footer -it –spec false -d
• ng g c footer -it –inline-style –spec false -d
• ng gc footer -it -is –spec false -d

// –dry-run & -d : 생성하기 전에 미리보기

// –spec false : spec 파일 생성하지 않기

// –inline-template & -it : 템플릿(html) 파일 생성하지 않기

// –inline-style & -is : 스타일(css) 파일 생성하지 않기

간단한 파일 같은 경우에는 위의 명령어처럼 간단한 컴포넌트 파일만 생성시켜서 만들어줄 수 있다.

• ngIf

//component.html

<div *ngIf="visible";then evenClicked else oddClicked>This works</div>
<button (click)="toggleDiv()">Toggle</button>

<ng-template #oddClicked>Odd number of clicks</ng-template>
<ng-template #evenClicked>Even number of clicks</ng-template>

ngIf가 visible일 때, evenClicked 템플릿 출력

//component.ts

export class AppComponent {
    title = 'app';
    visible = true; //visible을 true라고 설정
    toggleDiv() { //버튼 클릭에 실행할 함수 - visible을 참,거짓으로 변경시킴
        this.visible = !this.visible;
    }
}

• ngFor

//component.ts

export class AppComponent {
    myFavLang = [
        {'name' : 'html', 'type': 'frontend'},
        {'name' : 'css', 'type': 'frontend'},
        {'name' : 'javascript', 'type': 'frontend'},
        {'name' : 'ruby', 'type': 'backend'}
    ];
}

//component.html

<ul *ngFor = "ngFor=let language of myFavLang; let i = index;">
	<li>.  - </li>
</ul>

ngIf를 통해 첫번째 값만 가져오려면?

//component.html

<ul *ngFor = "ngFor="let language of myFavLang; let first = first;">
	<li *ngIf="first">.  - </li>
</ul>

홀수 : odd, 짝수 : even 으로도 ngIf를 통해 값을 출력할 수 있다.