AngularJS
각도 2+로 이전

소개

AngularJS 앱을 구성 요소 지향 구조로 변환

새로운 Angular 프레임 워크에서 Components 는 사용자 인터페이스를 구성하는 기본 빌딩 블록입니다. 따라서 AngularJS 앱을 새로운 Angular로 마이그레이션하는 데 도움이되는 첫 번째 단계 중 하나는 더 많은 구성 요소 중심 구조로 리팩터링하는 것입니다.

1.5+ 이상 버전에서 시작된 구형 AngularJS에도 구성 요소가 도입되었습니다. AngularJS 앱에서 구성 요소를 사용하면 새로운 Angular 2+에 가까운 구조가 될뿐만 아니라 더 모듈화되고 유지 관리가 쉬워집니다.

더 나아 가기 전에 컴포넌트 에 대한 공식 AngularJS 문서 페이지 를 살펴보고 그 장점과 사용법을 잘 설명하는 것이 좋습니다.

새로운 component 지향 스타일로 오래된 ng-controller 지향 코드를 변환하는 방법에 대한 몇 가지 팁을 언급하고자합니다.

앱을 구성 요소로 분해하기 시작합니다.

모든 구성 요소 지향 응용 프로그램에는 일반적으로 다른 하위 구성 요소를 포함하는 하나 이상의 구성 요소가 있습니다. 그렇다면 단순히 앱 (또는 앱의 큰 부분)을 포함 할 첫 번째 구성 요소를 만드는 것이 어떻습니까?

우리라는 이름의 컨트롤러에 할당 된 코드 조각이 있다고 가정 UserListController , 우리는 우리가 이름을거야 그것의 구성 요소를 만들고 싶어 UserListComponent .

현재 HTML :

<div ng-controller="UserListController as listctrl">
    <ul>
        <li ng-repeat="user in myUserList">
            {{ user }}
        </li>
    </ul>
</div>

현재 자바 스크립트 :

app.controller("UserListController", function($scope, SomeService) {

    $scope.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

새로운 HTML :

<user-list></user-list>

새 JavaScript :

app.component("UserList", {
    templateUrl: 'user-list.html',
    controller: UserListController
});

function UserListController(SomeService) {

    this.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

우리가 더 이상 $scope 를 컨트롤러 함수에 this.myUserList 하지 않고 $scope.myUserList 대신 this.myUserList 를 선언하는 방법에 $scope.myUserList .

새 템플릿 파일 user-list.component.html :

<ul>
    <li ng-repeat="user in $ctrl.myUserList">
        {{ user }}
    </li>
</ul>

우리가 지금 변수를 참조하는 방법을 참고 myUserList 사용하여 컨트롤러에 속하는, $ctrl.myUserList 대신 HTML에서 $scope.myUserList .

그 이유는 아마도 문서를 읽은 다음에 알아 낸 것처럼 템플릿의 $ctrl 이 이제는 컨트롤러 함수를 참조하기 때문입니다.

컨트롤러와 경로는 어떻습니까?

컨트롤러가 ng-controller 대신 라우팅 시스템을 사용하여 템플릿에 바인딩 된 경우 다음과 같은 경우 :

$stateProvider
  .state('users', {
    url: '/users',
    templateUrl: 'user-list.html',
    controller: 'UserListController'
  })
  // ..

다음과 같이 상태 선언을 변경할 수 있습니다.

$stateProvider
    .state('users', {
      url: '/',
      template: '<user-list></user-list>'
    })
    // ..

무엇 향후 계획?

이제 앱이 포함 된 구성 요소 (보기와 같이 전체 애플리케이션이나 일부를 포함하든)를 구성 했으므로 구성 요소를 새 하위 구성 요소로 래핑하여 여러 중첩 구성 요소로 나누기 시작해야합니다 , 등등.

다음과 같은 Component 기능을 사용해야합니다.

• 입력 및 출력 바인딩

• $onInit() , $onChanges() 등의 라이프 사이클 후크 ...

판독 후 구성 요소 문서를 당신은 이미 모든 구성 요소 기능을 사용하는 방법을 알고 있어야하지만, 당신이 진짜 간단한 응용 프로그램의 구체적인 예를 필요로하는 경우, 당신은 확인할 수 있습니다 이 .

또한 컴포넌트의 컨트롤러 내부에 많은 로직 코드를 보유하고있는 일부 기능이있는 경우 논리를 서비스 로 옮기는 것이 좋습니다.

결론

구성 요소 기반 접근 방식을 채택하면 AngularJS가 새로운 Angular 프레임 워크로 마이그레이션하는 데 한 걸음 더 가까워 지지만 더 나아가 모듈성이 향상됩니다.

물론 새로운 Angular 2+ 방향으로 나아 가기 위해 할 수있는 많은 다른 단계가 있습니다. 다음 예제에서 살펴 보겠습니다.

Webpack 및 ES6 모듈 소개

Webpack 과 같은 모듈 로더 를 사용하여 ES6 에서 사용할 수있는 내장 모듈 시스템 ( TypeScript 는 물론)을 이용할 수 있습니다. 그런 다음 가져 오기 및 내보내기 기능을 사용하여 응용 프로그램의 다른 부분간에 어떤 코드를 공유할지 지정할 수 있습니다.

애플리케이션을 프로덕션으로 가져 가면 모듈 로더를 사용하여 배터리를 포함하여 프로덕션 번들로 모든 패키지를 쉽게 패키징 할 수 있습니다.