왜 Angular 2.0인가?
Angular 2.0 개발은 다음의 문제를 다루기 시작했습니다:
모바일
새 버전은 모바일 앱 개발에 초점을 맞출 것입니다. 그 근거는 모바일(성능, 로드 시간 등)에 관련된 이슈들이 해결된 이후에 테스크탑 측면이 다뤄지기 더 쉬울거라는 점입니다.
모듈
성능 개선의 결과로 다양한 모듈들이 Angular의 핵심에서 제거될 것입니다. 계속 증가하는 Angular의 모듈 생태계에서 여러분이 원하는 부분을 선택하고 가져올 수 있을 것입니다.
모던 브라우저
Angular 2.0은 ES6와 “늘 싱싱한” 모던 브라우저(이들은 최종버전이 자동으로 업데이트 된다.)들을 타켓으로 삼을 것입니다. 이것은 개발을 더 어렵게 만드는 다양한 핵들과 2차 해결책들을 제거함으로서 개발자들이 자신의 비즈니스 도메인에 관련된 코드에만 집중할 수 있도록 해줍니다.
논란에 대해
ng-conference 동안 버전 2.0으로 마이그레이션하는 방법에 대한 언급은 없었습니다. 그것은 또한 2.0버전으로 그대로 점핑할 경우 이전 버전과 어떠한 호환성도 없을 것이기 때문에 Angular 1.3 어플리케이션들이 깨질 수 있음을 의미합니다. 이 이후에 개발자 커뮤니티에서는 새로운 Angular 1.3 프로젝트를 시작할 가치가 있는지에 대한 몇몇 개발자들의 의문 제기에 대해 불확실성과 추측이 난무해왔습니다.
어떤 변화가 있는가?
AtScript
AtScript는 ES6의 확대집합이며 Angular 2.0을 개발하는데 사용되었습니다. 이것은 ES5 코드를 생성하기 위해 Traceur 컴파일러로 처리되며 컴파일 시간 체크 대신 런타임 형식 (진위형)구문을 생성하는 데 TypeScript의 형식 구문을 사용합니다. 그러나 AtScritp는 필수가 아닙니다—여러분은 여전히 Angular 어플리케이션을 작성하기 위해 AtScrit 대신 일반 자바스크립트/ES5 코드를 사용할 수 있습니다.
향상된 의존성 주입(DI)
의존성 주입(그 자신 자체가 아니라 객체에 의존성을 전달하는 소프트웨어 디자인 패턴입니다)은 Angular의 다른 경쟁자들과 근본적으로 다른 이유중 하나입니다. 이것은 특히 모듈개발과 컴포넌트 분리의 측면에서 유리합니다. 그러나 Angular 1.x에서 이것을 구현하는 데에 문제가 많았습니다. Anuglar 2.0은 이런 문제를 해결할 뿐만 아니라 자식요소 주입, lifetime/scope 제어와 같은 기능들도 추가될겁니다.
주석
AtScript는 함수와 메타데이터를 연결하는 도구를 제공합니다. 이것은 DI 라이브러리(함수를 호출하거나 클래스의 인스턴스를 생성 할 때 DI 라이브러리는 관련 메타 데이터를 확인합니다)에 필요한 정보를 제공함으로써 객체 인스턴스의 구성을 용이하게합니다. Inject 주석을 제공함으로서 파라미터 데이터를 쉽게 오버라이드 할 수 있을 것입니다.
Child Injectors
child injector는 자식레벨에 오버라이딩 할 수 있는 능력을 가지고 부모의 모든 서비스를 상속합니다. 요구에 따라 여러 타입의 객체에서 호출될 수 있고 자동으로 다양한 scope에서 오버라이드 됩니다.
Instance Scope
향상된 DI 라이브러리는 인스턴스 스코프 제어를 특징으로 할 것입니다. 이것은 child injectors와 자기 자신의 scope 지시자를 함께 사용하면 더욱 강력해질 것입니다.
템플릿과 데이터 바인딩
애플리케이션을 개발할 때 함께가는 템플릿화와 데이터 바인딩에 대해서 알아봅시다.
동적 로딩
이것은 Angular의 현재 버전에서 누락된 사항입니다. 이것은 Angular 2.0에서 해결될 것이며 개발자들이 즉각 즉각 새로운 디렉티브들과 컨트롤러들을 추가할 수 있게 할 것입니다.
템플릿
Angular 2.0에서 템플릿 컴파일 과정은 비동기적일 것입니다. 코드 ES6 모듈 사양을 기반으로, 모듈 로더는 단순히 구성 요소 정의들을 참조하여 의존성을 로드할 것입니다.
디렉티브(Directives)
Angular 2.0에서는 세 가지 종류의 디렉티브들이 있을 것입니다.
- 컴포넌트 디렉티브 - 이것은 자바 스크립트, HTML 또는 선택 사양 인 CSS 스타일 시트에 로직을 캡슐화하여 재사용 가능한 구성 요소를 작성합니다.
- 장식적 디렉티브 - 이 디렉티브는 (툴팁이나 ng-show/ng-hide를 사용한 토글 요소와 같은) 장식적인 요소들을 사용하게 될 것입니다.
- 템플릿 디렉티브 - 이것은 HTML을 제사용 가능한 템플릿으로 변환할 것입니다. 템플릿을 인스턴스화하고 그것을 DOM에 주입하는 것이 완전히 디렉티브 작성자에 의해 컨트롤되어질 것입니다. 예를 들면 ng-if 및 ng-repeat가 포함됩니다.
라우팅 솔루션
초기 Angular 라우터는 단지 몇 가지 단순한 케이스를 처리할 수 있도록 설계되었습니다. 그러나 프레임워크가 성장함에 따라 더 많은 기능들이 묶여지게 되었습니다. Angular 2.0에서의 라우터도 역시 단순하게 설계되었지만 확장가능합니다. 이것은 아래의 단순한 기능들이 포함되어있습니다:
- Simple JSON-based Route Config
- Optional Convention over Configuration
- Static, Parameterized and Splat Route Patterns
- URL Resolver
- Query String Support
- Use Push State or Hashchange
- Navigation Model (For Generating a Navigation UI)
- Document Title Updates
- 404 Route Handling
- Location Service
- History Manipulation
이제 Angular 2.0을 새로운 차원으로 향상시키는 촉매제인 개선된 라우터의 기능들을 살펴보겠습니다.
자식 라우터(Child Router)
자식 라우터는 자기 자신의 라우터에 함께 제공됨으로서 더 작은 애플리케이션에 그 애플리케이션의 각 컴포넌트를 변환할 것입니다.
스크린 활성자(Screen Activator)
이것은 can* 콜백함수 세트들을 통해 탐색 주기 전반에 거처 더 훌륭한 제어를 개발자들에게 제공할 것입니다:
- canActivate – Allow/Prevent navigating to the new controller.
- activate – Respond to successful navigation to the new controller.
- canDeactivate – Allow/Prevent navigation away from the old controller.
- deactivate – Respond to successful navigation away from the old controller.
Design
이 모든 로직은 파이프라인 아키텍쳐 통해 구축됩니다. 파이프라인 아키텍쳐는 놀라울 정도로 쉽게 자기 자신의 단계를 파이프라인에 추가하거나 제거할 수 있도록 해줍니다. 더 나아가 이것의 비동기적인 천성은 파이프라인에 있는 동안 사용자 인증을 위해 서버 요청을 하거나 콘트롤러에 데이터를 로드할 수 있도록 합니다.
Logging
Angular 2.0은 diary.js라고 부르는 로깅 서비스를 포함할 것입니다—이것은 여러분의 애플리케이션에서 소요되는 시간을 측정하는 매우 유용한 이 기능입니다(이것으로 여러분의 코드에서 병목현상을 인지 가능하게 됩니다.).
Scope
$scope는 ES6 클래스들에 우호적인 Angular 2.0에서는 제거될 예정입니다.
