Javascript & JavaScript Application 자바스크립트 프레임워크_AngularJS 기본개념 강좌

자바스크립트 프레임워크_AngularJS 기본개념 강좌

Angular 1

이번 앵귤러JS 포스팅은 기본개념에 대한 설명을 위주로 작성하려고 합니다. 내용 출처는 기본적으로 w3schools의 튜토리얼 내용을 기반으로 하였습니다. 우선, ng-directives에 대해 알아보도록 하겠습니다. angularJS는 지시자를 통해 데이터와 HTML이 서로 상호연결되어 있습니다. 이를 도와주는 것이 바로 프리픽스 ng를 시작으로 한 ng-app, ng-model, ng-bind 등이 있습니다. ng-app은 앵귤러JS 어플리케이션을 명시하고, ng-model은 input, select, textarea의 뷰와 데이터를 연결합니다. ng-bind는 expression인 {{}}와 같은 기능으로 데이터와 HTML 뷰를 연결합니다. 아래는 AngularJS를 실행하기 위한 가장 기본적인 구조를 나타냅니다. ng-대신에 data-ng로도 사용할 수 있습니다.

AngularJS 모듈은 앵귤러JS 어플리케이션을 정의합니다. controller는 어플리케이션을 조정합니다. 모듈과 컨트롤러는 아래와 같이 각각 정의합니다. 이들에 대해서는 뒤에 좀더 자세히 다루도록 하겠습니다. 우선 가장 기본적인 expressions 부터 알아보도록 하겠습니다.  

AngularJS Expressions은 {{ expression }} 으로 표기합니다. 또한, ng-bind="expression" 으로도 사용가능합니다. {{}} 안에 사용가능한 것은 자바스크립트 문법을 사용하시면 됩니다. 아래는 person이라는 객체에서 데이터 값을 가져와 보여주는 방식을 나타내고 있습니다. 객체뿐만 아니라 배열까지도 그 값을 가져와 보여줄 수 있습니다. 어떻게보면 자바스크립트문법을 호환하지만 조건문이나, 반복문은 사용할 수 없습니다. 그대신 filter를 사용해서 이러한 기능들을 수행합니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

모듈은 어플리케이션을 정의합니다. 어플리케이션의 서로 다른 부분들을 이루고 있으며 컨트롤러를 포함하고 있습니다. 컨트롤러는 항상 모듈 안에 포함이 됩니다. angular.module로 모듈을 생성합니다. 어플리케이션에 보면 파라미터에 []이 있습니다. 이는 독립모듈을 정의할때 사용하며, [] 없으면 이미 존재하는 것은 받아올 수 있지만, 새로운 모듈을 만들 수 없습니다. angular.module은 라이브러리가 완전히 로드후에 컴파일 되기 때문에 문서상에서 어느 위치에 있어도 상관없습니다. 

directives에서 HTML 엘리먼트를 반복하는 지시자가 바로 ng-repeat입니다. 아래와 같이 배열의 값을 이용해서 리스트를 만들 수도 있습니다. ng-repeat은 직접적으로 HTML 엘리먼트를 복사하여 태그를 생성합니다. 이런점에서 앵귤러JS는 데이터베이스의 CRUD (Create Read Update Delete)에 가장 적합합니다. ng-model 지시자는 유효성검사, 데이터상태, CSS클래스 등 다양한 기능에 활용할 수 있습니다. 또한, .directive 함수를 이용해서 나만의 지시자를 생성할 수 있습니다. 

Angular 2

앵귤러 2의 기본개념은 이전과 다른 모습을 가지고 있습니다. 포스팅 내용은 앵귤러 공식 사이트에서 가져왔습니다. DOM 기반 이였던 이전 버전과 달리 앵귤러 2는 데이터의 변화를 감지합니다. 모바일에 적합하도록 발전하였습니다. 다양한 언어를 수용합니다. JavaScript, TypeScript, Dart. 앵귤러 2에서는 컴포넌트를 정의해 데이터를 보여줍니다. 아래 포스팅은 5분안에 앵귤러2를 활용한 앱 만들기 입니다.