RSS

AngularJS Tips 1–Directive TemplateURL

25 ספט

במספר פרויקטים שהייתי מעורב עלה הצורך לתבניות דינמיות ל- Directives. למשל לבחור תבנית ע"פ שפה,

אם אתה בשפה עברית אתה רוצה להביא מהשרת את הקובץ directiveTemplate.heb-il.html ואם אתה באנגלית את הקובץ directiveTemplate.en-us.html. ע"י כך אתה חוסך מאנגולר את ההתעסקות בבעיית השפות ומשפר את הביצועים.

רוב המפתחים חושבים שעם TemplateUrl אפשר לתת רק string של URL ואי אפשר להוסיף לוגיקה שתשנה את ה-URL ע"פ איזה חיווי של שרות, משתנה גלובאלי או כל דבר אחר. כאן בדיוק הטעות שלהם, אפשר לעשות את זה כי TemplateUrl ו- Template יכולים לקבל פונקציה. ראו קוד בקובץ Angulr.js: ( כאן וכאן ).

דוגמת קוד מה אפשר לעשות:

(function(angular) {

    'use strict';

    //////////////// AngularJS //////////////

    angular.module('demo', [])

    //.constant('language', 'heb-il')

    .constant('language', 'en-us')

    .directive('hello',helloDirective);

 

    //////////////// JavaScript //////////////

 

    function helloDirective(language) {

        var ddo = {

            templateUrl: function($compileNode, templateAttrs) {

                return 'hello.'+ language +'.html';

            },

            replace: true,

            restrict : 'EA'

        };

 

        return ddo;

    }

})(angular);

במקרה של השפה ככל הנראה נצטרך קודם לעשות log-in ואז לקבל את השפה של המשתמש ורק אז להריץ את אנגולר ע"י הפקודה bootstrap או resumeBootstrap. בלינק הזה כתבתי על זה: https://eyalvardi.wordpress.com/2014/03/29/angularjs-bootstrap/

מקווה שזה עזר לכם J

שנה טובה וחג שמח !!!

Advertisements
 
5 תגובות

פורסם ע"י ב- ספטמבר 25, 2014 ב- Uncategorized

 

תגים:

5 תגובות ל-“AngularJS Tips 1–Directive TemplateURL

  1. chenreuven

    ספטמבר 25, 2014 at 8:44 am

    היי אייל, תודה על הכתבה והעזרה בבלוג היפה והמשכיל הזה + שאלה.
    1. האם לא היה ניתן לתת את המשתנה הזה כחלק מ- query param או path param ודרכן להוציא את סוג השפה שהיוזר נמצא בה? (אני חושב שאפשר לעשות את זה דרך ה- Ctrl המשוייך[כמו כן אולי זה שטות מה שרשמתי כי אני די מתחיל ב- Angular :)])
    2. דבר שני בקשר לשפה האם לא כדאי לקחת את זה מתוך המשתנה navigator.language? (כמובן שאפשר/רצוי לעשות Polyfill לדפדפנים שלא תומכים באובייקט הזה)

    תודהף חן

     
  2. eyal.vardi

    ספטמבר 25, 2014 at 9:13 am

    הי חן,
    1. אפשר לעביר את המשתנה כחלק מ- query param, או כל דרך אחרת כול עוד אתה מחזיר URL תקין שאותו מריץ אנגולר ולא אתה.
    2. גם כאן אתה צודק אפשר לקחת את המידע מכל מקום, חוץ מ-SCOPE כי הוא עדין לא זמין, ולכן גם ה-CTRL עדין לא עובד. זה שלב ה- compile ורק אחרי זה יש את שלב ה-link שבו נוצר ה-scope ואז רץ ה-CTRL.
    3. שים לב שהפונקציה מקבלת את ה-DOM של האלמנט ואתה יכול לקרוא את המשתנה גם מה-DOM.

    חג שמח !!!

     
    • chenreuven

      ספטמבר 26, 2014 at 2:11 am

      תודה על התשובה וחג שמח!
      בעיקרון אני חושב שכ- BP, הכי טוב שיהיה קובץ קונפיגורציה אחד ששם נחליט מה אנחנו רוצים ליישם, ואם אנחנו רוצים לעשות את זה הכי דינאמי אז קובץ הקונפיגורציה ייקח את זה בהתאם לדפדפן אותו מריץ המשתמש.
      אם .constant('language', 'en-us') עושה את זה אז על הכיפאק 🙂 [אני לא מכיר את הפקודה :)]

      תודה על העזרה

       

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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