Created : https://il.linkedin.com/in/nathankrasney Angular 2 introduction

1. Angular 2 ‫ל‬ ‫הקדמה‬
natankrasney@gmail.com
1

2. ? Angular 2 ‫זה‬ ‫מה‬
: ‫בעזרת‬ client application ‫לבנית‬ framework ‫היא‬ Angular
●HTML
●CSS
●JavaScript TypeScript
typescript ‫בעזרת‬ ‫נכתבה‬ angular : ‫הערה‬
2016 ‫בספטמבר‬ ‫רשמית‬ ‫שוחררה‬ ‫אשר‬ ‫גירסה‬ ‫היא‬ Angular 2
natankrasney@gmail.com
2

3. ? Angular ‫צריך‬ ‫למה‬
‫גדל‬ ‫בקליינט‬ ‫הקוד‬ ‫שורות‬ ‫מספר‬ ‫כאשר‬ ‫קליינט‬ ‫אפליקציית‬ ‫לתחזק‬ ‫קשה‬
‫שרת‬ ‫צד‬ ‫בלי‬ ‫קליינט‬ ‫אפליקציית‬ ‫לבדוק‬ ‫קשה‬
‫,בדיקה‬ ‫לפיתוח‬ ‫יותר‬ ‫קל‬ ‫קליינט‬ ‫צד‬ ‫תכנות‬ ‫את‬ ‫לעשות‬ ‫מנת‬ ‫על‬ ‫נוצרה‬ React ‫כמו‬ Angular
‫ותחזוקה‬
: jquery ‫או‬ javascript‫ב‬ ‫ישירות‬ ‫פיתוח‬ ‫על‬ Angular ‫יתרונות‬
●‫ברור‬ ‫במבנה‬ ‫נכתבת‬ (‫)קליינט‬ ‫האפליקציה‬
●( UI ‫ל‬ ‫)גם‬ ‫בקלות‬ code reuse ‫לעשות‬ ‫אפשר‬
●‫לפני‬ ‫אוטמטית‬ ‫שיופעלו‬ unit test ‫בעזרת‬ ‫בקלות‬ (‫)קליינט‬ ‫האפליקציה‬ ‫את‬ ‫לבדוק‬ ‫ניתן‬
‫גירסה‬ ‫שחרור‬natankrasney@gmail.com
3

4. ‫לקוח‬ ‫בצד‬ Angular ‫עם‬ ‫לקוח‬ ‫שרת‬ ‫ארכיטקטורה‬
natankrasney@gmail.com
4
ASP.Net‫ב‬ ‫לדוגמא‬ ‫שנכתב‬ ‫שרת‬
‫מידע‬ ‫ושומר‬ API ‫שחושף‬ MVC
MS ‫לדוגמא‬ ‫כמו‬ database‫ב‬
SQL Server
‫את‬ ‫מציג‬ ‫לדוגמא‬ ‫שרץ‬ ‫קליינט‬
‫ומתקשר‬ ‫האפליקציה‬ ‫של‬ ‫המסכים‬
HTML , ‫ב‬ ‫ממומש‬ .‫השרת‬ ‫עם‬
Angular ‫ו‬ CSS, TypeScript
Http https

5. ‫עבודה‬ ‫סביבת‬ ‫מרכיבי‬
: ‫הבאים‬ ‫המרכיבים‬ ‫את‬ ‫כוללת‬ ‫הסביבה‬
●npm
○open source repositories ‫מול‬ ‫שעובד‬ node package manager ‫של‬ ‫תיבות‬ ‫ראשי‬
○‫האלה‬ ‫במאגרים‬ ‫שנמצא‬ ‫פתוח‬ ‫בקוד‬ ‫משתמשת‬ Angular
○‫הזה‬ ‫הקוד‬ ‫עם‬ ‫לעבוד‬ ‫יוכל‬ ‫שלנו‬ ‫שהפרויקט‬ ‫כך‬ ‫למאגרים‬ download ‫לעשות‬ ‫מאפשר‬ npm
●Git
○angular ‫של‬ ‫קוד‬ ‫דוגמאות‬ ‫נמצאות‬ ‫שם‬ Github‫ל‬ ‫להתחבר‬ ‫שמאפשרת‬ ‫תוכנה‬
○angular ‫עם‬ ‫אפליקציה‬ ‫ליצירת‬ ‫הכרחי‬ ‫לא‬
●IDE
○‫בפרויקט‬ ‫הקבצים‬ ‫לעריכת‬ ‫כלי‬
○‫נעבוד‬ ‫איתו‬ Visual Studio Code ‫או‬ WebStorm ‫לדוגמא‬
natankrasney@gmail.com
5

