본문 바로가기

[IT/Programming]/HTML related

Learning AngularJS

반응형
# Learning AngularJS AngularJS 라고 JavaScript 를 확장해서 쓰는 framework 가 있다고 한다 . jQuery 랑 비슷한 놈이라고 생각해도 되는데, jQuery 가 HTML DOM (Document Object Model) 기반으로 selector 및 chainning 을 구현해 놓은 것이라면, AngularJS 는 MVC (Model–View–Controller) 기반으로 동적인 페이지 (Dynamic page) 를 쉽게 만들기 위한 목적으로 만들어진 감이 크다고 생각된다. 뭐 개인적으론 당장 동적인 페이지를 필요로하지 않아서, 배울 필요성을 당장 느끼지는 못하는데... 멋진 dynamical HTML page 를 만들고 싶다면 꼭 배워둬야만 하는 framework 라 생각된다. (최근 google 의 support 로 폭발적인 성장을 하는듯한...) ps. 그런데 잠깐 기초기능만 테스트 해봤는데, 왜 난 jQuery 가 더 편한거 같지?ㅋ 제대로 안써봐서 강점을 아직은 잘 모르겠음. 그냥 <span class="parameter-name"></span> 식으로 해서 처리해도 뭐... ## TOC ## Introduction
뭔가 첫 느낌에는 animation 에 특화된 건줄 알았는데... 그냥 jQuery 의 on() response 를 간단하게 짤 수 있도록 도와준것 뿐인듯한 기분이? jQuery 에서 다음과 같이 작성되어야 하는 event handler 가 (뭔가 이상하게 짜놔서 개인적으로 조금 고쳤음.) ```[.scrollable.lang-html] <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { var $greeting=$('#greeting'); $('#name').on("input", function() { $greeting.text('안녕하세요, '+this.value+' !!!'); }); }); </script> </head> <body> <input id="name" type="text"/> <p id="greeting"></p> </body> </html> ```/
AngularJS 를 이용하면 다음과 같이 간단해 지는듯? ```[.scrollable.lang-html] <!DOCTYPE html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> </head> <body> <input type="text" ng-model="yourName"/> <p>안녕하세요, {\{yourName}} !!!</p> <!-- \ 빼시길... 여기있는 쌍중괄호도 AngularJS 가 처리해 버려서 code 가 이상해 지는듯. --> </body> </html> ```/
### Actual implementation Example #### jQuery
안녕하세요, !!!
#### AngularJS
안녕하세요, {{yourName}} !!!
## RRA
  1. AngularJS.org and GitHub - angular - Angular.js
  2. w3schools - AngularJS
반응형