Tour of Heroes 예제 따라하기

1. Application에 Router모듈을 생성한다.

- ng generate module app-routing --flat --module=app 명령어로 생성

- Console출력에서 생성된 파일과 수정된 파일을 확인

2. router module Class를 수정해서 Application에서 사용할 수 있도록 export

- src/app/app-routing.module.ts 파일을 수정

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule]
})
export class AppRoutingModule { }

3. routes 추가하기

- Route에는 두가지 속성값이 있는데 path와 component가 있는데

- path : 주소창에 보여지는 문자

- component : 해당 주소가 호출되었을때 보여질 component

- src/app/app-routing.module.ts 파일을 수정

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';


const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  exports: [ RouterModule]
})
export class AppRoutingModule { }

4. Router를 초기화

- Router를 초기화 하고 브라우져 주소창 변화를 감지하기 위해 RouterModule.forRoot 추가

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';


const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule]
})
export class AppRoutingModule { }

5. RouterOutlet을 정의해서 출력부분을 지정한다.

- src/app/app.component.html 파일 수정

{{title}}

6. routerLink를 사용하여 화면 링크 구성

- src/app/app.component.html 파일 수정

{{title}}

- 브라우져에서 확인하면 초기화면에는 hero목록이 사라졌고 링크만 나오는데 링크를 클릭시 hero목록이 표시됨

7. DashBoard View를 생성한다.

- ng generate component dashboard 명령어로 생성 후 Console확인

8. dashboard 컴포넌트의 Template 파일을 수정

- src/app/dashboard/dashboard.component.html

Top Heroes

  
    

      
{{hero.name}}
    
  

9. dashboard component class 파일을 수정

- src/app/dashboard/dashboard.compont.ts

    import { Component, OnInit } from '@angular/core';
    import { Hero } from '../hero';
    import { HeroService } from '../hero.service';
     
    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: [ './dashboard.component.css' ]
    })
    export class DashboardComponent implements OnInit {
      heroes: Hero[] = [];
     
      constructor(private heroService: HeroService) { }
     
      ngOnInit() {
        this.getHeroes();
      }
     
      getHeroes(): void {
        this.heroService.getHeroes()
          .subscribe(heroes => this.heroes = heroes.slice(1, 5));
      }
    }

10. dashboard component의 style파일 수정

- src/app/dashboard/dashboard.component.css

    /* DashboardComponent's private CSS styles */
    [class*='col-'] {
      float: left;
      padding-right: 20px;
      padding-bottom: 20px;
    }
    [class*='col-']:last-of-type {
      padding-right: 0;
    }
    a {
      text-decoration: none;
    }
    *, *:after, *:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    h3 {
      text-align: center; margin-bottom: 0;
    }
    h4 {
      position: relative;
    }
    .grid {
      margin: 0;
    }
    .col-1-4 {
      width: 25%;
    }
    .module {
      padding: 20px;
      text-align: center;
      color: #eee;
      max-height: 120px;
      min-width: 120px;
      background-color: #607D8B;
      border-radius: 2px;
    }
    .module:hover {
      background-color: #EEE;
      cursor: pointer;
      color: #607d8b;
    }
    .grid-pad {
      padding: 10px 0;
    }
    .grid-pad > [class*='col-']:last-of-type {
      padding-right: 20px;
    }
    @media (max-width: 600px) {
      .module {
        font-size: 10px;
        max-height: 75px; }
    }
    @media (max-width: 1024px) {
      .grid {
        margin: 0;
      }
      .module {
        min-width: 60px;
      }
    }

11. 기본 route 및 dashboard route등록

- src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';


const routes: Routes = [
  {path : '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule]
})
export class AppRoutingModule { }

12. 현재까지 작업된 결과를 확인

- http://localhost:4200 으로 접속시 주소는 자동으로 http://localhost:4200/dashboard 로 redirect되며 아래와 같은 화면이 보여진다.

13. 화면간 이동을 위해 dashboard 링크를 생성

