ارتقاء از AngularJS به Angular با ngUpgrade

Angular (2+) در دسترس است ، و همه ما از این موضوع بسیار هیجان زده هستیم. با این حال ، برای برخی از ما ، هنوز پایگاههای بزرگ کد AngularJS (1.x) در محل کار وجود دارد. چگونه می توانیم برنامه خود را به نسخه جدید Angular منتقل کنیم – به ویژه اگر نتوانیم برای بازنویسی کامل شش ماه از توسعه مشخصه فاصله بگیریم؟
این جاست که کتابخانه ngUpgrade وارد عمل می شود. ngUpgrade ابزار رسمی است که به شما امکان می دهد برنامه خود را اندک اندک منتقل کنید. در واقع بهAngular اجازه میدهد تا زمانی که نیاز به ارتقاء آهسته دارید ، به صورت پهلو به پهلو و به همراه کد AngularJS شما اجرا شود.
در این راهنما ngUpgrade و Angular را نصب و راه اندازی می کنید. سپس اصول اولیه نوشتن مولفه ها را یاد خواهید گرفت.
(اگر طولانی بودن این راهنما شما را خسته میکند ، نگران نباشید. من یک ویدیوی کاملاً مفصل به نام Upgrading AngularJS تهیه کرده ام که همه این موارد را با جزئیات پوشش می دهد).
<a href=“https://www.upgradingangularjs.com?ref=scotch.io”\>

</a\>
نقطه شروع ما
برای شروع کار با ngUpgrade ، برنامه شما باید چند پیش شرط را برآورده کند:
1- کد سازماندهی شده توسط مشخصه (نه براساس نوع) و هر فایل فقط شامل یک آیتم (مانند یک بخشنامه یا سرویس)
2- تنظیم TypeScript
3- استفاده از بسته نرم افزاری ماژول (بیشتر افراد از Webpack استفاده می کنند)
4- استفاده از AngularJS 1.5+ با کنترلرهای جایگزین شده توسط مولفه ها
(اگر در هر یک از این موارد گمراه شدید ، ما همه آن ها را در قسمت های 1 و 2 این لینک پوشش می دهیم)
در حال حاضر ، یک دقیقه وقت بگذارید تا پروژه نمونه دوره را در GitHub کلون یا فورک کنید (فراموش نکنید که npm install را نصب کنید). این تعهد را بررسی کنید تا نقطه شروع ما را ببینید:
git checkout fdfcf0bc3b812fa01063fbe98e18f3c2f4bcc5b4
ما یک پروژه سفارش سیستم داریم که می توانیم از طریق ngUpgrade برای کار استفاده کنیم. با شروع این تعهد ، برنامه ما تمامی معیارهای فوق را رعایت می کند. ما از معماری مؤلفه ها ، TypeScript و Webpack استفاده می کنیم (حتی در زمینه توسعه و تولید نیز ساختارهایی داریم).
توجه: در بسیاری از برنامه های بزرگ AngularJS ، شما نمی توانید همه چیز را به یک منبع کاملاً جدید Git منتقل کنید و سالها سابقه را از بین ببرید. همچنین ممکن است از ساختار برنامه ای متفاوت از CLI استفاده کنید. اگر می توانید از CLI برای ارتقاء خود استفاده کنید ، پس این کار را انجام دهید. با این حال ، این راهنما ، تنظیم دستی را در اینجا به شما آموزش می دهد تا بتوانید کنترل کاملی بر روی به روزرسانی خود داشته باشید.

نصب Angular & ngUpgrade
ما آماده نصب Angular ، ngUpgrade و همه متعلقات هستیم. در پروژه نمونه ، پیش بروید و آرایه متعلقات pack.json خود را به روز کنید تا این گونه به نظر برسد:
“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″
}

