웹앱의 시작점인 index.html을 만들어보자.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>First App</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <!-- 1. Load libraries --> | |
| <!-- IE required polyfills, in this exact order --> | |
| <script src="node_modules/es6-shim/es6-shim.min.js"></script> | |
| <script src="node_modules/systemjs/dist/system-polyfills.js"></script> | |
| <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> | |
| <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> | |
| <script src="node_modules/systemjs/dist/system.src.js"></script> | |
| <script src="node_modules/rxjs/bundles/Rx.js"></script> | |
| <script src="node_modules/angular2/bundles/angular2.dev.js"></script> | |
| <!-- 2. Configure SystemJS --> | |
| <script> | |
| System.config({ | |
| packages: { | |
| app: { | |
| format: 'register', | |
| defaultExtension: 'js' | |
| } | |
| } | |
| }); | |
| System.import('app/main') | |
| .then(null, console.error.bind(console)); | |
| </script> | |
| </head> | |
| <!-- 3. Display the application --> | |
| <body> | |
| <my-app>Loading...</my-app> | |
| </body> | |
| </html> |
일반적인 html 구조이고, system.src.js의 함수가 사용되고 있다. 이 파일은 이전에 만든 package.json의 의존성에 의해 npm install 시에 설치되었다.
25번째 줄에 의해 29번째 줄의 import시에 main.js라고 써주지 않아도 된다.
36번째 줄의 <my-app> tag는 이후 만들 app.component.ts에서 참조 하게 된다.
* ts 는 TypeScript의 확장자이며, 이를 transpile 하여 생긴 결과가 js 파일이다.
'프로그래밍 > AngularJs' 카테고리의 다른 글
| AngularJs 2 - 디렉토리 구조 재배치 (0) | 2016.03.05 |
|---|---|
| AngularJs 2 - display data (0) | 2016.03.04 |
| AngularJs 2 - template.html 분리 & 변수 치환 (0) | 2016.03.04 |
| AngularJs 2 - main.ts & app.component.ts (0) | 2016.03.04 |
| AngularJs 2 - 시작하기 (0) | 2016.03.04 |