- src/app/app.component.html

- 수정후 브라우져에서 dashboard와 heroes 화면 이동을 확인

{{title}}

14. hero component에서 hero내용을 수정하는 부분을 herodetail component에서 보여주기 위해 Template파일 수정

- src/app/heroes/heroes.component.html 출력부분 삭제

My Heroes

  

    {{hero.id}} {{hero.name}}
  

15. 상세보기에 대한 route 등록

- src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';


const routes: Routes = [
  {path : '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'heroes', component: HeroesComponent },
  { path: 'detail/:id', component: HeroDetailComponent}, 
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule]
})
export class AppRoutingModule { }

17. dashboard component에서 hero detail로 routerLink 생성

- src/app/dashboard/dashboard.component.html

Top Heroes

  
    

      
{{hero.name}}
    
  

18. heroes list에서 작동방식을 onSelect 호출에서 routerLink방식으로 변경

- src/app/heroes/heroes.component.html

19. heroes component 에서 불필요 코드 삭제

- src/app/heroes/heroes.component.ts 파일에서 아래 부분만 필요

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

import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }
}

20. HeroDetail component를 route형식으로 변경

- src/app/hero-detail/hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
import { ActivedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService } from '../hero.service';

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

  @Input() hero: Hero;

  constructor(
  	private route: ActivedRoute,
  	private heroService: HeroService,
  	private location: Location
  ) { }

  ngOnInit(): void {
    this.getHero();
  }
 
  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }
 
  goBack(): void {
    this.location.back();
  }

}

21. HeroService에 gtHero() 메소드를 추가

- src/app/hero.service.ts 파일에 추가

getHero(id: number): Observable {
  // Todo: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

22. 뒤로가기 버튼 추가

- src/app/hero-detail/hero-detail.component.html 파일에 추가

  
{{ hero.name | uppercase }} Details
  
id: {{hero.id}}
  

    name:
      
    
  
  go back

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
import { ActivedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService } from '../hero.service';

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

  @Input() hero: Hero;

  constructor(
  	private route: ActivedRoute,
  	private heroService: HeroService,
  	private location: Location
  ) { }

  ngOnInit(): void {
    this.getHero();
  }
 
  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }
 
  goBack(): void {
    this.location.back();
  }

}

Tour of Heroes 예제 따라하기

1. Hero Service를 생성한다.

- ng generate service hero 명령어로 생성

- Console를 확인해보면 생성된 파일 목록을 보여준다.

2. 생성된 heroService ts파일에 Hero와 HEROES 를 import한다.

- src/app/hero.service.ts파일을 수정

import { Injectable } from '@angular/core';
import { Hero } from './hero'; //추가
import { HEROES } from './mock-heroes'; //추가

@Injectable()
export class HeroService {

  constructor() { }
  
  /* 추가 */
  getHeroes(): Hero[] {
    return HEROES;
  }

}

3. Application 에 HeroService를 등록한다.

- Service 생성시 ng generate service hero --module=app 명령어로 생성시 자동 등록되지만 --module옵션을 사용하지 않았으므로 수동으로 등록한다.

- src/app/app.module.ts 파일의 providers 항목에 추가

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroService } from './hero.service'; //추가


@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule   
  ],
  providers: [
    HeroService //추가
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. HeroesComponent clsss에 HeroService를 등록

- src/app/heroes/heroes.component.ts 파일에서 HEROES를 HeroService로 수정

- 생성자에 HeroService Injection

- Service에서 heroes를 검색하는 function 추가

- ngOnInit function에서 getHeroes 호출

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero'; 
//import { HEROES } from '../mock-heroes'; 삭제
import { HeroService } from '../hero.service'; //추가 

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

  //heroes = HEROES; 삭제
  heroes: Hero[]; //추가 
  
  selectedHero: Hero; 
  
  
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
  
  constructor(private heroService: HeroService) { } //수정
  
  /* 추가 */
  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  ngOnInit() {
    this.getHeroes(); //추가
  }
}

