آیا می خواهید سایت Angular خود را تا حد امکان سریع و قابل دسترس کنید؟ شما جای درست آمده اید!
Angular چیست؟
Angular چارچوبی برای ساخت رابط کاربری است. این بلوک های ساختمانی را برای کمک به شما در راه اندازی سریع یک برنامه کاربردی قابل نگهداری و مقیاس پذیر فراهم می کند. Angular به توسعه دهندگان این امکان را می دهد تا برنامه هایی را ایجاد کنند که در وب، تلفن همراه یا دسکتاپ زندگی می کنند.
در این مجموعه چیست؟
این مجموعه بر روی پنج حوزه اصلی برای بهینه سازی یک برنامه Angular تمرکز دارد:
- بهبود عملکرد برنامه شما برای افزایش تبدیل و تعامل کاربر
- بهبود قابلیت اطمینان برنامه شما در شبکه های ضعیف با پیش کش کردن دارایی ها با Angular Service Worker
- با استفاده از پیش رندر و رندر سمت سرور، اپلیکیشن خود را برای موتورهای جستجو و ربات های رسانه های اجتماعی قابل کشف کنید
- نصب برنامه خود را برای ارائه تجربه کاربری مشابه برنامه های iOS/Android
- بهبود دسترسی به برنامه شما برای قابل استفاده و قابل درک کردن آن برای همه کاربران
هر پست در مجموعه تکنیک هایی را توضیح می دهد که می توانید مستقیماً در برنامه های خود اعمال کنید.
چه چیزی در این مجموعه نیست ؟
این مجموعه فرض می کند که شما از قبل با Angular و TypeScript آشنا هستید. اگر هنوز از آنها مطمئن نیستید، مستندات TypeScript و راهنمای شروع کار با Angular را در angular.io بررسی کنید.
یک پروژه را شروع کنید
رابط خط فرمان Angular (CLI) به شما امکان می دهد تا به سرعت یک برنامه Angular سمت کلاینت ساده راه اندازی کنید. این پست معرفی کوتاهی از CLI دارد، در حالی که سایر پست‌های مجموعه نشان می‌دهند که چگونه می‌توان ویژگی‌های پیشرفته‌تری مانند رندر سمت سرور و پشتیبانی از استقرار اضافه کرد.
CLI را راه اندازی کنید
برای شروع، CLI را به صورت سراسری نصب کنید و با اجرای این دستورات تأیید کنید که آخرین نسخه را دارید:
npm i -g @angular/cli
ng --version
مطمئن شوید که آخرین فرمان نسخه 8.0.3 یا جدیدتر را خروجی می دهد.
از طرف دیگر، اگر نمی خواهید CLI را به صورت سراسری نصب کنید، می توانید آن را به صورت محلی نصب کنید و با دستور npx اجرا کنید:
npm i @angular/cli
npx ng --version
پروژه را ایجاد کنید
برای ایجاد یک پروژه جدید اجرا کنید:
ng new my-app
این دستور فایل ها و ساختار پوشه اولیه را برای برنامه شما ایجاد می کند و ماژول های گره مورد نیاز خود را نصب می کند.
هنگامی که فرآیند راه اندازی با موفقیت کامل شد، برنامه خود را با اجرای:
cd my-app
ng serve
اکنون باید بتوانید به برنامه خود در http://localhost:4200 دسترسی داشته باشید.
بعدش چی؟
در ادامه این مجموعه، نحوه بهبود عملکرد، دسترسی و سئوی اپلیکیشن Angular خود را خواهید آموخت. در اینجا آنچه پوشش داده شده است:
- تقسیم کد Route-Level در Angular
- بودجه عملکرد با Angular CLI
- استراتژی های پیش واکشی مسیر در Angular
- بهینه سازی تشخیص تغییر در Angular
- لیست های بزرگ را با Angular CDK مجازی سازی کنید
- Precaching با Angular Service Worker
- از پیش رندر مسیرها با Angular CLI
- رندر سمت سرور با Angular Universal
- مانیفست برنامه وب را با Angular CLI اضافه کنید
- ممیزی دسترسی با کدلایزر