0_Angular 2 소개
5분 퀵 스타트
- app/app.component.ts
——————————————————
// 모든 앱은 적어도 하나의 root 컴퍼넌트를 가져야 한다.
// 이름이 보통 AppComponent로 불리고, 클라이언트의 사용자 경험을
// 담당한다. 화면 일부를 제어하는 역할을 한다.
// Component는 Angular의 가장 기본적인 블럭 요소이다.
import { Component } from '@angular/core';
// Component는 데코레이션 함수이며 인자로 메타데이터 {..} 가짐
// —> 이 함수를 컴퍼넌트 클래스에 적용
// 메타데이터는 angular가 이 컴퍼넌트를 어떻게 만들고 사용 할지를 알려 준다.
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
// (1) selector: html에서 my-app을 만나면 그 위치에서 AppComponent
// 객체를 만들고 화면 출력함
// (2) template: html에 이 컴퍼넌트의 데이터를 바인딩하거나
// 다른 컴퍼넌트를 연결함
export class AppComponent { }
// 다른 곳에서 이 컴퍼넌트를 import 할 수 있도록 속성과 로직을 내보냄
——————————————————
// 우리가 만든 앱과 기본 앵귤러 앱과의 연관성을 보여 준다.
// Angular 앱은 앵귤러 모듈들과 상호 인접하게 연관된 기능들로 분해 가능하다.
// 앱은 적어도 하나의 모듈이 있어야 하며, 이것은 root 모듈이며,
// AppModule로 불린다.
// AppComponent를 import해서 declarations, bootstrap에 적용한다.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
// 브라우저 내에서 앱을 실행시키기 위해 필요하다. 비슷한 것들은
// FormsModule, RouteModule, HttpModule 등이 있다.
export class AppModule { }
——————————————————
앱 모듈을 로드한다고 앵귤러에게 알려야 함.
브라우저에서 앱을 시작할 수 있거나 모바일에서 시작할 수도 있다.
이런 선택의 설정이 가능하다.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
// 여기에서는 브라우저에서 bootstrap했지만
// 다른 bootstrapper와 함께 다중 환경에서 AppModule을 시작할수도 있다.
// 예를 들면, mobile device에서는 Apache Cordova나 NativeScript로
// 로드할 수도 있다.
——————————————————
html 내에서 여러가지 다양한 패키지들을 사용해도 runtime에서 손실이 없다.
각 패키지들은 요구될 떄 로딩되기 떄문이다.
앵귤러의 실행 순서를 보면 다음과 같다.
main.ts의 bootstrapModule 함수를 호출 —>
AppModule 메타 데이터를 읽음 —>
AppComponent가 시작 컴퍼넌트임을 인지 —>
my-app selector 발견 —>
index.html내에 my-app태그 위치를 찾음.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
// core-js: ES2015(ES6)
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
// my-app태그는 AppComponent의 selector에 설정되어 있었다.
// 이 태그 사이에서 어플리케이션 뷰를 rendering한다.
</body>
</html>
그 외,
앱을 실행시키는 명령은
npm start
인데,
ts를 js로 번역하는 일, server를 실행하는 일을 한다.
실행 중에도 내용 변화가 있으면 실시간 반영됨(watch mode)
lib의 업데이트는 package.json을 주로 바꾸고,
index.html에서 css, lib를 추가한다.
댓글 없음:
댓글 쓰기