תגית: angular

באנגולר יש מספר שיטות לבצע Data Binding, כלומר לקשור בין ערך של משתנה בקלאס ובין משהו שמוצג על המסך.

נראה 3 שיטות, כולן משיגות את אותה תוצאה בסופו של דבר :

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-data-binding2',
 template: `
 <img src="{{ imageUrl }}">
 <img [src]="imageUrl" >
 <img bind-src="imageUrl">
 
 
 `
})
export class DataBinding2Component implements OnInit {

 imageUrl:string = 'http://lorempixel.com/400/200';

 constructor() { }

 ngOnInit() {
 }

}

איך לקשור את תוכן התגית ב-HTML, באמצעות אנגולר

ישנה אפשרות נוספת להחליט על התוכן, באמצעות המאפיין [textContent]

זה נראה כך, והתוצאה היא שהטקסט שמוצג בתוך ה-span, הוא תוכן המשתנה.

<h4>Image URL : <span [textContent]="imageUrl"></span></h4>

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-data-binding2',
 template: `
 
 <p [hidden]="!postChanged">Remmber to Save this post.</p>
 <button [disabled]="!postChanged">Save Post</button>

 `
})
export class DataBinding2Component implements OnInit {

 postChanged:boolean = false;

 constructor() { }

 ngOnInit() {
 }

}

בפוסט הזה נראה כיצד לרוץ בלולאה באנגולר.

דוגמא 1 – לולאה פשוטה על מערך באנגולר , באמצעות ngFor*

לצורך בסיס לדוגמא הראשונה, נראה קודם כל איך אנגולר מציג לנו מערך רגיל, ללא לולאה.

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

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngfor3',
 template: ` 
 The products are : {{ products }}
 `
})
export class Ngfor3Component implements OnInit {

 products:string[] = ['bread','milk','rice','water'];

 constructor() { }

 ngOnInit() {
 }

}

עכשיו, נניח ונרצה לרוץ בלולאה על המערך ולהציג אותו בנקודות.

לצורך כך נשתמש ב-ngFor.

הוא מתחיל בסימן כוכבית *, ולאחריו בתוך מרכאות, אנחנו כותבים בדומה לשפות אחרות, מהו המשתנה שמקבל את הסמן בלולאה, ומהו המערך שעליו רצים.

התוצאה של זה תהיה תצוגה בנקודות של הרשימה .

להלן רק קטע הקוד שהשתנה :

 template: ` 
 <ul>
 <li *ngFor="let product of products">
 {{product}}
 </li>
 </ul>
 
 `

דוגמא 2 – לולאה עם 2 סמנים בו זמנית באנגולר, באמצעות ngFor*

אם נוסיף עוד סמן ללולאה, אפשר יהיה להוסיף את המספרים שלהם על יד כל נקודה. (הוספתי 1 כדי להתחיל מ-1 ולא מאפס).

 template: ` 
 <ul>
 <li *ngFor="let product of products;let i = index">
 {{ i+1 }} -> {{product}}
 </li>
 </ul>
 `

דוגמא 3 – לולאה על מערך של אובייקטים באנגולר, באמצעות ngFor*

בדוגמא הבאה, יש לנו מערך של אובייקטים, ואנחנו מציגים מאפיינים של האובייקט.

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngfor3',
 template: ` 
 <ul>
 <li *ngFor="let product of products;let i = index">
 {{ i+1 }} -> {{product}}
 </li>
 </ul>

 <ul>
 <li *ngFor="let habbit of habbits">
 Habbit Name: {{habbit.Title}} | is it risky: {{ habbit.isRisky }}
 </li>
 </ul>
 `
})
export class Ngfor3Component implements OnInit {

 products:string[] = ['bread','milk','rice','water'];

 habbits = [
 {
 'Title': 'surf',
 'isRisky': 'Yes'
 },
 {
 'Title': 'smoke',
 'isRisky': 'Yes'
 }
 ];

 constructor() { }