(ما می خواهیم از این Angular 5 در این سری استفاده کنیم ، حتی اگر پروژه نمونه از نسخه 4 استفاده کند. نگران نباشید. مراحل یکسان هستند.)
ما می توانیم همه این بسته ها را با یک پرچم ذخیره در یک دستور طولانی در پایانه قرار دهیم ، اما از زمان استفاده میکنیم تا توضیح دهیم که هرکدام از این بسته ها چیست.
ابتدا کتابخانه های ما تحت فضای نام @angular :
⦁ @angular/common: اینها خدمات ، اتصالات و دستورالعمل های مورد نیاز Angular هستند. این بسته همچنین حاوی HttpClient جدید مشابه نسخه 4.3 است ، بنابراین ما دیگر نیازی به @ angular / http نداریم.
⦁ @angular/compiler : کامپایلر الگوی Angular است. قالب ها را می گیرد و آنها را به کدی تبدیل می کند که باعث می شود برنامه شما اجرا و ارائه شود. تقریباً هرگز نیازی به تعامل با آن ندارید.
⦁ @angular/core: بخشهای مهم زمان اجرای Angular هستند که توسط هر برنامه مورد نیاز است. این موارد مانند دکوراتورهای ابرداده (به عنوان مثال ، Component ، Injectable) ، تمام متعلقات ورودی و چرخه زندگی مولفه مانند OnInit متصل میشوند.
⦁ @angular/forms : همه چیزهایی است که برای فرم ها نیاز داریم ، خواه قالب یا واکنش پذیر.
⦁ @angular/platform-browser: همه چیزی که به قلمرو و مرورگر مربوط است ، به خصوص بخش هایی که در ارائه قلمرو کمک می کند. بسته ای است که شامل bootstrapStatic میباشد ، روشی که ما برای راه اندازی برنامه های کاربردی خود برای تولید استفاده می کنیم.
⦁ @angular/platform-browser-dynamic: این بسته شامل ارائه دهندگان و یک روش بوت استرپ دیگر برای برنامه هایی است که الگوهای مربوط به مشتری را کامپایل می کنند. بسته ای است که ما در هنگام توسعه از bootstrapping استفاده می کنیم و در ویدیوی دیگری تعویض بین این دو را پوشش خواهیم داد.
⦁ @angular/router: همانطور که ممکن است حدس بزنید ، فقط روتر Angular است.
⦁ @angular/upgrade: کتابخانه ngUpgrade است که به ما امکان می دهد برنامه AngularJS ما را به Angular منتقل کنیم.
بعد از همه بسته های Angular ، بسته های چندکاره ما که وابسته به Angular هستند ، آمده اند:
⦁ core-js متن جهانی یا پنجره ای را با ویژگی های خاصی از ES6 یا ES2015 متصل می کند.
⦁ reflect-metadata یک کتابخانه چند منظوره برای حاشیه نویسی است که از Angular در کلاس های خود استفاده می کند.
⦁ Rxjs: کتابخانه ای است که شامل همه مشاهداتی است که برای دستیابی به داده های خود از آنها استفاده خواهیم کرد.
⦁ zone.js یک قطعه چندگانه برای مشخصات Zone است ، که بخشی از نحوه مدیریت Angular در تشخیص تغییر میباشد.
بعضی اوقات ، اختلافاتی در رابطه با نسخه TypeScript که استفاده می کنید وجود دارد. این می تواند به دلیل RxJS ، کامپایلر Angular یا Webpack باشد. اگر با خطاهای تلفیقی عجیب و غریب مواجه شدید ، تحقیقاتی انجام دهید تا متوجه شوید که کدام یک از آنها به یک دامنه نسخه خاص از TypeScript برای نسخه ای که استفاده می کنید نیاز دارند.
ترمینال خود را باز کنید، در پوشه public پروژه وارد شوید و npm install را اجرا کنید (اگر ترجیح می دهید، میتوانید Yarn را نصب و از آن استفاده کنید). خواهید دید که تمام بسته های شما نصب شده است.
اکنون آماده هستیم تا با استفاده از بوت دوگانه AngularJS و Angular ، برنامه خود را به برنامه هیبریدی تبدیل کنیم.
تنظیم ngUpgrade
برای راه اندازی ngUpgrade ، باید یک سری مراحل انجام دهیم تا AngularJS و Angular بتوانند در کنار یکدیگر اجرا شوند.
مرحله 1: حذف Bootstrap از index.html
اولین کاری که باید انجام دهیم حذف دستورالعمل bootstrap از index.html است. اینگونه AngularJS به طور معمول با بارگذاری صفحه شروع می شود ، اما ما قصد داریم آن را از طریق Angular با استفاده از ngUpgrade بوت کنیم. بنابراین ، فقط index.html را باز کنید و آن برچسب data-ng-app را حذف کنید. (اگر در برنامه خود از DI جدی استفاده می کنید ، این برنامه را نیز در این مرحله حذف کنید.) فایل index.html شما اینگونه خواهد شد:
<html>
<head>
<title>Amazing, Inc. Order System</title>
</head>
<body>
<navigation></navigation>
<div class=”container” ng-view></div>
</body>
</html>

