angularjs שיעור 9: AngularJS modules

פירוק של תוכנה למרכיבים היא משימה קשה.
השתמשנו ב – controllers כדי לכתוב את הקוד  שמחבר בין ה template למודל הנתונים.
האם controllers יהיו המקומות בהם נרצה לכתוב את שאר הקוד?

מודולים ב  AngularJS

מודולים מאפשרים לנו לפרק את הקוד אותו אנו כותבים לצרכים שונים.
לפרק, אך גם לחבר: מודולים מאפשרים לנו לבנות את מערכת התלויות (dependencies) שלנו,
כלומר להגדיר איזה קוד תלוי באיזה קוד אחר.
מודולים יכולים לאכלס controllers, services, filters, directives.
בדרך כלל, הקוד שאותו נמקם בתוך מודול יהיה service, שהוא קטע קוד "כללי" המבצע פעולה מסויימת (או שירות כלשהו עבור הקוד שלנו).

הגדרה ושימוש במודול אנגולר

להלן הגדרה של מודול:

var mod = angular.module('myApp', []);

ההגדרה הזו יוצרת מודול חדש בשם myApp.
מאחורי הקלעים, מודולים הם בעצם אובייקטים רגילים של Javascript, והשורה הזו יוצרת בעצם אובייקט חדש.

module

 

כדי להפעיל את המודול, צריך לחבר אותו באופן כלשהו ל – AngularJS.
את המודול הראשי באפליקציה אפשר לחבר באמצעות הדירקטיב ng-app:

<body ng-app='myApp'>

אבל מה יקרה אם נרצה לפרק את הקוד באפליקציה שלנו לשני מודולים ?
הנה דוגמא ובה שני מודולים, כאשר בכל אחד מהם controller.
אין הרבה הגיון בדוגמא הזו, נשתמש בה כאן רק כדי להבין את "הטכניקה" של המודולים.
(הדוגמא המלאה כאן)

הנה הגדרת המודולים:

var mod2 = angular.module('mod2', []);
var mod1 = angular.module('theMain', ['mod2']);

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

var mod2 = angular.module('mod2', []);
var mod1 = angular.module('theMain', []);

function one($scope) {
  $scope.number = 5;
}

function two($scope) {
  $scope.number = 6;
}

mod1.controller('one', ['$scope', one]);
mod2.controller('two', ['$scope', two]);

והנה קוד ה template :

<body ng-app='theMain'>
  <div ng-controller='one'>
    <p>From 1: {{number}}</p>
  </div>
  <div ng-controller='two'>
    <p>From 2: {{number}}</p>
  </div>
</body>

אך מדוע ה – controller השני לא פועל כיאות ?
הבעייה היא שהמודול השני אמנם נוצר, אך לא נכנס לשימוש AngularJS.
המודול הראשון בשימוש מפני שה-template פונה אליו באמצעות ng-app.
מה שנצטרך לעשות הוא, להוסיף את המודול השני כתלות (dependency) של המודול הראשי:

var mod2 = angular.module('mod2', []);
var mod1 = angular.module('theMain', ['mod2']);

עכשיו שני המודולים טעונים, ואפשר לעבוד עם הקוד של שניהם.

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


תגובות

angularjs שיעור 9: AngularJS modules — תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *