AngularJS שיעור 2: model-view-controller או MVC

(לקוח מתוך מדריך AngularJS בעברית)

MVC היא תבנית עיצוב (design pattern) די ישנה (נוצרה עבור שפת Smalltalk עוד בשנות ה-70).
במילים אחרות, מדובר בשיטה שבה כותבים תוכניות שבהן חלקי ממשק אדם מכונה, כל שהתוכנה תהייה פשוטה יותר.
ב NVC מפרידים בין:

  • הנתונים של האפליקציה (model)
  • הלוגיקה לביצוע (controller)
  • התצוגה למשתמש (view)

כך אפשר למשל לערוך שינויים בתצוגה של הנתונים בלי לשנות את הטיפול בהם.

MVC ב AngularJS

נתונים (כלומר model) יכולים להיות אפילו משתני Javascript פשוטים.
למשל:

var message = "Hello World !";

AngularJS מאכסנת את הנתונים האלה במבנה הנקרא scope (מאחורי הקלעים scope הוא בעצם אובייקט Javascript רגיל). כמו כן, בדרך כלל נהוג לאכסן את המשתנים בתוך אובייקט Javascript משלנו, ורק את האובייקט הזה בתוך ה scope (נכיר את הפרטים בהמשך):

$scope.message = {
 text: 'Hello'
 };

מבט (או תצוגה)  (view) היא חלק מדף html.
לדוגמא:

<div ng-app='myapp'>
   <div  ng-controller="HelloController">
    <p>{{greeting.text}}, World !!!</p>
   </div>
</div>

התצוגה מכילה תגיות חדשות שבאו עם AngularJS (נקראות directives), למשל ng-app.
נוספו גם חלקי טקסט המיועדים לספרייה (עטופים בסוגריים מסולסלים כפולים).

בקר (controller) הוא חלק האחראי על טיפול בנתונים לצורך הצגתם. מדובר בפונקציה פשוטה של Javascript.
לדוגמה:

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

function helloCont($scope) {
  			
  			$scope.greeting = {
    				text: 'Hello'
  			};
}

mod.controller('HelloController', helloCont );

ה-controller היא הפונקציה הפשוטה helloCont שבדוגמא.
נשים לב שהפונקציה מקבלת גישה אל הנתונים שבמודל באמצעות scope$ (שעליו נרחיב בהמשך).
הפונקציה "נרשמת" כ controller באמצעות השורה האחרונה בדוגמה (שוב נרחיב בהמשך).

להבין MVC

האמת – כשמציגים MVC בפעם הראשונה מקבלים מושג מאד מעורפל.
הרעיון הבסיסי (הפרדת התצוגה מהטיפול הלוגי בנתונים) נראה הגיוני, אולם הפרטים לא ברורים.
בדרך כלל, MVC איננה טכניקה ליצירת תוכנה באופן כללי, אלא טכניקה לפיתוח תוכנה שבה יש ממשק משתמש (UI) גדול ומורכב.
עם השיעורים הבאים וחשיפה ברורה יותר של controllers ו – scopes יוסר (אני מקווה) כל הערפל.

 


תגובות

AngularJS שיעור 2: model-view-controller או MVC — 2 תגובות

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

כתיבת תגובה

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