GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 12/12/2019 | 00:00 GMT+7

Cách nâng cấp từ AngularJS lên Angular với ngUpgrade

Angular (2+) đã có mặt ở đây và tất cả ta đều rất hào hứng với nó. Tuy nhiên, đối với một số người trong ta , ta vẫn đang duy trì các cơ sở mã AngularJS (1.x) lớn tại nơi làm việc. Làm cách nào để ta bắt đầu chuyển ứng dụng của bạn sang version Angular mới - đặc biệt nếu ta không đủ khả năng để mất sáu tháng kể từ khi phát triển tính năng để viết lại hoàn chỉnh?

Đó là nơi có thư viện ngUpgrade . NgUpgrade là công cụ chính thức cho phép bạn di chuyển từng chút một ứng dụng của bạn . Nó cho phép Angular chạy song song với mã AngularJS của bạn miễn là bạn cần nâng cấp từ từ.

Trong hướng dẫn này, bạn sẽ cài đặt và cài đặt ngUpgrade và Angular. Sau đó, bạn sẽ học những điều cơ bản về việc viết lại các thành phần.

(Tái bút: Nếu độ dài của hướng dẫn này khiến bạn băn khoăn, đừng lo lắng. Tôi đã xây dựng một chương trình video siêu chi tiết từng bước có tên là Nâng cấp AngularJS bao gồm tất cả những điều này một cách chi tiết.)

<a href=osystemhttps://www.upgradingangularjs.com?ref=scotch.ioosystem\>

</ a \>

Điểm xuất phát của ta

Để bắt đầu với ngUpgrade, ứng dụng của bạn cần đáp ứng một số yêu cầu :

  1. Mã được tổ chức theo tính năng (không phải theo loại) và mỗi file chỉ chứa một mục (như chỉ thị hoặc dịch vụ)
  2. Cài đặt TypeScript
  3. Sử dụng gói module (hầu hết mọi người sử dụng Webpack)
  4. Sử dụng AngularJS 1.5+ với bộ điều khiển được thay thế bằng các thành phần

(Nếu bạn bị mất bất kỳ điều gì trong số đó, ta sẽ đề cập đến tất cả trong phần 1 và 2 của khóa học .)

Tuy nhiên, hiện tại, hãy dành một phút để sao chép hoặc phân nhánh dự án mẫu của khóa học trên GitHub (đừng quên chạy npm install ). Kiểm tra commit này để xem điểm khởi đầu của ta :

git checkout fdfcf0bc3b812fa01063fbe98e18f3c2f4bcc5b4

Ta có một dự án Hệ thống đặt hàng mà ta có thể sử dụng để làm việc thông qua ngUpgrade. Bắt đầu từ commit này, ứng dụng của ta đáp ứng tất cả các tiêu chí trên. Ta đang sử dụng kiến trúc thành phần, TypeScript và Webpack ( ta thậm chí còn có các bản dựng cho cả phát triển và production ).

Lưu ý : Trong nhiều ứng dụng AngularJS lớn, bạn không thể chuyển mọi thứ vào repository Git hoàn toàn mới và xóa sạch lịch sử nhiều năm. Bạn cũng có thể đang sử dụng cấu trúc ứng dụng khác với CLI. Nếu bạn có thể sử dụng CLI cho việc nâng cấp của bạn , thì hãy làm như vậy. Tuy nhiên, hướng dẫn này sẽ hướng dẫn bạn cách cài đặt thủ công tại đây để bạn có thể kiểm soát hoàn toàn việc nâng cấp của bạn .

Cài đặt Angular & ngUpgrade

