שלום עולם Angular
Angular היא פריימוורק שמיועד לרוץ בצד הלקוח של אתרי אינטרנט. המערכת מפותחת על ידי Google, והיא מחליפה את AngularJS.

Angular נכתבה מהיסוד, והיא שונה מאוד מ-AngularJS, ומציעה שיפור ניכר בביצועים, ותמיכה טובה יותר בניידים. אחד השינויים המרכזיים הוא שאת הקוד אנחנו כותבים בשפת ה-TypeScript, ולא ב-JavaScript. אתם מוזמנים ללמוד TypeScript מהמדריכים באתר רשתטק.
קיימת גרסה אנגלית למדריך How to install Angular.
הכנת סביבת העבודה ל Angular
סביבת העבודה כוללת:
- כלי שורת פקודות או טרמינל (אם אתם בסביבת linux או Mac אין בעיה, ועל סביבת חלונות כדאי להתקין את git bash).
- IDE או עורך קוד טוב (אני עובד עם Atom, ומי שרוצה IDE מקצועי בתשלום יכול לנסות את Webstorm).
- התקנה של הגרסה החדישה ביותר של node.js
את node.js נוריד ונתקין מהכתובת https://nodejs.org/en/download
node.js יורד ביחד עם מתקין החבילות npm, שבו ניעזר כדי להתקין את Angular, ואת יתר החבילות שבהם תלוי הפרויקט שלנו.
נפתח את כלי שורת הפקודות, ונתקין את ה-ׁ(CLI (command line interface באופן גלובלי באמצעות הפקודה הבאה.
> npm install -g @angular/cli
ההתקנה עשויה לארוך מספר דקות
אחרי שה-CLI יותקן על המחשב שלנו, ננווט לתיקייה שבה אנחנו מעוניינים ליצור את הפרויקט, וניצור את האפליקציה בתוך התיקייה (לאפליקציה במדריך אני קורא hello-world).
> ng new hello-world
אחרי שיצרנו את האפליקציה, נכנס לתיקיית הפרויקט, ונשתמש בפקודה serve כדי להפעיל את השרת.
> cd hello-world
> ng serve
הפקודה serve מריצה את השרת וגם מקמפלת את קבצי ה-TypeScript ל-JavaScript. דבר מאוד חשוב מפני שדפדפנים יודעים להריץ JavaScript, ולא TypeScript.
אחרי שהתהליך יסתיים, ננווט משורת הכתובות בדפדפן, ל-localhost:4200, כדי לצפות באפליקציה שלנו בפעולה. והתוצאה לפניכם:

מבנה הקבצים והתיקיות של הפרויקט
נשתמש ב-IDE כדי לפתוח את תיקיית הפרויקט, וננווט לתיקייה src, שהיא התיקייה שבה נמצאים קבצי ה-TypeScript, ובתוכה נמצאים רוב הקבצים שדרושים לנו לפיתוח הפרויקט.
זה מבנה התיקיות שאתם אמורים לראות באפליקציה:

הקבצים הכלליים שאותם צריך להכיר יושבים בתיקייה src
-
src/index.html
הוא קובץ ההטמ"ל המרכזי שמשותף לכל מרכיבי האפליקציה. -
src/styles.css
הוא קובץ ה- CSS המשותף לכל מרכיבי האפליקציה.
האפליקציה מתחלקת למרכיבים שמכונים קומפננטות (component) ובשלב זה יש לנו קומפננטה אחת שכל הקבצים שלה נמצאים בתיקייה src/app.
הקומפוננטה הזו היא הרכיב המרכזי באפליקציה, וכל יתר הקומפוננטות משובצות לתוכה, באופן ישיר או עקיף.
אילו הקבצים שהכי חשוב להכיר בתיקייה src/app , שכאמור, מכילה את הקומפננטה המרכזית של האפליקציה.
-
src/app/app.module.ts
הוא המודול המרכזי האפליקציה, ובתוכו נגדיר את המודולים והקומפננטות בהם נשתמש. -
src/app/app.component.ts
מכיל את הקוד עבור הקומפוננטה המרכזית של האפליקציה. -
src/app/app.component.html
בתוכו ימצא ה-html של כל האפליקציה מכיוון שלתוכו נשבץ את ה-html של יתר הקומפננטות בצורת תגיות שייצגו את הקומפננטות השונות.
נערוך את הקוד
נפתח לעריכה את הקובץ app.component.ts, שזה תוכנו.
src/app/app.component.ts
---------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works';
}
מה שלנו חשוב בשלב זה של הלימוד זה שבשורה השנייה הדקורטור Component (ואם אתם לא יודעים מזה דקורטור אתם יכולים לקרוא לו רק "Component" הוא לא ייעלב) מגדיר את קבצי ה-html וה-css של הקומפננטה.
ובהמשך הקובץ, יש לנו מחלקה ששמה AppComponent שמכילה את הקוד שמוצג בהטמ"ל. ובשלב זה היא מכילה שדה אחד, השדה title.
אבל איפה קובץ ההטמ"ל שבתוכו מוצג השדה title?
נפתח את קובץ ההטמ"ל שמוגדר ב-Component@, ונמצא בו את הקוד הבא.
src/app/app.component.html
------------------------------------
<h1>
{{title}}
</h1>
השדה title מהמחלקה AppComponent מרונדר לתוך הסוגריים המסולסלים.
נבדוק שזה אכן כך על ידי שינוי הערך המוצב לתוך השדה title במחלקה AppComponent.
src/app/app.component.ts
------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Hello world with Angular2!';
}
ועכשיו, כשנחזור לדפדפן, נראה את השינוי. כך זה נראה אצלי:

