AngularJS의 Basic!!

Web Program/AngularJS 2014. 3. 1. 14:18

언제나 언어의 처음시작은 새로움이였다;

"아..이건 뭐지?...내가 사용하는 곳에 쓸수있는 건가..."라고 생각하면서 시작이 된다..;

AngularJS도 마찬가지였다..;

구글?...뭔가 개발자적인 마인드에서 편하게 할려고 만들었겠거니..속으로 생각하고..레퍼런스를 아니지.. PDF를 다운받아서 출퇴근;

시간에 보고 다녔다..(물론 영어에는 약하지만 소스상에서는 어려운부분은 빼고!! 힛!);

근데..예제부터 참 쉽게 보였다.. (물론..예제가 쉬워서...쉽게 보였지...아키텍쳐까지 이해할수가 없었다는...ㅜㅜ);

내가 예전 처음 JQuery를 접했을때도 이런생각은 안해봤지만..;

쇼핑가격에 대한 예제를 볼때..아...JQeury보다..더 쉬울꺼같은데?라는 생각을 가지고 덤벼들었다..무작정...

그때부터..쉽게만 생각하던 AnglarJS를 시작하게되었다..

아직 내가 이해하기에는 개념이 잘 잡히지 않았고 다른 전문가분들이 작성하신 글들이 많다..

구조가 어떻고 어떻게 동작하고 어떻게 최적화하는지 난 아직 잘 모르겠다..그런것들은 내가 AngularJS가 나에게 힘들게 안할때쯤..

생각해볼려고 하고..(물론..불필요하다는건 아님!꼭 이해는 하고 있어야 겠지만..)

나처럼 실행해보고 시도해보는 걸 좋아하는 사람은 한번 해볼만한...아니 꼭 해봐야하는 언어인거같다...

아래사이트에 가면 더 세세한 정보를 볼수 있다...공홈이니까.ㅋ

그리고 내가 공부할때는 언제나 이용하는 fiddle를 이용해서 Basic를 구현해봤다..AngularJS사이트내에도 해볼수는 있지만!

급할때 아니면 직접 해보는게 좋으니까~^^;

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

시작은 간단하다...

JQuery처럼 AngularJS를 선언해주고..

핵심이 되는 단어인 ng-app,ng-model을 각각의 필요영역에 선언해준다..

쉽게 설명한다면

ng-app은 사용할 영역지정..

ng-model은 ID같은 존재..

ng-controller은 지역의 함수 이름(?) 이정도로 이해하면 되지 않을까 싶은데

정확한건 전문가들 블로그를 참고 하시는게 좋을꺼같다.

직접 작성해보면 어떻게 동작하는지 확인가능할것이다..

그러면서 아..이걸 어디서 사용하면 좋겠다!라고~ 떠오르는게 좋을꺼같다..

그렇지 않으면... 언젠가는 쓰지 않을날이 올테니까...^^;

오늘은 완전 기본적인것만! 정의~다음부터는 내가 실질적으로 페이지에 적용한 것들을 가지고 글을 한번 적어보겠음!

아! 현재는 PHP프레임워크인 Yii + jquery + angularJS + nginx에서 이것저것 개인프로젝트 테스트를 하고 있음.ㅋㅋ

sosoHappy sosoHappy