Ta đã sẵn sàng cài đặt Angular, ngUpgrade và tất cả các phụ thuộc ngang hàng. Trong dự án mẫu, hãy tiếp tục và cập nhật mảng phụ thuộc package.json của bạn để nó trông giống như sau:

 "dependencies": {
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/router": "^5.2.5",
    "@angular/upgrade": "^5.2.5",
    "angular": "1.6.6",
    "angular-route": "1.6.6",
    "bootstrap": "3.3.7",
    "core-js": "^2.5.3",
    "jquery": "^2.2.4",
    "lodash": "4.17.4",
    "moment": "~2.17.1",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20"
}

( Ta sẽ sử dụng Angular 5 trong loạt bài này, ngay cả khi dự án mẫu sử dụng version 4. Đừng đổ mồ hôi - các bước giống hệt nhau.)

Ta có thể đặt tất cả các gói này trong một lệnh dài trong terminal với cờ lưu, nhưng ta sẽ dành thời gian để giải thích từng gói này là gì.

Đầu tiên là các thư viện của ta trong không gian tên @angular :

  • @angular/common : Đây là các dịch vụ, đường ống và chỉ thị thường cần cho Angular. Gói này cũng chứa HttpClient mới kể từ version 4.3, vì vậy ta không cần @angular/http nữa.
  • @angular/compiler : Đây là trình biên dịch mẫu của Angular. Nó lấy các mẫu và chuyển đổi chúng thành mã giúp ứng dụng của bạn chạy và hiển thị. Bạn hầu như không bao giờ cần phải tương tác với nó.
  • @angular/core : Đây là những phần thời gian chạy quan trọng của Angular cần thiết cho mọi ứng dụng. Điều này có những thứ như trình trang trí metadata (ví dụ: Component , Injectable ), tất cả các phần phụ thuộc và các móc vòng đời thành phần như OnInit .
  • @angular/forms : Đây chỉ là mọi thứ ta cần với các biểu mẫu, cho dù là mẫu hay phản ứng.
  • @angular/platform-browser : Đây là tất cả mọi thứ liên quan đến dom và trình duyệt, đặc biệt là các phần giúp hiển thị dom. Đây là gói bao gồm bootstrapStatic , là phương pháp mà ta sử dụng để khởi động ứng dụng của ta cho các bản dựng production .
  • @angular/platform-browser-dynamic : Gói này bao gồm các nhà cung cấp và một phương pháp bootstrap khác cho các ứng dụng biên dịch mẫu trên client . Đây là gói mà ta sử dụng để khởi động trong quá trình phát triển và ta sẽ đề cập đến việc chuyển đổi giữa hai gói trong một video khác.
  • @angular/router : Như bạn có thể đoán, đây chỉ là bộ định tuyến cho Angular.
  • @angular/upgrade angle @angular/upgrade : Đây là thư viện ngUpgrade, cho phép ta di chuyển ứng dụng AngularJS sang Angular.

Sau khi tất cả các gói Angular của ta , các gói polyfill của ta là các gói phụ thuộc của Angular:

  • core-js vá bối cảnh chung hoặc cửa sổ bằng một số tính năng nhất định của ES6 hoặc ES2015.
  • reflect-metadata là một thư viện đa điền cho các chú thích mà Angular sử dụng trong các lớp của nó.
  • rxjs : Đây là thư viện bao gồm tất cả các vật có thể quan sát được mà ta sẽ sử dụng để xử lý dữ liệu của bạn .
  • zone.js là một polyfill cho đặc tả Zone, là một phần của cách Angular quản lý phát hiện thay đổi.

Đôi khi, có những xung đột liên quan đến version TypeScript bạn đang sử dụng. Điều này có thể là do RxJS, trình biên dịch Angular hoặc Webpack. Nếu bạn bắt đầu gặp các lỗi biên dịch lạ, hãy thực hiện một số nghiên cứu để tìm ra bất kỳ lỗi nào trong số đó cần phạm vi version cụ thể của TypeScript cho version bạn đang sử dụng.

Mở terminal, bạn cd vào public folder của dự án, và chạy npm install (bạn đang chào đón để cài đặt và sử dụng Sợi nếu bạn muốn). Bạn sẽ thấy rằng tất cả các gói của bạn đã được cài đặt.

