RSS

Angular Injector Round III

31 מרץ

בפוסט זה אני מראה איך אפשר לוותר היום על ה- Injector !!! לא נפלתי על הראש (מקווה). בזמן האחרון אני כותב אנגולר 1.x ו-2.0 עם ES 6 או TS, והתחושה שה- Injector פשוט מיותר לגמרי באנגולר 1.0 עם כותבים ב- ES 6.

המטרות של ה- Injector באנגולר 1:

1. הזרקת השירותים שאני רוצה בלי להכיר את המימוש וע"י כך מקל אלי בבדיקות.

2. ה- Injector עובד כ- lazy initialization, עד שלא מבקשים שירות הוא לא נוצר. ראו סרט בנושא.

 

איך מפסיקים להשתמש ב-Injector של אנגולר?

1. בונים תחליף שמשמש כגשר בין השרותים של אנגולר לשרותים שלנו להלן יקרה ngServices.

2. ngServices צריך לתת לי גישה לכל השרותים של אנגולר שהם singleton, שזה כולם חוץ מ- $scope ו- $element. ( אם שכחתי, אנא תעירו לי ).

 // ngServices.js
export var ngServices = {
    $injector : null
};

export function addAngularServices() {
    for(let i = 0; i < arguments.length ; i++){
        let serviceName = arguments[i];
        Object.defineProperty(ngServices,serviceName,{
            get(){
                return ngServices.$injector.get(serviceName);
            }
        });
    }
}

export function ngServicesConfig($injectorProvider){
ngServices.$injector = $injectorProvider.$get();
}

 

 

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

כאשר רוצים לצרוך שרות עושים import ל- ngServices. ראו דוגמא של שרות userProxy שצורך שרותי אנגולר בסיסיים כמו $http.

Capture

הסברים:

שאתם רוצים לכתוב שרות או סתם מחלקה אתם לא צריכים לרשום אותה יותר לאנגולר. אם אתם רוצים להשתמש בשרותים שרשומים באנגולר אתם צורכים אותם דרך ngServices.

כדי ש- ngServices יוכל לצרוך שרותים של אנגולר ולחשוף אותם דרכו את צריכים להוסיף את השורה הבאה למודול הראשי שלכם.

 

import angular from 'angular';
import {ngServicesConfig} from './utils/ngServices'
;

angular.module('app',[])
.config(ngServicesConfig);

 

סיכום:

אני מאמין שברגע שמשתמשים ב-import (systemjs) אין צורך לרשום את השרותים שלנו לתוך המודלים של אנגולר 1. הראתי שזה לא פוגע בשום יכולת קיימית אלה רק מקל אלינו את הפיתוח ומוריד את התלות באנגולר אחד. אני מאמין שזה יקל אלינו גם בשידרוג לאנגולר 2.

 

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

 

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

Advertisements
 
2 תגובות

פורסם ע"י ב- מרץ 31, 2016 ב- Uncategorized

 

2 תגובות ל-“Angular Injector Round III

  1. שלומי.

    מרץ 31, 2016 at 7:41 am

    אנחנו משתמשים בטכניקה הזו חצי שנה והיא עובדת מעולה ללא בעיה אחת.

    מה ששונה אצלנו:
    הגישה שלנו לא קוראת ל injector בכל פעם, במקום זה אנחנו מבצעים השמה של הערך ישירות ומכיוון שהכל שם סינגלטון אין עם זה בעיה.
    יש מערך ברמת המודול שמגדיר את הייבוא שאנחנו צריכים, ברגע שה run הראשון מגיע הוא מאכלס את הכל.
    אנחנו גם משתמשים בTypeScript אז הוספנו כמה properties ככה שכל המטא ידוע.

    אנחנו לא משתמשים בסרביס אלא במודול רגיל שלא קשור לאנגולר, המודול מוציא החוצה סינגלטון.
    אנחנו דואגים שב run הראשון של אנגולר תתבצע ההשמה.

    יש סכנה וזה קריאה לאחד מהחברים בזמן config אז צריך להזהר מזה.

    אם כבר השתמש ב es6 אז למה לא עד הסוף 🙂

    תן rest params במקום arguments
    ובgetter אפשר להשתמש ב arrow function

    דבר נוסף שאנחנו משתמשים בו זה החלפה של window.Promise ב $q ומשם אנחנו רק עם Promise.
    כאן צריך להזהר, אם יש לכם ספריות חיצוניות שמשתמשות גם כן ב Promise אז צריך לדעת שהן יריצו digest על כל resolve/reject ולכן צריך לבדוק שאין לכם כאלה… רוב הסיכויים שאין.

     
    • eyal.vardi

      מרץ 31, 2016 at 10:45 am

      הי,
      תודה על התגובה. אני מסכים עם כל מה שכתבת 🙂
      עכשיו אני עובד על אותה תשתית לאנגולר 2. מקווה לפרסם בקרוב.
      שם אני עובד עם TS.

      נ.ב הסיבה שאני עובד עם ה-Injector כדי לשמר את ה- lazy initialization.

      בברכה,
      אייל ורדי

       

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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