שלום עולם Angular

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

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

הלוגו של Angular

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

 

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

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

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

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

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

נפתח את כלי שורת הפקודות (הטרמינל), ונתקין את ה -ׁ CLI עם הפקודה:

$ npm install -g @angular/cli
  • ממשק הפקודות - CLI - מאפשר לנו לכתוב פקודות לבניית והרצת אפליקציה אנגולרית בתוך הטרמינל.
  • משך ביצוע הפקודה תלוי במחשב שלכם ועשוי לארוך מספר דקות.
  • על לינוקס או מק צריך להקדים לפקודה sudo.
  •  

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

    $ ng new hello-world

    הרצת הפקודה תגרום להופעת מספר שאלות שעליהם אנחנו צריכים לענות:

    ? Do you want to enforce stricter type checking and stricter bundle budgets in t
    he workspace?
      This setting helps improve maintainability and catch bugs ahead of time.
      For more information, see https://angular.io/strict No
    ? Would you like to add Angular routing? No
    ? Which stylesheet format would you like to use? (Use arrow keys)
    ❯ CSS 
      SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
      Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
      Less   [ //lesscss.org                                             ] 
      Stylus [ https://stylus-lang.com                                        ]
    • האם להפעיל בדיקה מחמירה? לא
    • האם להתקין ניווט? לא
    • באיזה פורמט stylesheet להשתמש? נשאר עם ברירת המחדל - CSS.

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

    אחרי שה-CLI יסיים את התקנת האפליקציה נכנס לתיקיית הפרויקט מהטרמינל באמצעות הפקודה cd:

    $ cd hello-world

    נריץ את השרת:

    $ ng serve

    הפקודה serve מריצה את השרת וגם מקמפלת את קבצי ה-TypeScript ל-JavaScript. דבר מאוד חשוב מפני שדפדפנים יודעים להריץ JavaScript בלבד.

    אחרי שהתהליך יסתיים, ננווט משורת הכתובות בדפדפן, ל-localhost:4200, כדי לצפות באפליקציה בפעולה:

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

     

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

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

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

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

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

    • src/index.html
      הוא קובץ ה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 = 'hello-world';
    }

    מה שלנו חשוב בשלב זה של הלימוד זה שבשורה השנייה הדקורטור Component (ואם אתם לא יודעים מזה דקורטור אתם יכולים לקרוא לו רק "Component" הוא לא ייעלב) מגדיר את קבצי ה-html וה-css של הקומפננטה.

    בהמשך הקובץ יש לנו מחלקה ששמה AppComponent שמכילה את הקוד שמוצג בHTML. ובשלב זה היא מכילה שדה אחד, השדה title.

    אבל איפה קובץ הHTML שבתוכו מוצג השדה title?

    נפתח את קובץ הHTML שמוגדר ב-Component@, ונשנה את תוכן הקובץ כדי שירנדר (= יציג בדף) את ערכו של השדה title:

    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 Angular!';
    }

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

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

     

    שימו לב, שהשינוי הוא מיידי, בלי צורך לקמפל את קוד ה-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 {
      name = 'Israel Israeli';
    
      sayHello() {
        console.log('Hello, '+ this.name)
      }
    }
    • המשתנה name מוגדר בקומפוננטה וקריאה לפונקציה 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>

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

    • בדפדפן כרום צירוף המקשים Ctrl + Shift + I פותח את הקונסולה של הדפדפן.

    קוד הקומפננטה האנגולרית הפשוטה שפתחנו במדריך בפעולה

     

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

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

    המדריך נכתב במקור ב-21.11.2017, עודכן ב-07.05.2021 ונבדק על גרסת אנגולר 10. השינויים קטנים מאוד מה שמעיד על היציבות והבגרות של אנגולר.

    קיימת גרסה אנגלית למדריך How to install Angular.

     

    אהבתם? לא אהבתם? דרגו!

    0 הצבעות, ממוצע 0 מתוך 5 כוכבים

     

 

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

 

= 4 + 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?
תודה רבה! אשמח לתשובה

תמונת המגיב

אא בתאריך: 21.03.2021

נהניתי מאוד, זה ממש ברור.
אבל מאיזושהי סיבה שאני לא יודעת- זה לא רץ לי!

תמונת המגיב

ענת בתאריך: 24.03.2021

שלום יוסי אני מתחילה להבין.. תודה :) יש לי שאלה של מתחילות איך אני עובדת עם פרוייקט שהורדתי מGITHUB? מבחינת הCLI וה VScode

תמונת המגיב

יודית בתאריך: 09.06.2021

תודה רבה! ממש מעולה!

תמונת המגיב

חני בתאריך: 18.08.2021

תודה,ברור ולעניין !