AngularJS
자바스크립트로 작성된 클라이언트 측 MVC 프레임워크
구글직원의 개인프로젝트에서 시작어 현재는 구글 공식지원 프로젝트가 되었다.
브라우저에서 돌아가며, ajax 스타일의 단일 페이지 웹 애플리케이션 작성에 좋은 언어이다.
HTML을 템플릿 언어로 사용하여 HTML 태그와 속성으로 정적인 HTML 문서에 동적인 특성을 추가한다.
의존성 주입(DI)과 테스트에 집중하는 프레임워크이다.
유용한 사이트/도구
대표사이트 : www.angularjs.org
Batarang : AngularJS 웹 애플리케이션의 상태를 시각적으로 살필 수 있는 크롬 확장 프로그램.
Plunker(http://plnkr.co), jsFiddle(http://jsfiddle.net) : 브라우저에서 자바스크립트, CSS, HTML 등의 코드를 작성하고 공유할 수 있는 도구.
Tutorial
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> </head> <body ng-app ng-init="name='Plunker'"> This World is whose world? <input type="text" ng-model="name"> <h1>Hello {{name}} World!</h1> </body> </html> |
AngularJS를 사용하려면
1. script에 ajgularjs 라이브러리를 추가하고,
2. ng-app HTML 사용자 정의 속성을 통해 AngularJS에 대한 초기화를 진행하며,
3. ng-init 을 통해 템플릿 렌더링 전 모델을 초기화 해준다. (변수선언, 객체생성의 개념으로 이해하면 된다.)
4. ng-model 을 통해 변수와 객체를 연결하여 변수값을 동적으로 사용자에게 입력받을 수 있다.
(테스트해보니 ng-model이 적용되면 input 객체에 value 속성을 할당해도 적용되지 않는다.)
5. {{변수명}}의 형식을 통해 모델의 특정값을 렌더링 하여 화면에 노출한다.
[ Tutorial 실행화면 (Plunker) ]
** 용어 **
디렉티브(directive) : AngularJS 프레임워크가 알아볼 수 있는 특별한 HTML 태그와 속성을 가리킨다. (예 : ng-app, ng-init 등)
'development > angularjs' 카테고리의 다른 글
| angularjs - Module (0) | 2014.08.19 |
|---|---|
| angularjs - $scope (0) | 2014.08.03 |