Bây giờ ta đã sẵn sàng biến ứng dụng của bạn thành một ứng dụng kết hợp bằng cách khởi động kép cả AngularJS và Angular.

Cài đặt ngUpgrade

Để cài đặt ngUpgrade, ta cần thực hiện một loạt các bước để cho phép AngularJS và Angular chạy song song với nhau.

Bước 1: Xóa Bootstrap khỏi index.html

Điều đầu tiên ta cần làm là xóa chỉ thị bootstrap khỏi index.html . Đây là cách AngularJS thường khởi động khi tải trang, nhưng ta sẽ khởi động nó thông qua Angular bằng cách sử dụng ngUpgrade. Vì vậy, chỉ cần mở index.html và xóa thẻ data-ng-app . (nếu bạn đang sử dụng DI nghiêm ngặt trong ứng dụng của riêng mình, bạn cũng sẽ xóa ng-strict-di trong bước này.) Tệp index.html của bạn bây giờ sẽ giống như sau:

<html>
  <head>
    <title>Amazing, Inc. Order System</title>
  </head>
  <body>
      <navigation></navigation>
      <div class="container" ng-view></div>
  </body>
</html>

Bước 2: Thay đổi module AngularJS

Bây giờ ta cần thực hiện một số thay đổi trong module AngularJS. Mở app.ts. Điều đầu tiên ta cần làm là đổi tên app.ts thành app.module.ajs.ts để phản ánh rằng đó là module cho AngularJS. Đó là một cái tên dài dòng, nhưng trong Angular, ta muốn có loại của ta trong tên file của ta . Ở đây ta đang sử dụng app.module và sau đó ta thêm ajs đó để chỉ định rằng nó dành cho AngularJS thay vì app.module root của ta cho Angular ( ta sẽ thực hiện trong giây app.module ).

Như ứng dụng hiện tại, ta chỉ đang sử dụng AngularJS, vì vậy ta có tất cả các câu lệnh nhập của bạn ở đây và ta đang đăng ký mọi thứ trên module Angular của ta . Tuy nhiên, bây giờ những gì ta sẽ làm là xuất module này và nhập nó vào module Angular mới của ta để cài đặt và chạy nó. Vì vậy, trên dòng 28, hãy tạo một hằng số chuỗi của tên ứng dụng của ta :

const MODULE_NAME = 'app';

Sau đó, ta sẽ thay thế chuỗi ứng dụng của bạn bằng tên module trong khai báo Angular.module:

angular.module(MODULE_NAME, ['ngRoute'])
// component and service registrations continue here

Và cuối cùng, ta cần xuất hằng số của bạn :

export default MODULE_NAME;

Bạn có thể xem module AngularJS đã hoàn thành ở giai đoạn này tại đây .

Bước 3: Tạo module ứng dụng Angular

Mô-đun AngularJS của ta đã sẵn sàng hoạt động, vì vậy ta hiện đã sẵn sàng tạo module Angular của bạn . Sau đó, ta sẽ nhập module AngularJS của bạn để ta có thể khởi động nó theo cách thủ công tại đây. Đó là những gì để hai khung chạy cùng nhau và cho phép ngUpgrade thu hẹp khoảng cách giữa chúng.

Điều đầu tiên ta cần làm là tạo một file mới ở cùng cấp với module AngularJS có tên app.module.ts . Đây là lần đầu tiên, bạn sắp thấy một mẫu sẽ trở nên quen thuộc với bạn trong suốt quá trình nâng cấp của bạn : tạo và xuất một lớp, trang trí nó bằng chú thích và nhập tất cả các phần phụ thuộc.

Trong module ứng dụng mới của ta , hãy tạo một lớp có tên AppModule :

export class AppModule { 
}

