Created : https://il.linkedin.com/in/nathankrasney Angular Jump Start

1. : ‫בעזרת‬ Angular 2 ‫ב‬ ‫אפליקציה‬ ‫בנית‬
Components
Directives
Services
natankrasney@gmail.com
1

2. Component ‫בנית‬
‫ל‬ ‫"הקדמה‬ ‫בפרק‬ "‫דוגמה‬ ‫אפליקציה‬ ‫"התקנת‬ ‫עבור‬ ‫השתמשנו‬ ‫בה‬ ‫עבודה‬ ‫סביבת‬ ‫אותה‬ ‫עם‬ ‫נתחיל‬
"Angular 2
‫דרך‬ app ‫תחת‬ component ‫ניצור‬
Visual Studio Code ->New File->courses.component.ts
natankrasney@gmail.com
2
components ‫של‬ ‫שם‬

3. courses.component.ts
import {Component} from '@angular/core';
@Component({
selector : 'courses',
template : '<h1>Courses</h1>'
})
export class CoursesComponent{
}
natankrasney@gmail.com
3
Component ‫בשם‬ ‫מודול‬ ‫מייבא‬
@angular/core ‫מספריה‬
view‫ל‬ ‫.יוכנס‬ component ‫ה‬ ‫של‬ view
‫במאפיין‬ ‫הוגדר‬ ‫ששמו‬ tag‫ב‬ ‫בו‬ ‫שמשתמש‬
courses ‫קרי‬ selector
‫את‬ ‫מגדיר‬ - Component decorator
‫כ‬ CourseComponent ‫המחלקה‬
‫מאפיני‬ ‫ומוסיף‬ Component
selector , template ‫כמו‬ metadata
‫מחלקה‬

