AngularJS 및 Angular 2 : 상세한 비교

Angularjs와 Angular 2

의 주요 차이점 이 기사는 1 세대 AngularJS와 Angular 2의 주요 차이점을 비교합니다. 현재 AngularJS 프로젝트를 사용하고 있고 마이그레이션 해야하는지 확실하지 않은 경우이 기사에서 시작하는 데 도움이됩니다. 최근에 Angular는 단일 페이지 응용 프로그램 (SPA) 및 PWA (Progressive Web Application) 개발을위한 프레임 워크 및 플랫폼으로 빠르게 발전했습니다. AngularJS는 선언적 프로그래밍을 기반으로 한 조회를 구축하는 개념입니다. 이를 위해서는 애플리케이션의 비즈니스 논리에서 DOM 운영을 분리해야하며, 이는 그 자체로 많은 이점이 있습니다. 그러나 AngularJS는 성능 측면에서 많은 단점과 바닥에서 작동하는 방식을 가지고 있습니다. 따라서 개발 팀은 1 년 동안 코드를 처음부터 다시 작성하고 2016 년 말 Angular 2를 출시했습니다. 대부분의 개발자는 Angular 2가 원래 AngularJ와 유사하지 않은 다른 플랫폼으로 간주합니다. AngularJS와 Angular 2를 비교하고 비교해 봅시다. 프레임 워크 아키텍처

AngularJS는 모델, 뷰 및 컨트롤러를 포함한 기존 MVC (Model-View-Controller) 아키텍처를 따릅니다.

컨트롤러 :

는 사용자 상호 작용, 바인딩 모델 및 뷰를 처리합니다.

보기 :

는 프리젠 테이션 계층과 실제 UI를 나타냅니다.

모델 : 데이터의 추상 표현.

일부 개발자는 AngularJS가 MVVM 패턴을 따르고 컨트롤러를 뷰 모델로 대체한다고 생각합니다. 보기 모델은 컨트롤러와 유사한 JavaScript 기능입니다. 특별한 것은보기와 모델 사이의 데이터를 동기화한다는 것입니다. UI 요소에 대한 변경 사항은 모델로 자동 전파되고 그 반대도 마찬가지입니다. 다음 그림은 다양한 AngularJS 구성 요소가 어떻게 연결되는지 보여줍니다.

Angular는 구성 요소 기반 아키텍처를 채택합니다. 각 각도 응용 프로그램에는 루트 구성 요소라고하는 하나 이상의 구성 요소가 있습니다. 각 구성 요소에는 비즈니스 로직과 뷰 레이어를 나타내는 템플릿을 처리하는 관련 클래스가 있습니다. 여러 개의 밀접하게 관련된 구성 요소를 함께 쌓아 모듈을 생성 할 수 있으며 각 모듈 자체는 기능 단위를 형성합니다.
• 그림에서 볼 수 있듯이 구성 요소는 템플릿에 바인딩됩니다. 구성 요소는 TypeScript 클래스를 사용하여 구성되며 @Component 주석을 사용하여 템플릿을 첨부합니다. Angular의 종속성 주입 서브 시스템을 사용하여 서비스를 구성 요소에 주입 할 수 있습니다. Angular의 모듈 개념은 AngularJS 모듈과 매우 다릅니다. ngmodule은 기능 단위를 정의하는 컨테이너입니다. ngmodule에는 구성 요소, 서비스 및 기타 기능이 포함될 수 있습니다. 그런 다음 모듈 장치를 다른 모듈과 함께 가져 와서 사용할 수 있습니다.
템플릿 Angularjs에서 템플릿은 HTML로 작성됩니다. 동적으로 만들기 위해 속성, 태그, 필터 및 양식 컨트롤과 같은 AngularJS 특정 코드를 추가 할 수 있습니다. 또한, 위에서 언급 한 양방향 데이터 바인딩 기술을 지원합니다. 다음 코드 스 니펫은 템플릿에서 지침과 이중 브레이스의 사용을 보여줍니다.

