-
Angular 설치MEAN STACK/Angular 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 명령어 통해 수행하면 (명령어 수행 경로 : 프로젝트 파일 하위)
다음과 같이 서버가 수행된다. 훨씬 편리하다
'MEAN STACK > Angular' 카테고리의 다른 글
Angular 파일 업로드, 다운로드 (File upload, download) 예제 (0) 2018.09.12 앵귤러 (Angular) 레퍼런스 API (0) 2018.09.12 타입스크립트(Type Script) 데이터 타입, 예제 (0) 2018.09.12
