티스토리 뷰
안녕하세요 박스여우입니다. 요즘 웹에 관심이 많아졌는데요,
그런 의미에서 오늘은 그동안 배워보고 싶었던 AngularJS에 대해 알아보고자 합니다!
JavaScript는 웹은 물론이고 Node.JS, 애플리케이션 분야까지 "JavaScript Is Eating The World"라는 말이 있을 정도로 점점 진화해 가고 있습니다. 이러한 과정속에서 JQuery와 같은 JavaScript 라이브러리들이 많이 등장하고 있는데요, 그 중에도 AngularJS라는 것이 인기를 많이 받고 있습니다. 지금부터 이 AngularJS에 대해 간단히 알아보도록 하겠습니다
■ AngularJS
AngularJS는 JavaScript로 만들어진 웹 어플리케이션 프레임워크 입니다. AngularJS가 인기를 받고있는 이유는 바로 여러 장점때문인데요, 글로만 설명하면 와 닿지 않으니 AngularJS만의 장점들을 통해 AngularJS에 대해 알아보도록 하겠습니다.
1.간편한 데이터 바인딩을 통해 뷰 업데이트가 쉽다.
입력해 주세요:
{{name}}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> <p>입력해 주세요: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html> | cs |
ng-app: 해당 지시자 내에 속한 영역은 AngularJS의 Application으로 인식된다. (<div>~</div>)
ng-model="name": data binding을 위해 사용되는 지시자. 'name'은 모델의 이름
코드를 보면 아시겠지만 코드가 굉장히 간단합니다. 기존의 경우와는 달리 값이 출력될 요소를 선택해 업데이트 하는 과정과 입력값 변경에 따른 이벤트 처리를 별도로 하지 않아도 되기 때문에 코드가 훨씬 간단합니다. 이처럼 AngularJS는 HTML과 JavaScript의 DOM 핸들링을 자동으로 수행하고, 간편하게 데이터 바인딩을 할 수 있기 때문에 기존의 코드를 간략하고 직관적으로 만들 수 있습니다.
2.SPA 개발에 최적화 되어 있다.
SPA - Single Page Application : SPA는 말 그대로 새로고침 없이 하나의 페이지에서 여러 작업이 가능한 웹 어플리케이션을 말합니다. 대표적으로 SPA를 개발하기 위해서는 Ajax를 사용하지만, AngularJS에서는 SPA를 보다 편하게 개발할 수 있는 것들을 제공해 주고 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> <body ng-app="testApp"> <a href="#/">Java</a> <a href="#one">Talk</a> <a href="#two">JavaScript</a> <a href="#three">Java-</a> <div ng-view="" style="height:200px; overflow:auto;"></div> <script> var app = angular.module("testApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "http://boxfoxs.tistory.com/296" }) .when("/one", { templateUrl : "http://boxfoxs.tistory.com/295" }) .when("/two", { templateUrl : "http://boxfoxs.tistory.com/294" }) .when("/three", { templateUrl : "http://boxfoxs.tistory.com/290" }); }); </script> </body> </html> | cs |
AngularJS는 AngularRoute(routProvider)와 ng-view 지시자를 통해 라우트의 정보가 변경될 때 마다 해당 URL의 화면을 ng-view지시자가 작성된 부분에 삽입하여 마치 Ajax를 통해 페이지의 내용을 변경하는 것과 비슷하게 개발할 수 있습니다. 확실히 Ajax를 사용하는 것 보다 좋은점은(내부에서 Ajax를 이용하고 있지만..) 느끼지 못하겠지만 코드가 깔끔해지는 효과는 있는것 같습니다.
이 외에도 AngularJS는 여러가지 장점과 특징들이 있지만 아직 저도 AngularJS를 학습하고 있는 입장이라 간략하게 소개해 드리고 마치고자 합니다.
'프로그래밍 > 웹' 카테고리의 다른 글
| Javascript - JQuery없이 POST 전송하기(Google URL Shortener) (411) | 2016.11.14 |
|---|---|
| AngularJS (424) | 2016.08.18 |
| Web Worker - 웹에서 멀티 쓰레드 구현하기 (1) | 2016.07.14 |
| Ajax - 페이지 새로고침 없이 변경하기 (2) | 2016.07.06 |
| 웹사이트에 facebook 로그인 적용하기 (2) | 2016.07.04 |