مرحله 2: تغییر ماژول AngularJS
حال باید تغییراتی در ماژول AngularJS ایجاد کنیم. app.ts را باز کنید. اولین کاری که باید انجام دهیم تغییر نام برنامه های app.ts به app.module.ajs.ts است تا نشان دهد که این ماژول برای AngularJS میباشد. این یک نام طولانی است ، اما در Angular می خواهیم نوع را در نام فایل خود داشته باشیم. در اینجا از app.module استفاده می کنیم و سپس ajs را اضافه می کنیم تا مشخص کنند که به جای app.module اصلی برای Angular (که در یک ثانیه انجام خواهیم داد) برای AngularJS است.
با توجه به برنامه فعلی ، ما فقط از AngularJS استفاده می کنیم ، بنابراین همه عبارات ورودی خود را در اینجا داریم و همه چیز را در ماژول Angular خود ثبت می کنیم. با این حال ، آنچه اکنون قصد داریم انجام دهیم انتققال این ماژول و وارد کردن آن به ماژول Angular جدید برای آماده سازی و راه اندازی آن است. بنابراین ، در خط 28 اجازه دهید یک ثابت رشته ای از نام برنامه خود ایجاد کنیم:
const MODULE_NAME = ‘app’;
سپس رشته برنامه خود را با نام ماژول در اعلان Angular.module جایگزین خواهیم کرد:
angular.module(MODULE_NAME, [‘ngRoute’])
// component and service registrations continue here

و در آخر ، باید ثابت خود را منتشر کنیم:
export default MODULE_NAME;
می توانید ماژول AngularJS تمام شده را در این مرحله ببینید.
مرحله 3: ایجاد ماژول برنامه Angular
ماژول AngularJS ما آماده است ، بنابراین ما اکنون آماده ساختن ماژول Angular هستیم. سپس ماژول AngularJS را وارد خواهیم کرد تا بتوانیم به صورت دستی آن را در اینجا بوت کنیم. این همان چیزی است که اجازه می دهد این دو چارچوب با هم اجرا شوند ، و ngUpgrade را قادر می سازد تا شکاف بین آنها را پر کند.
اولین کاری که باید انجام دهیم ایجاد یک فایل جدید در همان سطح ماژول AngularJS به نام app.module.ts است. اکنون برای اولین بار ، الگویی را می بینید که در طی ارتقاء برای شما آشنا می شود: ساخت و ارائه کلاس ، تزئین آن با حاشیه نویسی و وارد کردن همه متعلقات.
در ماژول برنامه جدید خود ، بیایید یک کلاس بنام AppModule ایجاد کنیم:
export class AppModule {
}

اکنون بیایید اولین یادداشت خود را (که به آن دکوراتور نیز می گویند) اضافه کنیم. حاشیه نویسی فقط بخشی از ابرداده است که Angular هنگام ساختن برنامه ما استفاده می کند. فراتر از کلاس جدید ، از حاشیه نویسی NgModule استفاده خواهیم کرد و در یک آبجکت گزینه ها وارد میکنیم:

@NgModule({})
export class AppModule {
}

اگر دنبال ویرایشگری مانند Visual Studio Code هستید ، می بینید که TypeScript گیج شده است زیرا نمی داند NgModule چیست. دلیل این امر آن است که ما باید آن را از کتابخانه هسته Angular وارد کنیم. بعد از دکوراتور، می توانیم این کار را با:
import { NgModule } from ‘@angular/core’;
انجام دهیم.
حال ، در ابجکت گزینه های ما برای ngModule ، باید یک سری ورودی را وارد کنیم. آرایه ورودی ها سایر NgModules را که این NgModule به آن بستگی دارد ، مشخص می کند. (این ورودی ها متفاوت از ورودی TypeScript در بالای فایل ما است.) در حال حاضر ، ما به BrowserModule و UpgradeModule احتیاج داریم:
import { NgModule } from ‘@angular/core’;

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

البته ، ما آنهایی که در بالای فایل ما وارد نشده اند را نداریم ، بنابراین باید این کار را نیز انجام دهیم. بعد از اولین ورودی ، می توانیم اضافه کنیم:
import { BrowserModule } from ‘@angular/platform-browser’;
import { UpgradeModule } from ‘@angular/upgrade/static’;
یک UpgradeModule هم در upgrade و هم upgrade/static وجود دارد. ما می خواهیم از استاتیک استفاده کنیم زیرا گزارش خطای بهتری را ارائه می دهد و با کامپایل AOT کار می کند.
داربست اصلی ماژول ریشه را برای راه اندازی Angular دریافت کرده ایم و آماده هستیم تا بوت کردن را انجام دهیم.
مرحله 4: Bootstrapping در ماژول Angular
برای راه اندازی برنامه خود ، اولین کاری که باید انجام دهیم تزریق UpgradeModule با استفاده از یک تابع constructor است:
constructor(private upgrade: UpgradeModule){
}

در تابع constructor خود لازم نیست کاری انجام دهیم. نکته بعدی که انجام خواهیم داد ، رونویسی تابع doBootstrap است. بعد از constructor ، تایپ کنید:
ngDoBootstrap(){
}

در مرحله بعد ، از تابع bootstrap UpgradeModule استفاده خواهیم کرد. همان انضای بوت استرپ Angular را دارد ، اما برای ما چند کار اضافی انجام می دهد. ابتدا مطمئن شوید که Angular و AngularJS در نواحی صحیح اجرا می شوند ، و سپس یک ماژول اضافی را تنظیم می کند که اجازه می دهد AngularJS در Angular و Angular در AngularJS قابل مشاهده باشد. و در آخر اینکه ، API های قابلیت تست را سازگار می کند ، به طوری که Protrotor با برنامه های ترکیبی کار می کند ، که بسیار حائز هاهمیت است.
بیایید آن را اضافه کنیم:
ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}

ما در ابتدا عنصر document و سپس ماژول AngularJS درون یک آرایه را وارد میکنیم. در آخر، می توانید نمونه ای از این مورد را ببینید ، ما یک آبجکت پیکربندی اضافه می کنیم تا بتوانیم تزریق متعلقات را انجام دهیم.
ممکن است بپرسید که نام ماژول از کجا آمده است. ما باید آن را با سایر عبارات خود وارد کنیم:
import moduleName from ‘./app.module.ajs’;
فایل app.module.ts ما تکمیل شده و اینگونه خواهد بود:
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});
}
}