5. Http 연동을 위해 HeroService에 Observable 모듈등록

- src/app/hero.service.ts 파일에 Observalbe import한다

- getHeroes 함수를 Observable모듈로 수정한다.

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable } from 'rxjs/Observable'; //추가
import { of } from 'rxjs/observable/of'; //추가

@Injectable()
export class HeroService {

  constructor() { }  
  
  /* 수정 */
  getHeroes(): Observable {
    return of(HEROES);
  }

}

6. HeroService의 getHeroes함수를 호출하는 HeroesComponent class 수정

- src/app/heroes/heroes.component.ts 파일에서 4번에서 추가된 getHeroes() function 수정

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero'; 
import { HeroService } from '../hero.service'; 

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  
  heroes: Hero[]; 
  
  selectedHero: Hero;   
  
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
  
  constructor(private heroService: HeroService) { } 
  
  getHeroes(): void {
    //this.heroes = this.heroService.getHeroes();
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }

  ngOnInit() {
    this.getHeroes(); 
  }
}

7. Message 보여주기 위한 message Component 생성

- ng generate component messages 명령어로 생성(※아래 그림은 오타임)

- Console을 확인해 보면 생성된 파일과 수정된 파일의 목록을 보여준다.

8. Message를 보여주기 위해 Application메인 Template에 message영역을 추가한다.

- src/app/app.component.html 파일을 수정

{{title}}

9. Message Service 생성

- ng generate service message --module=app 명령어로 service를 생성하면서 Application에 등록을 한다.

- Console을 확인해 보면 생성된 파일과 수정된 파일의 목록을 보여준다.

- 생성된 MessageService class에 method를 등록한다.(src/app/message.service.ts 파일)

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

@Injectable()
export class MessageService {
  /* 삭제 */
  //constructor() { } 
  /* 아래 전체 추가 */
  message: string[] = [];
  
  add(message: string) {
    this.message.push(message);
  }
  
  clear() {
    this.message = [];
  }

}

10. HeroService에 MessageService Injection

- HeroService에 MessageService를 연결한다.(src/app/hero.service.ts)

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of'; 
import { MessageService } from './message.service'; //추가

@Injectable()
export class HeroService {
  /* 생성자 수정 */
  constructor(private messageService: MessageService) { }  
  
  getHeroes(): Observable {
    return of(HEROES);
  }
}

11. HeroService에서 message 보내기

- Hero를 클릭할때 메시지를 보내도록 getHeroes method를 수정한다.(src/app/hero.service.ts)

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of'; 
import { MessageService } from './message.service'; 

@Injectable()
export class HeroService {
  
  constructor(private messageService: MessageService) { }  
  /* 수정 */
  getHeroes(): Observable {
    this.messageService.add('HeroService : fetched heroes');
    return of(HEROES);
  }

}

12. HeroService에서 보내온 message 보여주기

- MessageComponent에 MessageService를 등록하고 생성자에 MessageService를 Injection(src/app/message/message.component.ts)

※ Angular에서 Template에 binding하기 위해서는 public으로 선언되어야 한다.

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service'; //추가


@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {
  /* 수정 */
  constructor(public messageService: MessageService) { }

  ngOnInit() {
  }

}

13. MessageService Binding

- Message를 화면에 보여주기 위해 Template파일을 수정(src/app/messages/messages.component.html)

14. 결과화면

[Angular4] Tour of Heroes 예제 따라하기 4

1. Angular CLI 를 이용해서 hero-detail Component를 생성한다.

- ng generate component hero-detail 명령어로 생성

- Console를 확인해보면 생성된 파일과 수정된 파일 목록을 보여준다.

2. 생성한 hero-detail Component의 Template 파일을 수정한다.

- src/app/hero-detail/hero-detail.component.html 파일을 수정

	
{{ hero.name | uppercase }} Details
	
id: {{ hero.id }}
	

		name:
			
		
	

