기본 콘텐츠로 건너뛰기

Angular 기본 (1) Angular cli설치

Angular 기본 (1) Angular cli설치

(1) Node.js & npm 설치

Angular 4.0 기능을 모두 활용하려면, 최근 node.js 6.9.0 이상 버전을 설치해야 한다. Angular는 Angular 2라고 불리는 2.0이후 버전부터 Angular.js가 아닌 Angular로 부른다. 앵귤러는 2.0 이후부터 프론트 페이지 개발에만 사용하는 수준을 넘어갔다. node.js와 함께 MVC패턴으로 서버사이드까지 제작가능하다.

해당 포스팅에서는 앵귤러4.0을 중심으로 진행한다.

1 node.js & npm 버전확인

콘솔창에서 ` node -v ` 명령어와 ` npm -v ` 명령어로 node.js와 npm 버전을 확인한다. node.js가 설치되지 않았다면 설치한다.(기존 node.js포스팅 참고)

2 typescript설치

Angular는 타입스크립트를 사용해야 하므로 아래 명령어를 실행하여, type스크립트를 설치한다.

`` npm install -g typescript ``

3 angular cli 설치하기

앵귤러는 커맨드라인에서 프로젝트를 생성하고 관리할 수 있는 유틸을 제공한다. 바로 angular cli이다. 아래 순서로 진행한다.

1) `` npm install -g @angular/cli `` 명령어로 angular cli를 설치한다.

2) angular cli 설치가 끝나면, ng 명령어를 사용할 수 있게 된다.

3) `` ng --version `` 명령어를 실행한다.

아래와 같은 표시가 나타나면 성공이다.

참고로 ` ng --help `라고 입력하면 여러 명령어가 나온다.

from http://webdoli.tistory.com/94 by ccl(A) rewrite - 2020-03-07 04:55:09

댓글

이 블로그의 인기 게시물

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22

Angular2 시작하기

Angular2 시작하기 Angular2 시작하기 1. NodeJS 설치 - https://nodejs.org/ko/ NodeJS 공식 홈페이지 접속하여 Node를 다운 후 설치. 2. NPM 을 통한 Angular-Cli 설치 Window Command 를 통하여 npm install -g @angular/cli 명령어를 실행한다. 위와 같이 정상적으로 angular-cli 가 설치되었다면 Project 가 위치할 폴더를 생성. 참고 사이트 : https://cli.angular.io/ 3. Angular-cli 를 통한 Angular Project 생성. Window Command 를 통한 ng new [폴더명] 위와 같이 Angular 기본 프로젝트가 생성됨. 해당 프로젝트로 폴더로 이동하여 ng serve 명령어 실행 Node 를 통해 Angular 프로젝트 실행. http://localhost:4200 접속하게되면 위와같이 Angular 프로젝트 실행된다. 앞으로 Angular2 의 개념들을 포스팅하면서 Spring-Boot , Spring Project의 Angular-cli 를 이용하여 ng build 하여 포팅하는 글을 올리겠습니다. from http://overclassbysin.tistory.com/3 by ccl(A) rewrite - 2020-03-07 07:55:13