잡담소장소

angularjs 2 hello world 본문

Study ;3

angularjs 2 hello world

유부뽀 2016. 2. 23. 15:48


사내 프로젝트로 angularjs2를 사용해본다고 해서 공부해보려고 사이트에 들어갔더니

뭣도 모르겠어서 hello-world 코드부터 분석해본다





index.html 

<!DOCTYPE html>
<html>
  <head>
    Angular 2 Hello World
    
    
    
    
    
    
    
    
    
    
    
    
  </head>
  
  <body>
    Loading...
  </body>
 </html>


app/main.ts 

import {bootstrap}  from 'angular2/platform/browser'; //browser.ts에서 bootstrap을 import
import {HelloWorld} from './hello_world'; //hello_world.ts에서 HelloWorld class import
bootstrap(HelloWorld);


app/hello_world.ts 

import {Component} from 'angular2/core';
@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world', //index.html의 hello-world 
  // Location of the template for this component
  templateUrl: 'app/hello_world.html'
})
export class HelloWorld {
  // Declaring the variable for binding with initial value
  yourName: string = '';
}


app/hello_world.html 








Hello {{yourName}}!


반응형
저작자표시 비영리 변경금지

'Study ;3' 카테고리의 다른 글

angular material  (0) 2017.04.13
ag-grid 사용기  (0) 2016.06.30
키체인에 공개키 추가하기 in Mac  (0) 2015.09.15
xcode - iCloud의 key-value 처음 사용해보기  (0) 2015.09.15
angularJS Tip(일지 아닐지..)  (0) 2015.09.10
'Study ;3' Related Articles more
Comments