טיפים וטריקים באנגולר (tips & tricks)

אנסה לאגד כאן את כל הטיפים והטריקים הקטנים שיעזרו לכם בפיתוח פרויקט אנגולר.

המטרה היא קטעי קוד והסבר מאוד מאוד קצרים (כן, יותר קצרים מהפוסטים הרגילים שלנו)

• בגירסה 10 ומעלה כאשר פותחים פרויקט חדש, בזמן הקמת הפרויקט אנחנו נשאלים אם נירצה פרוייקט שהוא strict , אחרי שקראנו מה זה אומר החלטנו שזה רעיון טוב ופתחנו את הפרויקט במצב strict. מרגע זה אנחנו תחת הגבלות יותר קשות של הקומפיילר (וזה לטובה). במידה שהגדרנו משתנה עם אינטרפייס שאנחנו יצרנו והוא לא מערך, המערכת מחייבת אותנו לאתחל אותו. הצורה הקלה ביותר לעשות את זה נראה כך:

public propSetData: IResetProp = {} as IResetProp;

• כאשר בונים טופס (reactive form) אנחנו מגדירים את כל השדות ב-TS ואת הבדיקות שרוצים לעשות לשדות האלו, הבעיה היא שבכול לחיצה על כפתור במקלדת כאשר אנחנו נמצאים באחד השדות, אנגולר מריץ בדיקה על כל הבדיקות אימות של השדה ובמידה שמשהו לא תקין הוא מידית מעלה שגיאה… זה לא טוב מבחינת ביצועים וזה לא טוב לנו לעלות שגיאה כאשר המשתמש לא סיים לכתוב. למזלנו יש פיתרון בכמה צורות שונות (בהתאם למה שאנחנו צריכים, במקרה הזה 'blur'):

this.email = new FormControl(null, { updateOn: 'blur' });

• אם רוצים להציג מספר כלשהו עם הפרדה של פסיקים ניתן לעשות זאת בדרך הבאה, רק זיכרו שהוא כבר לא יהיה מסוג number אלא מסוג string.

let amount:number = 100000;
let a:string = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(a)

התוצאה היא כמובן 100,000.

למי שלא מכיר את הג'יבריש שכתוב בתוך ה-replace אז קוראים לזה RegEx , בכלליות מדובר על selector מאוד חזק עם יכולות מאוד מתקדמות.

• כאשר רוצים להגדיר משתנה שמקבל נתון מבחוץ, מגדירים אותו כ-INPUT ואם רוצים להריץ פונקציה כל פעם שהוא משתנה אז צריך להגדיר ngOnChanges. אבל יש דרך אחרת… יעילה יותר וספציפית יותר. בכל INPUT שאנחנו רוצים להגדיר לו ערכי ברירת מחדל או להריץ פונקציה אם הוא משתנה, זו הדרך:

  @Input()
  get myData(): string { return this.pMyData; }
  set myData(myData: string) {
    this.pMyData = (myData && myData.trim()) || 'NO DATA'
  }
  private pMyData: string = '';

מה קורה כאן? יש לנו INPUT בשם myData, כאשר הוא יקבל מלל מסויים הערך ישמר ב-pMyData ובמידה שבשלב מסויים יכנס ערך ריק אז pMyData יהיה שווה ל-NO DATA .

זו דוגמה פשוטה אבל כמובן שאפשר במקום זה להריץ פונקציה ולעשות בה כל דבר שרוצים. וכך כל INPUT יכול להריץ פונקציה משלו ואין צורך להשתמש ב-ngOnChanges, אנחנו גם מרוויחים ביצועים יותר טובים 😎.

• כאשר מתחילים פרויקט חדש, תעלה שאלה אם ליצור את הפרויקט עם שימוש ב-strict , למרות שהפיתוח הופך לקצת יותר קשה, זה שווה את זה, אתם תלמדו הרבה ממנו וזה ימנע ממכם חלק מהטעויות בפרויקט. אם תרצו להפעיל/להפסיק תמיד אפשר ללכת לקובץ הבא ולשנות את זה

{
  "compilerOptions": {
	"strict": true,
  }
}

• כאשר אנחנו מתכוונים לפתח פרויקט עם כמות רכיבים גדולה כדי כבר בהתחלה לעבוד על פי חלוקה של רכיבים למודולים ולטעון אותם ב-lazy loading, פירוט על צורת העבודה בשיטה זו אכתוב בפוסט אחר, כרגע מה שחשוב הוא להכיר שקיים דבר כזה וכותבים אותו כך:

const routes: Routes = [
{
path: 'lazyload', loadChildren: ()=>import('./lazyload/lazyload.module').then(l=>
       l.Lazyload)
}
];

• כברירת מחדל אנגולר בודק מה קורה בכל הרכיבים שנמצאים בדף בכל שינוי שקורה באחד מהם וכך הוא שומר שהכל מעודכן וכל הרכיבים מגיבים לכל שינוי שאנחנו עושים. בפרויקטים קטנים זה לא מורגש, אבל בפרויקטים גדולים זה מתחיל להפריע ומעמיס את האתר, לכן יש אפשרת לנתק רכיבים מסויימים ממערך הבדיקות הגלובלי, צריך רק לזכור! כאשר מנתקים רכיב מהרעינון של המערכת, כל הענף (הילדים) שתחתיו מתנתקים גם הם ולא ניתן לחבר אותם בלי לחבר את הרכיב חזרה.

@Component({
  selector: 'myComp',
  template: `./myComp.component.html`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

• כאשר משתמשים ב-ngFor על מערך ואז עושים שינויים במערך, כל המערך מתרענן ולא רק התא הספציפי שערכנו ולכן רצוי להשתמש ב- trackBy , כך כל תא מקבל מזהה ייחודי ורק הוא יעבור רעינון

<ul>
 <li *ngFor="let item of itemArr; trackBy: trackByFn">{{ item.text }}</li>
</ul>

trackByFn(index, item) {
  return index 
  // or item.id;
}

• יש לזכור ש-ngIf רץ בכל שינוי בדף (DOM) ולכן יש להמנע מלשים פונקציה בתוכו אלא משתנה שהוא הרבה יותר מהיר. את המשתנה ניתן לשנות בעזרת פונקציה ב-TS.
• במידה ועשיתם רישום למשתנה , חובה לבצע ביטול רישום כאשר הרכיב יורד מהדף (subscribe and unsubscribe). במידה שלא עושים ביטול רישום זה עלול ליגרום לעומס על הזיכרון (זליגת זיכרון) והאתר שלנו יאט עד שיתקע. זיכרו שכל רישום הוא רישום חדש לחלוטין ולכן אם רכיב מסויים שמבצע רישום יתווסף וימחק בדף שלנו, הוא יבצע רישום כל פעם מחדש וגם כאשר נעבור לדף אחר שהוא לא קיים בו, הרישום ישאר (אם לא ביטלנו אותו).
• מכירים את זה שכאשר לוחצים על שדה טקסט באייפון, מתבצע זום לשדה וחלק מהדף מסביב יוצא מגבולות המסך. במידה שאנחנו רוצים למנוע את זה, ניתן לתת את ההגדרות האלו לשדה ב-CSS :

::-webkit-input-placeholder{
  font-size:11px;
}
input{
  font-size:16px; // must be at least 16px
}

פוסטים קשורים:

בניה של טופס דינמי על פי מידע מהשרת באנגולר SEO| שינוי כותרת של הדף באנגולר ריבוי מודולים באנגולר SEO| שינוי Meta tag בהתאם לדף באנגולר