#angularjs2.0

by 스키머

AngularJS 블로그에 포스팅 된 Angular 2 Beta 릴리즈에 대한 글의 요약 입니다.

Angular 2 Beta

beta의 의미

Angular 2를 이용해서 대규모 어플리케이션을 성공적으로 구축할 수 있다고 확신

개발자 프리뷰와 알파를 통해 에드워즈, GreenTea(구글 내부 CRM 시스템), 구글 Fiber 등 구글의 대규모 프로젝트와 Ionic2, NativeScript, Batarangle 등의 외부에서 개발중

실제로 새로운 Angular 2 코드 기반의 구글 Fiber가 출시

시작하기

angular.io에 Quickstart와 Tutorial 을 업데이트

developer guides 와 chetsheet 를 통해서 Angular 2의 주요 기능을 확인

Angular 1 에서 업그레이드

ngUpgrade

가능한 기존 어플리케이션을 활용하고 Angular 2로 업그레이드 할 수 있도록 지원

Angular 1 어플리케이션에서 Angular 1 코드를 수정하지 않고 Angular 2 코드 혼합 사용 가능

참고

thoughtram blog

primer on Angular 2

ngForward

다운로드 크기에 민감할 경우 Angular 1 과 Angular 2 라이브러리를 동시에 실행 하는것을 방지하기 위해서 Angular 1 어플리케이션에서 Angular 2 문법을 사용 가능하게 함

현재 어플리케이션에서 Angular 2 구문과 스타일을 사용하고 준비가 완료되면 Angular 2의 전체 업그레이드를 단시간에 할수 있음

피드백 제시

Github, Stack Overflow, Gitter 를 통해서 이슈 제출

angular.io 각 페이지 좌측 상단에 ! 아이콘을 클릭하여 개선할 내용 전송

진행중인 내용과 향후계획

Angular 2의 payload 크기 감소

개발 프로세스 전반에 걸쳐 쉽게 사용할 수 있는 Angular CLI 개발

개발 친화적인 컴포넌트 라우터의 정의와 링크 API 개발

애니메이션 지원

I18n, L10n 지원

ES5/ES6 사용법에 대한 더 많은 문서

startup / 런타임 성능 개선

구성 스타일 가이드

단위, 종단 테스트 개선

모바일 웹과 모바일 앱에 대한 추가 지원

추가내용

#AngularJS - Add #service in #angular2 with #ES5 #angular2 #javascript @AngularTutorial @LearnAngularJS

Click here to learn how to add data binding in angular js 2.0 In this tutorial, i will show how to add a service using ES5.  Create a new file for service which you want to add (ex : UserService.js in our scenario) UserService.js var UserService = function() {}; UserService.prototype.getInitialInfo = function() { return { first_name : "", last_name : "", phone: "", email_address : "" }; } In this…

#angular2 - Data #binding in #angular JS 2.0 with #ES5 #javascript @AngularTutorial @LearnAngularJS #AngularJS

Click here to learn about adding multiple view with Angular JS 2.0 and ES5 If you follow the tutorial above, the index.html files remain same and it doesn’t change this file much. index.html Hello Angular 2 To get started with the userForm.html file, Lets create a new file userForm.html and i will be adding appropriate user information to get the user details (ie. First Name, Last Name, email…

@angularjs 2.0 - Adding #Multiple views in angular JS 2.0 with #ES5 #AngularJS #html5 #javascript @LearnAngularJS

Click here to get started with Angular JS 2.0 Once you are done with the basic tutorial, you can add a new view by following way: In Index.html, add a new element with a name.  As mentioned below “userForm”. index.html Hello Angular 2 Now in app.js, define a new view and add proper annotations similar to HelloAngular.  We have used UserForm and assigned annotations like Component to set selector…

[AngularJS2] Error : Unexpected directive value 'undefined' on the View of component @angularjs @AngularJS_News

If you see error in angularJS 2.0 something like this: Unexpected directive value ‘undefined’ on the View of component Make sure your directive value is correct which is added in viewAnnotations. Example : HelloAngular.annotations = [ new angular.ComponentAnnotation({ selector: 'hello' }), new angular.ViewAnnotation({ template: '

{{message}}

' + '

[Error] : Can't bind to 'ngForOf' since it isn't a know property of the 'template' element @angularjs #angularjs

If you see an error like this in angularJS2 application. Can’t bind to ‘ngForOf’ since it isn’t a known property of the ‘template’ element and there are no matching directives with a corresponding property Make sure you add the angular.NgFor directives in directives of viewAnnotations. Example Code: HelloAngular.annotations = [ new angular.ComponentAnnotation({ selector: 'hello' }), new…

AngularJS2 with ES5 tutorial #javascript #tutorials @angularjs @AngularJS_News @AngularTutorial

I recently got amazed by angularJS2 and the changes they have added for angular JS 2.0 from 1.0. This is interesting as there are lots of features being changed. Here is the basic tutorial of hello angular. index.html Hello Angular 2 In Index.html, I am using the alpha build from angular for ES5 version. One thing to notice here is you don’t have to define ng-app which we used to do in previous…

원문 : What’s New in AngularJS 2.0

번역 : 공잠

AngularJS는 웹 어플리케이션 세계에서 자바스크립트 프레임워크 중 가장 인기있는 오픈소스중 하나가 되었습니다. AngularJS가 시작된 이래, 개인과 독립 사업자 둘 모두의 커뮤니티 지원과 채택이라는 측면에서 경이로운 성장을 입증했습니다.

AngularJS는 복잡한 단일 페이지 어플리케이션을 구축하기위한 클라이언트 측 MVW(Model-View-Whatever) 프레임워크로 성숙해갔습니다. 개발프로세스가 단순화 되면서 어플리케이션 테스트와 작성 둘 모두를 중요한 것으로 자리매김되었습니다.

Angular의 현재 버전은 1.3입니다. 이 버전은 안정적이고 그것을 만든 구글이 수많은 훌륭한 어플리케이션을 작동시키기에 충분한 성능을 갖추었습니다.(구글 내부에 1.2 또는 1.3 버전에서 실행되는 응용 프로그램이 1600개가 넘게 있다는 것으로 추정됩니다)

Angular 2.0은 공식적으로 2014년 10월 ng-conference에서 발표되었습니다. 이 버전은 복잡한 주요 업데이트라기 보다는 전체 프레임워크를 제작성한것이며 [이전 버전과의]단절적인 변화를 포함할 것입니다.

왜 Angular 2.0인가?

Angular 2.0에 대해 자세한 논의에 들어가기 전에 새 버전의 뒤에 있는 철학에 대해 간단히 살펴보겠습니다.(이 새 버전은 2015년 말 쯤 출시가 예상됩니다.) 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에서는 제거될 예정입니다.

결론

지금 Angular 2.0을 둘러싸고 흥분과 들뜬 분위기가 느껴지집니다. 출시일이 가까워 질수록 고조되겠지요. 3월 초에 다음 ng-컨퍼런스가 열릴 장소를 볼 수 있을 것입니다. 그곳에서 다음 버전에 대한 자세한 내용이 등장할 가능성이 높습니다.