AngularJS/AngularJS

▶[Angular Guide] 2. Architecture - Intro

비주얼라이즈 2016. 9. 20. 18:43

▶[Angular Guide] 2. Architecture


Angular2는 HTML또는 Javascript, 기타 다른 언어들(Dart, TypeScript)안에서, Client Application 을 구축하기위한 framework이며, Angular2 Syntax로 작성된 것들은 Javascript로 컴파일된다.


Angular2 프레임워크에는 여러 library가 포함되어있는데, 이중에는 core library도 있고, optional한 library도 있다.


결국, 우리가 Angular2로 해야할(할수 있는) 것이라면


우리는 Angularized markup 규칙에 따라, HTML 템플릿을 구성함으로써, 최종적으로 Angular Application을 만들 수 있다.


  • Component class를 작성함으로써

    •  Service Application 로직을 추가하는 템플릿을 관리(manage)하고, 

    • 모듈(module)안에서 Component들을 boxing하고, Service한다.

  • 그런다음, root module을 bootstrapping하여 application을 실행한다.

    •  Angular는 브라우저에 application 내용을 표현하고,

    •  우리가 명령한 내용에 따라 사용자 상호작용(User Interaction)에 응답/처리한다.


물론, 이것이 전부는 아니다.

이 문서에서 조금씩 세세한 부분을 다루기로하고, 여기에서는 Angular2의 큰 그림에 초점을 맞추고 살펴보자.



[ 이미지 : Angualr.io > Guide > Architecture ]


이미지는 Angular의 Architecture diagram이다.  위 다이어그램에서 Angular2 application의 여덟가지 main building block에 대해 확인할 수 있다. 


이 여덟가지 main building block을 읽기쉽게 리스트로 정리해봤다.

  • Modules

  • Components

  • Templates

  • Metadata

  • Data binding

  • Directives

  • Service

  • Dependency injection

나름대로의 방법으로 이 여덟개의 항목에대해 학습하고, 활용해야하는데, 이 모든 내용을 하나의 문서에 정리하는 것은 작성하는 사람이나 읽는 사람 모두에게 고된 일이기 때문에, 이 Angular Guide - Architecture에서는 8가지 항목에 대해 하나씩 별개의 문서로 정리해보고자 한다. 개인적으로는. Architecture가 그만큼 중요하고, 애둘러 넘어가기보다 꼭꼭씹어 이해하고싶다. 

위에서 언급한 여덟 가지 항목에 대한 글의 링크는 다음과같다.
링크가 존재하지 않는 글은 아직 작성되지않은 글입니다.

  • Modules

  • Components

  • Templates

  • Metadata

  • Data binding

  • Directives

  • Service

  • Dependency injection