이내용은 codeschool(http://codeschool.com) 내용에 따라 공부하면서 정리한 글입니다. (전문가가 아니기 때문에 깊이있는 지식이아닙니다. 또한 잘못된 정보가 있을 수 있으니 잘못된 정보는 댓글로 알려주시면 수정해 나가도록 하겠습니다.)

이전 시간에 AngularJS의 기본개념과 사용이유 등 간단한 정보에 대해 공부했다면 이제는 실제로 웹페이지에 어떻게 적용되는지 알아보도록 하겠다.

angularjs에서 중요한 개념이 4가지가 존재한다.

  1. Directives

  2. Modules

  3. Controllers

  4. Expressions

AngularJS는 module단위로 구현되고 사용이된다. html에서 모듈을 등록하고 동작하게 할 수있고 다른 모듈에서 또다른 모듈을 사용할 수있어, 확장성과 유지 보수성이 높다고 할 수있다.

app.js라는 스크립트에서 

var app = angular.module('something', []);

app이라는 변수를 선언하고 anuglar 모듈을 생성 할수 있다. something 이라는 이름의 모듈이 생성된다. (something은 모듈이름이 되고, 뒤에 []는 이 모듈에 사용될 라이브러리 의존성이 배열로 나열된다)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  </haed>
  <body>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

일단 위에서 생성한 모듈을 html에서 import한다. 그리고 html tag에서 

<html ng-app="something">

라고 수정하하자. 그러면 html 도큐먼트가 로드될때, 이 angular app이 함께 실행 된다.

위에서 생성한 것이 Module이고, 이 모듈을 html에게 명시한 ng-app 이 Directive이다.

그리고 Directive가 선언된 html의 요소(tag)에서는 아래와 같은 expression이 가능하다.

<p>
  2 + 4 = 
  Hello
</p>

이렇게 표현하면 '{{','}}' 로 둘러싸인 수식이 angular가 해석하고 원하는 값을 지정해 준다. 위 같으 코드의 결과는

2 + 4 = 6 Hello sungbin

이 출력된다.

지금까지 directive를 이용해 html에게 angular를 선언하고 생성된 모듈을 html에 주입해 보았다. 다음시간에는 controller에 대해 공부해 보도록하겠다.