6. ‫עבודה‬ ‫סביבת‬ ‫התקנת‬
.‫העבודה‬ ‫בסביבת‬ ‫המרכיבים‬ ‫כל‬ ‫של‬ ‫ההתקנה‬ ‫את‬ ‫טובה‬ ‫בצורה‬ ‫מתאר‬ ‫הבא‬ ‫הקישור‬
: ‫התקנות‬ ‫לגבי‬ ‫ללינק‬ ‫ביחס‬ ‫הערות‬
●npm
○‫על‬ ‫ללחוץ‬ ‫ואז‬ ‫ללחוץ‬ "install npm" ‫אל‬ ‫לנווט‬ ‫יש‬ "Get Started with npm" ‫במקום‬
"Download Node.js and npm"
‫הכלים‬ ‫אם‬ ‫אלא‬ ‫איתו‬ ‫נעבוד‬ ‫לא‬ .‫לדפדפן‬ ‫מחוץ‬ javascript ‫ב‬ ‫קוד‬ ‫להריץ‬ ‫מאפשר‬ Node.js : ‫הערה‬
angular ‫פרויקט‬ ‫לבנות‬ ‫שמאפשרים‬ ‫שלו‬
natankrasney@gmail.com
6

7. ‫דוגמה‬ ‫אפליקציה‬ ‫התקנת‬
‫המחשב‬ ‫על‬ https://github.com/angular/quickstart ‫מ‬ ‫דוגמה‬ ‫אפליקציית‬ ‫להתקין‬ ‫מומלץ‬
(‫בלבד‬ ‫באנגלית‬ ‫יהיו‬ ‫ושמה‬ ‫לספריה‬ path‫שה‬ ‫)רצוי‬ ‫כבחירתכם‬ ‫מסוימת‬ ‫בספריה‬
: ‫שנפתח‬ console‫ב‬ ‫ולבצע‬ cmd ‫בעזרת‬ ‫ספריה‬ ‫לאותה‬ ‫להכנס‬ ‫יש‬ ‫ההתקנה‬ ‫לאחר‬
npm install
‫הקלד‬ ‫ספריה‬ ‫באותה‬ .‫ותסיים‬ ‫הודעות‬ ‫תציג‬ , ‫תתקין‬ ‫דקות‬ ‫מספר‬ ‫תתבצע‬ ‫הפקודה‬
npm start
Hello Angular ‫יציג‬ ‫והדפדפן‬
natankrasney@gmail.com
7

8. ‫חדש‬ ‫פרויקט‬ ‫פתיחת‬
(npm start ‫עשינו‬ ‫ממנה‬ ‫ספריה‬ ‫)אותה‬ quickstart-master - ‫מהרשת‬ ‫שהתקנו‬ ‫לספריה‬ ‫להיכנס‬
: CMD‫ה‬ ‫מתוך‬ ‫ולבצע‬
npm install -g @angular/cli
ng new myproject
cd myproject
ng serve
‫הכתובת‬ ‫כשבשורת‬ ‫דפדפן‬ ‫לפתוח‬ ‫ואז‬ 4200 ‫לדוגמא‬ - ‫פתח‬ ‫פורט‬ ‫איזה‬ CMD ‫ב‬ ‫לבדוק‬
http:/localhost/4200
natankrasney@gmail.com
8
‫שבחרנו‬ ‫הפרויקט‬ ‫שם‬

9. Visual Studio Code‫ב‬ ‫שימוש‬
: ‫באמצעות‬ ‫קבצים‬ ‫ולערוך‬ ‫הפרויקט‬ ‫מבנה‬ ‫את‬ ‫לראות‬ ‫נוח‬
File->Open Folder
github‫מ‬ ‫הדוגמה‬ ‫את‬ ‫התקנו‬ ‫בה‬ ‫בספרייה‬ src ‫ספריה‬ ‫ובחירת‬
'hello angular world' ‫ל‬ 'Angular' ‫את‬ ‫שנו‬ ‫ושם‬ src->app->app.components.js ‫ל‬ ‫נווטו‬
‫בדפדפן‬ ‫מעודכן‬ ‫יופיע‬ ‫אשר‬ ‫הקובץ‬ ‫את‬ ‫שימרו‬
natankrasney@gmail.com
9

10. Debugging in Visual Studio Code ‫לטובת‬ ‫התקנה‬
: ‫פעמית‬ ‫חד‬ ‫התקנה‬
●Visual Studio ‫בתוך‬ "Ctrl+Shift+P" ‫הקלדת‬ ‫באמצעות‬ "Debugger for Chrome" ‫התקן‬
‫הרשימה‬ ‫כאשר‬ ."Extensions: Install Extension" ‫את‬ ‫והרץ‬ "ext install" ‫לחץ‬ ‫ואז‬ Code
Visual Studio ‫את‬ ‫סגור‬ ."Debugger for Chrome" ‫את‬ ‫והתקן‬ chrome ‫הקש‬ ‫מופיעה‬
‫מחדש‬ ‫ופתח‬ ‫ההתקנה‬ ‫לאחר‬ Code
●‫במה‬ launch.config - ‫שנפתח‬ ‫בקובץ‬ ‫הרשום‬ ‫את‬ ‫והחלף‬ "Open Configurations" ‫ואז‬
‫להלן‬ ‫שמופיע‬
{ "name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:3000/Welcome",
"sourceMaps": true, "webRoot": "${workspaceRoot}" }
natankrasney@gmail.com
10

11. Debugging in Visual Studio Code
: chrome ‫בדפדפן‬ ‫וההצגה‬ ‫ההרצה‬ ‫ולאחר‬ ‫ההתקנה‬ ‫לאחר‬
●‫כפתור‬ ‫של‬ click ‫של‬ handler ‫בתוך‬ ‫לדוגמה‬ typescript ‫קבצי‬ ‫בתוך‬ breakpoint ‫שים‬
●refresh ‫בצע‬ ‫ואז‬ "Start Debugging" ‫,בחר‬ Debug ‫בחר‬ Visual Studio Code ‫דרך‬
‫בדפדפן‬ ‫הכתובת‬ ‫לשורת‬
●‫בנקודה‬ ‫מחכה‬ ‫והתכנית‬ ‫מופיע‬ breakpoint‫ה‬ ‫את‬ ‫וראה‬ ‫ראשון‬ ‫שלב‬ ‫של‬ ‫הכפתור‬ ‫על‬ ‫לחץ‬
‫זאת‬
natankrasney@gmail.com
11

12. Debugging in Chrome
debug ‫עושים‬ ‫שבא‬ ‫צורה‬ ‫באותה‬ Chrome ‫ב‬ typescript ‫קובצי‬ ‫של‬ Debugging ‫לעשות‬ ‫ניתן‬
‫בעזרת‬ ‫וזאת‬ javascript ‫לקובצי‬
F12->Sources
natankrasney@gmail.com
12

13. Angular 2 ‫ארכיטקטורה‬
angular 2 ‫אפליקצית‬ ‫של‬ ‫המרכיבים‬ ‫להלן‬
natankrasney@gmail.com
13

