오늘부터 AngularJS에 대해서 다루어보도록 하겠습니다. AngularJS가 무엇인가에 대해서는 여기서는 따로 다루지 않겠습니다.


Node.js가 대세이니 express와 bower를 기본으로 사용해보도록 하겠습니다.


준비

우선 express-generator를 설치해서 seed를 만들어보도록 하겠습니다.

root@02b57f4f051f:/app# npm install -g express-generator
/usr/local/bin/express -> /usr/local/lib/node_modules/express-generator/bin/express
express-generator@4.9.0 /usr/local/lib/node_modules/express-generator
├── commander@1.3.2 (keypress@0.1.0)
└── mkdirp@0.5.0 (minimist@0.0.8)


위와 같이 express-generator를 우선 설치합니다.

root@02b57f4f051f:/app# express

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=app ./bin/www


express-generator를 사용해서 seed를 만들었습니다.


npm install 명령을 통해서 필요한 패키지들을 설치합니다.


bower가 설치되어있지 않으시면 npm install -g bower 명령을 이용해서 설치합니다.

그리고 아래의 내용을 .bowerrc 라는 파일로 저장합니다.

{
  "directory": "public/components"
}


이제 bower를 사용해서 AngularJS를 설치합니다.

root@02b57f4f051f:/app# bower install --allow-root angularjs
bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.3
bower angularjs#*             validate 1.3.3 against git://github.com/angular/bower-angular.git#*
bower angularjs#~1.3.3         install angularjs#1.3.3

angularjs#1.3.3 public/components/angularjs


여기까지 해서 작업의 준비가 끝이 났습니다.


Binding

이제 원래 하려고 했던 AngularJS의 가장 기본이 되는 binding에 대해서 살펴보도록 하겠습니다.

아주 간단하게 public/index.html을 만들어보겠습니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
</body>
</html>


브라우저로 확인해보면 타이틀만 Binding으로 나오고 아무것도 표시되지 않을 것입니다.


다음을 추가해봅시다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="">
        <h1>{{2 + 2}}</h1>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
</body>
</html>


브라우저를 열어보면 {{2+2}}로 표시되는 것이 아니라 4로 표시될 것입니다.


AngularJS에서는 {{...}}안의 내용은 코드로 인식하여 표시하게 됩니다.

이제 ng-model tag를 사용하여 실제 binding을 해보도록 하겠습니다.


코드를 아래와 같이 수정해봅시다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="">
        <input type="text" ng-model="data.message">
        <h1>{{data.message}}</h1>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
</body>
</html>


브라우저로 확인해보면 텍스트 입력창이 하나 있습니다. 여기에 텍스트를 입력하면 바로 아래에 텍스트 입력창에 있는 글이 그대로 표시될 것입니다.


텍스트 입력창에 있는 ng-model tag는 입력되는 값을 data.message라는 변수에 넣어주고, 이것은 실시간으로 {{data.message}}에 반영되는 것입니다.



여기까지 해서 AngularJS의 ng-model을 사용하여 데이터를 바인딩하는 것을 살펴보았습니다.



이 게시물을...