Bây giờ ta hãy thêm chú thích đầu tiên của ta ( còn gọi là trình trang trí ). Chú thích chỉ là một chút metadata mà Angular sử dụng khi xây dựng ứng dụng của ta . Bên trên lớp mới của ta , ta sẽ sử dụng chú thích NgModule và chuyển vào một đối tượng tùy chọn:

@NgModule({})
export class AppModule { 
}

Nếu bạn đang theo dõi trong một trình soạn thảo như Visual Studio Code, bạn sẽ thấy rằng TypeScript đang giận ta vì nó không biết NgModule là gì. Điều này là do ta cần nhập nó từ thư viện lõi Angular. Trên trình trang trí của ta , ta có thể khắc phục điều này bằng:

import { NgModule } from '@angular/core';

Bây giờ, trong đối tượng tùy chọn của ta cho ngModule, ta cần chuyển một mảng nhập. Mảng nhập chỉ định các NgModule khác mà NgModule này sẽ phụ thuộc vào. (Những lần nhập này khác với những lần nhập TypeScript ở đầu file của ta .) Ngay bây giờ, ta cần BrowserModule và UpgradeModule:

import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})
export class AppModule { }

Tất nhiên, ta không có những thứ được nhập ở đầu file của ta , vì vậy ta cũng cần phải làm điều đó. Sau lần nhập đầu tiên, ta có thể thêm:

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

Có một UpgradeModule trong cả upgrade và upgrade/static . Ta muốn sử dụng tĩnh vì nó cung cấp báo cáo lỗi tốt hơn và hoạt động với biên dịch AOT (trước thời hạn).

Ta đã có hệ thống giàn giáo cơ bản của module root của ta để cài đặt Angular và ta đã sẵn sàng thực hiện khởi động chính nó.

Bước 4: Khởi động trong Mô-đun Angular

Để khởi động ứng dụng của ta , điều đầu tiên ta cần làm là chèn UpgradeModule bằng cách sử dụng một hàm khởi tạo:

constructor(private upgrade: UpgradeModule){
}

Ta không cần làm bất cứ điều gì trong hàm khởi tạo của bạn . Điều tiếp theo ta sẽ làm là overrides hàm doBootstrap . Sau hàm tạo, nhập:

ngDoBootstrap(){
}

Tiếp theo, ta sẽ sử dụng chức năng bootstrap của UpgradeModule. Nó có cùng chữ ký với hàm Angular bootstrap, nhưng nó thực hiện thêm một số điều cho ta . Đầu tiên, nó đảm bảo Angular và AngularJS chạy đúng vùng, sau đó nó cài đặt một module bổ sung cho phép AngularJS hiển thị trong Angular và Angular có thể hiển thị trong AngularJS. Cuối cùng, nó điều chỉnh các API khả năng kiểm tra để thước đo góc hoạt động với các ứng dụng kết hợp, điều này cực kỳ quan trọng.

Hãy thêm nó:

ngDoBootstrap(){
        this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}

Đầu tiên ta chuyển phần tử document và sau đó là module AngularJS bên trong một mảng. Cuối cùng, để bạn có thể xem ví dụ về điều này, ta đang thêm một đối tượng cấu hình để ta có thể chuyển sang chèn phụ thuộc nghiêm ngặt.

Bạn có thể tự hỏi moduleName đến từ đâu. Ta cần nhập nó lên với các câu lệnh nhập khác của ta :

import moduleName from './app.module.ajs';

Đây là file app.module.ts đã hoàn thành của ta bây giờ trông như thế nào:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import moduleName from './app.module.ajs';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) { }

    ngDoBootstrap(){
        this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
    }
}

Đây sẽ là một mô hình sẽ trở nên quen thuộc với bạn theo thời gian.

Bước 5: Tạo main.ts

Bây giờ ta đã cài đặt module AngularJS và module Angular của ta , ta cần một điểm đầu vào để kết hợp hai thứ này lại với nhau và chạy ứng dụng của ta . Hãy tạo một file mới trong folder src tên là main.ts

