[Angular] 튜토리얼(Introduction, The Application Shell, The Hero Editor)

 

Angular Tutorial

아래 튜토리얼은 1~3

• Introduction
• The Application Shell
• The Hero Editor

 

Introduction

Tour of Heroes

위 튜토리얼은 Angular의 fundamentals를 커버 할 수 있음

• 튜토리얼 구성
  • Use built-in Angular directives to show and hide elements and display lists of hero data.
  • Create Angular components to display hero details and show an array of heroes.
  • Use one-way data binding for read-only data.
  • Add editable fields to update a model with two-way data binding.
  • Bind component methods to user events, like keystrokes and clicks.
  • Enable users to select a hero from a master list and edit that hero in the details view.
  • Format data with pipes.
  • Create a shared service to assemble the heroes
  • Use routing to navigate among different views and their components.

튜토리얼 마치면 https://embed.plnkr.co/?show=preview 처럼 만들 수 있음
그러니까 믿고 따라와

 

The Application Shell

• Install the Angular CLI
  • $ npm install -g @angular/cli
• Create a new application
  • $ ng new angular-tour-of-heroes
• Serve the application
  • $ cd angular-tour-of-heroes
  • $ ng serve --open
• Angular Components
  • AppCompnent는 Angular component
  • components는 Angular applications의 blocks으로 이루어진 fundamental
  • data를 스크린에 보여주거나, user input을 listen하는 등의 역할을 ㅎㄴ다.
• Change the application title
  • src/app 폴더로 이동하면, AppComponent를 볼 수 있음
  • ts - TypeScript로 쓰여진 component class code
  • html - HTML로 쓰여진 component template
  • css - component's private CSS styles
  • app.component.ts에서 tiltle property를 변경
  • app.component.html에서

    {{title}}

  • {{}} double curly braces는 Augular의 interpolation binding syntax
• Add application styles
  • 모든 앱에서는 consistent look을 원한다.
  • CLI는 styles.css를 empty로 생성한다 (위의 목적으로)
  • application-wide styles을 empty styles.css에 적용하면 된다.
• Final Code
  • https://angular.io/generated/live-examples/toh-pt0/eplnkr.html

 

The Hero Editor

• Create the heroes component
  • CLI를 이용해서 새로운 component인 heroes를 생성해보자
  • $ ng generate component heroes
  • 그 결과 /src/app/heroes가 생성되고, HeroesComponent의 3개 파일이 생성된다.
  • 항상 Component(Angular core library) symbol import와 @Compnent annotate
  • @Component는 decorator function (Angular metadata를 지정)
  • CLI는 3가지 metadata properties를 생성
    • selector - the components CSS element selector
    • templateUrl - the location of the component's template file
    • styleUrls - the location of the component's private CSS styles
  • The CSS element selector, 'app-heroes', matches the name of the HTML element that identifies this component within a parent component's template.
  • ngOnInit은 Angular 의 lifecyle에서 component를 생성한 이후에 호출됨 (initialization logic을 넣으면 된다.)
  • 항상 다른곳으로 가져올 수 있도록 component class를 export해야한다. (AppModule과 유사함)
  • Add a hero property
  • heroes.components.ts
    • hero = 'Windstorm';
  • show the hero
  • heroes.component.html
    • {{hero}}
  • show the heroesComponent view
  • 추가하기 위해서 위에서 metadata properteis에서 selector 명을 넣으면 된다.
  • src/app/app.component.html

    • {{title}}

    •  
  • create a hero class
  • src/app/hero.ts
    • export class Hero { id: number; name: string; }
  • src/app/heroes/heroes.component.ts
    • HeroesComponent에서 사용하기 위해서
    • import { Hero } from '../hero';
    • hero: Hero = { id: 1, name: 'WindStorm' }
  • Show the hero object
  • heroes.component.html
    • {{hero.name}} detailsname: {{hero.name}}}
    • id: {{hero.id}}}
  • UppercasePipe format 사용
  • 여기서 사용하는 Pipes는 내가 생성도 가능, 이미 built-in pipes가 있음
  • {{ hero.name | uppercase }} Details
• Edit the hero
  •  textbox로 입력을 받을 수 있다.
  • Two-way binding
  • src/app/heroes/heroes.component.html
    • [(ngModel)]은 Angular's two-way data binding syntax
    • name: 
• The missing FromsModule
  • [(ngModel)]을 추가할때 app은 작동하지 않는다.
  • browser console에도 Template parse erros: 가 발생할 것이다.
  • ngModel은 Angular에서 valid하지만 기본적으로 사용은 불가하다.
  • ngModel은 optional FormsModule에 속하기 때문에 opt-in을 무조건 해야한다.
• AppModule
  • Angular는 app이 요구하는 libraries와 파일의 위치를 다 알아야 하는데, 그 정보들을 metadata라고 한다.
  • @Component decorator에 있는 metadata는 component classes에 추가가 된다.
  • 다른 critical metdata는 @NgModule decorators에 속해 있다.
  • 가장 중요한 @NgModule decorator는 top-level AppMoudle class를 annotates
  • CLI는 프로젝트 생성시 AppMoudle class를 src/app/app.module.ts에 생성한다. 여기서 FormsModule을 opt-in 한다.
• Import FormsModule
  • AppModule(app.module.ts)에 FormsModule(@angular/forms library에 속해있음) symbol을 import를 한다.
  • import { FormsModule } from '@angular/forms'; <-- NgModel lives here
  • 추가를 한 뒤에 FormsModuel을 @NgModule metatdata's imports array에 추가한다.
  • import arrays에는 앱에서 필요한 external modules의 리스트를 포함하고 있다.
  • 적용하기 위해서는 browser를 refreshes
• Declare HeroesComponent
  • 모든 component는 정확하게 하나의 NgModule로 선언이 되어야 한다.
  • 위에서 생성한 HeroesComponent를 declare하지 않았는데, 앱은 정상적으로 동작을 한다.
  • 그 이유는 Angular CLI에서 프로젝트 생성시 HeroesComponent를 AppModule에 declared했기 때문이다.
  • src/app/app.module.ts를 보면 HeroesComponent가 import가 된걸 확인할 수 있다.
  • HeroesComponent는 @NgModule.declarations array에도 선언이 되어 있다.
  • AppModule은 모든 application components를 선언해야한다.
• Final code review
  • https://angular.io/generated/live-examples/toh-pt1/eplnkr

 

출처 : ourcstory.tistory.com/428?category=630698