1. 따라하기 2편

 - https://angular.io/tutorial/toh-pt0

 - src/app 으로 이동한 상태에서의 내용입니다.


2. AppComponent 파일 수정

 1) app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; }


 2) app.component.html

<h1>{{title}}</h1> <app-heroes></app-heroes>


3. app전체에 적용할 css 적용

 1) src/style.css

/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; 

}


4. here component CLI로 생성

 1) 명령어

ng generate component heroes


 2) 확인


5. 컴포넌트 수정

 1) app/hero.ts 파일 추가

hero: Hero = { id: 1, name: 'Windstorm' 

};


 2) app/heroes/heroes.component.ts

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

import { Hero } from '../hero'; @Component({ selector: 'app-heroes', /* the components CSS element selector */ templateUrl: './heroes.component.html', /* the location of the component's template file. */ styleUrls: ['./heroes.component.css'] /* the location of the component's private CSS styles. */ }) export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'Windstorm' };

constructor() { } ngOnInit() { }  

}


3) app/heroes/heroes.component.html

<!-- {{ hero.name | uppercase }} UppercasePipe -->

<h2>{{ hero.name }} Details</h2> <div><span>id: </span>{{hero.id}}</div> 

<div><span>name: </span>{{hero.name}}</div>


4) src/app/app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
  4.  
  5. import { AppComponent } from './app.component';
  6. import { HeroesComponent } from './heroes/heroes.component';
  7.  
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. HeroesComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. FormsModule
  16. ],
  17. providers: [],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }




6. 확인

7. 이어서는...

 - 이후 내용은 하나씩 따라하다보니 입력을 못함.

 - 크게 어려운건 없어보임.

+ Recent posts