Angular 1.x와 Angular 2의 차이점

Speed : Angular 2 가 많은 면에서 더 빠르다

Components : Angular 1 의 Controller, Scope 대신에 사용

Simpler Directives : Custom Directives 를 생성하기 쉬워짐

Intuitive Data Binding : HTML 요소나 버튼에 이벤트 리스너를 설치할 떄 더 직관적인 신택스 제공

Services : 이제는 클래스로 선언

Angular2는 주요 성능 향상 요소인 Hierarchical Dependency Injection 시스템을 사용하고 있다.

Angular2는 Angular1에 비해 5배 빠르다. Angular2는 Typescript로 작성되었으며, ES6 사양을 충족시킨다. Angular1.x의 업데이트가 아니다.

Angular 1.x 대 Angular 2의 차이점

1) Angular 2는 모바일지향적이고, 성능면에서 우수하다.

Angular 1.x는 모바일지원을 염두해두고 만들어지지 않았지만 Angular 2는 모바일 지향적이다.

Angular 2는 단방향 트리기반 변경 감지를 구현하여 성능을 다시 향상시킨다.

2) 더 많은 language를 제공한다.

ES5, ES6, Typescript 또는 Dart 언어를 사용하여 코드를 작성할 수 있다.

Angular 1.x 에서는 ES5, ES6, Dart가 있었다. Typescript를 사용하면 Javascript를 좀 더 간결하게 작성할 수 있다.

3) Component같은 웹 표준을 구현한다.

Component같은 웹 표준을 구현해서 Angular 1.x보다 더 나은 성능을 제공한다.

4) controller와 $scope가 사라졌다.

controller와 $scope는 "Components" 로 대체되었다. Angular 2는 컴포넌트 기반이고, zone.js를 사용하여 변경 사항을 감지한다.

• Angular 1.x의 controller

  Angular 1.x의 Controller

  var myApp = angular .module("myModule", []) .controller("productController", function($scope) {          var prods = { name: "Prod1", quantity: 1 };          $scope.products = prods; });

• TypeScript를 사용한 Angular 2 의 Components

  TypeScript를 사용한 Angular 2의 Components

  import { Component } from '@angular/core';   @Component({     selector: 'prodsdata',     template: '<h3>{{prods.name}}</h3>' })   export class ProductComponent {     prods = {name: 'Prod1', quantity: 1 }; }

5) 지역변수를 선언하는 다양한 방법이 있다.

Angular 2에서는 지역변수를 선언할 때 #을 사용한다. 

<div *ngFor="#technicalDiary of technicalDiries">

6) 템블릿에서 많이 사용하던 문법도 일부 변경되었다.

ng-if, ng-repeat, ng-switch 문법은 *를 사용하는 방식으로 변경되었다. Angular 2 템플릿에서 일부 내장 디렉티브에 대한 가독성을 높이기 위해 도입되었다.

7) 내장 디렉티브에 camelCase 구문을 사용한다.

8) HTML DOM element 속성 및 이벤트를 직접 사용한다.

Angular 2의 주요 변경사항 중 하나는 HTML DOM element 속성 및 이벤트를 직접 사용한다는 것이다.

이로인해 Angular 1.x에서 사용할 수 있는 ng-href, ng-src, ng-show, ng-hide 같은 내장 지시문이 더이상 필요하지 않게 되었다.

Angular 2는 href, src, hidden과 같은 속성을 사용한다. 

Angular 1.x에서 사용하던 방식

<button ng-click="doSomething()">

Angular 2에서 사용하는 방식

<button (click)="doSomething()">

9) 단방향 데이터 바인딩 지시문이 [property]로 변경되었다.

Angular 1.x에서, ng-bind는 단방향 데이터 바인딩을 위해 사용되었는데, Angular 2에서는 [property]로 사용한다.

여기서 [property] 는 HTML DOM element 속성이다.

Angular 1.x에서 단방향 데이터 바인딩

<input ng-bind="technology.name"></input>

Angular 2에서 단방향 데이터 바인딩

<button (click)="doSomething()">

10) 양방향 데이터 바인딩인 ng-model은 [(ngModel)] 로 변경되었다.

Angular 1.x에서 양방향 데이터 바인딩

<input ng-model="technology.name"></input>

Angular 2에서 양방향 데이터 바인딩

<input [(ngModel)]="technology.name"></input>

11) Bootstrapping 방법 변경

Angular의 최초 진입점 역할을 하는 소스가 필요한데, 이 역할을 하는 방법이 변경되었다.

Angular 1.x에서는 ng-app 속성을 사용하거나, 다음의 코드로 이 역할을 수행하였다.

<script>    angular.element(document).ready(function() {       angular.bootstrap(document, ['myApp']);    }); </script>

Angular 2에서는 이러한 방식을 사용하지 않고, 다음의 코드로 angular를 bootstrap 시킨다.

import { bootstrap }    from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component';    bootstrap(AppComponent);

Angular 2에서는 최초 실행을 위해서 bootstrap 메서드를 제공하고 있고, 이를 사용하기 위해 bootstrap을 import한다.

import의 출처를 보면 ‘@angular/platform-browser-dynamic’으로 되어 있는데 이는 angular2가 bootstrap 될 환경이 browser에만 국한되지 않는다는 것을 보여준다.

즉  bootstrap될 환경에 따라 다른 bootsrap 메서드를 import할 수가 있다. 예를 들면, 현재 Angular2는 네이티브 앱 및 서버 렌더링까지 지원을 하고 있다.

12) Dependency Injection 방법 변경

Angular 의 장점 중 하나는 Dependency Injection이다. 

Angular 1.x에서 사용 방법

var myApp = angular    .module("myModule", [])    .controller("productController", function($scope, $http) {         var prods = { name: "Prod1", quantity: 1 };         $scope.products = prods;     });

Angular 2에서 사용 방법

import { Injectable } from 'angular2/core';   @Injectable()   export class TechnologyService {     constructor(private _http: Http) { }     getTechnologies() {         return [new technology(1, 'Angular'),             new technology(2, 'jQuery',             new technology(3, 'Node'),             new technology(4, 'Knockout')         ];     } }

@Injectable()은 서비스 클래스에 추가되었다. 이는 Angular 1.x $ inject와 유사하다.

13) 라우팅 방법 변경

Angular 1.x : $routeProvider.when()

var app = angular         .module("MyModule", ["ngRoute"])         .config(function ($routeProvider) {             $routeProvider             .when("/home", { templateUrl: "home.html", controller: "homeController" })             .when("/technology", { templateUrl: "technology.html", controller: "technologyController" })         })        .controller("homeController", function ($scope) {             $scope.message = "Home Page";         })          .controller("technologyController", function ($scope) {              $scope.technologies = ["ASP.NET", "jQuery", "AngularJS", "JavaScript"];        })

Angular 2 : @RouteConfig

import { Component } from 'angular2/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; import { TechnologyComponent } from './technology/technology.component'; import { TechnologyService } from './Technology/Technology.service';    @Component({   selector: 'my-app',   templateUrl: 'app/app.component.html',   directives: [ROUTER_DIRECTIVES],   providers: [     ROUTER_PROVIDERS,     TechnologyService   ] }) @RouteConfig([   { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },   { path: '/technology', name: 'Technology', component: TechnologyComponent }, ])   export class AppComponent { }

참고 : http://sculove.github.io/blog/2016/07/11/react%EB%B3%B4%EB%8B%A4-angular2%EC%97%90-%EB%8D%94-%EC%A3%BC%EB%AA%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/