14. Components
‫אחד‬ Component ‫לפחות‬ ‫יש‬ Angular2 ‫אפליקצית‬ ‫לכל‬
‫תצוגה‬ ‫וגם‬ ‫לוגיקה‬ ‫מכיל‬ Component
‫כאן‬ ‫ראה‬ ‫לדוגמא‬
natankrasney@gmail.com
14
‫בתור‬ ‫מוצג‬ ‫קורס‬ ‫כל‬ ‫לארגן‬ ‫נוח‬
‫וגם‬ ‫תצוגה‬ ‫כולל‬ ‫וזה‬ Component
‫על‬ ‫בלחיצה‬ ‫לטיפול‬ ‫לוגיקה‬
‫את‬ ‫לשים‬ ‫גם‬ ‫אפשר‬ .‫התמונה‬
Components ‫בתור‬ ‫התפריט‬
‫להכניס‬ ‫אפשר‬
‫של‬ Component
‫קורס‬ ‫דירוג‬
‫של‬ Component‫ל‬
‫קורס‬

15. Components ‫ב‬ ‫שימוש‬ ‫יתרונות‬
●Components - ‫מרכיבים‬ ‫לכמה‬ ‫אותה‬ ‫ולפרק‬ ‫ומורכבת‬ ‫גדולה‬ ‫אפליקציה‬ ‫לבנות‬ ‫אפשר‬
‫קטנים‬
●‫דירוג‬ ‫של‬ Component ‫ב‬ ‫מקומות‬ ‫במספר‬ ‫להשתמש‬ ‫לדוגמא‬ code reuse ‫לעשות‬ ‫אפשר‬
‫אחרת‬ ‫באפליקציה‬ ‫אפילו‬ ‫או‬ ‫קורס‬
natankrasney@gmail.com
15

16. Component ‫מרכיבי‬
template , class , metadata : ‫מרכיבים‬ 3 ‫בעזרת‬ ‫מממשים‬ Component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent {
name = 'Angular'; }
natankrasney@gmail.com
16
data ‫ה‬ ‫את‬ ‫מיצג‬ : class
‫והפעולות‬ - model
‫שעושים‬
- view ‫את‬ ‫מיצג‬ : template
‫ויוצר‬ ‫רואה‬ ‫שהמשתמש‬ ‫מה‬ ‫זה‬
‫אנטראקציה‬ ‫איתו‬
‫מעבר‬ ‫שצריך‬ ‫מה‬ ‫את‬ ‫מייצג‬ : metadata
component‫שה‬ ‫מנת‬ ‫על‬ class ‫ו‬ template‫ל‬
‫בתוך‬ ‫שרשום‬ ‫מה‬ ‫לדוגמא‬ .‫תקינה‬ ‫בצורה‬ ‫יעבוד‬
@Component

17. Component class - ‫מחלקה‬ ‫מימוש‬
: ‫ומכיל‬ typescript ‫בשפת‬ ‫הוא‬ ‫המימוש‬
●properties - ‫מאפינים‬
●methods - ‫פונקציות‬
app.component.ts ‫בקובץ‬ ‫מופיע‬ ‫פונקציה‬ ‫וללא‬ ‫אחד‬ ‫מאפיין‬ ‫עם‬ Component ‫ל‬ ‫דוגמה‬
export class AppComponent {
name = 'Angular';
}
natankrasney@gmail.com
17

18. Component - Data Binding
view ‫ל‬ data‫ה‬ ‫בין‬ ‫צימוד‬ ‫יוצר‬ Data Binding
: app.component.ts ‫ב‬ ‫שמופיע‬ ‫לקוד‬ ‫לב‬ ‫שימו‬
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent {
name = 'Angular'; }
natankrasney@gmail.com
18
●view‫ה‬ ‫מן‬ ‫כחלק‬ ‫מופיע‬ AppComponent ‫של‬ name ‫המאפיין‬
‫שברגע‬ ‫כך‬ view‫ה‬ ‫ל‬ data ‫בין‬ binding - ‫צימוד‬ ‫יצרנו‬ .h1 ‫באלמנט‬
view‫ה‬ ‫בהתאם‬ ‫ישתנה‬ ‫אז‬ ‫ישתנה‬ name‫ש‬
●id ‫לדוגמא‬ ‫דרך‬ DOM‫ה‬ ‫אל‬ name‫מ‬ ‫צימוד‬ ‫יצרנו‬ ‫שלא‬ ‫להבין‬ ‫חשוב‬
. ‫גדול‬ ‫יתרון‬ ‫וזה‬

