AngularJS 2.0_AngularJS의 새로운 기능은 무엇입니까?

AngularJS는 웹 애플리케이션 개발 분야에서 가장 인기 있는 오픈 소스 JavaScript 프레임워크가 되었습니다. 창립 이래 놀라운 경제 성장과 개인 개발자, 기업, 커뮤니티를 포함한 그룹의 지원 및 채택이 성공의 원동력이었습니다.

Angular는 복잡한 단일 페이지 애플리케이션을 구축하기 위한 클라이언트 측 MVW 프레임워크(모델-뷰-무엇이든)가 되었습니다. 개발 프로세스를 단순화하는 동시에 애플리케이션 테스트와 애플리케이션 작성 모두에서 중요한 역할을 합니다.

Angular의 현재 버전은 1.3으로, 안정적이며 Google(프레임워크 유지관리자)에서 많은 애플리케이션을 지원하는 데 사용됩니다(Google에서는 Angular 1.2 또는 1.3을 실행하는 애플리케이션이 1,600개 이상인 것으로 추정됩니다). Angular 2.0은 지난 10월 나이지리아 컨퍼런스에서 공식적으로 발표되었으며 버전은 복잡한 주요 업데이트가 아닐 것입니다.

Angular 2.0이 출시된 이유는 무엇인가요?

Angular 2.0(예상 출시일은 2015년 후반)에 대해 더 자세히 논의하기 전에 새 버전의 철학을 간략하게 살펴보겠습니다. Angular 2.0 개발은 다음 문제를 해결하는 것부터 시작됩니다.

모바일: 새 버전은 모바일 애플리케이션 개발에 중점을 둘 것입니다. 그 근거는 데스크톱 측면을 처리하는 것이 더 쉽고, 문제가 모바일(성능, 로드 시간)과 관련되면 이 측면에 집중하면 문제가 해결된다는 것입니다.

모듈화: 더 나은 성능을 위해 Angular의 코어에서 개별 모듈이 제거됩니다. 즉, 필요한 부품을 선택할 수 있습니다.
현대화: Angular 2.0은 ES6 및 "에버그린" 최신 브라우저(최신 버전으로 자동 업데이트됨)를 대상으로 합니다. 이는 개발자가 비즈니스 도메인과 관련된 코드에 집중할 수 있음을 의미합니다.

어떤 논란이 있나요?

나이지리아 회의에서는 버전 2.0으로의 마이그레이션 경로에 대한 언급이 없었습니다. 또한 버전 2.0으로 점프하면 원래 버전 1.3 애플리케이션이 중단되고 이전 버전과의 호환성이 없을 것이라고 지적했습니다. 그 이후로 개발자 커뮤니티는 불확실성과 추측으로 가득 차 있었고 일부 개발자는 새로운 Angular 1.3 프로젝트를 시작할 가치가 있는지 의문을 제기하기 시작했습니다.

어떤 변화가 있나요?

AtScript

AtScript는 ES6의 상위 세트이며 Angular 2.0을 개발하는 데 사용됩니다. 이는 Traceur 컴파일러(ES6와 함께)에 의해 처리되어 ES5 코드를 생성하고 TypeScript 유형 구문을 사용하여 실행 시간 어설션을 생성하고 컴파일 시간 검사를 대체합니다. 그러나 AtScript는 필수가 아니며 AtScript 대신 순수 JavaScript/ES5 코드를 사용하여 Angular 애플리케이션을 작성할 수 있습니다.

의존성 항목(DI) 개선

종속성 주입(Dependencyjection) 모델의 기본 아이디어는 클라이언트 클래스 Client가 자신이 의존하는 멤버 변수 IServer를 초기화할 필요가 없고, 독립적인 개체를 사용하여 적절한 구현 클래스를 생성한다는 것입니다. IServer를 클라이언트의 멤버 변수에 할당합니다. 이는 모듈 개발 및 구성 요소 격리에 특히 유용합니다. Angular 2.0은 Angular 1.X의 이러한 측면을 해결합니다. 하위 인젝터 및 수명/범위 제어와 같은 누락된 기능을 추가했습니다.

주석

AtScript는 메타데이터와 기능을 연결하는 도구를 제공합니다. 이는 DI 라이브러리에 필요한 정보를 제공하는 객체 인스턴스를 생성하는 데 도움이 됩니다(함수를 호출하거나 클래스 인스턴스를 생성할 때 관련 메타데이터를 검사). 또한 주석을 제공하여 매개변수 데이터를 쉽게 오버로드할 수 있습니다.

어린이 주사기

하위 인젝터는 상위 클래스의 모든 성능 서비스를 상속받습니다. 요구 사항에 따라 다양한 유형의 개체를 호출할 수 있으며 다양한 범위가 자동으로 적용됩니다.