این الگویی خواهد بود که به مرور زمان برای شما آشنا می شود.
مرحله 5: ایجاد main.ts
اکنون که ماژول AngularJS و ماژول Angular خود را تنظیم کرده ایم ، به یک نقطه ورودی نیاز داریم که می خواهد این دو را جمع کرده و برنامه ما را اجرا کند. بیایید یک فایل جدید را تحت پوشه src با نام main.ts ایجاد کنیم.
در main.ts ، باید مواردی را وارد کنیم ، به Angular بگوییم که کدام نسخه از AngularJS را لود کند ، و سپس به آن بگوییم که ماژول Angular ما را راه اندازی کند. ابتدا باید دو کتابخانه چند نسخه ای و تابع platformBrowserDynamic را وارد کنیم:
import ‘zone.js’;
import ‘reflect-metadata’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

چرا platformBrowserDynamic به جای platformBrowser؟ Angular دو روش برای کامپایل دارد: یک گزینه دینامیکی و یک گزینه استاتیک. در گزینه دینامیکی (معروف به just-in-time یا JIT) ، کامپایلر Angular برنامه را در مرورگر کامپایل می کند و سپس برنامه را راه اندازی می کند. گزینه استاتیک (معروف به ahead-of-time یا AOT) یک برنامه بسیار کوچکتر تولید می کند که سریعتر راه اندازی می شود. این امر به این دلیل است که کامپایلر Angular بعنوان بخشی از فرآیند ساخت ، زودتر از زمان اجرا می شود. ما فقط می خواهیم از روش JIT در اینجا با سرور مجازی Webpack dev استفاده کنیم.
(در این دوره ما یک ماژول کامل را صرف راه اندازی AOT برای تولید می کنیم).
حال ما باید هر دو ماژول Angular و AngularJS را وارد کنیم و همچنین روشی را ارائه دهیم که به Angular بگویید از کدام نسخه AngularJS استفاده کند:
import { setAngularLib } from ‘@angular/upgrade/static’;
import * as angular from ‘angular’;

import { AppModule } from ‘./app.module’;

حال برای پایان این کار ، فقط باید setAngularLib را فراخوانی کنیم و در نسخه AngularJS خود وارد کنیم و باید platformBrowserDynamic را فراخوانی کنیم و به آن بگوییم که ماژول برنامه ما را راه اندازی کند. فایل نهایی به این صورت است:
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);

اکنون که این ستاپ را انجام دادیم ، فقط باید نقطه ورود Webpack را در پیکربندی خود تغییر دهیم.
مرحله ششم: بروزرسانی Webpack
خوشبختانه این روند بوت استرپ کردن یک برنامه ترکیبی برای شما منطقی شده است. ما یک فایل main.ts داریم که نقطه ورود ماست ، که کتابخانه AngularJS ما را تنظیم کرده و ماژول Angular ما را بوت می کند. سپس ، ماژول Angular ماژول AngularJS را بوت می کند. این همان چیزی است که اجازه می دهد هر دو چارچوب در کنار یکدیگر اجرا شوند.
اکنون آماده هستیم پیکربندی Webpack خود را تغییر دهیم تا با فایل main.ts ما و نه یکی از فایل های ماژول برنامه شروع شود. webpack.common.js را باز کنید (در زیر پوشه webpack-configs قرار دارد). در زیر module.exports ، برای entry ریشه برنامه خود را به main.ts تغییر خواهیم داد:
entry: {
app: ‘./src/main.ts’,
}

تست برنامه
اکنون ، آماده هستیم تا برنامه ترکیبی خود را در عمل مشاهده کنیم. با باز کردن یک ترمینال و اجرای این دستورات می توانید سرور مجازی dev را اجرا کنید:
cd server
npm start
cd ../public
npm run dev

خواهید دید که Webpack در حال لود شدن است و TypeScript ما با موفقیت کامپایل شده است.
بیایید مرورگر را در localhost:9000 بررسی کنیم: می بینید که برنامه ما هنوز روی سرور مجازی dev اجرا می شود.

بسته به نسخه مورد استفاده، ممکن است در کنسول هشدارهایی در مورد core-js مشاهده کنید ، اما نگران آنها نباشید ، روی کار ما تأثیری ندارند. همچنین می توانید سربرگ شبکه را باز کرده و vendor bundle و app bundle را ببینید:

