AngularJS
Migration till Angular 2+

Introduktion

Konvertera din AngularJS-app till en komponentorienterad struktur

I den nya vinkelramen är komponenter de viktigaste byggstenarna som består av användargränssnittet. Så ett av de första stegen som hjälper en AngularJS-app att migreras till den nya Angular är att refaktorera den till en mer komponentorienterad struktur.

Komponenter introducerades också i den gamla AngularJS från version 1.5+ . Att använda komponenter i en AngularJS-app kommer inte bara att göra strukturen närmare den nya Angular 2+, utan det kommer också att göra den mer modulär och lättare att underhålla.

Innan jag går vidare rekommenderar jag att titta på den officiella AngularJS dokumentationssidan om komponenter , där deras fördelar och användning är väl förklarade.

Jag skulle hellre nämna några tips om hur man konverterar den gamla ng-controller koden till den nya component stilen.

Börja dela din app i komponenter

Alla de komponentorienterade apparna har vanligtvis en eller få komponenter som innehåller andra underkomponenter. Så varför inte skapa den första komponenten som helt enkelt kommer att innehålla din app (eller en stor bit av den).

Antag att vi har en kodkod tilldelad en controller, som heter UserListController , och vi vill skapa en komponent av den, som vi kommer att namnge UserListComponent .

nuvarande HTML:

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

nuvarande JavaScript:

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

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

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

    // ...
}

ny HTML:

<user-list></user-list>

nytt JavaScript:

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

function UserListController(SomeService) {

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

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

    // ...
}

Lägg märke till hur vi inte längre injicerar $scope i kontrollfunktionen och vi förklarar nu this.myUserList istället för $scope.myUserList ;

ny user-list.component.html :

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

Lägg märke till hur vi nu refererar till variabeln myUserList , som tillhör regulatorn, med $ctrl.myUserList från html istället för $scope.myUserList .

Det beror på, som du antagligen räknat ut efter att ha läst dokumentationen, nu hänvisar $ctrl i mallen till kontrollfunktionen.

Vad sägs om styrenheter och rutter?

Om din controller var bunden till mallen med routningssystemet istället för ng-controller , så om du har något liknande:

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

du kan bara ändra din statsförklaring till:

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

Vad kommer härnäst?

Nu när du har en komponent som innehåller din app (oavsett om den innehåller hela applikationen eller en del av den, som en vy), bör du nu börja dela din komponent i flera kapslade komponenter, genom att lasta in delar av den i nya underkomponenter , och så vidare.

Du bör börja använda komponentfunktionerna som

• In- och utgångar

• livscykelkrokar som $onInit() , $onChanges() , etc. ...

Efter att ha läst komponentdokumentationen bör du redan veta hur du använder alla dessa komponentfunktioner, men om du behöver ett konkret exempel på en riktigt enkel app kan du kontrollera detta .

Om du har några funktioner som innehåller mycket logikkod i din komponentkontroll, kan en bra idé överväga att flytta logiken till tjänster .

Slutsats

Att anta en komponentbaserad strategi driver din AngularJS ett steg närmare för att migrera den till den nya vinkelramen, men det gör det också bättre och mycket mer modulärt.

Naturligtvis finns det många andra steg som du kan göra för att gå vidare i den nya riktningen Angular 2+, vilket jag kommer att lista i följande exempel.

Introduktion av Webpack- och ES6-moduler

Genom att använda en modul lastare som Webpack kan vi dra nytta av den inbyggda modulsystem finns i ES6 (liksom i skrivmaskin). Vi kan sedan använda import- och exportfunktionerna som gör det möjligt för oss att specificera vilka kodkod vi kan dela mellan olika delar av applikationen.

När vi sedan tar våra applikationer till produktion, gör modullastare det också enklare att paketera dem alla i produktionsbuntar med batterier inkluderade.