반응형
안녕하세요 cocy입니다.
재밌는 놈을 발견해서 오랜만에 포스팅합니다.
angular js라는 놈인데요, 올해 4월에 정식 버전이 출시되었습니다.
https://angularjs.org/
구글에서 만든 angular js는 정적인 html과 javascript를
다이나믹한 이벤트 컨트롤 및 mvc구조화를 가능하게 합니다.
도입할만한 이유가 필요하신 분들은 아래글을 참고하시길
AngularJS의 기본구조
그림4. AngularJS의 기본 구조
위 그림4는 AngularJS의 기본구조를 나타낸 그림으로 AngularJS가 어떻게 로딩되고 시작되는지를 나타내주는 그림으로
순서는 다음과 같다.
1. 브라우저가 html을 로드 (DOM을 파싱한다.)
2. Angular.js를 로드한다
3. DOM Content Loaded Event를 기다린다.
4. DOM이 모두 로드되면 ng-app 지시자를 찾는다.
5. ng-app에서는 dependency injection 을 위해 사용되는 $injector를 생성한다.
6. injector 지시어는 어플리케이션의 모델을 위한 컨텍스트가 되는 루트 스코프를 생성한다.
7. 최종적으로 ng-app을 기준으로 하위DOM을 컴파일하고 rootScope와 링크시킨다.
데이터바인딩과 스코프(scope)
Angular.js의 데이터 바인딩 예제
1 2 3 4 5 6 | <!-- index.html --><body ng-app> <span>Insert your name:</span> <input type="text" ng-model="user.name" /> <h3>Echo: {{user.name}}</h3></body> |
이 예제코드에서 설명해야 할 부분이 좀 있기는 하지만 설명하기 전에 먼저 Angular.js 코드에 좀 익숙해 져야 한다.