Angular.io 에서 제공하는 튜토리얼을 정리한 것입니다.
사진 클릭시 튜토리얼로 이동
!! RC4기준 !!
1. Introduction
package.json 프로젝트에 필요한 package 들의 list
tsconfig.json TyleScript compiler configration file.
typings.json identifies typeScript definition files
systemjs.config.js SystemJS 정의 파일
2. The Hero Editor
1. 프로젝트 구조
2. app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { Component } from '@angular/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> ` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; } | cs |
template이 여러 줄 일때는 따옴표 대신 back-ticks( Tab 키 위의 ` )을 사용한다.
이중 중괄호{{}} 는 component에 있는 properties를 읽으라는 의미이다. 이 것은 one-way data binding의 보간 방법이다.
3. main.ts
1 2 3 | import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent); | cs |
4. index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html lang="en"> <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"> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app> Loading... </my-app> </body> </html> | cs |
모든 Angular app은 1개 이상의 root component를 가진다.
root component는 index.html에서 가지는 my-app을 selector로 가지고있는 app.component.ts이다.
하나이상의 import 가능, import 할때 경로는 ' 와 " 모두 가능
컴포넌트 지정할 tag 이름(my-app)은 @Component의 selector 속성에 작성
html의 tag안에 @Component의 template이 보여짐
template의 내용이 없으면 tag 안의 내용이 보임 (Loading... 이런 것들), 화면 기다릴때 이미지나,할것 띄워줄 때 사용하는 용도로 사용
ngModel 양방향 바인딩을 가능하게 해주는 directive이다.
3. Master/Detail
1. app.component.ts
- metadata의 style['~~']은 따로 빼내어 CSS파일로 만든다.
- Style을 먹일 때는 [ ] 를 사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import { Component } from '@angular/core'; export class Hero { id: number; name: string; } 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' } ]; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div> `, 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; } `] }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } } | cs |
4. Multiple Components
여러 컴포넌트를 사용하는 방법
기본 component.ts에 다른 ts들을 import 시키고 컴포넌트 속성에 directives:[x,x..]로 사용
java의 DAO처럼 정보만을 가진 ts도 존재, 그런 것은 import만 시키면 됨
'ANgularJS 2.0+' 카테고리의 다른 글
| [AngularJS 2.0] AngularJS 2.0 Tutorial3_routing (0) | 2016.09.19 |
|---|---|
| [AngularJS 2.0] AngularJS 2.0 Tutorial2_service (0) | 2016.09.19 |
| angular interval interceptor (수정중) (0) | 2016.09.06 |
| observable 관련 (수정중) (0) | 2016.09.06 |
| ng2-translate 2.2.2 (0) | 2016.08.25 |