19. Component - Event Binding
.view ‫ב‬ event ‫לבין‬ Component ‫ב‬ method ‫בין‬ ‫צימוד‬ ‫יוצר‬ Event binding
Component‫ה‬ ‫של‬ method ‫תפעיל‬ ‫כפתור‬ ‫על‬ ‫לחיצה‬ ‫לדוגמה‬
natankrasney@gmail.com
19

20. Services
.component ‫ל‬ ‫מסוימת‬ ‫פונקציונאליות‬ ‫להכניס‬ ‫רוצים‬ ‫כאשר‬ Service ‫ב‬ ‫משתמשים‬
‫ממנו‬ ‫שרת‬ ‫לדוגמא‬ ‫אליו‬ ‫שמחוץ‬ ‫למה‬ component ‫ה‬ ‫בין‬ ‫הפרדה‬ ‫מאפשר‬ service‫ב‬ ‫שימוש‬
.‫מידע‬ ‫מקבל‬ Component‫ה‬
component‫ל‬ unit test ‫לבצע‬ ‫מאפשר‬ service ‫באמצעות‬ ‫ההפרדה‬
natankrasney@gmail.com
20

21. Directive
DOM ‫של‬ ‫לאלמנטים‬ ‫התנהגות‬ ‫להוסיף‬ ‫לנו‬ ‫מאפשר‬ Directive
(‫הבא‬ ‫בשקף‬ ‫)מופיע‬ ngFor ‫לדוגמא‬ Angular ‫של‬ directive ‫יש‬
custom directive - ‫חדשים‬ directive ‫ליצור‬ ‫ניתן‬
natankrasney@gmail.com
21

22. Directive‫ל‬ ‫דוגמא‬
export class AppComponent {
title = 'Fruits';
fruits = ['Orange', 'Apple', 'Banana',
'Melon'];
Myfruit = this.fruits[0];
}
natankrasney@gmail.com
22
template: `
<h1>{{title}}</h1>
<h2>My favorite fruit is:
{{myfruit}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let f of fruits">
{{ f }}
</li>
</ul>
`
app.component.ts ‫מקובץ‬ ‫חלקים‬

23. Router
URL ‫ל‬ ‫בהתאם‬ ‫המתאים‬ ‫המסך‬ ‫את‬ ‫מציג‬
natankrasney@gmail.com
23

24. ? Typescript ‫למה‬
: Javascript ‫חסרונות‬
●‫ב‬ ‫קודות‬ ‫שורות‬ ‫יותר‬ ‫שנכתבות‬ ‫ככל‬ ‫ומסורבל‬ ‫קשה‬ ‫להיות‬ ‫הופך‬ javascript‫ב‬ ‫השימוש‬
.Javascript
●Javascript ‫ב‬ ‫עצמים‬ ‫מונחה‬ ‫בתכנות‬ ‫להשתמש‬ ‫אפשר‬ ‫אי‬
●‫לעשות‬ ‫לדוגמא‬ ‫וניתן‬ var ‫מסוג‬ ‫משתנה‬ ‫רק‬ ‫יש‬ Javascript ‫ב‬ strong types ‫ב‬ ‫שימוש‬ ‫אין‬
‫למחרוזות‬ ‫מספר‬ ‫של‬ ‫השמה‬
●‫אלא‬ (Javascript ‫ב‬ ‫קומפילציה‬ ‫אין‬ ‫)כי‬ Javascript ‫ב‬ ‫קומפילציה‬ ‫בזמן‬ ‫מתגלות‬ ‫לא‬ ‫שגיאות‬
‫ריצה‬ ‫בזמן‬
Typescript ‫ידי‬ ‫על‬ ‫מטופלים‬ Javascript ‫של‬ ‫הנ"ל‬ ‫החסרונות‬
natankrasney@gmail.com
24

