-
16장 Angular.js 설치 , bower 를 이용한 의존성 관리MeanStack (deprecated) 2016. 6. 30. 23:09
드디어 Mean stack 의 마지막 조각 Angular.js 를 설치 할 때가 되었다. 현재 Angular.js 2 가 나왔으나
Typescript 를 베이스로 하고 기존 angular.js 와 바뀐점이 많기에 여기서는 기존 Angular.js 로 설치하고
만들어 보겠다.
Angular.js 2로 만드는 Web application 은 따로 준비해 뒀으니 이번 Meanstack 이 끝나면 적어 볼 생각이다.
그리고 설치 전 Angular.js 작동원리 를 보고오면 이해가 더 쉬울 것 이다.
Angular.js 는 기본적으로 Front-end 프레임 워크 이기 때문에 설치하려면 애플리케이션의 주 페이지에 Angular.js
의 자바스크립트 파일을 포함해야 한다.
Angular.js 의 자바스크립트 파일을 받아서 public 폴더에 저장한 뒤 불러오거나 기존에 자주 사용하는 CDN 을
이용하여 인터넷에서 바로 받아서 설치하는 방법 등이 있다. 하지만 이런식으로 설치하게 되면 문제점이 생긴다.
예를 들어 외부 업체 개발자가 만든 자바스크립트 파일을 불러들인다고 했을 때, 파일이 한 두개 라면 괜찮지만 ,
여러 외부 업체 라이브러리를 추가 하기 시작할 때 어떻게 되겠는가? 거기다 그 파일들의 의존성 버전을 어떻게
관리 해야 하는가?
이런 문제를 해결하기 위해 노드에서 npm을 사용했듯이 프론트엔드의 의존성을 관리하기 위해 bower (바우어)
라는 도구가 존재한다. 바우어는 패키지 관리자 도구로 프론트엔드, 외부 개발자 라이브러리를 내려받고 관리하기
위해 설계되었다. 바우어는 노드 모듈이므로 npm 을 사용해 전역으로 설치하자. (관리모듈이기에 전역으로 ~)
npm install -g bower
바우어를 설치했으면 이에 대한 사용법도 배워보자. 기존의 package.json 과 사용법이 유사하니 쉽게 익힐 수
있을 것 이다. 먼저 애플리케이션의 최상위 폴더 가서 bower.json 파일을 만들고 다음 코드를 적자.
{ "name" : "Mean", "version" : "0.0.7", "dependencies" : { } }package.json 을 많이 다뤄봤기에 위 구조는 굉장히 익숙할 것 이다.
name 이나 version 은 자신이 원하는 대로 정하자. dependencies 에는 추가 할 패키지를 적어서 package.json
처럼 버전 관리를 한다.
이제 패키지를 설치해보자 !! 가 아니라 bower 같은 경우 패키지를 설치하면 bower_components 라는 폴더를
만들고 그 곳에 해당 패키지를 설치한다. 하지만 현재 애플리케이션에서는 정적파일은 static 폴더 아래에 있는
파일만 서비스 할 수 있도록 만들어 두었다. 그러니 바우어의 패키지 설치 기본 폴더를 변경할 필요가 있다.
바우어의 패키지 기본폴더를 변경하기 위해서는 .bowerrc 라는 전용 구성파일을 사용하여 이를 변경할 수 있다.
다시 애플리케이션의 최상위 폴더로 가서 .bowerrc 라는 파일을 생성하고 코드를 적자.
{ "directory" : "static/lib" }이로서 bower 의 기본 패키지 설치 폴더를 설정하였다. (bower의 추가 정보는 http://bower.io 를 참조하자.)
이제 bower 를 이용해서 angular.js 를 설치 해보자. bower.json 에 angular 를 추가하자.
{ "name" : "Mean", "version" : "0.0.7", "dependencies" : { "angular" : "latest" } }잠깐 ! 그전에 한가지 잊은게 있다. bower 를 사용하기 위해서는 GIT 이 설치 되어 있어야 한다.
https://git-scm.com 사이트를 방문하여 GIT 을 설치하자.
윈도우를 사용한다면 git 활성화를 위해 git bash 를 사용하도록하자.
바우어를 이용한 패키지 설치는 npm 과 같은 bower install 로 설치를 할 수 있다.
git bash 를 이용하여 설치를 완료하고 나면 위 설정한 대로 static/lib 폴더에 angular 를 설치 할 것 이다.
설치가 되었다면 맛보기로 angular.js 를 사용해보자.
먼저 static 폴더로 가서 application.js 파일을 만들고 다음 코드를 넣자.
var mainApplicationModuleName = 'mean'; var mainApplicationModule = angular.module(mainApplicationModuleName, []); angular.element(document).ready(function(){ angular.bootstrap(document, [mainApplicationModuleName]); });코드를 살펴보면 먼저 주 애플리케이션의 모듈이름을 포함한 변수를 생성했고, 주 애플리케이션 모듈을 생성하기
위해 이어지는 angular.module() 메소드에서 이를 사용했다.
그리고 나서 angular 객체의 jqList 기능을 이용해서 document.ready 이벤트에 함수를 결합한다.
이 함수에서 angular.bootstrap() 메소드를 사용해 앞서 정의한 주 애플리케이션 모듈로 새로운 angular.js
애플리케이션을 시작하게 만든다.
이제 다음으로 app/views 폴더로 가서 index.ejs 뷰에 자바스크립트 파일을 포함해보자.
<!DOCTYPE HTML> <html> <head> <title> <%= title %> </title> </head> <body> <% if (username) { %> <h2>Hello <%=username %></h2> <a href="/signout">Sign out</a> <% } else { %> <a href="/signup">Signup</a> <a href="/signin">Signin</a> <% } %> <section> <!-- 추가 --> <input type="text" id="text1" ng-model="name" /> <input type="text" id="text2" ng-model="name" /> </section> <!-- 추가 끝--> <br /> <img src="images/overwatchlogo.png" alt="logo" /> <script type="text/javascript" src="/lib/angular/angular.js"></script> <!-- 추가 --> <script type="text/javascript" src="/application.js"></script> <!-- 추가 --> </body> </html>사진 처럼 angular.js 그리고 application.js 파일을 포함하였다.
그리고 angular.js 의 데이터 결합을 보여주기 위해 ng-model 지시자를 사용하는 텍스트 입력창을 추가 했다.
이제 node 서버를 키고 테스트를 해보자.
사진 처럼 텍스트 박스 한 곳에 값을 적으면 양쪽 텍스트에 동시에 나타나는 것을 볼 수 있으며, 이는 angular.js의
양방향 데이터 결합의 동작을 보여준다.
이번 장에서는 angular.js 의 설치와 bower 를 이용한 의존성 관리 , 그리고 간단하게 angular.js 를 테스트
해보았다. 다음 장에서는 angular.js 의 MVC 엔티티에 대하여 알아보자.
(끝)
(현재 폴더 구조)
'MeanStack (deprecated)' 카테고리의 다른 글
18장 Angular.js 를 이용한 라우팅 처리 (0) 2016.07.07 17장 Angular.js 를 이용한 MVC 엔티티 (2) 2016.07.05 15장 passport 모듈을 이용한 사용자 인증 (2) (4) 2016.06.26 14장 passport 모듈을 이용한 사용자 인증 (1) (8) 2016.06.23 13장 mongoose(몽구스)를 이용한 index 활용, 데이터 검증 (5) 2016.06.21
