[Angular]환경설정

환경설정

1. cmd창을 열어준다.

 

2. npm install -g typescript로 설치를 진행시켜준다.

 

3. npm install -g @angular/cli 도 설치를 시켜준다.

   y/n 나오면 y입력시켜준다.

 

4. ng --version으로 앵귤러 버전을 확인한다.

 

5. 작업할 디렉터리 폴더로 이동

 

6. ng new ang01로 앵귤러 폴더 생성

   y/n에서 y입력

   css 선택 후 엔터

 

7. vscode로 오픈

 

8. ng serve로 실행

 

9. 메인은 app폴더이다.

 

10. 확장자를 보면 css, ts, html 3가지이다.

 

11. app.component.ts에서 title='ang01'을 '호랑이'로 수정해본다.

 

12. app.component.html에서 div빼고 모두 지워준다.

<div class="content" role="main">
<h1>호랑이</h1>
  
</div>


<router-outlet></router-outlet>

 

13. 서버를 꺼주고 ng g c tiger라 치면 app폴더 안에 tiger라는 컴포넌트가 생성된다.

 

 

유닛테스트로 쓰이는 것중에서 가장알려진것이 jest라는 것이다.

유닛테스트는 유지보수할때 쓰인다.

 

tiger.component.spect.ts는 테스트할때 쓰인다.

 

 

 

 

//app.components.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '호랑이';
  count = 1000;
  sname = '사자';
  sage = 30;
  str = "";

  f1(){
    console.log(1);  
  }

  f2(){
    this.count++;
    console.log(this.count);
  }

  child(e){
    this.str = e;
  }

}

 

<!-- app.components.html -->

<div class="content" role="main">
<h1>호랑이</h1>
<button (click)="f1()">버튼</button><br/>
<button (click)="f2()">{{count}}</button>
<!-- <app-tiger [parents]="count"></app-tiger> -->
<!-- <app-tiger [name]="'호랑이'" [age]=20></app-tiger><br/> -->

<app-tiger (buttons)="child($event)"></app-tiger><br/>
<button>부모버튼:{{str}}</button><br/>

{{sname}}<br/>
{{sage}}
</div>

<!-- 부모버튼 자식버튼 자식버튼 누르면 부모에게 호랑이 전달, 부모버튼에 호랑이 출력
부모는 부모버튼 자식은 자식버튼
자식버튼을 누르면 부모버튼에 호랑이라 출력 -->

<router-outlet></router-outlet>

 

<!-- tiger.components.html -->
<p>{{parents}}</p>
<button (click)="f3(tiger)">{{tiger}}</button>

 

//tiger.components.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-tiger',
  templateUrl: './tiger.component.html',
  styleUrls: ['./tiger.component.css']
})
export class TigerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @Input() parents:number;

  @Input() name:String;

  @Input() age:number;


  @Output() buttons:EventEmitter<String>=new EventEmitter<String>();

  tiger="호랑이";

  f3(item){
    this.buttons.emit(item);
  }
}