 ngOnInit() {
 }

}

הערה לסיום – שינוי תוכן המערך לפני התצוגה על המסך

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

אם לדוגמא נשנה את רמת הסיכון של אחד התחביבים ברשימה, כמובן שזה ישתקף ברשימה על המסך.

 constructor() {
 this.habbits[1].isRisky = "No";
 }

בפוסט הזה נראה דוגמא פשוטה לשימוש בקובץ html+css חיצוניים (שזוהי ברירת המחדל שמיוצרת על ידי כלי angular cli).

קובץ ה-ts שלנו, מכיל את הגדרת ה-Component@ , שמכילה הפניות ל-2 קבצים חיצוניים.

להלן 3 הקבצים :

----------- TypeScript File ---------------------

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-outside-files',
 templateUrl: './outside-files.component.html',
 styleUrls: ['./outside-files.component.css']
})
export class OutsideFilesComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }

}
--------- HTML file ---------
<p class="sss">
 outside-files works!
</p>
--------- CSS file ----------
.sss {
 background-color: yellow;
 color: red;
}

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

בפוסט הזה אראה מספר דוגמאות בסיסיות כיצד קושרים מידע ממחלקת ה-component (קובץ ts)  אל תבנית ה-html שמופיע תחת template, או תחת הקובץ שצויין תחת templateUrl.

דוגמא 1 – Data Binding של משתנים פרימיטיבים באנגולר

• ניצור component חדש לצורך הדוגמא באמצעות ה-cli

ng g component components/a_sandbox1

• בתוך המחלקה (של ה-component) נגדיר 2  משתנים

