티스토리 뷰

Dev/angular

Angular Quick Start

hellotheresy 2018. 2. 22. 17:50

Step 1. Set up the Development Environment

$> npm install -g @angular/cli


Step 2. Create a new project

$> ng new my-app



dd
dd

 Step 3: Serve the applicatio

$> cd my-app $> ng serve --open


실제로 확인해보니 다음과 같다.





/src/my-app/src/app/app.component.ts을 살펴보면 다음과 같다


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my First Angular app ';
}


저 중 Title을 변경하면 실제 Title이 동적으로 변경됨을 알 수 있다.

 --> 아래 처럼 choi라는 문구가 동적으로 변경됨을 알 수 있다.




이어서 css도 변경하여 보자


src/app/app.component.css에 내용추가


h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; }





역시 title이 동적으로 변경 되었음을 알 수 있다.


일단.. 동작함을 확인하였으니 다음을 살펴보자




참고 페이지 : https://angular.io/guide/quickstart



댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함