25. ? Typescript ‫זה‬ ‫מה‬
javascript ‫של‬ superset ‫היא‬ Typescript
(‫קומפילציה‬ ‫בזמן‬ ‫ידועים‬ ‫המשתנים‬ ‫סוגי‬ ‫)כל‬ strongly typed , ‫עצמים‬ ‫מונחת‬ ‫תכנות‬ ‫שפת‬ ‫היא‬Typescript
Javascript ‫ל‬ Typescript‫ב‬ ‫קוד‬ ‫שמתרגמת‬ ‫קומפילציה‬ ‫ועוברת‬
open source - ‫חינמית‬ ‫תכנות‬ ‫שפת‬
C# ‫של‬ ‫הארכיטקט‬ - Andres Hejlsbers ‫של‬ ‫בהובלה‬ microsoft ‫ידי‬ ‫על‬ ‫ומתוחזקת‬ ‫פותחה‬
(‫קובץ‬ ‫)סיומת‬ .ts ‫ב‬ ‫שמסתיים‬ ‫שם‬ ‫בעל‬ ‫הוא‬ Typescript ‫קובץ‬
‫כאן‬ ‫מופיע‬ ‫השפה‬ ‫ללימוד‬ ‫טוב‬ ‫מקור‬
natankrasney@gmail.com
25
Javascript
Typescript

26. Angular 2 ‫ו‬ Typescript ‫בין‬ ‫הקשר‬
Typescript ‫ב‬ ‫נכתבה‬ Angular 2
Typescript ‫ב‬ ‫נכתב‬ Angular 2 ‫אפליקציות‬ ‫של‬ ‫הפיתוח‬ ‫קוד‬
angular‫ב‬ ‫שנכתוב‬ ‫הקוד‬ ‫יתר‬ ‫גם‬ ‫וכך‬ typescript‫ב‬ ‫נכתב‬ app.component.ts ‫הקובץ‬ ‫לדוגמא‬
natankrasney@gmail.com
26

27. C# ‫ו‬ Typescript ‫בין‬ ‫הקשר‬
C# ‫ל‬ Typescript ‫בין‬ ‫קטן‬ ‫לא‬ ‫דמיון‬ ‫יש‬
‫רק‬ ‫אלא‬ ‫עצמו‬ ‫בפני‬ Typescript ‫נלמד‬ ‫לא‬ ‫ולכן‬ ‫עצמים‬ ‫מונחה‬ ‫ותכנות‬ C#‫ב‬ ‫ידע‬ ‫מניח‬ ‫זה‬ ‫קורס‬
C# ‫ל‬ ‫ביחס‬ ‫בשינוי‬ ‫נתקל‬ ‫כאשר‬
natankrasney@gmail.com
27

28. Typescript ‫עם‬ ‫קומפילציה‬
‫על‬ ‫קומפילציה‬ ‫בוצעה‬ ‫זה‬ ‫במקרה‬ .npm start ‫ובצענו‬ ‫לדוגמא‬ ‫אפליקציה‬ ‫התקנו‬ ‫המצגת‬ ‫בתחילת‬
‫קרי‬ js ‫סיומת‬ ‫עם‬ ‫אבל‬ ‫שם‬ ‫באותו‬ ‫קובץ‬ ‫והתקבל‬ app.components.ts ‫בשם‬ typescript ‫קובץ‬
app.components.js
‫ויתבטא‬ ‫אוטומטית‬ ‫יתקמפל‬ app.components.ts ‫בקובץ‬ ‫ונשמר‬ ‫שנעשה‬ ‫שינוי‬ ‫כל‬ ‫והלאה‬ ‫מעתה‬
‫הכתובת‬ ‫שורת‬ ‫עם‬ ‫הדפדפן‬ ‫בחלון‬ ‫מידית‬
http://localhost:3000/
: ‫קרי‬ ‫הסטנדרטית‬ ‫בצורה‬ chrome ‫בדפדפן‬ ‫יוצגו‬ ‫שגיאות‬
F12->Console
‫שונות‬ ‫הודעות‬ ‫מציג‬ npm start ‫עשינו‬ ‫בו‬ "lite server" ‫שכותרתו‬ CMD ‫ה‬ ‫שחלון‬ ‫לב‬ ‫שימו‬
natankrasney@gmail.com
28