שימו לב, שהשינוי הוא מיידי, בלי צורך לקמפל את קוד ה-TypeScript, בגלל שהאפליקציה עושה את הקומפילציה באופן אוטומטי בכל פעם שאנחנו שומרים את הקבצים.
הוספת קומפננטות באמצעות ה-cli
קומפננטות (component) הם הדרך העיקרית באנגולר להוסיף אלמנטים ולוגיקה לדפים.
ניצור את הקומפננטה הראשונה באמצעות ה-cli, ונקרא לה my-component
> ng generate component my-component
ה-cli יוסיף תיקייה לאפליקציה לפי שם הקומפוננטה: src/app/my-component. התיקייה תכלול 4 קבצים:
- my-component.component.ts יכיל את הלוגיקה של הקומפוננטה.
- my-component.component.html יכיל את ה-html.
- my-component.component.css קובץ ה-css שמשרת את האפליקציה.
- my-component.component.spec.ts הוא קובץ הבדיקות.
את הלוגיקה נכתוב בקובץ my-component.component.ts
/src/app/my-component/my-component.component.ts
----------------------------------------
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MyComponentComponent implements OnInit {
name: string;
constructor() {
this.name = 'Israel Israeli';
}
sayHello() {
console.log('Hello, '+ this.name)
}
}
- המשתנה name יאוכלס בערך בזמן יצירת הקומפוננטה על ידי ה-constructor וקריאה לפונקציה sayHello() תציג בקונסולה של המפתחים את ההודעה.
- שימו לב לסלקטור של הקומפננטה 'app-my-component' כי אנחנו נשתמש בו בהמשך כדי לשבץ את הקומפננטה בקובץ ה-html הראשי של האפליקציה.
נערוך את קובץ ה-html של הקומפננטה ונוסיף כפתור שלחיצה עליו תקרא לפונקציה.
/src/app/my-component/my-component.component.html
----------------------------------------
<p>
<button (click)="sayHello()">Say Hello to {{name}}</button>
</p>
כדי לשלב את הקומפוננטה באפליקציה צריך לייבא אותה לקובץ המודל של האפליקציה.
/src/app/app.module.ts
----------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [
AppComponent,
MyComponentComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- חשוב לייבא את הקומפוננטה וגם להוסיף אותה ל-declerations.
- אם השתמשנו ב-cli כדי להוסיף את הקומפננטה היא תעשה את העבודה בשבילנו.
וכדי לצפות בקומפוננטה נשבץ את הסלקטור שלה בקובץ ה-html של האפליקציה. כך זה נראה בקוד:
src/app/app.component.html
----------------------------------------
<h1>
{{title}}
</h1>
<app-my-component></app-my-component>
וכך זה נראה בפעולה. לחיצה על הכפתור, תדפיס את ההודעה לקונסולה.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
עודד בתאריך: 04.03.2017
מדריך מעולה כרגיל. מחכה למדריכים הבאים.
יוסי בן הרוש בתאריך: 04.03.2017
תודה רבה, עודד
אנחנו בתאריך: 22.05.2018
מעולה ברור בצורה יוצאת דופן
שני בתאריך: 19.06.2018
מדריך מצויין, ברור ומוסבר היטב! תודה רבה!
בתת בתאריך: 27.06.2018
ממש ברור!! וכיף לעבוד איתו
אנונימי בתאריך: 09.10.2018
רציתי להגיד שאני נהנה מההסבר על אנגולר אני התחלתי ללמוד באיזה מכללה אנגולר וההסבר הזה עושה לי הרבה סדר בראש. רציתי להגיד שנראה לי בכמה מקומות יש שם טעות כגון בפלט של ה title או במה שכתוב על ה button וכן ב path הוספתי כמה תמונות. כתבתי לך מייל. אבל בסך הכל ההסבר מובן ממש נהנה תודה.
יוסי בן הרוש בתאריך: 09.10.2018
תודה, חבר. אתה צודק. עשית שירות טוב לקהילה. בהצלחה עם הקורס.
תמי בתאריך: 05.11.2018
מוצלח ביותר!!!!!!!!!!!!!!!!!!
אייל מונסונגו בתאריך: 26.11.2018
אחלה תודה רבה אין עליך!!!!!!!!
עטרה בתאריך: 04.12.2018
מדריך מצויין מסביר בצורה יסודית וברורה מאוד!
נועה בתאריך: 23.01.2019
תודה!!!
עידן בתאריך: 24.05.2019
מדריך פשוט מושלם!
תודה רבה
אריה בתאריך: 22.06.2019
מדריך מעולה.פשוט וברור.
תודה רבה
ישראל בתאריך: 29.10.2019
אתה תותח
אריא בתאריך: 18.11.2019
מדהים!!!
אור בתאריך: 27.11.2019
אתה אלוווף ברור מאוד
אוריאל בתאריך: 26.12.2019
עוזר מאוד . תודה רבה
אריאלה בתאריך: 19.01.2020
יפה מאוד. תודה.
ניצה בתאריך: 22.01.2020
אחרי שהתקנתי cli כל ה imports מודגשים באדום
מה עושים?
אוריאל בתאריך: 18.03.2020
ממש טוב תודה רבה , הסבר ברור מאוד
גוגו בתאריך: 26.04.2020
תודה על המדריך, באמת מאוד ברור ומוצלח! רק נקודה אחת קטנה, למי שבאמת חדש באנגולאר, ההנחיה הבאה נשמעת כמו טורקית: 'ננווט לתיקייה שבה אנחנו מעוניינים ליצור את הפרויקט' אם תוכל לפרט טיפה יותר על פקודת ng. אני בינתיים עשיתי עוד גוגל והצלחתי לבצע את ההנחיה הנ"ל :) תודה
רייזי איתן בתאריך: 15.07.2020
תודה רבה ברור וקולח
נעש בתאריך: 08.08.2020
האם הטקסט שלום+שם אמור להופיע גם אם cmd כרגע מריץ את הפרויקט שלנו?
שולמית בתאריך: 17.09.2020
יש לי שאלה אני התקנתי לפי ההוראות ב CMD ולאחר מכן אני רוצה
לפתוח את התוכנה
איך אני אמורה לעשות את זה
ועוד דבר מזה IDE?
תודה רבה! אשמח לתשובה