Hello Jay's Programming World!

Naming Convention Component 파일은 '.component'로 파일이름이 끝나야한다. 그리고 소문자와 dash('-')로 구성된 이름을 사용한다. ex) hero-detail.component.ts - component 파일의 구성은 다음과 같다. import { Component, Input } from '@angular/core'; @Component({ selector: 'my-hero-detail', template: ` {{hero.name}} details! id: {{hero.id}} name: ` }) export class HeroDetailComponent { } 1. Component와 Input을 import한다. 2. @Component 키워드를 사용해서 Com..

- ngFor를 이용해서 배열을 출력할 수 있다. ngFor를 쓸때는 반드시 앞에 *를 붙여줘야한다. {{hero.id}} {{hero.name}} - Style도 `를 이용하여 멀티 라인 텍스트로 사용가능하다. styles: [` .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; ... ... ... margin-right: .8em; border-radius: 4px 0 0 4px; } `] - ngIf를 사용하면 해당 데이터가 있을 때만, 보여주게 할 수 있다. ngIf 또한 앞에 *를 반드시 붙여줘야한다. {{selectedHero.nam..

1. 객체의 값을 보여주기 위한 단방향 데이터 바인딩을 위해서 이중 괄호 보간법을 사용한다. template: '{{title}}{{hero.name}} details!' 2. 멀티 라인 템플릿을 사용하기 위해서 ES2015의 템플릿 문자열을 사용한다. template:` {{title}} {{hero.name}} details! id: {{hero.id}} name: {{hero.name}} ` 3. ngModel을 이용하여 양방향 데이터 바인딩을 할 수 있다. '' 4. ngModel은 바인딩되어 있는 모든 곳에 변화를 전파한다.

앵귤러 아키텍처 사용자용 애플리케이션 개발을 위한 프레임워크. 사용자와 접촉하게 될 애플리케이션의 뷰와 핵심 비지니스 로직 작성 외에 모든 것을 관리해 주는 도구. 따라서 앵귤러 개발은 다음의 두 단계를 거친다. 1. 사용자와 상호작용할 뷰를 구성. 2. 뷰와 연결된 일련의 로직을 개발. 앵귤러를 학습한다는 것은 앵귤러의 구조와 실행 방식을 이해하고 이에 맞게 뷰와 비지니스 로직을 개발하는 방법을 이해하는 것. 뷰를 구성하는 요소 템플릿- 뷰를 구성할 마크업을 포함한 앵귤러에서 제공하는 문법으로 작성.- 화면을 구성하는 틀이라는 의미. 컴포넌트 (Component)- 앵귤러에서 가장 중요한 요소로서 뷰에서 일어나는 모든 일을 관리.- 보통은컴포넌트 하나가 화면 전체를 담당하도록 만들지 않고, 기능이나 공..