RSS

Controller As vs. $scope

25 מרץ

 

אחת השאלות הכי שכיחות היא: "למה לי להשתמש ב- Controller as  ולא ב-$scope?"

יש לשאלה הזאת מספר תשובות:

1. מאמר של גון פאפא.

2. תשובתו של מארק, קצת יותר מעמיק.

 

אני רוצה בפוסט זה להסביר לכם מה אני בחרתי ולמה. אני בחרתי ב- Controller As מהסיבה שהקוד יותר נקי ע"פ דעתי ואני יכול יותר בקלות לכתוב JS רגיל עם dependency injection. זה לא אומר שאני לא משתמש ב- $scope בשביל $watch או $apply וכ"ו אך בשביל נתונים (fields) ופעולות (functions) אני עובד על JS רגיל. אני מנסה להשתמש בטכנולוגיה (אנגולר) רק איפה שצריך, ולשמור כמה שיותר על קוד ונילה.

למה?

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

מסקנות:

אני מנסה לכתוב את הקוד האנגולרי בראש הקובץ, יצירת מודול ורישום לתוכו, אך אני לא משתמש ב- anonymous function. הפונקציות נכתבות בחלק התחתון של הקובץ. ראו דוגמא:

 

(function () {

    ////////// Angular Code ////////////

    var app = angular.module('testApp', ['ngRoute']);

    app.factory('proxy', proxyFactory);

    app.controller('Ctrl', Ctrl);

    app.directive('requestForm', requestFormFactory);

    app.directive('responseForm', responseFormFactory);

   

 

    //////////Java Script Code ////////////

 

    function Ctrl($scope, proxy) {}

    function requestFormFactory($scope, proxy, $routeParams) { }

    // …

})();

בנוסף אני מנסה שה- controllers יהיו בעיקר עטיפה ל-BL והשרותים השונים, לצמצם את הקוד שם כמה שאפשר לשרות או מחלקה של JS.

אני מאמין שכתיבה כזו גם מצמצמת את כמות ה- closure וזה דבר טוב, אך מקשה את העבודה עם this צריך לשלוט באיך הוא עובד. בנוסף אני מאמין שכתיבה כזו תוכל לנצל את JS 6.0בצורה יותר נכונה, כאשר הוא יגיע או כאשר אנגולר 2.0 יצא לשוק.

אוקי נחזור לפרטים הקטנים

כאשר אתם כותבים ng-controller="Ctrl as vm" האנגולר יוצר מופעה של Ctrl ע"י פעולת new, כלומר נוצר אוביקט חדש שהוא ה- this ועליו אתם שמים את השדות והמתודות. האוביקט הזה נכנס לתוך המשתנה vm  שמוחזק ע"י ה- $scope.

 

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

 

Advertisements
 
3 תגובות

פורסם ע"י ב- מרץ 25, 2014 ב- AngularJS

 

3 תגובות ל-“Controller As vs. $scope

  1. chenreuven

    יולי 23, 2014 at 4:26 pm

    1. האם תוכל לתת דוגמא קטנה ומלאה של ctrl as a, הרעיון לא ממש מובן ממה שרשמת (לפחות לא לי).

    נקודה למחשבה, לפי מה שהבנתי ה- this משמש לכאורה כמו ה- $scope (מקווה שהבנתי נכון).
    עכשיו אם אתה רוצה להתייחס לפונקציה למשל הקונטרולר שמקבל $scope כארגומנט כפונקציה רגילה (ונילה), אז מה שיקרה למעשה זה שיהיה לך אובייקט $scope שמחזיק הכל אצלו(משתנים ופונקציות) לעומת this שמאפשר לך באמת ליצור instance מהפונקציה, הזאת – הרבה יותר OOP. אם לזה התכוונת אז אחלה רעיון.

    2. בקשר להפרדה שעשית, לפי דעתי דבר מבורך ולא חשבתי על זה עד עכשיו ככה, אולי זה מה שאני יתחיל לעשות 🙂 תודה!

     
  2. eyal.vardi

    יולי 23, 2014 at 4:34 pm

    ctrl as vm == $scope.vm = this

    הסבר: שאתה כותב ctrl as vm אתה אומר לאנגולר לשים את ה-this על ה-scope במשתנה בשם vm.
    שים לב שאנגולר יוצר את הקונטרולר ע"י new ולכן המתודה מחזירה this.

     

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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