ارتقاء از 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 { }

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

استفاده از 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