רוצים שהאתר שלכם ב-Agular יהיה מהיר ונגיש ככל האפשר? הגעת למקום הנכון!
מה זה Angular?
Angular הוא מסגרת ליצירת ממשקי משתמש. הוא מספק אבני בניין שיעזרו לכם להגדיר במהירות אפליקציה שניתן לתחזק ולשנות את ההיקף שלה. Angular מאפשר למפתחים ליצור אפליקציות לשימוש באינטרנט, בנייד או במחשב.
מה נכלל באוסף הזה?
האוסף הזה מתמקד בחמישה תחומים עיקריים לאופטימיזציה של אפליקציות Angular:
- שיפור הביצועים של האפליקציה כדי להגדיל את מספר ההמרות וההתעניינות של המשתמשים
- שיפור האמינות של האפליקציה ברשתות חלשות באמצעות העברה מראש של נכסים למטמון באמצעות קובץ השירות (service worker) של Angular
- איך הופכים את האפליקציה גלויה למנועי חיפוש ולבוטים של רשתות חברתיות באמצעות עיבוד מראש ועיצוב בצד השרת
- איך הופכים את האפליקציה למתקין כדי לספק חוויית משתמש דומה לאפליקציה ל-iOS או ל-Android
בכל פוסט באוסף יתוארו שיטות שתוכלו ליישם ישירות באפליקציות שלכם.
מה לא נכלל באוסף הזה?
ההנחה באוסף הזה היא שכבר יש לכם ניסיון ב-Angular וב-TypeScript. אם אתם עדיין לא בטוחים בעצמכם, כדאי לעיין במסמכי העזרה של TypeScript ובמדריך תחילת העבודה עם Angular באתר angular.io.
התחלת פרויקט
ממשק שורת הפקודה (CLI) של Angular מאפשר להגדיר במהירות אפליקציית 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. מה נכלל:
- פיצול קוד ברמת המסלול ב-Angular
- תקציבי ביצועים באמצעות CLI של Angular
- אסטרטגיות של אחזור מראש של מסלולים ב-Angular
- אופטימיזציה של זיהוי שינויים ב-Agular
- וירטואליזציה של רשימות גדולות באמצעות Angular CDK
- העברה מראש למטמון באמצעות Angular Service Worker
- עיבוד מראש של מסלולים באמצעות Angular CLI
- רינדור בצד השרת באמצעות Angular Universal
- הוספת מניפסט של אפליקציית אינטרנט באמצעות Angular CLI