- 작성후에는 오류가 발생하는데 오류발생이유는 hero-detail Component에서 모듈을 사용할 수 있게 ts파일에 등록을 해야 한다. 

3. hero-detail Component에 hero 클래스와 각 Component를 사용할 수 있게 ts 파일에 등록한다.

- src/app/hero-detail.hero-detail.component.ts 파일을 수정

- 위에서 발생한 오류가 사라진다.

import { Component, OnInit, Input } from '@angular/core'; //Input 추가
import { Hero } from '../hero'; //추가

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero : Hero; //추가

  constructor() { }

  ngOnInit() {
  }

}

4. 화면을 Master / Detail 구조로 변경한다.

- src/app/heroes/heroes.component.html 파일을 수정한다.

- hero의 상세부분을 hero-detail Component가 Display되게 수정

- 아래와 같이 수정을 하면 화면에서는 변경사항이 없는데 hero-detail Template을 변경해 보면 정상적으로 hero-detail Component가 호출됨을 알 수 있다. 

My Heroes

	

		{{hero.id}}{{hero.name}} 
	

Angular Tour of Heroes Tutorial 따라하기 3

1. 보여줄 목록을 작성한다.

- src/app/mock-heroes.ts 파일을 생성해서 아래와 같이 작성한다.

- HEROES 상수를 Hero 배열로 정의하고 다른 모듈에서 사용할 수 있게 정의

import { Hero } from './hero';

export const HEROES: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr. IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
];

2. 위에서 정의한 HEROES 배열을 HeroesComponent에서 사용할 수 있게 heroes.component.ts 파일에 등록

- src/app/heroes/heroes.component.ts 파일을 열고 아래와 같이 수정한다.

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero'; 
import { HEROES } from '../mock-heroes'; //추가

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  /* 목록을 사용하므로 삭제
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  */
  heroes = HEROES; //추가
  
  constructor() { }

  ngOnInit() {
  }
}

3. HeroesComponent 의 Template 파일에서 *ngFor 반복문으로 목록을 보여준다.

- src/app/heroes/heroes.component.html 파일을 열어서 아래와 같이 수정한다.

※ *ngFor 는 Angular에서 반복문을 나타내는 지시자이다.

My Heroes

	

		{{hero.id}}{{hero.name}}

[현재까지 작업내용을 실행하면 목록이 나타남을 볼 수 있다]

4. 위에서 보여진 목록에 css파일을 적용한다.

- HeroesComponent 의 css파일을 열어서 필요한 스타일을 입력한다.

- src/app/heroes/heroes.component.ts 파일의 styleUrls 에 지정된 파일을 열어서 아래 부분을 추가한다.(src/app/heroes/heroes.component.css)

    /* HeroesComponent's private CSS styles */
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .heroes .text {
      position: relative;
      top: -3px;
    }
    .heroes .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }

[css파일이 적용된 화면]

5. 목록을 click했을때 Detail 화면이 보여질 수 있게 Event를 Binding한다.

- src/app/heroes/heroes.component.html 파일에서 <li> 에 이벤트를 click이벤트를 정의

My Heroes

	

                     {{hero.id}}{{hero.name}} 
	
 
 

6. HeroesComponent onSelect 함수를 추가

- src/app/heroes/heroes.component.ts 파일을 열어서 수정

My Heroes

	

		{{hero.id}}{{hero.name}} 
	

7. Template 파일에 양방향 바인딩을 할 상세보기 영역을 추가

- src/app/heroes/heroes.component.html 파일을 열어서 내용을 추가

My Heroes

	

		{{hero.id}}{{hero.name}} 
	



{{ selectedHero.name | uppercase }} Details
id: {{selectedHero.id}}

  name:
    
  

8. 선택된 목록이 없을때 상세보기 영역을 보여지지 않게 if문으로 처리

- *ngIf 는 Angular에서 조건문을 처리하는 지시자이다

My Heroes

	

		{{hero.id}}{{hero.name}} 
	



	
{{ selectedHero.name | uppercase }} Details
	