export class ASandbox1Component implements OnInit {

name='Bob';

age=37;

• כעת בתוך התבנית html של הקומפוננט, "נקשור" את 2 המשתנים אל תוך התבנית.

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.`,

• כדי לראות את התוצאה – צריך לזכור כמובן להכניס את ה-selector אל תוך ה- app.component.html.
• התוצאה – בכל פעם שתוכן המשתנים ישתנה – הם ישתנו אוטומטית על המסך, ללא צורך באף שורת קוד מצידנו. מספיק שקשרנו אותם פעם אחת, ומרגע זה התבנית html שלנו הפכה להיות דינמית, "חיה" ומגיבה לשינויים בתוכן המשתנים.

דוגמא 2 – Data Binding של אובייקטים באנגולר

בדיוק כמו שעשינו עם משתנים פרימטיבים, אפשר לעשות דבר דומה עם אובייקטים.

• נוסיף אוביקט למחלקה
• נקשור אותו אל תוך התבנית
• ואותה תוצאה בדיוק – התבנית הפכה להיות חיה ונושמת.

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=37;

candy= { "color":"yellow" , "taste":"sweet"};

דוגמא 3 – חצי מילה על מחזור חיים של משתנה

כמו כל שפה מונחית עצמית, גם type script מכילה פונקצית constructor.

בדוגמא הזו, אראה כיצד למרות שהגדרתי את המשתנה בעת ההגדרה לערך מסוים – 40, עדין, כיוון שהקונסטרקטור רץ, אז אם הוא מכיל הגדרה אחרת, אז ההגדרה של הקונסטרקטור למשתנה, דורסת את ההגדרה הראשונית.

שימו לב למשתנה age בדוגמא הבאה, בזמן ההגדרה הוא מושם כ-40, ולאחר ריצת הקונסטרטור הוא מושם כ-45 –  וזה מה שיוצג על המסך – 45.

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=40;

candy= { "color":"yellow" , "taste":"sweet"};

constructor() {

this.age=45;

}

דוגמא 4 – Data Binding אל פונקציה.

בדיוק כמו שקשרנו את התבנית אל משתנים, אפשר לקשור גם אל פונקציות.

שימו לב לדוגמא הבאה :

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

<p>again...My age is {{ giveMeAge() }}</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=40;

candy= { "color":"yellow" , "taste":"sweet"};

constructor() {

this.age=45;

}

giveMeAge() {

returnthis.age;

}

לסיכום, ראינו במספר דוגמאות, את האפשרות לקשור משתנים בתבנית אל משתנים במחלקה.

בפוסט הזה אציג כיצד לפתוח component חדש באופן ידני.

• מעורך הקוד נפתח, לצורך הסדר הטוב, תיקיה חדשה בתוך src, ונקרא לתיקיה החדשה components
• בתוך התיקיה החדשה נפתח תיקיה עבור ה-component החדש שלנו, שנקרא לה tryComponent.
• בתוך תיקיית tryComponent נפתח קובץ TypeScript חדש, ונקרא לו tryComponent.component.ts
• בתוכו בשורה הראשונה נייבא את המודול Component מתוך הליבה של אנגולר.

import { Component } from '@angular/core';

• לאחר מכן,  נרשום את ה-Decorator הבא, שבו נגדיר מה יהיה שם התגית, שבה נשתמש כדי להציג את ה-Component שאנחנו יוצרים כעת, וגם נגדיר את תוכן הקומפוננט:

@Component({

selector:'app-tryComponent',

template:`<h1> Hello from our new Component </h1>`

})

• כעת, נייצא מחלקה החוצה, בשלב זה היא תהיה ריקה מתוכן.
  ונקפיד ששם המחלקה יכלול בסופו את המילה Component :

export class TryComponent{

}

• נשמור את הקובץ
• נפתח את הקובץ app.component.html, נמחק את כל התוכן בו, ונשים בתוכו רק את ה-selector שבחרנו עבור הקומפוננט החדש שלנו

<app-tryComponent></app-tryComponent>

• אם נבדוק כעת (בהנחה שאנחנו משתמשים ב-ngServe שמקמפל את הקבצים אוטומטית)
  נראה שבינתיים זה עדין לא עובד.
  כדי שזה יעבוד אנחנו צריכים ליבא את הקומפוננט החדש.
  נעשה זאת באמצעות 2 פעולות  שנעשה בקובץ app.module.ts (לשם כך צריך לפתוח את הקובץ כמובן 🙂 ) :
• נוסיף בראש הקובץ משפט ליבוא של הקומפוננט החדש שלנו :

import {TryComponent } from './components/tryComponent/tryComponent.component';

• ובמערך שנקרא  declarations , נוסיף את שם המחלקה שיצאנו, כלומר TryComponent .

כעת, אם נגלוש אל אפליקציית האנגולר שלנו, נראה את המשפט שרשמנו בתוך ההגדרה template  – וזוהי, בשלב זה, הצלחה!.

למי שצריך, אז הקומפוננט במלואו נראה כך :

import { Component } from '@angular/core';

@Component({

selector:'app-tryComponent',

template:`<h1> Hello from our new Component </h1>`

})

export class TryComponent{

}

בפוסט הזה נדבר על קובץ מאוד חשוב באנגולר, שנקרא app.module.ts.

בקובץ זה יש Decorator  של אנגולר שנקרא NgModule@

ובנוסף יש בו יצוא של AppModule.

בתוך NgModule@, יש חלקים שונים בהם אנחנו מגדירים את האפליקציה שאנחנו בונים, ואת הפלאגינים שאנחנו מוסיפים.

• החלק של declerations מיועד עבור כל מיני components שאנחנו יוצרים.
• החלק של imports מיועד לכל מיני רכיבים של אנגולר , כמו BrowserModule, HttpModule,FormsModule וכדומה.
• החלק של providers  – מיועד לקלאסים מסוג services ( למשל service שמלקט מידע ומוזרק לקומפוננט).

מה המשמעות של המונח קומפוננט ב- אנגולר ?

המונח קומפוננט ( component ) באנגולר – משמעותו היא "פיסה של ממשק משתמש (UI) "

כלומר חתיכת מסך .

קומפוננט מורכב מקובץ קלאס ts , מחלקה יעודית שמטפלת בקומפוננט, ולרוב (אך לא מחייב) יהיה גם קובץ html, שמשמש בתור התבנית של הקומפוננט.

יכולים להיות עוד קבצים כמו CSS וכדומה.

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

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

מבנה טיפוסי לדוגמא של קומפוננט באנגולר

---------------------------------
in bubu.component.ts file
---------------------------------

import { Component } from '@angular/core';

@Component({

 selector: 'bubu',
 template: `<h1> Heyyyyyy!!!!`
 })
 
export class BubuComponent {
 name = 'Bubu';
 }
 
 
-----------------
In another file 
-----------------


 <body>
 <bubu></bubu>
 </body>

בתחילת הקובץ, אנחנו מייבאים את הרכיב המתאים מליבת אנגולר.

אחרי כן, אנחנו כותבים את הפקודה @Component , שמגדירה כמה דברים בסיסים.

באופן כללי, כל פעם שתראו באנגולר ביטוי שמתחיל בסימן @ , זה נקרא "Decorator", והמשמעות היא רכיב מסוים של אנגולר שמביא עימו תכונות מסויימות.

בתור ה-Decorator שנקרא @Component , הגדרנו 2 דברים :

1. את ה-selector שישמש אותנו לאחר מכן בקובץ ה-html, שימו לב שה-selector שקראתי לו בשם החדשני bubu, הופך להיות בקובץ ה-html שמופיע בתחתית – בתור תגית html, שאנגולר יודע לפרש אותה.
2. בתוך ההגדרה template- הגדרנו מה יופיע בקומפוננט הזה.
   אילו נגדיר זאת עם גרשיים מיוחדים כאלו ", אז זה יאפשר לכתוב מספר שורות יחד.
   לעומת זאת עם גרש רגיל, זה לא יאפשר.

בנפרד , הגדרנו למטה את הקלאס עצמו, בצורה הרגילה שבה עובדים עם קלאסים ב-node js, כלומר פותחים במילה export עם שם הקלאס, ושמים בתוכו את כל המתודות והמאפיינים ליצוא.

בתחתית – כתבתי שבקובץ אחר, לרוב בקובץ html כלשהוא – נשים את הסלקטור שבחרנו בו, וזה יגרום לכך שתוכן הקומפוננט יופיע.

מחזור החיים של קומפוננט באנגולר

באנגולר אפשר להגיב לכל מיני אירועים שמתרחשים לאורך "חיי" הקומפוננט.

אחד מהם, נפוץ מאוד, הוא האירוע שמתרחש כאשר הקומפוננט נטען לראשונה , מה שנקרא init (=יצירת מופע של אובייקט הקומפוננט).

לצורך זה נשתמש במתודה ngOnInit() בתוך הקלאס של הקומפוננט.

2 דרכים ליצור קומפוננט עם אנגולר

1. פשוט ליצור את הקבצים, בתוך תיקיית src, עדיף שיהיו מרוכזים יחד בתיקיה יעודית לקומפוננט, ומרוכזים תחת תיקיה שתיקרא components.
   למשל הקומפונננט שנקרא bubu , ישב בתוך src/components/bubu.
   במקרה שאנחנו יוצרים ידנית את הקבצים, נצטרך לכל הפחות ליצור קובץ ts
   ולרוב גם קבצי html+css
   אז בסוף התהליך נהיה עם :
   bubu.component.ts
   bubu.html
   bubu.css
2. אפשר להשתמש פשוט בכלי שורת הפקודה angular cli, ולהקליד

ng g component components/bubu

האות g משמעותה "תיצור" (=המילה generate ) .

המילה component – אומרת לכלי מה ליצור (אפשר ליצור עוד דברים חוץ מקומפוננטות).

ובסוף אנחנו רושמים באיזו תיקיה ליצור את הקומפוננט, והכלי יצור את הספריה בעצמו.

בסופו של דבר צריך להוסיף את הקומפוננט אל @ngModule, ועל כך בפוסט נפרד.