인스턴스 범위

개선된 DI 라이브러리에는 인스턴스 범위 지정 기능이 있으며, 이는 하위 인젝터 및 자체 범위 식별자를 사용할 때 더욱 강력해집니다.

템플릿 및 데이터 바인딩

애플리케이션을 개발할 때 템플릿과 데이터 바인딩이 함께 사용됩니다.

동적 로딩

이 기능은 현재 Angular 버전에는 없지만 Angular 2.0에는 표시됩니다. 이를 통해 개발자는 이동 중에도 새로운 명령이나 컨트롤러를 추가할 수 있습니다.

템플릿

Angular 2.0에서는 템플릿 컴파일 프로세스가 비동기식입니다. 코드는 ES6 모듈 사양을 기반으로 하기 때문에 모듈 로더는 단순히 구성 요소 정의를 참조하여 종속성을 로드합니다.

명령

Angular 2.0에는 세 가지 지침이 있습니다.

구성 요소 지시문 - JavaScript, HTML 또는 선택적 CSS 스타일시트로 캡슐화된 논리를 통해 재사용 가능한 구성 요소를 생성합니다.

장식 지시문 - 이 지시문은 요소를 장식하는 데 사용됩니다(예: 도구 설명 추가 또는 ng-show/ng-hide를 사용하여 요소 표시/숨기기).

템플릿 지시문 - HTML을 재사용 가능한 템플릿으로 변경합니다. DOM에 템플릿을 인스턴스화하고 삽입하는 작업은 지시어로 완전히 제어할 수 있습니다. 이에 대한 예로는 ng-if 및 ng-repeat가 있습니다.

라우팅 계획

초기 Angular 라우팅은 몇 가지 간단한 상황을 처리하도록 설계되었습니다. 그러나 프레임워크가 발전함에 따라 점점 더 많은 기능이 추가됩니다. 라우팅은 이미 Angular 2.0에서 확장 가능하며 다음과 같은 기본 기능이 포함됩니다.

간단한 JSON 기반 라우팅 구성

구성에 따른 선택적 계약

정적. 매개변수화된 라우팅 모드

URL 파서

쿼리 문자열 지원

푸시 상태 또는 해시체인지를 사용하세요.

탐색 모델(탐색 UI 생성)

문서 제목이 업데이트되었습니다.

404 라우팅 처리

위치 서비스

역사적인 운영.

이제 Angular 2.0을 새로운 차원으로 끌어올린 라우팅 기능을 살펴보겠습니다.

하위 경로

하위 라우팅은 전체 애플리케이션의 기능 세트를 캡슐화하는 데 도움이 되는 자체 경로를 제공하여 애플리케이션의 각 구성 요소를 더 작은 애플리케이션으로 변환합니다.

화면 활성화

이는 개발자가 can* 콜백 세트를 통해 탐색 수명 주기를 더 잘 제어하는 ​​데 도움이 됩니다.

canActivate - 새 컨트롤러에 대한 탐색을 허용/차단합니다.

활성화 - 새 컨트롤러로의 성공적인 탐색에 응답합니다.

canDeactivate - 기존 컨트롤러에서 벗어나는 탐색을 허용/차단합니다.

비활성화 - 이전 컨트롤러에서 성공적으로 탐색한 경우 응답합니다.

이러한 콜백을 통해 개발자는 부울 값이나 명령(하위 수준 제어용)을 반환할 수 있습니다.

디자인

이 모든 로직은 파이프라인 구조를 사용하여 구축되므로 파이프라인에 단계를 추가하거나 기본 항목을 제거하는 것이 매우 쉽습니다. 또한 비동기식 특성을 통해 개발자는 서버 요청을 사용하여 컨트롤러에 대한 데이터를 인증하거나 로드할 수 있지만 이는 여전히 계획되어 있습니다.

로그

Angular 2.0에는 Diary.js라는 로깅 서비스가 포함됩니다. 이는 애플리케이션에서 시간이 소요되는 위치를 측정하는 데 매우 유용한 기능입니다.

범위

$scope는 Angular 2.0에서 제거되고 ES6 클래스로 대체됩니다.

결론

출시일이 다가올수록 Angular 2.0을 둘러싼 흥분과 소문은 더욱 거세질 것입니다. 획기적인 변화가 좋은 것입니까? 우리가 알 수 있는 방법은 없지만, 재배치 계획이 명백히 부족하다는 점을 감안할 때 반대자들은 당연히 긴장하고 있습니다. 곧바로 설렘이 찾아왔다. 그러나 그것이 다가오고 있기 때문에 우리가 할 수 있는 것은 그것을 적극적으로 환영하는 것입니다.

위 내용은 AngularJS 2.0의 새로운 기능을 소개하는 내용이 도움이 되기를 바랍니다.