id: {{selectedHero.id}}
	

	  name:
	    
	  
	

9. 마지막으로 목록에서 선택된 항목 표시하기

- Template 파일에서 선택된 항목에 css 적용

- 최종 화면에서 정상적으로 작동을 하는지 확인(양방향 바인딩, css변경, 선택된 목록이 없을때 상세화면 hide...)

[최종 화면]

Angular Tour of Heroes Tutorial 따라하기 2

1. Angular CLI를 이용해서 heroes component를 생성

- STS Terminal에서 ng generate component heroes 명령어로 heroes Component를 추가

＊ng generate component [component name] 형식으로 사용

[설치 완료된 화면]

- 생성된 파일과 변경된 파일의 목록이 보여진다.(STS에서 확인)

2. heros Component에 Property를 추가한다.

- src/app/heroes/heroes.component.ts 파일에 추가

import { Component, OnInit } from '@angular/core'; 
@Component({
 selector: 'app-heroes',
 templateUrl: './heroes.component.html',
 styleUrls: ['./heroes.component.css']
 }) 
export class HeroesComponent implements OnInit {
 hero = 'Windstorm'; //추가
 constructor() { 
 }
 ngOnInit() {
 } 
} 

3. 위에서 추가한 hero 변수를 바인딩해서 보여준다.

- heroes.component.html 파일을 변경

{{hero}}

4. 작성한 Component를 Application 메인에 연결을 한다.

- src/app/app.component.html 파일을 변경

5. STS Terminal 에서 ng serve 명령으로 Application을 실행하고 브라우져에서 http://localhost:4200 으로 접속

[app-heros 영역에 heroes.component.html의 내용이 보여진다]

6. Hero class를 작성한다.

- src/app/hero.ts 파일을 새로 생성 후 class를 작성한다. 

export class Hero {
   id: number;
  name: string;
}

- heroesComponent에 방금 생성한 Hero class를 등록한다.(src/app/heroes/heroes.component.ts 파일을 수정)

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero'; //추가

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  //hero 수정
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  
  constructor() { }

  ngOnInit() {
  }
}

7. heroesComponent Template에 hero Object를 보여준다.

- src/app/heroes/heroes.component.html 파일을 수정한다.

- 웹브라우져에서 확인

8. hero name을 양방향 바인딩 하여 수정이 가능하게 한다.

- src/app/heroes/heroes.component.html 파일을 수정

- 양방향 바인딩은 [(ngModel)] keyword를 이용해서 바인딩처리(uppercase keyword는 대문자로 변경하는 함수) 

- ng Server가 재시작이 되면 오류가 발생한다.

＊ngModel을 사용하려면 AppModule에 @angular/forms libery를 등록해야 한다.

- src/app.module.ts 파일을 수정한다.

9. ng Server가 재기동 되면 양방향 바인딩을 확인

- 브라우저에서 사용자가 입력하는 값에 따라 Text가 변경되는지 확인

Angular Tour of Heroes Tutorial 따라하기

※ 저도 Angular로 개인적인 Project를 진행하기 위해서 공부하는 내용을 정리한것이므로 오류가 있을 수 있으니 잘못 된 점은 댓글로 남겨주시면 감사하겠습니다.

개발환경은 Spring Tool Suit + Angular plug-in 입니다.

개발환경 셋팅은 2018/03/13 - [개발/Front-End] - [Angular4] Eclipse에 Angular 개발환경 구축 참고

1. STS에서 Angular Project 생성

- File > New > Angular Project 선택

2. Project 기본 환경 설정

- Project 명을 입력한 후 다른 값들은 기본 설정으로 Next버튼을 클릭

3. Project 설정 확인

- 기본 설정에 따른 명령어를 보여주는데 이상이 없으면 Finish버튼 클릭

4. Project 생성

- STS Terminal 창에서 3번에서 보여준 명령어를 실행해서 Angular Project를 생성한다.

[Project를 생성하는 중]

[Project 생성완료]

5. ng server 구동