4. app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';
@NgModule({
imports: [ BrowserModule ],
// we tell angular which components we are using
declarations: [ AppComponent , CoursesComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
natankrasney@gmail.com
4
‫יהיה‬ ‫שאפשר‬ ‫מנת‬ ‫על‬ ‫הוספנו‬
‫עם‬ ‫באפליקציה‬ ‫להשתמש‬
CoursesComponent
‫איזה‬ angular‫ל‬ ‫אומרים‬ ‫כאן‬
‫כשהאפליקציה‬ ‫להפעיל‬ component
‫מופעלת‬

5. app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>hello angular 2</h1>
<courses></courses>
`
})
export class AppComponent {
}
natankrasney@gmail.com
5
- ‫כאן‬ ‫יוצג‬ CoursesComponent ‫ש‬ ‫כך‬ ‫הוספנו‬
‫ה‬ ‫של‬ ‫לערך‬ ‫זהה‬ ‫כאן‬ courses .‫דפדפן‬ ‫ראה‬
courses.component.ts ‫ב‬ selector
root ‫ה‬ ‫הוא‬ AppComponent
‫שלנו‬ ‫האפליקציה‬ ‫של‬ component
index.html ‫בקובץ‬ ‫מופיע‬ my-app
‫מאפשר‬ 1 ‫למקש‬ ‫משמאל‬ ‫תו‬
‫שורות‬ ‫מספר‬

6. ‫בדפדפן‬ ‫תצוגה‬
‫מציג‬ ‫הדפדפן‬ ‫הזה‬ ‫בשלב‬
natankrasney@gmail.com
6
AppCoomponent ‫מ‬ ‫הגיע‬ ‫זה‬
CoursesCoomponent ‫מ‬ ‫הגיע‬ ‫זה‬

7. ‫בדוגמה‬ ‫השתמשנו‬ ‫בהם‬ ‫קבצים‬ ‫טבלת‬
natankrasney@gmail.com
7
‫קובץ‬ Component ‫הערות‬
Index.html ‫רלבנטי‬ ‫לא‬ my-app ‫האלמנט‬ ‫את‬ ‫מכיל‬
app.module.ts ‫רלבנטי‬ ‫לא‬ components ‫ה‬ ‫את‬ ‫מגדיר‬
‫משתמשים‬ ‫אנו‬ ‫בהם‬
‫באפליקציה‬
app.component.ts AppComponent index.html ‫בקובץ‬ ‫מופיע‬
my-app ‫אלמנט‬ ‫תחת‬
courses.component.ts CoursesComponent index.html ‫בקובץ‬ ‫מופיע‬
‫תחת‬ courses ‫כאלמנט‬
my-app ‫אלמנט‬

8. Data Binding ‫דוגמה‬
import {Component} from '@angular/core';
@Component({
selector : 'courses',
template : `<h1>Courses</h1>
<h2>{{name}}</h2>`
})
export class CoursesComponent{
title : string = "List of courses";
}
natankrasney@gmail.com
8
courses.component.ts
.string ‫מסוג‬ ‫המחלקה‬ ‫של‬ property ‫הגדרנו‬
‫יהיה‬ ‫זה‬ ‫ועדיין‬ string ‫את‬ ‫להסיר‬ ‫גם‬ ‫אפשר‬
‫בעצמו‬ ‫זה‬ ‫את‬ ‫יגדיר‬ typescript ‫ז"א‬ inferred
context ‫ה‬ ‫פי‬ ‫על‬
‫במאפיין‬ ‫להשתמש‬ ‫מאפשר‬ {{}} ‫סימון‬
‫נקרא‬ ‫.הסימון‬ view‫ב‬ ‫מהמחלקה‬
data binding‫ל‬ ‫משמש‬ ‫והוא‬ interpolation
view‫ל‬ ‫במחלקה‬ model - data ‫ה‬ ‫בין‬

9. Data Binding ‫בדוגמה‬ ‫בדפדפן‬ ‫תצוגה‬
natankrasney@gmail.com
9
‫בין‬ data binding ‫מ‬ ‫הגיע‬
‫ל‬ title ‫מאפיין‬ - model‫ה‬
view

10. Data Binding ‫הסבר‬
.‫מופיע‬ ‫הוא‬ ‫בו‬ view‫ה‬ ‫על‬ ‫מידית‬ ‫משפיע‬ ‫הוא‬ component ‫ב‬ ‫משתנה‬ name ‫שהמאפיין‬ ‫ברגע‬
view‫ה‬ ‫את‬ ‫משנה‬ name ‫המאפיין‬ ‫עדכון‬ ‫ז"א‬ ‫כיווני‬ ‫חד‬ ‫הוא‬ ‫החץ‬ ‫כי‬ one way binding ‫נקרא‬ ‫זה‬
‫הפוך‬ ‫לא‬ ‫אבל‬
natankrasney@gmail.com
10
{ } < >
Component class Component view

11. ‫קורסים‬ ‫של‬ ‫רשימה‬ ‫הצגת‬
import {Component} from '@angular/core';
@Component({
selector : 'courses',
template : `
<h1>Courses</h1>
<h2>{{name}}</h2>
<div >
<p *ngFor="let course of courses">
{{course}}</p>
</div>
`
})
export class CoursesComponent{
name : string = "List of courses";
courses = ["C#" , "HTML" , "Javascript" , "CSS" , "Jquery" , "ASP.Net" , "ADO.Net"]
}
natankrasney@gmail.com
11
.‫נתונים‬ ‫אוסף‬ ‫על‬ ‫לעבור‬ ‫מאפשר‬ ngFor*
‫הזה‬ ‫במקרה‬ data binding‫ב‬ ‫משתמשים‬
‫באוסף‬ ‫נוכחי‬ ‫נתון‬ ‫בין‬ interpolation
view ‫ל‬ model ‫ב‬ courses - ‫הנתונים‬
‫האיבר‬ ‫את‬ ‫מיצג‬
‫בלולאה‬ ‫הנוכחי‬
‫הנתונים‬ ‫אוסף‬ ‫את‬ ‫מיצג‬
‫לולאה‬ ‫עושים‬ ‫עליו‬
interpolation

12. ‫סרטים‬ ‫של‬ ‫רשימה‬ ‫בדפדפן‬ ‫תצוגה‬
natankrasney@gmail.com
12
‫בין‬ data binding ‫מ‬ ‫הגיע‬
courses ‫מאפיין‬ - model‫ה‬
view ‫ל‬

13. Services
‫בפועל‬ ."hard code"‫כ‬ component ‫ב‬ courses ‫בשדה‬ ‫הקורסים‬ ‫הופיעו‬ ‫הקודמת‬ ‫בדוגמה‬
.‫שלנו‬ ‫מהשרת‬ ‫לדוגמא‬ ‫שלנו‬ component‫ל‬ ‫מחוץ‬ ‫להתקבל‬ ‫צריך‬ ‫המידע‬
Service ‫באמצעות‬ ‫נקבל‬ ‫מבחוץ‬ ‫צריך‬ component‫שה‬ ‫המידע‬ ‫את‬
.‫יציג‬ view ‫ה‬ ‫אותם‬ ‫הקורסים‬ ‫רשימת‬ ‫את‬ ‫לנו‬ ‫שיביא‬ Service ‫עכשיו‬ ‫ניצור‬
courses.component.ts ‫של‬ ‫בספריה‬ courses.service.ts ‫קובץ‬ ‫ניצור‬
natankrasney@gmail.com
13
‫מציין‬
component service ‫מציין‬

14. courses.service.ts ‫בקובץ‬ service ‫ל‬ ‫דוגמא‬
export class CoursesService{
GetCourses() : string []
{
// --- later we will take this from e.g. server
return ["C#" , "HTML" , "Javascript" , "CSS" , "Jquery" ,
"ASP.Net" , "ADO.Net"];
}
}
natankrasney@gmail.com
14
‫אפשר‬ . string [] ‫מחזיר‬ method
‫שמוחזר‬ ‫הערך‬ ‫על‬ ‫ההכרזה‬ ‫את‬ ‫להוריד‬
‫בעצמו‬ ‫זאת‬ ‫יסיק‬ typescript ‫ו‬

15. courses.component.ts ‫בקובץ‬ Dependency Injection ‫ב‬ ‫שימוש‬
import {Component} from '@angular/core';
import{CoursesService} from './courses.service'
@Component({
selector : 'courses',
template : `<h1>Courses</h1>
<h2>{{name}}</h2>
<div >
<p *ngFor="let course of courses"> {{course}}</p>
</div>`,
providers: [CoursesService]
})
export class CoursesComponent{
constructor(service : CoursesService ){
this.courses = service.GetCourses();
}
name : string = "List of courses";
courses : string [];
}natankrasney@gmail.com
15
‫כך‬ courses.component.ts ‫את‬ ‫נשנה‬
‫רשימת‬ ‫של‬ ‫המידע‬ ‫את‬ consume - ‫שיצרוך‬
‫הבנאי‬ ‫דרך‬ ‫שמועבר‬ service ‫ה‬ ‫דרך‬ ‫הקורסים‬

16. Modules
.app.module.ts - ‫קודם‬ ‫בו‬ ‫נתקלנו‬ ‫בו‬ ‫בקובץ‬ ‫מוגדר‬ ‫אשר‬ ‫אחד‬ ‫מודול‬ ‫לפחות‬ ‫יש‬ ‫אפליקציה‬ ‫לכל‬
‫אשר‬ ‫שונה‬ ‫פונקציונאליות‬ ‫בעלי‬ ‫חלקים‬ ‫למספר‬ ‫אותה‬ ‫לפרק‬ ‫מומלץ‬ ‫גדלה‬ ‫האפליקציה‬ ‫כאשר‬
.Modules - ‫שונות‬ ‫מחלקות‬ ‫מכילים‬
natankrasney@gmail.com
16
AppModule
Module A Module B Module C
Application

17. AppModule - ‫למודול‬ ‫דוגמא‬
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent , CoursesComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
natankrasney@gmail.com
17
‫את‬ ‫מגדיר‬ - module decorator
module‫כ‬ AppModule ‫המחלקה‬
imports ‫כמו‬ metadata ‫מאפיני‬ ‫ומוסיף‬
, declarations , bootstrap
‫לו‬ ‫מבחוץ‬ ‫מקבל‬ ‫המודול‬ ‫מה‬
‫משתמש‬ ‫המודול‬ ‫במה‬
‫ראשון‬ ‫להפעיל‬ ‫מה‬
exports , providers : ‫מודול‬ ‫של‬ ‫נוספים‬ ‫מאפינים‬

18. ‫תרגיל‬
: ‫בקורסים‬ ‫המדריכים‬ ‫את‬ ‫גם‬ ‫בדף‬ ‫מציג‬ ‫אשר‬ InstructorsComponent ‫להוסיף‬
●‫מתאימים‬ ‫מאפינים‬ ‫עם‬ InstructorsComponent ‫ליצור‬
●{{}} ‫בשימוש‬ InstructorsComponent ‫של‬ template ‫בעזרת‬ view ‫ליצור‬
●‫קורסים‬ ‫של‬ ‫מדריכים‬ ‫רשימת‬ ‫שמביא‬ InstructorsService ‫להוסיף‬
●dependency injection‫ב‬ ‫להשתמש‬
natankrasney@gmail.com
18