ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Angular HelloWorld
    Front-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. 헬로 월드 컴퍼넌트 리드


    실행화면


    실행파일

    AngularPosting.zip


    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

    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.