بسته vendor کاملاً بزرگ است و به این دلیل است که 1) ما سرور مجازی Webpack dev را اجرا می کنیم ، بدان معنی که هیچ چیزی را حداقل نمی کند ، 2) ما در حال اجرای Angular در کامپایل پویا هستیم ، بنابراین کد کامپایلر را به مرورگر ارسال میکند. وقتی در مورد کامپایل AOT صحبت می کنیم این جریان رو به پایین را درست خواهیم کرد ، اما می توانیم همینجا بمانیم و ببینیم که همه داده های مان هنوز در حال لود شدن هستند.
اکنون Angular و AngularJS در کنار یکدیگر در حال اجرا هستند ، به این معنی که برنامه ترکیبی خود را با موفقیت تنظیم کرده ایم. این بدان معنی است که ما آماده هستیم تا نسخه برنامه خود را به صورت جز به جز ارتقا دهیم.
بازنویسی و تنزل رتبه اولین مؤلفه شما
مرحله 1: بازنویسی مؤلفه
ما برنامه خود را بوت کرده و در حالت ترکیبی اجرا نمودیم ، بنابراین آماده هستیم تا با انتقال هر بخش از برنامه خود ، کار را شروع کنیم. یکی از رویکردهای متداول انتخاب مسیر و سپس شروع به بازنویسی هر قطعه از پایین به بالا است ، که از چیزی شروع میشود که کمترین متعلقات را داشته باشد. این به ما امکان می دهد تا به طور تکراری برنامه خود را ارتقاء دهیم تا در هر نقطه ، چیزی داشته باشیم که قابل استفاده در تولید باشد.
بیایید از مسیر هوم شروع کنیم زیرا با تنها یک مولفه هوم کار آسانی خواهد بود. ابتدا مؤلفه هوم خود را به home.component.ts تغییر خواهیم داد.
حال باید مولفه هوم خود را به عنوان کلاس Angular بازنویسی کنیم. اولین کاری که باید انجام دهیم وارد کردن مؤلفه از کتابخانه هسته Angular در بالای فایل است:
import { Component } from ‘@angular/core’
نکته بعدی که انجام خواهیم داد این است که تابع homeComponentController را به یک کلاس تبدیل کنیم. همچنین می توانیم آن را با حروف بزرگ بنویسیم و controller را در انتهای نام حذف کنیم ، به طوری که فقط HomeComponent نامیده شود. دست آخر ، بگذارید از پرانتز خلاص شویم. و در انتها اینچونه خواهد بود:
class HomeComponent {
var vm = this;
vm.title = ‘Awesome, Inc. Internal Ordering System’;
}

اکنون بیایید آنچه را که درون کلاس است پاک کنیم. ما دیگر نیازی به اعلام vm نداریم زیرا از کلاس استفاده می کنیم. همچنین می توانیم یک ویژگی از title را به عنوان یک رشته اضافه کنیم و عنوان را روی یک تابع constructor تنظیم کنیم. کلاس ما اینگونه خواهد شد:
class HomeComponent {
title: string;
constructor(){
title = ‘Awesome, Inc. Internal Ordering System’;
}
}

همچنین نیاز به ارائه این کلاس و سپس حذف خط export default داریم.
حال باید از دکوراتور metadata کامپوننت که وارد کردیم استفاده کنیم تا به Angular بگوییم یک مولفه است. می توانیم آبجکت کامپوننت هوم را با دکوراتور کامپوننت و یک آبجکت options جایگزین کنیم:
@Component({
}

اولین گزینه دکوراتور مولفه ما selector است. که فقط برچسب HTML است که ما برای اشاره به این مؤلفه ، که فقط ” home ” خواهد بود ، استفاده خواهیم کرد. توجه داشته باشید که در Angular ، selector یک مورد رشته ای است. و متفاوت از AngularJS است ، که مولفه آن را در camel case نامگذاری می کنیم ، و سپس به یک برچسب HTML با خط فاصله ترجمه می کنیم. در اینجا ، ما می خواهیم دقیقاً برچسب مورد نظر خود را استفاده کنیم. در این حالت ، فقط آن را در ” home ” نگاه می داریم ، بنابراین چندان مهم نیست. پس از آن ، ما الگوی خود را مشخص خواهیم کرد ، دقیقاً مانند AngularJS ، بنابراین فقط می گویم: template: template. و کامپوننت تمام شده ما به شرح زیر است:
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’;
}
}

