이번 포스팅은 AngularJS에 대해 알아보기 위해 주요 용어 소개 및 간단한 예제를 설명한다.
Angular에 대해 더 자세히 알아보고 싶다면 Angular 홈페이지의 여기를 참조하고, 테스트 환경 마련은 이전 포스트인 여기를 참조하길 바란다.
이제 본격적으로 AngularJS가 무엇인지, 어떻게 사용하는지 간단하게 알아보도록 하자.
AngularJS 란?
AngularJS는 오픈 소스 웹 어플리케이션 프레임워크이다. 사용시 적은 소스 코드로 쉽고 빠르게 웹 어플리케이션을 만들수있어 최근 많은 관심을 받고있는 추세이다.
AngularJS 용어 소개
AngularJS에대한 이해를 돕기 위하여, 다음 4가지에 대해 간단하게 설명하고자 한다.
1. Model
보통 JSON으로 표현되는 어플리케이션의 특정한 데이터 구조를 말한다.
2. View
HTML 템플릿을 통해 모델을 비춰낸다. 이는 Model이 변할때 View 또한 갱신된다는 의미이다.
3. Controller
말 그대로 무언가를 조정하는 것이다. 여기서 무언가란 데이터를 의미한다. 즉, 데이터를 조정한다.
4. Scope
Model과 View를 연결하며, Controller로 데이터를 보낸다.
AngularJS Example
간단한 AngularJS의 예제를 통하여 AngularJS에 대해 좀더 설명하도록 하겠다.
예제는 아래 그림과 같이 Text가 하단에 출력되는 것이다. 예제를 위한 환경이 모두 구성되어있다는 전제하에 다른 설명없이 코드에 대해서만 설명하도록 하겠다.
Index.html :
<html ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>1. ng-app : AngularJS를 로드하고, 초기화 시킨다. AngularJS를 사용하겠단 의미로 생각하면 된다. AngularJS는 이처럼 '-'가 포함된 형태의 작명법을 지원하며, 이는 태그안에 속성처럼 이용할수 있다는 특징이 있다. html 태그에 ng-app 속성을 주면 하위 요소 모두는 AngularJS Application으로 다뤄진다.
2. ng-controller : Controller를 추가한다.
3. ng-repeat : 리스트류를 표현하고 싶을때 foreach나 each처럼 사용한다.
4. {{phone.***}} : '{{' 와 '}}'에 감싸진 부분은 일종의 AngularJS 표현식을 나타낸다. 위의 예제에서는 phone의 name과 snippet데이터를 출력한다.
controllers.js :
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});phones를 $scope에 정의해주면 해당 Controller의 범위 내에서 사용할수 있다.
마치며..
위 예제는 AngularJS 홈페이지의 Tutorial을 참조하였으며 더 많은 예제와 API는 아래에 링크를 걸어 두었다. JQuery를 봐왔던 글쓴이에게 AngularJS는 신세계였다.
이렇게 간편하게 사용할수 있다니! 이 글을 보았다면 당장 AngularJS 홈페이지의 Tutorial로 고고씽~ 이렇궁 저렇궁 할것없이 일단 써보고 말하길! 영어로 되어있다고 쫄지 말자 일단 Tutorial 0부터 12까지 따라해보고 난다면 아! 이런거구나 알수있을테니 말이다.
참조
- AngularJS Tutorial : https://docs.angularjs.org/tutorial/step_00
- AngularJS API : https://docs.angularjs.org/api
'Newbie's Log' 카테고리의 다른 글
| Scala Tutorial part 1 (0) | 2014.08.07 |
|---|---|
| MVC(Model, View, Controller) 패턴에 대하여. (0) | 2014.08.07 |
| TDD를 위한 Library: Toast - Unit Testing for CodeIgniter (0) | 2014.06.22 |
| Apache VirtualHost에 대해 알아보자 (0) | 2014.06.19 |
| 빅오 표기 (0) | 2014.06.16 |
