최근 Front-end 부분 프레임웍으로 각광받는 Angularjs에 대해 공부를 시작하려 합니다. 5년전 쯤에는 jQuery가 가장 Hot한 프레임웍으로 알고 있었는데, 요즘 많은 스타트업이나 신규서비스에서는 Angularjs를 많이 활용하더라구요..
기존의 View페이지는 정적인 HTML에서 javascript로 이벤트를 처리하고, 동적요소를 추가하는 방식이었습니다. 그러나 이 방법은 js 코드가 다소 복잡해지고, 협업시 불편하다는 단점이 있었습니다. 이러한 단점을 해결하기 위해 Angularjs가 등장하였다고 합니다.
Angularjs에 대한 간단한 동작은 다음의 예시코드를 통해 살펴보도록 하겠습니다.
- HelloDynamic.html
1 2 3 4 5 6 7 8 9 10 11 12 | <html ng-app="firstApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="controllers.js"></script> </head> <body> <div ng-controller='HelloController'> <input ng-model='greeting.text'> <p>{{greeting.text}}, World</p> </div> </body> </html> | cs |
이 페이지는 지시자(ng-app)가 'firstApp'인 모듈에 연결되어 통제받게 됩니다.
그리고 이 페이지의 데이터가 변경될 때, 컨트롤러(ng-controller)가 'HelloController'인 것에 binding되고,
controller안의 ng-model은 이벤트 범위 모델이 됩니다.
정리하면, 웹페이지가 변경될 때 ng-model이 업데이트 되며, 자동으로 ng-model과 mapping된 {{}}안에 글자가 쓰여지게 됩니다.
- controller.js
var firstApp = angular.module('firstApp', []);firstApp.controller('HelloController', function($scope) {$scope.greeting = { text: 'Hello' };})
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
저의 설명에서 부족하거나 잘못된 사항이있으면 언제든지 댓글 달아주세요!
댓글