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

2021. 4. 29. 03:03 JavaScript FrontEnd/Angular

 

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

 

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

 

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