توجه: اگر در حال کار بر روی برنامه ای هستید که از کامپایلر AOT استفاده می کند ، بهتر است به جای کارهایی که در اینجا انجام می دهیم از patternUrl استفاده کنید و در Webpack تغییراتی ایجاد کنید. البته برای JIT و سرور مجازی توسعه کاملاً مناسب است.

مرحله 2: تنزل رتبه کامپوننت برای AngularJS
اکنون برای ” downgrade ” این مؤلفه باید از کتابخانه ngUpgrade استفاده کنیم. Downgrading به معنای ایجاد یک مولفه یا سرویس AngularJS در دسترس است. از طرف دیگر ” Upgrading ” به معنای تهیه یک مولفه یا سرویس AngularJS در دسترس برای Angular است. آن را در مقاله دیگری پوشش خواهیم داد. خوشبختانه ، تنزل رتبه بسیار آسان است.
ابتدا باید در بالای فایل به همراه ورودی های خود ، دو کار را انجام دهیم. نیاز به وارد کردن تابع downgradeComponent از کتابخانه ارتقاء Angular داریم. متغیری به نام Angular را اعلام کنیم تا بتوانیم این مؤلفه را در ماژول AngularJS خود ثبت کنیم. اینگونه به نظر می رسد:
import { downgradeComponent } from ‘@angular/upgrade/static’;
declare var angular: angular.IAngularStatic;
downgrade کردن مؤلفه کاملاً ساده است. در پایین مؤلفه ما ، این مؤلفه را به عنوان دستورالعمل ثبت خواهیم کرد. دستورالعمل خود ، که فقط home است ، وارد میکنیم ، همان selector در این مورد. پس از آن ، تابع downgradeComponent را از ngUpgrade عبور خواهیم کرد. این تابع مؤلفه Angular ما را به یک دستورالعمل AngularJS تبدیل می کند. سرانجام ، ما این آبجکت را به صورت angular.IDirectiveFactory به کار میگیریم. ثبت نام پایانی به شرح زیر است:
app.module(‘app’)
.directive(‘home’, downgradeComponent({component: HomeComponent} as angular.IDirectiveFactory);

اکنون یک مولفه Angular تنزل یافته داریم که برای برنامه AngularJS ما در دسترس است. شاید تعجب کنید که چرا به جای وارد کردن و ثبت آن در ماژول AngularJS ما ، آن دستورالعمل را در پایین این فایل ثبت کردیم. هدف نهایی این است که به محض اینکه همه برنامه ما تبدیل شد از شر آن فایل خلاص شویم ، بنابراین می خواهیم به تدریج همه چیز را از آن فایل حذف کنیم و سپس با لغو نصب AngularJS ، نهایتا آن را حذف کنیم. این کار برای برنامه های نمونه یا جابه جایی سریع بسیار مفید است (در یک ثانیه).
پیش بروید و app.module.ajs.ts را باز کنید و ورودی homeComponent را در خط 12 و ثبت مؤلفه در خط 37 را حذف کنید.
مطلب سریع در مورد کامپایل AOT
این روش تنزل رتبه – ثبت مؤلفه downgrade شده در فایل کامپوننت و حذف آن از فایل ماژول AngularJS برای توسعه کاملاً مناسب عمل می کند یا اگر به دنبال بازنویسی سریع برنامه قبل از استقرار برنامه خود هستید. با این حال ، کامپایلر Angular AOT برای تولید با این روش کار نخواهد کرد. بلکه همه ثبت نامهای تنزل رتبه ما در ماژول AngularJS را میخواهد.
تنزل رتبه یکسان است ، اما در عوض کارهای زیر را انجام میدهید:
1- downgradeComponent را در app.module.ajs.ts وارد کنید (قبلاً در آنجا angular را دریافت کردید ، بنابراین نیازی به اعلام آن نیستید).
2- ورودی HomeComponent را به import { HomeComponent } from ‘./home/home.component’; وارد کنید چرا که به یک ارائه نام دار سوییچ کرده ایم.
3- ثبت نام مؤلفه ها را به همان رجیستری که دقیقاً در بالا نشان داده شده تغییر دهید.
در این لینک و همچنین در دوره 3 ارتقاء AngularJS می توانید اطلاعات بیشتری در مورد تنظیم ngUpgrade برای AOT مطالعه کنید (یک ماژول کامل وجود دارد که مرحله به مرحله آن را بیان می کند).
مرحله 3: به روزرسانی الگو
پس از به روزرسانی یک مولفه ، باید حتماً الگوی آن را به روز کنیم تا با دستور جدید Angular مطابقت داشته باشد. در این حالت ، حداقل تغییراتی وجود دارد که باید در homeComponent انجام دهید. فقط باید ctrl $ را در خط دو حذف کنیم. اکنون الگو اینگونه به نظر می رسد:
<div class=”row”>
<h1>{{title}}</h1>
</div>

اکنون ما در برنامه ترکیبی خود یک مولفه هوم کاملاً کاربردی تقلیل یافته داریم.
مرحله 4: افزودن به ماژول برنامه Angular
بیایید مؤلفه Angular جدید خود را به ماژول Angular اضافه کنیم. app.module.ts را باز کنید. ابتدا باید مولفه هوم خود را فقط بعد از ورودی های دیگر ، وارد کنیم:
import { HomeComponent } from ‘./home/home.component’;
حال ، باید HomeComponent را به برنامه Angular خود اضافه کنیم. کلیه مؤلفه های Angular باید به آرایه declarations درNgModule ما اضافه شوند. بنابراین ، پس از خط 12 در آبجت گزینه ها ، آرایه جدیدی به نام declarations اضافه می کنیم و مؤلفه خود را اضافه می کنیم:
declarations: [
HomeComponent
]

همچنین باید یک آرایه enterComponent ایجاد کنیم و HomeComponent خود را به آن اضافه کنیم. کلیه مؤلفه های کاهش یافته باید به این آرایه entryComponents اضافه شوند. آن را بعد از declarations اضافه خواهیم کرد
entryComponents: [
HomeComponent
]

با این کار ، عملیات ما تمام شد.
بررسی اینکه آیا کار کند
بیایید همان دستورات قبلی را اجرا کنیم و مطمئن شویم که برنامه ما هنوز کار می کند. این دستورات دوباره آمده است:
cd server
npm start
cd ../public
npm run dev

به localhost: 9000 برگردید. می بینید که مؤلفه اصلی ما در حال لود شدن در مرورگر به عنوان یک مولفه بازنویسی Angular است! حتی می توانید برای مثبت اندیشی، به سربرگ منابع Devtools کروم بروید. webpack:// را باز کنید ، به پایین بروید ./src/home/home.component.ts ، و مطمئناً ، در آنجا وجود دارد!

نتیجه
در این راهنما موارد زیر را انجام دادید:
• نصب Angular و ngUpgrade
• تنظیم یک ماژول Angular
• بوت کردن Angular و AngularJS
• به روزرسانی Webpack
• بازنویسی و کاهش رتبه اولین مؤلفه خود
در ادامه این راهنما ، ما در مورد اصول اولیه بازنویسی و سرویس های تنزل رتبه صحبت خواهیم کرد.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade