뭐든 배우는데는 직접 해 보는게 제일이다.
아래 코드를 복사해서 메모장에 붙여넣은 후 "아무이름.html" 파일로 저장하고 브라우저에서 열어보자.
<html ng-app>
<head>
<title></title>
<script src="js/angular.min.js"></script>
</head>
<body>
{{'Hello ' + 'World'}}
</body>
</html>
{{'Hello' + 'World'}} 라는 텍스트가 그대로 출력될 것이다. 아직 angular.js 파일이 없어서 제대로 처리되지 않았다.
여기에 가서 angular.min.js 파일을 js폴더 안에 저장한 다음 브라우저를 새로고침 해 보자. "Hello World" 라는 텍스트가 출력되면 제대로 된 것이다.
위 코드에는 일반적인 html 코드에서 볼 수 없는 요소가 두가지 있다.
- ng-app
이 속성은 이 페이지가 Angularjs 어플리케이션이라는 것을 나타낸다. Marionettejs의 Application 클래스와 비슷한 역할이다. 나중에 모듈을 여러게 만들게 되면 이 페이지에 어떤 모듈을 사용할지 ng-app 속성에 값을 지정하여 설정할 수 있다.
- {{'Hello ' + 'World'}}
겹중괄호는 변수값을 출력한다. 백본 뷰의 템플릿과 같은 역할이다. 여기 코드에서는 문자열을 직접 출력했지만 Angularjs의 스코프 변수값이나 기타 변수에 할당된 값들을 출력할 수도 있다.
댓글 없음:
댓글 쓰기