- STS 하단 Termianl 창에서 ng -serve 명령어로 구동확인후 브라우져에서 http://localhost:4200 확인

[정상 구동된 상태]

6. Application 초기 화면을 설정을 수정한다.

- 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 = 'Tour of Heroes';
}

- 해당 파일 4라인의 selector에 지시된 'app-root'는 src/index.html파일의 <app-root></app-root>영역에 templateUrl에 지정된 파일을 로딩한다.

- 해당 파일 5라인의 templateUrl에 지정된 html 파일을 화면에 보여준다.

- 해당 화면의 stylesheet 파일은 6라인의 styleUrls에 지정된 css파일을 적용한다.

- 해당 화면에서 사용될 변수 title 의 값을 변경한다.

7. 호출되는 초기화면의 내용을 수정한다.

- src/app/app.component.html 파일을 수정

{{title}}

- {{ }} 내에 app.component.ts 파일에서 설정한 변수를 넣어주면 AngularJs는 바인딩을 한다.

- 이중괄호 {{ }}는 단방향 바인딩을 한다.

-양방향 바인딩을 하기 위해서는 Forms라는 Angular기본 제공 모듈을 사용해야 한다.

8. Application 전반에 걸처 사용될 css파일을 수정한다.

- src/app/app.component.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;
}

9. 변경 내용을 확인

- AngularJs 관련 파일 수정후 저장시 ng server가 자동으로 재기동 되면서 해당 브라우져가 자동으로 리로딩된다.

Spring Tool Suit 환경에서 Angular 개발 환경 구축하기

※ Spring Tool Suit에 Angular개발환경을 구축하기 위해서는 nodejs 설치가 필요하다.

Angualr4 기본 설치는 2018/03/02 - [개발/Front-End] - [Angular4] Angular4 개발환경 구축 참고

1. STS에 Angular IDE 설치

- https://marketplace.eclipse.org/content/angular-ide 주소로 들어가서 Angular IDE install 버튼을 현재 실행중인 STS로 Drag&Drop 한다.

2. STS 작업영역에 Drag&Drop 되면 플러그인 설치 팝업창이 오픈된다.

[설치 플러그인 지정]

[라이센스 동의]

[STS 재시작]

3. STS 재시작시 Angular 작업에 대한 기본 환경을 셋팅하는 팝업창이 나타난다.

[Angular plug-in 소개화면]

[Angular roadmap 선택후 Next]

[STS화면 Style 셋팅]

[초록색 실행 버튼을 클릭해서 STS실행]

[STS에 Angular plug-in이 설치된 후 실행된 화면] 

Front-End 개발을 위한 Angular4 설치 방법

1. Node.js를 설치한다.

- nodejs 홈페이지에서 자신의 환경에 맞는 파일을 다운로드 후 설치( https://nodejs.org/ )

- nodejs 설치후 cmd창을 오픈한후 node -v & npm -v 명령어로 node버전과 npm버전을 확인

2. Angular-CLI 설치

- cmd창에서 npm install -g @angular/cli 명령어로 Angular-CLI Tool을 설치

[위 이미지는 angular-cli가 설치된 상태에서 명령을 실행을 한 화면임]

- cmd창에서 ng -v 명령어로 Angular-CLI 설치를 확인한다.

3. Angular Client Project 생성

- Angular Project 디렉토리를 생성한 후 해당 디렉토리에서 ng명령어로 Angular Project 기본 파일을 생성한다.

- cmd 창의 Angular Project로 이동한 후 ng new [Project Name] (ex: ng new angular4-client)명령어로 기본파일을 생성.

4. Angular 모듈 설치

- cmd창에서 ng -v 명령어로 모듈설치

5. Client개발을 위한 node서버 Start

- cmd창에서 npm start 명령으로 node서버 구동

6. 브라우져에서 확인

- 브라우져에서 http://localhost:4200 으로 아래 화면이 뜨면 기본적인 Angular-Client 개발을 위한 초기 셋팅은 완료됨.