נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

שלום עולם Angular4

מחבר:
בתאריך:

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

הלוגו של Angular4

Angular4 נכתבה מהיסוד, והיא שונה מאוד מ-AngularJS, ומציעה שיפור ניכר בביצועים, ותמיכה טובה יותר בניידים. אחד השינויים המרכזיים הוא שאת הקוד אנחנו כותבים בשפת ה-TypeScript, ולא ב-JavaScript. אתם מוזמנים ללמוד TypeScript מהמדריכים באתר רשתטק.

 

הכנת סביבת העבודה ל Angular4

סביבת העבודה כוללת:

  1. כלי שורת פקודות או טרמינל (אם אתם בסביבת linux או Mac אין בעיה, ועל סביבת חלונות כדאי להתקין את git bash).
  2. IDE או עורך קוד טוב (אני עובד עם Atom, ומי שרוצה IDE מקצועי בתשלום יכול לנסות את Webstorm).
  3. התקנה של הגרסה החדישה ביותר של node.js

את node.js נוריד ונתקין מהכתובת https://nodejs.org/en/download

node.js יורד ביחד עם מתקין החבילות npm, שבו ניעזר כדי להתקין את Angular4, ואת יתר החבילות שבהם תלוי הפרויקט שלנו.

נפתח את כלי שורת הפקודות, ונתקין את ה-ׁ(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, כדי לצפות באפליקציה שלנו בפעולה. והתוצאה לפניכם:

התוצאה על הדפדפן של הקוד שהרצנו בפעם הראשונה באפליקציית Angular2

 

מבנה הקבצים והתיקיות של הפרויקט

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

זה מבנה התיקיות שאתם אמורים לראות באפליקציה:

מבנה התיקיות והקבצים באפליקציית Angular4

הקבצים הכלליים שאותם צריך להכיר יושבים בתיקייה src

  • src/index.html
    הוא קובץ ההטמ"ל המרכזי שמשותף לכל מרכיבי האפליקציה.
  • src/styles.css
    הוא קובץ ה- CSS המשותף לכל מרכיבי האפליקציה.

האפליקציה מתחלקת למרכיבים שמכונים קומפננטות (component) ובשלב זה יש לנו קומפננטה אחת שכל הקבצים שלה נמצאים בתיקייה src/app.

אילו הקבצים שהכי חשוב להכיר בתיקייה src/app

  • src/app/app.component.ts
    הוא קובץ ה- TypeScript שמכיל את המחלקה עם המתודות והשדות שיוצגו בקומפוננטה.
    בקובץ זה גם מוגדרים קבצי ההטמ"ל שאתם תעבוד הקומפננטה.
  • src/app/app.component.html
    בתוכו ימצא ההטמ"ל של האפליקציה
  • src/app/app.component.css
    יכיל את ה-CSS של הקומפננטה הזו, להבדיל מקובץ ה- CSS שמשרת את כל הקומפננטות של האפליקציה.
  • src/app/app.module.ts
    זה קובץ קונפיגורציה שמכיל הגדרות עבור הקומפננטה.

 

נערוך את הקוד

נפתח לעריכה את הקובץ 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 Angular4!';
}

ועכשיו, כשנחזור לדפדפן, נראה את השינוי. כך זה נראה אצלי:

התוצאה על הדפדפן של הקוד שהרצנו בפעם הראשונה באפליקציית Angular2

 

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

במדריך הבא נלמד להוסיף את הקומפננטות ידנית ללא ה-CLI וגם כיצד לקנן (=לשים בתוך) קומפננטה אחת בתוך אחרת

למדריכים נוספים בסדרת האנגולר

הוסף תגובה חדשה

 

= 6 + 7

תמונת המגיב

עודד בתאריך: 04.03.2017

מדריך מעולה כרגיל. מחכה למדריכים הבאים.

תמונת המגיב

יוסי בן הרוש בתאריך: 04.03.2017

תודה רבה, עודד