[AngualrJS 2.0] Angular 2.0 Release

Angular Github Change Log Document

https://github.com/angular/angular/blob/master/CHANGELOG.md

RC5 Bug Fixes

core: support components without a selector

http: convert objects passed to requests into a string

RC5 Code Refactoring

core: change bootstrap of modules and names of platforms

core: deprecate coreBootstrap, PLATFORM_PIPES/DIRECTIVES providers and ComponentResolver

RC5 Features

core: introduce [@AppModule](https://github.com/AppModule)

http: add support for blob as a response type

http: add options method to Http

i18n: merge translations

NgStyle: add support for the style.unit notation

RC5 Breaking Changes

---

rc4 에서 rc5로 달라진 점

http://happygrammer.tistory.com/130

http://sculove.github.io/

- ngModule에서 dependency를 관리하고, 실제 사용하는 dependency를 한 눈에 볼 수 있다. 뿐만 아니라, 코드도 더 간결해진다. 이렇게 할수 있는 이유는 ngModule이 JavaScript의 module과 같이 module 단위로 scope를 갖기 때문에, ngModule에 명시된 Component들은 ngModule에 명시된 dependencie 객체들(directive, pipe, service, component)을 자유롭게 사용할 수 있다.

- ngModule에서 쓰는 모든 자원을 declarations이나 providers로 수동으로 명시 해줘야하는 번거로움이 있다.

- ngModule은 라우터를 통해 느린로딩을 지원한다. 

---

Angular 공식 블로그

  개발자의 생산성, payload의 small size로 최적화된 프레임워크,사용 사례의 넓은 범위에 걸쳐 검증된 안정성이다. ahead-of-time 컴파일과 내장된 lazy-loading으로 browser, desktop, mobile 환경에서 fastest, smallest하게 배포할 수있다. 이번 릴리즈는 Angular CLI와 styleguide와 함께 개발자의 생산성에 큰 개선을 나타낸다. Angular 1은 웹을 개발하는 방법의 문제를 해결했다. 응용 프로그램 개발자가 직면한 도전과제와 응용 프로그램이 지원해야만 하는 장비의 정교함 모두가 상당히 변경되었다. Router, Forms 이외의 핵심 API들의 이번 Release에서 당신은 어떤 플랫폼에 대해서도 놀라운 응용 프로그램을 구축 할 수 있다. Angular는 모듈형이며 유연하기 때문에 당신만의 접근법을 선호하는 경우 타사 라이브러리를 사용하거나 직접 작성할 수 있다.

What's Next?

• API에 대한 버그 수정 및 non-breaking 기능 안정화
  Bug fixes and non-breaking features for APIs marked as stable
• 사용 사례와 관련된 자세한 가이드 및 실시간 예제
  More guides and live examples specific to your use cases
• 더 많은 Animations의 동작
• Angular Material 2
• Experimental 에서 WebWorker로 이동
• Angular Universal을 위한 더 많은 기능과 언어 More features and more languages for Angular Universal
• 속도와 payload size 개선

내용 확인

http://angularjs.blogspot.kr/2016/09/angular2-final.html

Angular 2 RC5 - including:

• Support for @NgModule decorators
• FormsModule, RouterModule, and Material Design modules make it easier to use these libraries
• Ahead-of-time (AoT) compilation for components and services
• Lazy-loading support for the router

@NgModule

@NgModule은 Angular의 핵심과 개발자 인체 공학을 위한 기능을 제공 하기 위해 RC5에서 추가된 새로운 Decorator이다. 기본적으로 NgModule은 컴파일러가 필요로하는 context를 제공하여 반복적으로 선언하는 오버헤드 없이 모든 장소에서 사용 할 수 있도록한다.

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ MyComponent ],
  bootstrap: [ MyComponent ]
})
class MyAppModule {}

[line 3] declarations 는 angular에게 `MyComponent` 에 `MyAppModule` 가 속해 있는 것을 알려준다.

[line 4] bootstrap은 시작시 모듈(MyAppModule)이 만들어 질 때 자동으로 DOM에 `MyComponent`을 부트스트랩한다고 알려준다.

