[angular] AngularJS와 Angular 간의 템플릿 호환성

AngularJS와 Angular는 둘 다 웹 개발을 위한 프레임워크로, 각각 1.x 시리즈와 2+ 시리즈로 버전이 구분됩니다. AngularJS는 초창기버전으로, Angular는 새로운버전으로, 템플릿 구문 또한 다소 변화가 있습니다. 그렇기 때문에 AngularJS로 작성한 템플릿을 Angular로 이식하는 것에는 몇 가지 주의할 점이 있습니다.

템플릿 호환성을 위한 고려 사항

  1. 컨트롤러 as 문법: AngularJS에서 사용되는 ng-controller="MyController as vm" 문법은 Angular에서 MyController에 해당하는 컴포넌트를 사용하여 대체할 수 있습니다.

  2. Directive: AngularJS의 Directive는 Angular에서는 컴포넌트 또는 디렉티브로 대체할 수 있습니다.

  3. $scope: AngularJS에서 사용되는 $scope 내용을 Angular에서는 컴포넌트 클래스와 바인딩하여 사용하는 것을 권장합니다.

  4. Module: AngularJS의 Module을 Angular에서는 NgModule로 대체하여 사용할 수 있습니다.

  5. 템플릿 문법:
    • AngularJS에서의 ng-repeat는 Angular에서 *ngFor로 대체됩니다.
    • AngularJS의 ng-model은 Angular에서 [(ngModel)]로 대체됩니다.
  6. 템플릿 관련 라이브러리: AngularJS에서 사용되는 라이브러리들은 Angular에서도 사용 가능하거나 대체할 수 있는지를 검토해야 합니다.

Angular로의 마이그레이션을 위해서는 위와 같은 고려 사항을 충분히 고려하여야 합니다. 이러한 변화로 인해 Angular로의 업그레이드는 기존 템플릿을 처음부터 다시 작성해야 하는 경우가 종종 있습니다.

참고 자료