RSS

Angular 2.0 Injector

31 ינו

Angular 2.0 Injector

 

ה- Injector הוא מחלקה מרכזית באנגולר 2.0 והרבה מאוד חלקים סובבים סביבה. בפוסט זה אני רוצה להסביר את החלקים המרכזים שבהם האנגולר עובד עם ה- Injector.

באנגולר 1 היה לנו Injector אחד ( למעשה 2, אך לא נכנס לזה פה J המבין יבין ) שהכל היה רשום בו. באנגולר 2 יש לנו Injector לכל Component או Directive. אם יש לנו על אותו DOM גם Component וגם Directive אז יש לנו Injector אחד לאותו DOM.  למשל <component my-directive>.

אתם מבינים את גודל הבעיה? היה לכם קשה עם Injector אחד, עכשיו תקבלו עץ Injectors !!!

הסבר:

כאשר אתם בונים Component או Directive אתם יכולים לבקש שיזריקו לכם דרך ה- constructor שירותים. אנגולר מחפש את השירותים הנ"ל קודם ב-Injector של הרכיב ואם הוא לא מוצא אז אצל האבא עד שהוא מוצא. ראו תמונה להמחשה.

clip_image002

שימו לב שהתמונה ממחישה שאת רכיב A מצאנו על ה- Injector שלנו ואת שאר השירותים A ו- B מצאנו על האבות שלנו.

כאשר בונים את הרכיב שלכם אתם יכולים לאתחל את ה- Injector דרך ה- Decorator, ה- @Component. ראו תמונה.

clip_image004

הריבוע האדום מסמן את כל התכונות שבעזרתם את יכולים לאתחל את ה- Injector של אותו רכיב.

השאלות שאתם צריכים לשאול את עצמכם לגבי ה- Injector:

1.     למה כל התכונות האלו ולא אחת בשביל כולם?

2.     מה ההבדל בין viewProvider לבין provider והם זה באמת נחוץ?

3.     מה ההבדל בין directives ל-pipes?

4.     מה זה queries?

טוב בו נתחיל לספר את הסיפור.

1. יש הבדל בין התבנית של הרכיב, לבנים של הרכיב שנמצאים בין ה-tags שלו. ראו תמונה:

clip_image006

הסברים לתמונה:

Providers & View Providers:

ה- Injector של הרכיב (component) משמש קודם כל את התבנית אך גם את הרכיבים שנמצאים בין ה-tags שלו קרי <sub-comp>. אם ה-<sub-comp> צריך שרות שלא מוגדר אצלו ב- providers  אז הוא מחפש את זה אצל האבא, קרי <component>. במילים פשוטות כל שרות שאתם מגדירים ב-providers זמין לכל הרכיבים שבתבנית וגם לרכבים שבין ה-tags של הרכיב. אם רוצים שהשירותים יהיו זמינים רק לתבנית אז תגדירו אותם ב- viewProviders. למה צריך את זה? הרכיב component לא יכול לדעת איזה רכיבים יאחסנו בין ה-tags שלו, ולכן יש מצב שהוא לא רוצה לחשוף שרות שהרכיבים בתבנית צריכים לעבוד אתו לרכבים שנמצאים בין ה-tags שלו.

Directives:

התכונה Directives משמשת להכניס ל-Injector רכיבים (Components) ו- Directives שישמשו את התבנית. נשאלת השאלה למה צריך את זה ,אם יש viewProviders? הרגע אמרנו שזה משמש את התבנית. התשובה כי תהליך יצרית Component שונה מתהליך יצירת שרות רגיל, זה כמו ההבדל בין Factory() ל- Directive()באנגולר 1.

כמו שאתם מבינים לתחזק לכל רכיב את המערך של directives זה טירוף מערכות… המשמעות היא שכל הוספה של רכיב לתבנית צריך גם להוסיף אותו למערך של ה- directives. המזל הגדול שהם הבינו את הבעיה ואפשרו לנו לכתוב את הרכיבים שלנו לרמת האפליקציה ע"י השימוש במפתח "PLATFORM_DIRECTIVES". ראו תמונה.

clip_image008

עכשיו אנחנו יכולים לרשום את כל הדרכטיבים שלנו למפתח זה, אך חזרנו לבעיה שאם נרשום שני דרקטיבים אם אותו שם  אנחנו בבעיה, אותה בעיה שהייתה לנו באנגולר 1.

שימו לב:
לא הצלחתי לרשום רכיב בעץ ואז להשתמש בו אצל הילדים
 אלא רק בתבנית של עצמו או על האפליקציה כמו בתמונה למעלה. מקווה שזה באג…

Pipes:

כמו התכונה של Directives, רק רושמת Pipes. ( באנגולר 1 קראנו לזה filters ). הרישום ברמת האפליקציה משתמשים במפתח: PLATFORM_PIPES. ראו תמונה.

 

 

clip_image010

טוב עכשיו אנחנו יודעים איך לאתחל את ה-Injector שלנו, אך יש כמה שאלות פתוחות:

1. מה השרות המקביל ל- $watch?

2. מה מחליף את המתודה link שנתנה לנו גישה ל-element ול-scope באנגולר 1.

בפוסט זה אנחנו עוסקים ב-Injector אז אני רק הסביר איך מקבלים גישה לדברים שהיו לנו נגישים באנגולר 1.

פשוט מבקשים אותם ביצירה של המחלקה (constructor) ראו תמונה.

clip_image012

השוואות לאנגולר 1, כמה שאפשר להשוות:

·        TemplateRef שקול לארגומט הראשון במתודה compile בדרקטיב, קרי tElement.

·        ElementRef שקול לארגומנט השני במתודה link בדרקטיב, קרי iElement.

·        ViewContainerRef שקול לארגומנט החמישי ב-link בדרקטיב, קרי הפונקציה trasclude.

·        ChangeDetectorRef זה כמו ה- scope אך משמש רק לזיהוי שינויים ולא לשמירה של נתונים.

·        Renderer אין לזה הקבלה… זה במקום לעבוד על ה-DOM ישירות ממליצים לכם לעבוד דרך מחלקה זו כדי לתת לכם תמיכה גם בעבודה מרובה worker או אפילו רינדור בצד שרת. בקיצור הרגו לנו את jquery סופית. יש בזה הרבה כוח אך ה-syntax מגעיל לעומת jquery.

 

טוב אז עכשיו אתם מבנים את התכונות הקשורות ל-Injector השאלה אם אתם יודעים לענות על השאלות הבאות:

1. האם אנגולר 2.0 תומך ב- Lazy Loading ? כלומר האם אפשר לטעון לו תוך כדי ריצה שירותים ורכיבים.

2. האם אנגולר 2.0 הוא Lazy Initialization כמו אנגולר 1? כלומר רק שצריך את הרכיב או השרות הוא יוצר אותו.

אלו שאלות לפוסט הבא J או תבואו לקורס אנגולר 2.0 למפתחים מקצועיים באנגולר 1.0.

 

חייב לשתף אתכם בעוד מחשבה אחת, תסתכלו על התמונה הבאה:

clip_image014

 

האם באמת אנחנו צריכים את ה-Injector בשביל כל ה-metadata של @Component ואת כל ההיררכיה המשוגעת שלו? הרי אנחנו ממלאים את המערכים ב-Types שאותם אנחנו מושכים ע"י import. רק במקרה של ה- constructor שאני מבקש דברים כמו elementRef אני צריך את ה-Injector כי ה-Type משמש כמו Interface והמימוש הוא האלמנט שלי (מופע), כמו בפונקצית ה-link  שנתנו לי את זה ע"פ מיקום. לכל אלו שצועקים שמו שמיים איך עושים עכשיו בדיקות… כאן יש לי רעיון מהפכני, ה- import ישמש אותנו כ-Injector. כלומר ה- from לא חייב להיות מיקום פיזי של קובץ הוא יכול להיות מילה לוגית שבזמן ריצה אפשר לקבוע לאיזה קובץ ללכת. מזכיר את RequireJS? כן, מה רע?

 

החיים הם רצף של פשרות. אני בחרתי באנגולר 2.0 אך זה לא אומר שהוא מושלם. בלי ביקורת בונה ומנומקת איך נתקדם J

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

 

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

פורסם ע"י ב- ינואר 31, 2016 ב- Angular 2.0

 

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: