Angular 설치

MEAN STACK/Angular

Angular 설치

minwoohi 2018. 9. 12. 09:47

설정 환경 : 노드, 웹스톰(webStorm)
※ 노드는 반드시 설치되어 있어야 한다! (npm 모듈을 사용하기 때문)
사용 툴은 웹스톰이나 MS의 vs code를 추천( 웹스톰은 30일 무료, vs code는 무료 )

Angular 사용하기 위한 설정을 해줘야 한다.

1) Package.json dependencies
2) Ts.config.json : TypeScript 컴파일러가 javaScript 생성하는 방법 정의한 파일
3) Typings.json : TypeScript compiler 인식하지 못하는 라이브러리 추가정의
4) Systemjs.config.js : 처음 Angular2 application이 시작할 때 필요한 packages 을 load 하는 정보가 정의 되어 있다. systemjs.config.js 는 처음 application이 실행 될 때 필요한 패키지 들과 라이브러리 들을 사용 할 수 있게 load 함

https://seccoding.github.io/2017/04/23/angular_dependencies.html

강사님 지킬 접속

Angular Dependencies 클릭

Angular 사용시 필요한 모듈 목록. 복사해 메모장에 붙여넣은 후

띄어쓰기 한칸을 기준으로 한 줄의 명령어로 만든다. Dependencies들을 한꺼번에 설치하기 위함이다.

구형 버전 브라우저들은 Angular에서 지원하지 않는다. 이를 가능하게 해주는 것을 폴리티(?)라 하는데 zone.js가 이를 지원한다. zone.js는 Angular의 버전에 종족되기 때문에 호환되는 버전으로 설정해줘야 한다. @angular/common ^4.1.2와 호환되는 버전은 0.8.4 이다. 따라서 zone.js의 버전을 다음과 같이 설정해준다.
※ ^ 는 "해당 버전 다음의 최신 버전이 있다면 그 버전으로 수행해라" 는 의미이기 때문에 ^를 지운다.
모듈을 다시 설치해야 하기 때문에 npm install --save 명령어로 설치했던 모듈들 마우스 오른쪽 버튼 클릭해 지운다.

다시 해당 폴더에서 npm install을 수행한다 (Package.json의 dependencies를 설치하는 명령어)
이후 모듈 재설치되는 것 확인.

지킬 페이지 다시 접속해 Angular Scripts 들어가 내용을 따라한다. package.json 파일의 Script 를 다음과 같이 변경한다.

- npm run tsc:w 수정되면 재실행시켜줌 (w : watch)
- lite : Angular 실행시킬 수 있는 테스트 서버
- postinstall, tsc, tsc:w, typings는 start를 위한 명령어

폴더에서 tsconfig.json 생성
타입스크립트 생성할 때 필요한 옵션

tsconfig 코드 복사해

붙여넣는다. 이후 html 코드 작성한다. 경로 잘 보고 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- ECMA Script Module Loader Angular가 모듈 개념을 사용하는데 이를 처리하기 위해 필요함 -->
    <script type="text/javascript" src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- ES5와 ES6/7 호환을 위한 라이브러리 -->
    <script type="text/javascript" src="node_modules/es6-shim/es6-shim.min.js"></script>
    <!-- 모든 브라우저에서 Angular가 실행될 수 있도록 지원하는 (polyfills) 라이브러리
            (Reactive Programming을 위한 비동기 지원 라이브러리) -->
    <script type="text/javascript" src="node_modules/zone.js/dist/zone.js"></script>
    <!-- Angular와 타입스크립트를 위한 컴파일러 (디렉티브 지원) -->
    <script type="text/javascript" src="node_modules/reflect-metadata/Reflect.js"></script>
    <!-- Reactive Programming 라이브러리 -->
    <script type="text/javascript" src="node_modules/rxjs/bundles/Rx.js"></script>

    <script type="text/javascript" src="systemjs.config.js"></script>
    <script type="text/javascript">
        // app 폴더 여는동안 에러난다면 다음을 수행하자.
        // System 동작할 수 있도록 하기 위해 systemjs.config.js 포함시켜야 함
        System.import("app")
            .catch(function(err){ console.error(err);} );
    </script>
</head>
<body>
    <!-- my app 컴포넌트 생성하면 태그를 사용할 수 있다. -->
    <my-app>Loading Application</my-app>

</body>
</html>

main.ts 작성

사용해야 할 모듈들을 import를 통해 다음과 같은 방식으로 가져온다.

/**
 * Created by Admin on 2017-05-12.
 */
// angular/core에 있는 Component를 가져와라
import {Component, NgModule} from '@angular/core';
// 웹브라우저에서 실행을 시킬 수 있는 모듈
import {BrowserModule} from '@angular/platform-browser';
// 웹 브라우저에서 렌더링(보여주기) 과정에 필요한 모듈
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

// html, css, js 합쳐놓은 게 컴포넌트
@Component({
    selector: 'my-app', // html 에서 사용할 태그명
    /* 태그 내용. 다른 컴포넌트 선언 후 붙일 때 +, " 사용해야 하는 번거로움 줄이기 위해
    따옴표가 아닌 백틱 (back tick, `)을 사용한다. html 작성할 때와 같이 태그명만 붙여도
    코드를 작성할 수 있다. */
    // h1 태그 아래 AppComponent2에서 작성한 sub-component를 붙인다.
    template : `<h1>Hello Angular</h1> 
        <sub-component></sub-component>
    `                                   
})
class AppComponent{
    // 페이지에 필요한 javaScript 변수나 function들 넣는다. jQuery 역할
}

@Component({
    selector : 'sub-component',
    template : '<h3>Hello Component</h3>'
})
class AppComponent2{

}

@NgModule({
    // 작성한 컴포넌트들 이곳에 등록해야 인식 가능.
    declarations: [ AppComponent, AppComponent2 ],
    // 브라우저 앱 로딩위한 모듈
    imports : [ BrowserModule ],
    // 가장 처음 보여주고 싶은 컴포넌트 설정
    bootstrap : [ AppComponent ]
})
class AppModule{

}
platformBrowserDynamic().bootstrapModule(AppModule);

다음과 같이 설정 마치고
npm start 명령어 수행하면

다음과 같이 결과가 나온다.

사실 이러한 절차는 너무 번거롭기 때문에 Angular측에서 기본 설정이 된 프로젝트 파일을 지원해준다. npm install 명령어로 상기 최소 설정 그 이상을 모두 수행 가능하단 말이다! 이부분만 봐도 Angular 예제는 수행 가능하다.

npm install -g angular-cli 설치

ng new '폴더명' 통해 프로젝트 생성한다.

폴더에 다음과 같이 app.component.html 파일 생성되고 title이 중괄호에 두번 쌓여 있다. 이를 Interpolation(보간법)이라 하고 안의 title 값을 컴포넌트의 멤버변수 값으로 할당할 수 있다.

같은 경로의 app.component.ts 파일에 title의 값이 다음과 같이 설정되어 있다.

터미널에서 npm start 명령어 통해 수행하면 (명령어 수행 경로 : 프로젝트 파일 하위)

다음과 같이 서버가 수행된다. 훨씬 편리하다