-
Angular HelloWorldFront-End/Angular 2018. 1. 24. 11:37
Angular with TypeScript 공부중
예제 하나씩 따라 가보면서 기본적인 개념만 정리해볼까 한다.
이래야 진도빼는 재미가 좀 있지 않을까?
예전 생각도 좀 나면서.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<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/typescript/lib/typescript.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>
<hello-world></hello-world>
</body>
</html>AngaulrJS 1.x 를 2개의 프로젝트에서 다뤄봤으나
Angular 자체는 문법이 정말 생소하다. C++ 같은 OOP 느낌
해당 필수 script 의 필요 이유 설명은
http://blog.jeonghwan.net/2016/08/23/about-angular2-quickstart-libraries.html
이 블로그에 잘 정리해 두신듯.
1. System.import app 으로 시작
2. systemjs.config.js 설정을 읽어 드림
'app' : { main : 'main', defaultExtension : 'ts' }
3. app/main.ts 파일을 읽어 드림
4. app.module 파일을 읽어 드림
5. 컴퍼넌트 장착
6. 헬로 월드 컴퍼넌트 리드
실행화면
실행파일
package.json
{
"name": "helloworld",
"description": "HelloWorld Post",
"private": true,
"scripts": {
"start": "live-server"
},
"dependencies": {
"@angular/common": "^4.1.0",
"@angular/compiler": "^4.1.0",
"@angular/core": "^4.1.0",
"@angular/platform-browser": "^4.1.0",
"@angular/platform-browser-dynamic": "^4.1.0",
"@angular/router": "^4.1.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"rxjs": "5.3.0",
"systemjs": "0.19.47",
"zone.js": "^0.8.5"
},
"devDependencies": {
"live-server": "1.2.0",
"typescript": "^2.3.3"
}
}실행시 cd auction 으로 이동
npm install 실행 ~
'Front-End > Angular' 카테고리의 다른 글
@Input 데코레이터 (0) 2018.02.08 Componentt 간 통신 Emmit (0) 2018.02.07 attribute property 차이 (0) 2018.02.01 Angular 생소한 문법 Arraw (1) 2018.01.26 AngularJS Router (0) 2018.01.24 댓글
AngularPosting.zip