Trong main.ts , ta cần nhập một vài thứ, cho Angular biết version AngularJS nào cần tải và sau đó yêu cầu nó khởi động module Angular của ta . Đầu tiên, ta cần nhập hai thư viện polyfill và chức năng platformBrowserDynamic của Angular:

import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Tại sao nên dùng platformBrowserDynamic thay vì chỉ platformBrowser ? Angular có hai cách để biên dịch: một tùy chọn động và một tùy chọn tĩnh. Trong tùy chọn động (được gọi là just-in-time, hoặc JIT), trình biên dịch Angular biên dịch ứng dụng trong trình duyệt và sau đó chạy ứng dụng. Tùy chọn tĩnh (được gọi là trước thời hạn hoặc AOT) tạo ra một ứng dụng nhỏ hơn nhiều nhưng chạy nhanh hơn. Điều này là do trình biên dịch Angular chạy trước thời hạn như một phần của quá trình xây dựng. Ta sẽ chỉ sử dụng phương thức JIT ở đây cùng với server nhà phát triển Webpack.

(Trong khóa học, ta dành toàn bộ module để cài đặt AOT biên dịch để production .)

Bây giờ ta cần nhập cả hai module Angular và AngularJS, cũng như một phương thức cho Angular biết version AngularJS nào sẽ sử dụng:

import { setAngularLib } from '@angular/upgrade/static';
import * as angular from 'angular';

import { AppModule } from './app.module';

Bây giờ để hoàn thành việc này, ta chỉ cần gọi setAngularLib và chuyển vào version AngularJS của ta , và ta cần gọi platformBrowserDynamic và yêu cầu nó khởi động module ứng dụng của ta . Tệp đã hoàn thành trông như thế này:

import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { setAngularLib } from '@angular/upgrade/static';
import * as angular from 'angular';
import { AppModule } from './app.module';

setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);

Bây giờ ta đã cài đặt xong, ta chỉ cần thay đổi điểm nhập Webpack trong cấu hình của ta .

Bước 6: Cập nhật Webpack

Hy vọng rằng quá trình khởi động ứng dụng lai này bắt đầu có ý nghĩa với bạn. Ta có một file main.ts là điểm nhập của ta , file này cài đặt thư viện AngularJS và khởi động module Angular của ta . Sau đó, module Angular của ta khởi động module AngularJS của ta . Đó là những gì để cả hai framework chạy song song với nhau.

Bây giờ ta đã sẵn sàng thay đổi cấu hình Webpack của bạn để nó bắt đầu với file main.ts của ta chứ không phải một trong các file module ứng dụng của ta . Mở webpack.common.js (nó nằm trong folder webpack-configs ). Trong entry module.exports , ta sẽ thay đổi root ứng dụng của bạn thành main.ts :

entry: {
        app: './src/main.ts',
}

Kiểm tra ứng dụng

Bây giờ, ta đã sẵn sàng để xem ứng dụng kết hợp của ta hoạt động. Bạn có thể chạy server nhà phát triển bằng cách mở một terminal và chạy các lệnh sau:

cd server
npm start
cd ../public
npm run dev

Bạn sẽ thấy rằng Webpack đang tải và TypeScript của ta được biên dịch thành công.

Hãy kiểm tra trình duyệt tại localhost:9000 . Bạn có thể thấy rằng ứng dụng của ta vẫn chạy trên server nhà phát triển của ta .

Sự thành công!

Bạn có thể thấy một vài cảnh báo trong console về core-js tùy thuộc vào version của bạn, nhưng đừng lo lắng về chúng, chúng sẽ không ảnh hưởng đến ta . Bạn cũng có thể mở tab mạng và xem gói nhà cung cấp và gói ứng dụng:

Tệp nhà cung cấp lớn