Compilation

  Compiler는 Angular의 핵심이다. 컴파일러의 작업은 개발자에 의해 작성된 Component와 Service를 가지고 어플리케이션과 상호작용하는 브라우저에 명령을 설정하는 것이다.

  ComponentFactory는, 단순히 데이터를 기반으로 DOM을 업데이트하는 지침 위주의 wrapper이다. 지금까지 기록에서 거의 모든 Angular Application은 실행하기 전에 투명하게 보이지 않는 일이였다. 우리는 과거에 '동적' 컴파일로 언급한 것을 JIT(Just in Time)이라는 공식 용어로 지정하였다. 처음부터 Angular 2를 위한 설계의 일부는 AoT를 발생시키는 프로세스가 가능했다. Angular의 Code 크기의 약 60%가 이 작업을 수행하는 컴파일러이다. 그래서 AoT 컴파일이 가능하다는 의미는 Wire를 통해 Byte의 절감하여 당신의 User에게 Code를 제공할 필요가 없다는 것이다. 또한 작업시간에 앞서 발생하기 때문에 App의 시작할 때 컴파일 작업을 수행해야 할 필요가 없어 시작 시간을 급격히 감소할 것이다.

  어떻게 이 일을 하는가? 각 Component에 대해 조립하는 경우, 컴파일러는 템플릿을 검사하고 Custom Components, Directives, pipes를 찾는다. 이 것은 알려진 기능 목록에 대해 Selector를 조회하여 작업을 수행한다.

내용 확인

http://angularjs.blogspot.kr/2016/08/angular-2-rc5-ngmodules-lazy-loading.html

---

AngularJS AoT

Flow of events with Ahead-of-Time Compilation

we get through the following steps:

• Development of Angular 2 application with TypeScript.
• Compilation of the application with ngc. ( ngc is a drop-in replacement for tsc. )
  • Performs compilation of the templates with the Angular compiler to TypeScript.
  • Compilation of the TypeScript code to JavaScript.
• Bundling.
• Minification.
• Deployment.

Although the above process seems lightly more complicated the user goes only through the steps:

• Download all the assets.
• Angular bootstraps.
• The application gets rendered.

As you can see the third step is missing which means faster/better UX and on top of that tools like angular2-seed and angular-cli will automate the build process dramatically.

내용 확인

http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/

AoT 컴파일이 중요한 3가지 이유 

빨라진 렌더링

 브라우저는 어플리케이션의 사전 컴파일된 버전을 다운로드한다. 어플리케이션이 처음 컴파일 할 때 까지 기다리지 않고 어플리케이션이 즉시 랜더링 할 수 있도록 브라우저가 실행코드를 로드한다.

적은 비동기 요청

 컴파일러는 외부 HTML templates과 CSS style sheets를 별도의 응용 프로그램의 Ajax 요청을 제거한  javascript 내에서 즉시 처리한다.

작아진 Angular Framework 크기

 어플리케이션이 이미 컴파일 되어있는 경우 Angular compiler를 다운로드 할 필요가 없다. 컴파일러는 Angular 자체의 약 절반을 차지한다. 그래서 응용 프로그램의 payload를 극적으로 줄일 수 있다.

AoT를 적용한 소스코드

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Tree Shaking

A Tree Shaker walks the dependency graph, top to bottom, and shakes out unused code like dead needles in a Christmas tree. most of the reduction in small apps comes from removing unreferenced Angular features.

Tree Shaker는 위에서 아래로 종속성 그래프를 만들고 사용하지 않은 코드를 떨쳐낸다. 작은 앱의 감소의 대부분은 참조되지 않은 Angular의 기능을 제거함에서 비롯된다.

내용 확인

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

---

What does an Angular 2 Module look like ?

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
...
 
@NgModule({
  declarations: [AppComponent, MyComboboxComponent, 
                    CollapsibleDirective, CustomCurrencyPipe],
  imports: [BrowserModule],
  providers: [UserService, LessonsService]
})
export class ExampleModule {
 
}

• the @NgModule annotation is what actually defines the module
• we can list the components, directives and pipes that are part of the module in the declarations array
• we can import other modules by listing them in the imports array
• we can list the services that are part of the module in the providers array, but read further on why this should only be used in some cases

이 선언 그룹은 응용프로그램의 view를 구성하고 밀접하게 관련된 기능을 문서화 할 때 유용하다.

내용 확인

http://blog.angular-university.io/angular2-ngmodule/