محتوا
- 01. بررسی نسخه را انجام دهید
- 02. Angular را نصب کنید
- 03. یک اسکلت پروژه ایجاد کنید
- 04. بارگذاری دیفرانسیل مهار
- 05. ... و نتایج را مشاهده کنید
- 06. یک کارگر وب را تخم ریزی کنید
- 07. کد را کاوش کنید
- 08. داربست راه اندازی کنید
- 09. از کمبود سازنده نگران نباشید
- 10. اجرای کامپایل کوچک
- 11. ... و خروجی را پیدا کنید
- 12. دست به کار شوید
- 13. پیچک را کاوش کنید
- 14. پردازش تغییر یافته ng را امتحان کنید
- 15. از مهاجرت بهتر لذت ببرید
- 16. کنترل فضای کاری را کاوش کنید
- 17. سرعت بخشیدن به روند کار
- 18. از مرده راه رفتن بپرهیزید
- 19. به گزارش تغییر نگاه کنید
Angular 8 آخرین نسخه Google’s Angular است - یکی از بهترین چارچوب های JavaScript در اطراف. در این مقاله ، موارد خاص Angular 8 را مرور خواهیم کرد و نحوه شروع کار را به شما نشان خواهیم داد. ابتدا ، نگاهی گذرا به آنچه در این چارچوب تاکنون رخ داده است ،
معرفی Angular منجر به تغییر پارادایم در توسعه وب شد: در حالی که بیشتر کتابخانه ها فقط به ارائه پشتیبانی از توسعه دهندگان با تأثیر معماری نسبتاً محدود محدود می شدند ، تیم توسعه دهنده Angular به سمت دیگری رفت. محصول آنها شما را مجبور به استفاده از یک معماری خاص می کند ، با انحراف از دشوار تا تجاری بی معنی. در حقیقت ، اکثر کدهای Angular قبل از اینکه به مرورگر برخورد کند ، از طریق یک ابزار پیچشی نسبتاً پیچیده اجرا می شوند.
به دلیل موفقیت چشمگیر Angular ، چه در داخل و چه در خارج از Google Inc ، توسعه - به طور کلی - به ثبات رسیده است. این بدان معناست که شکستن کد تغییر چندانی ندارد ، در حالی که به روزرسانی های نیمه سالانه بر تطبیق چارچوب با تغییرات در چشم انداز مرور وب متمرکز است.
برای مثال در مورد Angular 8 ، یک کامپایلر جدید جاوا اسکریپت مستقر شده است (البته هنوز به صورت آزمایشی). این کد سازگاری تولید شده را به میزان قابل توجهی کوچکتر و سریعتر به هزینه مرورگرهای قدیمی بهینه می کند. علاوه بر این ، پشتیبانی از Web Worker برای افزایش قابلیت پردازش Angular یکپارچه شده است. به طور خلاصه ، چیزهای زیادی برای دیدن وجود دارد - بنابراین اجازه دهید ما درست داخل شیرجه برویم.
اگر ترجیح می دهید سایتی بدون کد طراحی کنید ، یکی از این سازندگان وب سایت آسان را امتحان کنید. و برای اینکه کارها هموارتر شوند ، خدمات میزبانی وب خود را به درستی انجام دهید.
01. بررسی نسخه را انجام دهید
ابزار ابزار Angular در داخل محیط NodeJS زندگی می کند. از زمان نوشتن این مقاله ، Node.js 10.9 یا بهتر مورد نیاز است - اگر خود را در نسخه قدیمی مشاهده کردید ، به وب سایت Node.js مراجعه کنید و یک نسخه جدید را دریافت کنید. کد زیر وضعیت نسخه موجود در این دستگاه را نشان می دهد.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Angular را نصب کنید
ابزار ابزار Angular در یک ابزار خط فرمان به نام قرار دارد نانوگرم. از طریق NPM معروف قابل نصب است.
tamhan @ TAMHAN18: ~ $ sudo npm نصب -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng نسخه
مراقب باشید به س shownالی که در تصویر زیر نشان داده شده است پاسخ دهید.
دریافت اطلاعات نسخه از ابزار بسیار دشوار است - نه تنها نحو منحصر به فرد است ، بلکه خروجی نیز پر زرق و برق است (به تصویر زیر مراجعه کنید).
03. یک اسکلت پروژه ایجاد کنید
نانوگرم داربست زاویه دار را برای ما تولید می کند. در مراحل بعدی ، ما می خواهیم مسیریابی را اضافه کنیم و از Sass برای انتقال CSS استفاده کنیم. در صورت عدم استقرار به دلایلی ، فهرست کار را خالی کرده و دوباره راه اندازی کنید نانوگرم با حقوق کاربر فوق العاده.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng آزمایش جدید
04. بارگذاری دیفرانسیل مهار
نسخه جدید Angular کد سازگاری به عقب را برای کاهش تأثیر بهینه می کند - فایلی به نام لیست مرورگرها به شما امکان می دهد تصمیم بگیرید که کدام مرورگرها پشتیبانی شوند. باز کن لیست مرورگرها و کلمه را حذف کنید نه روبروی IE 9 به IE11.
. . . > 0.5٪ 2 نسخه آخر Firefox ESR not dead IE 9-11 # برای پشتیبانی از IE 9-11 ، "not" را حذف کنید.
05. ... و نتایج را مشاهده کنید
یک کامپایل از پروژه را سفارش دهید ، به پوشه توزیع تغییر کرده و پرونده های نقشه مورد نیاز را پاک کنید.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: / angularspace / workertest / dist / workertest $ ls
برای دیدن نتایج درخت را فراخوانی کنید - نانوگرم چندین نسخه از پرونده های کد مختلف ایجاد می کند (تصویر زیر را ببینید).
06. یک کارگر وب را تخم ریزی کنید
کارگران وب اجازه می دهند JavaScript وارد آخرین مرز برنامه های بومی شود: پردازش انبوه موازی کارها. با Angular 8 ، یک وب کارگر می تواند درست از راحتی وب ایجاد شود نانوگرم ابزار خط فرمان.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng تولید وب کارگر myworker ایجاد tsconfig.worker.json (212 بایت) CREATE src / app / myworker.worker.ts (157 بایت) UPDATE tsconfig.app.json (236 بایت ) angular.json را به روز کنید (3640 بایت)
07. کد را کاوش کنید
نانوگرمخروجی ها در نگاه اول ترسناک به نظر می رسند. باز کردن پرونده src / app / myworker.worker.ts در یک ویرایشگر کد ، کدی را نشان می دهد که باید به خوبی از آن بدانید وب کارگر مشخصات. در اصل ، کارگر پیام ها را دریافت می کند و در صورت لزوم آنها را پردازش می کند.
/// reference lib = "webworker" /> addEventListener ('message'، ({data}) => {const answer = "پاسخ کارگر به $ {data}"؛ postMessage (پاسخ)؛})؛
08. داربست راه اندازی کنید
کاربردهای زاویه ای از اجزا تشکیل شده است. اخراج کارگر وب بهتر است در داخل وب سایت انجام شود AppComponent، که شامل شنونده برای OnInit رویداد. در حال حاضر ، فقط اطلاعات وضعیت را منتشر می کند.
واردات {Component، OnInit} از '@ angular / core'؛ Component ({...}) کلاس صادرات AppComponent OnInit را اجرا می کند {title = 'workertest'؛ ngOnInit () {console.log ("AppComponent: OnInit ()")؛ }}
09. از کمبود سازنده نگران نباشید
توسعه دهندگان باتجربه TypeScript از خود می پرسند که چرا کد ما از سازنده ارائه شده توسط زبان برنامه نویسی استفاده نمی کند. دلیل آن این است که ngOnInit یک رویداد چرخه زندگی است که هر زمان که یک رویداد مقدماتی رخ می دهد ، اخراج می شود - این نیازی به ارتباط با فراخوانی کلاس ندارد.
10. اجرای کامپایل کوچک
در این برهه از زمان ، برنامه آماده اجرا است. ما آن را از سرور داخل آن اجرا خواهیم کرد نانوگرم، که می تواند از طریق دستور serve فراخوانی شود. یک جنبه شسته و رفته از این روش این است که برنامه تغییرات را تشخیص می دهد و مجدداً پروژه را همزمان پرواز می کند.
tamhan @ TAMHAN18: ang / angularspace / workertest $ sudo ng خدمت
به شکل نگاهی بیندازید تا این را در تصویر زیر مشاهده کنید.
11. ... و خروجی را پیدا کنید
ng خدمت می کنند putput آدرس وب سرور محلی خود را ، که معمولاً http: // localhost: 4200 /. صفحه وب را باز کرده و ابزارهای توسعه دهنده را باز کنید تا وضعیت خروجی را ببینید. به خاطر داشته باشید که console.log داده ها را به کنسول مرورگر منتقل می کند و کنسول نمونه NodeJS را دست نخورده باقی می گذارد.
12. دست به کار شوید
در این برهه از زمان ، ما نمونه ای از کارگر را ایجاد می کنیم و پیامی را به آن ارائه می دهیم. سپس نتایج آن در کنسول مرورگر نشان داده می شود.
if (typeof Worker! == 'undefined') {// ایجاد یک کارگر جدید const = new Worker ('./ myworker.worker'، {type: 'module'})؛ working.onmessage = ({data}) => {console.log ('صفحه پیام دریافت کرد: $ {data }')؛ }؛ working.postMessage ('سلام')؛ } else {console.log ("بدون پشتیبانی کارگر")؛ }
13. پیچک را کاوش کنید
نسخه های آینده Angular از کامپایلر پیشرفته تری استفاده می کنند که منجر به نمایش حتی کوچکتر می شود. در حالی که محصول هنوز به پایان نرسیده است ، می توان اسکلت مجهز به پیچک را از طریق آن تخم ریزی کرد ng جدید پروژه پیچک - فعال کردن پیچک. متناوباً ، تنظیمات کامپایلر را همانطور که در قطعه نشان داده شده است تغییر دهید.
"angularCompilerOptions": {"enableIvy": درست}
یک هشدار: پیچک منجر به کاهش شگفت انگیز اندازه می شود ، اما رایگان نیست. این محصول هنوز تثبیت نشده است ، بنابراین استفاده از آن در محیط های تولیدی توصیه نمی شود.
14. پردازش تغییر یافته ng را امتحان کنید
آنگولار نانوگرم ابزار خط فرمان مدتی از اسکریپت های کودک استفاده می کرد. Angular 8 صعودی پیشین از این نظر است که اکنون می توانید از این تسهیلات برای اجرای وظایف خود استفاده کنید زیرا برنامه شما جمع آوری و تدوین می شود.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: مرورگر" ،
یک برنامه شسته و رفته از نانوگرم اسکریپت ها شامل بارگذاری مستقیم برنامه ها در سرویس های ابری هستند. مخزن Git اسکریپت مفیدی را ارائه می دهد که کارهای شما را در یک حساب Firebase بارگذاری می کند.
15. از مهاجرت بهتر لذت ببرید
توسعه دهندگانی که از Angular 1.x دور می شوند ، همچنین به عنوان AngularJS شناخته می شوند ، سهم قابل توجهی از مسائل را دارند که باعث می شود ناوبر در برنامه های ترکیبی درست کار کند. سرویس جدید مکان یابی متحد قصد دارد این روند را روانتر کند.
16. کنترل فضای کاری را کاوش کنید
پروژه های بزرگ از توانایی تغییر ساختار فضای کار به صورت پویا بهره مند می شوند. این کار از طریق API جدید Workspace که در Angular 8.0 معرفی شده است انجام می شود - قطعه همراه این مرحله یک نمای کلی از رفتار را ارائه می دهد.
تابع async نشان می دهد () {const host = فضاهای کاری. createWorkspaceHost (NodeJsSyncHost جدید ())؛ const workspace = منتظر فضاهای کاری. readWorkspace ('path / to / workspace / Directory /'، میزبان)؛ پروژه const = فضای کاری. پروژه ها. get ('my-app') ؛ const buildTarget = پروژه. اهداف. get ('ساخت')؛ buildTarget.options.optimization = درست است؛ منتظر فضای کاری.writeWorkspace (فضای کاری ، میزبان) ؛ }
17. سرعت بخشیدن به روند کار
ایجاد پایگاه های بزرگ کد JavaScript خسته کننده است. نسخه های آینده AngularJS از سیستم ساخت Google Bazel برای تسریع روند استفاده می کنند - متأسفانه ، در زمان نوشتن این برنامه برای زمان اولیه آماده نبود.
18. از مرده راه رفتن بپرهیزید
حتی اگر Google بسیار مراقب باشد که کد را نشکند ، برخی از ویژگی ها به سادگی باید حذف شوند زیرا دیگر نیازی به آنها نیست. این لیست استهلاک ها را بررسی کنید تا درباره ویژگی هایی که باید از آنها اجتناب شود بیشتر بدانید.
19. به گزارش تغییر نگاه کنید
مثل همیشه ، یک مقاله هرگز نمی تواند نسبت به یک نسخه کامل عدالت داشته باشد. خوشبختانه ، این گزارش تغییر لیستی از کلیه تغییرات را به شما ارائه می دهد - فقط در صورتی که هرگز احساس می کنید نبض یک ویژگی را که مخصوصاً برای شما عزیز است ، چک کنید.
آیا پرونده های زیادی برای بارگذاری در سایت خود آماده هستید؟ در معتبرترین فضای ذخیره سازی ابری از آنها پشتیبان تهیه کنید.
این مقاله در ابتدا در مجله خلاقانه طراحی وب منتشر شده است طراح وب.