Gói nhà cung cấp hoàn toàn rất lớn, và đó là bởi vì 1) ta đang chạy server nhà phát triển Webpack, nghĩa là nó không thu nhỏ bất cứ thứ gì, 2) ta đang chạy Angular trong biên dịch động, vì vậy nó cũng vận chuyển mã trình biên dịch đến trình duyệt. Ta sẽ khắc phục sự cố này khi ta nói về biên dịch AOT, nhưng ta có thể chuyển xung quanh đây và thấy rằng tất cả dữ liệu của ta vẫn đang tải.

Bây giờ ta có Angular và AngularJS chạy song song với nhau, nghĩa là ta đã cài đặt thành công ứng dụng kết hợp của bạn . Điều đó nghĩa là ta đã sẵn sàng bắt đầu nâng cấp từng phần ứng dụng của bạn .

Viết lại & hạ cấp thành phần đầu tiên của bạn

Bước 1: Viết lại thành phần

Ta đã khởi động ứng dụng của bạn và chạy ở chế độ kết hợp, vì vậy ta đã sẵn sàng bắt đầu di chuyển từng phần ứng dụng của bạn . Một cách tiếp cận phổ biến là chọn một tuyến đường và sau đó bắt đầu từ dưới lên để viết lại từng đoạn, bắt đầu với bất kỳ thứ gì có ít phụ thuộc nhất. Điều này cho phép ta nâng cấp lặp đi lặp lại ứng dụng của bạn để mọi điểm trên đường đi, ta đều có thứ gì đó có thể triển khai cho production .

Hãy bắt đầu với tuyến nhà bởi vì đó là một tuyến dễ dàng chỉ với thành phần nhà. Đầu tiên ta sẽ đổi tên thành phần home của ta thành home.component.ts .

Bây giờ ta cần viết lại thành phần nhà của ta dưới dạng một lớp Angular. Điều đầu tiên ta cần làm là nhập thành phần từ thư viện lõi Angular ở đầu file của ta :

import { Component } from '@angular/core'

Điều tiếp theo ta sẽ làm là chuyển đổi hàm homeComponentController của ta thành một lớp. Ta cũng có thể viết hoa nó và xóa controller ở cuối tên để nó chỉ được gọi là HomeComponent . Cuối cùng, hãy loại bỏ dấu ngoặc đơn. Nó trông giống như sau:

class HomeComponent {
    var vm = this;
    vm.title = 'Awesome, Inc. Internal Ordering System';
}

Bây giờ ta hãy dọn dẹp những gì bên trong lớp. Ta không cần khai báo vm vì ta đang sử dụng một lớp. Ta cũng có thể thêm thuộc tính title dưới dạng một chuỗi và di chuyển việc đặt title thành một hàm khởi tạo. Lớp của ta bây giờ trông như thế này:

class HomeComponent {
    title: string;
    constructor(){
        title = 'Awesome, Inc. Internal Ordering System';
    }
}

Ta cũng cần export lớp này và sau đó xóa dòng export default đó.

Bây giờ ta cần áp dụng trình trang trí metadata Component mà ta đã nhập để nói với Angular rằng đây là một thành phần. Ta có thể thay thế đối tượng thành phần chính bằng trình trang trí thành phần và đối tượng tùy chọn:

@Component({
}

Tùy chọn đầu tiên của trình trang trí thành phần của ta là selector . Đây chỉ là thẻ HTML mà ta sẽ sử dụng để tham chiếu đến thành phần này, nó sẽ chỉ là 'home'. Lưu ý trong Angular, bộ chọn là một chuỗi ký tự. Điều này khác với trong AngularJS, nơi ta đặt tên thành phần trong trường hợp lạc đà và sau đó nó sẽ dịch sang thẻ HTML có dấu gạch nối. Ở đây, ta sẽ đặt chính xác thẻ mà ta muốn sử dụng. Trong trường hợp này, ta chỉ giữ nó ở 'nhà', vì vậy nó không quá quan trọng. Sau đó, ta sẽ chỉ định template , giống như ta đã làm với AngularJS, vì vậy tôi sẽ chỉ nói template: template . Và tin hay không, đó là tất cả những gì cần có. Thành phần đã hoàn thành của ta trông như thế này:

import { Component } from '@angular/core';

const template = require('./home.html');

@Component({
    selector: 'home',
    template: template
})
export class HomeComponent {
    title: string;
    constructor(){
        this.title = 'Awesome, Inc. Internal Ordering System';
    }
}

Lưu ý : Nếu bạn đang làm việc trên một ứng dụng sẽ sử dụng trình biên dịch AOT, bạn cần sử dụng templateUrl thay vì những gì ta đang làm ở đây và thực hiện một số thay đổi đối với Webpack. Tuy nhiên, điều này hoàn toàn ổn đối với JIT và server phát triển.

Bước 2: Hạ cấp thành phần cho AngularJS

Bây giờ ta cần sử dụng thư viện ngUpgrade để "hạ cấp" thành phần này. “Hạ cấp” nghĩa là cung cấp một thành phần hoặc dịch vụ Angular cho AngularJS. Mặt khác, “Nâng cấp” nghĩa là cung cấp một thành phần hoặc dịch vụ AngularJS cho Angular. Ta sẽ đề cập đến vấn đề đó trong một bài viết khác. May mắn là việc hạ cấp rất dễ dàng.

Đầu tiên, ta cần thực hiện hai việc ở đầu file cùng với việc nhập của ta . Ta cần nhập hàm downgradeComponent từ thư viện nâng cấp Angular, khai báo một biến có tên là angular để ta có thể đăng ký thành phần này trên module AngularJS của bạn . Nó trông như thế này:

import { downgradeComponent } from '@angular/upgrade/static';
declare var angular: angular.IAngularStatic;

Hạ cấp thành phần khá đơn giản. Ở dưới cùng của thành phần của ta , ta sẽ đăng ký thành phần này như một chỉ thị. Ta sẽ chuyển tên chỉ thị của bạn , tên này chỉ là home , giống như bộ chọn của ta trong trường hợp này. Sau đó, ta sẽ chuyển hàm downgradeComponent từ ngUpgrade. Hàm này chuyển đổi thành phần Angular của ta thành một chỉ thị AngularJS. Cuối cùng, ta sẽ angular.IDirectiveFactory đối tượng này dưới dạng angular.IDirectiveFactory . Đăng ký hoàn tất trông như thế này:

app.module('app')
  .directive('home', downgradeComponent({component: HomeComponent} as angular.IDirectiveFactory);

Bây giờ ta có một thành phần Angular đã hạ cấp có sẵn cho ứng dụng AngularJS của ta . Bạn có thể tự hỏi tại sao ta đăng ký chỉ thị đó ở đây ở cuối file này thay vì nhập và đăng ký nó trong file TypeScript module AngularJS của ta . Mục tiêu cuối cùng là loại bỏ hoàn toàn file đó sau khi tất cả ứng dụng của ta được chuyển đổi, vì vậy ta muốn xóa dần những thứ khỏi file đó và sau đó xóa hoàn toàn khi ta gỡ cài đặt AngularJS. Điều này hoạt động tốt cho các ứng dụng mẫu hoặc di chuyển nhanh (nhiều hơn thế nữa trong một giây).

Hãy tiếp tục và mở app.module.ajs.ts và xóa nhập homeComponent trên dòng 12 và đăng ký thành phần trên dòng 37.

Ghi chú nhanh về biên dịch AOT

Phương pháp hạ cấp này - đăng ký thành phần bị hạ cấp trong file thành phần và xóa nó khỏi file module AngularJS - hoạt động hoàn toàn tốt để phát triển hoặc nếu bạn có kế hoạch viết lại nhanh ứng dụng của bạn trước khi triển khai. Tuy nhiên, trình biên dịch Angular AOT để production sẽ không hoạt động với phương pháp này. Thay vào đó, nó muốn tất cả các đăng ký đã hạ cấp của ta trong module AngularJS.

Việc hạ cấp giống hệt nhau, nhưng thay vào đó bạn:

  1. Nhập downgradeComponent trong app.module.ajs.ts (bạn đã có angular trong đó nên không cần khai báo).
  2. Thay đổi việc nhập homeComponent để import { HomeComponent } from './home/home.component'; kể từ khi ta chuyển sang xuất được đặt tên.
  3. Thay đổi đăng ký thành phần thành đăng ký chỉ thị chính xác được hiển thị ở trên.

Bạn có thể đọc thêm về cách cài đặt ngUpgrade cho AOT trong bài viết này , cũng như trong Khóa học 3 của Nâng cấp AngularJS (có toàn bộ module trình bày từng bước).

Bước 3: Cập nhật Mẫu

Sau khi một thành phần được cập nhật, ta cần đảm bảo cập nhật mẫu của nó để nó tuân theo cú pháp Angular mới. Trong trường hợp này, chỉ có những thay đổi tối thiểu mà bạn phải thực hiện đối với homeComponent . Ta chỉ cần xóa $ctrl trên dòng hai. Mẫu trông như thế này bây giờ:

<div class="row">
    <h1>{{title}}</h1>
</div>

Bây giờ ta có một thành phần nhà đã được hạ cấp đầy đủ chức năng trong ứng dụng lai của ta .

Bước 4: Thêm vào Mô-đun ứng dụng Angular

Hãy thêm thành phần Angular mới vào module Angular của ta . Mở app.module.ts . Đầu tiên, ta chỉ cần nhập thành phần nội địa của bạn sau tất cả các lần nhập khẩu khác:

import { HomeComponent } from './home/home.component';

Bây giờ, ta cần thêm HomeComponent vào ứng dụng Angular của bạn . Tất cả các thành phần Angular phải được thêm vào mảng declarations của NgModule của ta . Vì vậy, sau dòng 12 trong đối tượng tùy chọn của ta , ta sẽ thêm một mảng mới được gọi là khai báo và thêm thành phần của ta :

declarations: [
        HomeComponent
]

Ta cũng cần tạo một mảng entryComponents và thêm HomeComponent vào đó. Tất cả các thành phần đã hạ cấp phải được thêm vào mảng entryComponents này. Ta sẽ thêm nó sau khi declarations :

entryComponents: [
        HomeComponent
]

Như vậy, ta đã hoàn thành.

Kiểm tra xem nó hoạt động

Hãy chạy các lệnh tương tự như trước và đảm bảo ứng dụng của ta vẫn hoạt động. Đây là những lệnh :

cd server
npm start
cd ../public
npm run dev

Quay lại localhost:9000 . Bạn có thể thấy rằng thành phần trang chủ của ta đang tải trong trình duyệt dưới dạng thành phần Angular được viết lại! Bạn thậm chí có thể xem tab Nguồn của các công cụ phát triển Chrome chỉ để thấy tích cực. Mở webpack:// , cuộn xuống ./src/home/home.component.ts , và chắc chắn, nó ở đó!

Thành phần nhà mới

Kết luận

Đây là những gì bạn đã hoàn thành trong hướng dẫn này:

  • Đã cài đặt Angular và ngUpgrade
  • Cài đặt module Angular
  • Bootstrapped Angular và AngularJS
  • Cập nhật Webpack
  • Đã viết lại và hạ cấp thành phần đầu tiên của bạn

Trong phần tiếp theo hướng dẫn này, ta sẽ nói về những điều cơ bản của việc viết lại và các dịch vụ bị hạ cấp.

Tags:

Các tin liên quan