Angular에서는 AngularJS의 템플릿 구조가 개선되었으며 많은 새로운 기능이 템플릿에 추가되었습니다. 주요 차이점은 각 구성 요소에 템플릿이 첨부된다는 것입니다. 모든 html 요소는 , ,

및 를 제외하고 템플릿에서 작동합니다. 또한 템플릿 바인딩, 템플릿 보간, 템플릿 문, 속성 바인딩, 이벤트 바인딩 및 양방향 바인딩과 같은 기능도 있습니다. 내장 된 속성 지침 (예 : NGClass, NGStyle 및 NGModel) 및 내장 구조 지침 (예 : NGIF, NGFOROF, NGSWITCH)도 템플릿의 일부입니다.

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

종속성 주입

종속성 주입은 종속성을 만족시키고 필요할 때 구성 요소에 주입하는 설계 패턴입니다. 이는 구성 요소에 대한 종속성을 하드 코드 할 필요가 없습니다. AngularJS에는 구성 요소 생성, 종속성 주입 및 모든 종속성 목록을 구문 분석하는 인젝터 서브 시스템이 있습니다. 필요에 따라 다음 구성 요소를 주입 할 수 있습니다 <script></script> <style></style> value <base> 공장 <title></title> 서비스

제공 업체

상수 서비스, 지침 및 필터는 공장 방법을 사용하여 주입 할 수 있습니다. 다음은 공장 방법의 예입니다. 공장 메소드는 MyModule이라는 모듈에 등록되어 있습니다. 메소드는 동일하게 유지되지만 Angular는 이전 DI 모드와 다른 새로운 종속성 주입 시스템을 가지고 있습니다. Angular의 종속성 주입은 제공자 및 선언이 포함 된 @NGModule 배열을 통해 관리됩니다. 선언 배열은 구성 요소 및 지침을 선언하기위한 공간입니다. 의존성 및 서비스는 제공자 배열을 통해 등록됩니다.

ContactListService라는 연락처 목록을 검색하고 ContactList 구성 요소에 제공하는 서비스가 있다고 가정합니다. 먼저 에 ContactListService를 등록해야합니다. 다음으로 다음과 같이 서비스를 구성 요소에 주입해야합니다. 여기서, 우리는 Angular에게 구성 요소의 생성자에 서비스를 주입하도록 지시합니다.
• JavaScript vs typeScript angularjs는 순수한 JavaScript 프레임 워크입니다. 이로 인해 전체 프로젝트 설정 프로세스가 훨씬 쉬워집니다. 기본 JavaScript 경험이있는 개발자는 프레임 워크를 사용하여 시작할 수 있습니다. 이 때문에 Angular 1.0의 학습 곡선은 다른 프론트 엔드 프레임 워크에 비해 매우 매끄 럽습니다.
Angular 2는 TypeScript를 구축 응용 프로그램의 기본 언어로 소개합니다. TypeScript는 JavaScript의 구문 슈퍼 세트이며 일반 JavaScript로 컴파일됩니다. Angular Team은 유형 주석 기능으로 인해 JavaScript보다 TypeScript를 선택하여 선택적 정적 유형 확인을 수행 할 수 있습니다. 유형 확인은 컴파일 타임 오류가 코드에 몰래 들어가는 것을 방지하는 것을 방지합니다. 이렇게하면 JavaScript 코드를보다 예측할 수 있습니다.
• 또한 TypeScript는 수업, 인터페이스 및 데코레이터 (클래스 데코레이터, 속성 데코레이터 및 매개 변수 데코레이터)에도 인기가 있습니다. Angular는 TypeScript 클래스를 사용하여 구성 요소를 정의합니다. @Component는 클래스 데코레이터를 사용하여 메타 데이터를 구성 요소에 첨부하는 방법의 인기있는 예입니다. 일반적으로 여기에는 템플릿 선택기 태그, TemplateUrl 및 제공자 배열과 같은 구성 요소 구성 세부 사항이 포함되어있어 관련 종속성을 구성 요소에 주입 할 수 있습니다.
  도구 지지대

  <code class="language-html"><div ng-app>
    <div ng-controller="MyController">
      <input ng-model="foo" value="bar">
      <button ng-click="changeFoo()">{{buttonText}}</button>
    </div>
    
  </div></code>

  더 나은 도구 지원은 개발자가 물건을 더 빨리 구축하고 전반적인 개발 워크 플로에 추가 할 수 있도록 도와줍니다. 예를 들어, 명령 줄 인터페이스 (CLI)는 처음부터 응용 프로그램을 작성하는 데 걸리는 시간을 크게 줄일 수 있습니다. 마찬가지로 IDE, 텍스트 편집기, 테스트 키트 등과 같은 다른 도구가 있습니다. AngularJS에는 공식 CLI가 없지만 많은 타사 생성기와 도구가 있습니다. IDE의 경우 Webstorm과 Aptana는 개발자 중에서 인기있는 선택입니다. 나와 같은 경우 Submlime 텍스트 편집기와 같은 일반 텍스트 편집기를 사용자 정의하고 올바른 플러그인을 추가 할 수 있습니다. AngularJS에는 NG-Inspector라는 디버깅 및 테스트를위한 브라우저 확장 기능이 있습니다. AngularJS 구조는 타사 모듈에 대한 접근성을 허용합니다. AngularJS 모듈을 호스팅하기위한 오픈 소스 프로젝트 인 ngmodules.org에서 인기있는 모든 NG 모듈을 찾을 수 있습니다. Angular는 AngularJS보다 더 많은 도구 지지대를 가지고 있습니다. 새로운 프로젝트를 초기화하고 서비스를 제공하며 생산을위한 최적화 된 패키지를 구축 할 수있는 공식 CLI가 있습니다. 자세한 내용은 Github의 Angular CLI를 읽을 수 있습니다. Angular는 JavaScript 대신 TypeScript를 사용하기 때문에 Visual Studio는 IDE로 지원됩니다. 그게 전부는 아닙니다. 또한 개발주기의 특정 측면을 자동화하고 속도를 높이는 데 도움이되는 많은 IDE 플러그인 및 독립형 도구가 있습니다. 디버깅을위한 Augury, 코드 분석을위한 NGREV, 코드 검증을위한 Codelyzer 등은 모두 매우 유용한 도구입니다.

  요약
  angularjs에는 많은 결함이 있으며, 대부분 성능 관련과 관련이 있지만 빠른 프로토 타이핑을위한 선택이었습니다. 그러나 현재 AngularJS로 돌아가거나 AngularJS 프로젝트를 유지하는 것은 의미가 없습니다. 아직 마이그레이션하지 않은 경우 그렇게하는 것을 고려해야합니다.

  이 기사에서는 AngularJS와 Angular 2의 5 가지 주요 차이점을 소개합니다. 템플릿 구조 및 종속성 주입 방법을 제외한 거의 모든 것이 개선되었습니다. 컨트롤러, 스코프, 지침, 모듈 정의 등과 같은 많은 인기있는 각도 1.0 기능이 다른 대안으로 대체되었습니다. 또한 기본 언어가 변경되었고 구조가 수정되었습니다.

  AngularJS 및 Angular FAQ (FAQS)
  (FAQ 부분은 너무 길고 의사 원리 요구 사항과 일치하지 않기 때문에 아래에서 생략됩니다. FAQ 부분은 필요에 따라 선택적으로 유지되거나 재구성 될 수 있으며 동의어와 같은 의사 원리 처리가 교체됩니다. .)

위 내용은 AngularJS 및 Angular 2 : 상세한 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!