RSS

קטגוריה: Uncategorized

קורס אנגולר 5 נפתח בינואר

בעקבות הביקוש הרב, החלטתי לפתוח מחזור נוסף בינואר בתאריכים: 15,18,22,25.

10253744_919598694751979_3894935568327275083_n

קורס זה מבוסס על הנסיון העשיר שלי בעשרות פרוייקטים ב- Angular שהיתי מעורב בהם. בקורס אני מלמד איך משתמשים באנגולר וגם איך הוא עובד מ"תחת למנוע". ידע זה יאפשר לכם להבין איך אפשר לשפר ולהרחיב את אנגולר לצרכים שלכם.
הקורס הבא נפתח ב-15 לינואר,
לחץ כאן לפרטים.

מודעות פרסומת
 
השארת תגובה

פורסם ע"י ב- דצמבר 3, 2017 ב- Uncategorized

 

קורס אנגולר בספטמבר

ב- 17 לספטמבר אני פותח קורס אנגולר למפתחי JavaScript בהרצליה, רחוב הנדיב 71. לפרטים לחצו כאן.

 

 
השארת תגובה

פורסם ע"י ב- ספטמבר 4, 2017 ב- Uncategorized

 

Meetup on Angular 2.0 Architecture

meetup

This Thursday (2/3/2017) I will lecture on Angular 2.0 Architecture.
Location: שמעון פרס 12 רחובות, 7670308 Rehovot, Israel
Time:  6PM-8:30PM.

The session will focus on the main parts of Angular 2.0:
 Angular Modules
 Angular Compiler
 Hierarchical Injector
 Component Lifecycle Hooks
 Change Detector
 Renderer
 Angular 2.0 & jQuery
 Dynamic component creation
 Tips & Tricks

Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular. The session is mostly targeted for developers which already have some experience with Angular 2.0.

 
3 תגובות

פורסם ע"י ב- פברואר 27, 2017 ב- Uncategorized

 

Angular 2 Course by Eyal Vardi

ב-26 למרץ נפתח מחזור נוסף של קורס אנגולר 2 בהרצליה. הקורס יהיה 4 ימים בתאריכים: 26,29, למרץ ו-2,5 לאפריל.
ראו סיליבוס. לפרטים נוספים מלאו את הטופס.

מספר המקומות מוגבל.

 
השארת תגובה

פורסם ע"י ב- ינואר 7, 2017 ב- Uncategorized

 

Angular2 in memory web api

Angular2 in memory web api

 

באנגולר 2 אפשר להשתמש בספריה ‘angular2-in-memory-web-api’ כדי לבטל את התקשורת הפיזית לשרת ולעבוד מול מידע שנמצא בזיכרון, טוב לבדיקות.

שלב ראשון מחלקה שתחזיק את המידע בזיכרון. ראו קוד:

export class InMemoryDataService {
createDb() {
return { users:[
// users resource
{…},
// user object
{…},
// user object
…   
// users objects
]};
}
}

 

הדגשים:

1.     אנגולר יקרה למתודה createdDb בפעם הראשונה שתנסו לפעיל את המחלקה Http.

2.     ה- users מחליפים את ה- resource ב- web-API שעליו ניתן לעשות פעולות CRUD ע"פ החוקים של REST. למשל ‘app/users/12’ תביא את המשתמש עם id שווה ל- 12.

 

שלב שני בניית מערך לשימוש ה- Injector הראשי.

 

export const HTTP_IN_MEMORY = [
    HTTP_PROVIDERS,
    { provide: XHRBackend, useClass: InMemoryBackendService },
    { provide: SEED_DATA , useClass: InMemoryDataService },
    { provide: InMemoryBackendConfig, useValue: { delay: 600 } }
];
 
דגשים:

1.     השרות XHRBackend הוא זה שמבצע בפועל את התקשורת לשרת, לכן 
צריך להחליף אותו עם השרות InMemoryBackendService שבמקום לבצע
תקשורת יקרא ל- SEED_DATA, שזה בעצם המחלקה שאנחנו כתבנו, 
שיוצרת את מבנה הנתונים בזיכרון.

2.     השרות InMemoryBackendConfig מאפשר לנו לתת הגדרות של התנהגות,
כמו למשל המתנה של 600 MS בין הקריאה לחזרת התשובה. 
ניתן לראות את כל האפשרויות בממשק הבא:

export interface InMemoryBackendConfigArgs {
    // default response options
    defaultResponseOptions?: ResponseOptions;
    // delay (in ms) to simulate latency
    delay?: number;
    // false (default) if ok when object-to-delete not found; else 404     
    delete404?: boolean;
    // host for this service
    host?: string;
    // root path before any API call
    rootPath?: string;
}
 
 
שלב אחרון: חיבור ל- bootstrap.
 
bootstrap(App,[ HTTP_IN_MEMORY ]);
 
סיכום:

 

השרות הזה יכול לעזור לכם בפיתוח ובבדיקות. אשמח לקבל פידבקים.

 

מאמר זה הוא חלק התוכן שאני מעביר בקורסים שלי.
הקורס הבא יהיה ב- 18 לספטמבר. לפרטים נוספים הירשמו כאן: ng-course.org
.

 

 
השארת תגובה

פורסם ע"י ב- יולי 4, 2016 ב- Angular 2.0, Uncategorized

 

Angular 2 The Clock Component

באנגולר 2 אחרי כל אירוע אסינכרוני יש tick שנקרה ע"י ה-zone. אם יש הרבה אירועים אסינכרוניים בשנייה אנחנו יכולים לגרום לבעיית ביצועים.

בפוסט זה אני רוצה להסביר איך לכתוב רכיב שעון בדיוק של 50 ms. בחרתי את הקוד הבסיסי  לשעון שלי:

setTime(){
let t = new
Date();
this.time =
`
${t.getHours()}

        :
${this.formatNum(t.getMinutes())}
        :
${this.formatNum(t.getSeconds())}
        :
${t.getMilliseconds()}`;
setTimeout(
this.setTime.bind(this),50
);
}
formatNum(i){
return i < 10 ? `0${i}`
: i; }

 

שימו לב:

אני משתמש ב- setTimeout ולא ב- setInterval כדי לא ליצור עומס על ה- queue במידה וה- UI Thread עמוס ואז הוא לא מצליח למשוך מהתור את הפונקציות בקצב שה- setInterval מיצר אותם.

 

שלב א: לעבוד מחוץ לאנגולר

אני לא רוצה שכל 50 ms יבוצע tick במערכת. (המשמעות של tick  היא שאנגולר עובר על עץ הרכיבים ובודק מה השתנה ואז מעדכן את ה- UI. ראו פוסטים בנושא. ) לכן אני אשתמש ברכיב ה- NgZone.

constructor(zone:NgZone) {}
ngOnInit(){
    this.zone.runOutsideAngular(()=> {
        this.setTime();
    });
}
 
הקוד הנ"ל מוציא את ה- setTimeout ממנגנון ה- zone. כלומר עכשיו ה- 50 ms לא גורמים ל- tick.
 

שלב ב: לעדכן את המסך

אני אשתמש ביכולות של ה- ChangeDetectorRef והפונקציה detectChanges, מחשבת את כל החלקים הדינאמים בתבנית (למשל {{}} או [] ). ראו קוד:

@Component({
    selector: 'clock',
    template: `<span>{{time}}</span>`
})
export class Clock extends BaseDemo{
    time:string = '00:00:00:000';
    isDestroy:boolean = false;
    constructor(zone:NgZone,
                cd:ChangeDetectorRef) {}
    ngOnInit(){
        this.cd.detach();
        this.zone.runOutsideAngular(()=> {
            this.setTime();
        });
    }
    setTime(){
        if(this.isDestroy) return;
        let t = new Date();
        this.time = `
            ${t.getHours()}
            :${this.formatNum(t.getMinutes())}
            :${this.formatNum(t.getSeconds())}
            :${t.getMilliseconds()}`;
        this.cd.detectChanges();
        setTimeout(this.setTime.bind(this),50);
    }
    formatNum(i){ return i < 10 ? `0${i}` : i; }
    ngOnDestroy(){
        this.isDestroy = true;
    }
}

 

סיכום:

יש הרבה רכיבים שיש להם תדירות גבוהה של עדכון מסך. שימוש ברכים אלו יגרמו ל- tick שיגרום לעדכן את כל האפלקציה. בפוסט זה אני מראה לכם איך לשלוט בתדר העידכון ע"י ניתוק מה- zone וקריאה ל- detectChanges כל פעם שרוצים לעדכן את הרכיב על המסך. עדכון זה לא גורם ל- tick.

כמו תמיד אשמח לפידבקים.

למידע נוסף בנושא, אשמח לראות אותכם בקורס אנגולר  2 שלי ng-course.

 
תגובה אחת

פורסם ע"י ב- יוני 25, 2016 ב- Angular 2.0, Uncategorized

 

The New Router

ראיתי את המצגת של מישקו בנושא ה-router החדש והתאכזבתי.

 

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

 

1. באתרים גדולים העץ כל כך גדול שה-URL לא יכול לייצג את ה-PATH של העץ, מגבלת אורך. אני מאמין שזה הסיבה שב- UI Router קראו לזה State ואנחנו יכולנו לקבוע לכל State את ה-Path שלו.

 

2. הרעיון של תיקיות עם "+"  זה נחמד ברוב המקרים, אך יש מקרים שהכל דינאמי והקשר בין ה-URL למבנה התיקיות מאוד מגביל. אני חושב שאנחנו צריכים קובץ מיפוי בין ה-URL לאיפה נמצאים ה- Components.

 

האמת שאני מואד אוהב את ה- UI Router וחשבתי שהם ישפרו אך ישמרו על העקרונות. מקווה שבקרוב נראה גירסה יותר מתקדמת של UI Router לאנגולר 2.0.

 

מה אתם חושבים?

 
השארת תגובה

פורסם ע"י ב- מאי 7, 2016 ב- Uncategorized