본문 바로가기

옛글/FullStack (MEAN)

[Angular JS] Start! and Install!

반응형


Angular JS 

http://angularjs.org/



* Angular JS 는 Google 의 노하우가 집약되어 있는 front단을 개발할 수 있는 JavaScript입니다. 

Why AngularJS?


HTML은 정적인 문서인데, 다이나믹하고 역동적인 UI 를 꾸미기 위해 필요합니다. AngularJS는 HTML의 문법을 확장해 Application에 사용이 가능합니다. 


- 양방향 데이터 바인딩이 가능하다! 

 AngularJS로 개발한 애플리케이션은 클라이언트에서 서버로, 서버에서 클라이언트로도 실시간 변경감지가 이루어집니다. 

 

- 모델, 뷰, 컨트롤러, 서비스 등 여러 구성요소로 분리된다.

 지시어, 필터, 모듈 등 추상객체를 이용해 균형을 맞추며 이로써 복잡도의 감소와 관심사의 분리가 가능합니다. 


- 편리하고 친숙한 패턴이 많다 

 MVC 등 유명한 패턴 외에도 종속물관리(?) 등 다수의 패턴이 들어있어 체계적인 구성이 가능합니다. 


- 테스트용 코드를 쉽게 작성할 수 있다. 

 


Alternatives

 HTML, CSS and/or JvavScript를 모두 포함하고 있으며, HTML의 단점을 보완합니다. 


Extensibility


Angular JS는 웹 어플리케이션을 개발하는데 적합하며, 다른 라이브러리와도 잘 작동하며 확장이 가능합니다. 

AngularJS는 2009년 구글 피드백이라는 프로젝트에서 기원된다고 합니다. 당시 6개월간 짜여진 front-end코드가 대략 17000줄이였는데, 미스코 헤브리라는 사람이 자신이 취미로 작성한 오픈소스 라이브러리를 사용하면 2주만에 그 코드 전체를 다시 짤 수 있다고 큰소리 쳤다고 합니다. 2주간 지연이 되도 큰 문제가 없었기에 미스코에게 작업을 맡겼고 6개월이 걸렸던 코드를 3주만에 재현했고, 17000줄이 1500줄로 준 것에 경악을 했다고 합니다. 이로부터 Angular JS가 시작되었다고 하는군요.

지금부터 Angular JS를 시작해봅시다!

* Install 

1. Install Git 

in terminal, 

git clone https://github.com/angular/angular-phonecat.git

Git : https://github.com/angular/angular-phonecat 


cd angular-phonecat


이 폴더 내에서 모든 커맨드 들이 호출이 가능합니다. 


2. Install Node.js


http://nodejs.org/ 에서 Mac용 node.js 설치하기 





node --version

으로 정상적으로 설치되었는지 확인하기 


npm install

Node에서 사용되는 다양한 Tool들 설치하기 





3. Running development web server


npm start

서버 스타트 이후 http://localhost:8000/app/index.html 로 접속해보기 


접속되면 설치 끝 !

반응형