נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

אפליקציות מבוססות דף יחיד באמצעות AngularJS

מחבר:
בתאריך:

במדריך זה הגענו לסיבה העיקרית שבגללה אנחנו משתמשים באנגולר. כי אנגולר זו לא רק דרך לכתוב JavaScript במסגרת פריימוורק שמכריח אותנו לכתוב קוד JavaScript מודרני, אלא בעיקר ספריית קוד שמאפשרת לנו לכתוב אפליקציות מבוססות דף יחיד, (spa = single page application) בצורה יעילה ומודרנית.

angular spa

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

 

ה-url באפליקציה

כשעושים אפליקציות של דף יחיד (spa) תוכן הדף משתנה בתגובה לשינוי בחלק הסולמית (hashtag) של ה-url.

אם התרגלנו לכתוב את ה-urlים באופן הבא:

http://<yourwebsite>/first
http://<yourwebsite>/second
http://<yourwebsite>/second/1

אז בשביל ה-single page application משתמשים ב-urlים עם סולמית (#) במקום:

http://<yourwebsite>/#first
http://<yourwebsite>/#second
http://<yourwebsite>/#second/1

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

 

הדף index.html

index.html מהווה את שלד האפליקציה, והוא כולל את הקישורים שיאפשרו לדפדף בין התכנים (האלמנט nav).

תוכן הדיב ng-view יתעדכן לפי התוכן הנבחר.


<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Single page application example with AngularJS</title>
     
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
</head>
<body dir="ltr">
    <nav><a href="#">Main</a> | <a href="#/second">Second</a></nav>
    <div ng-view></div>
</body>
</html>

 

הראוטר

נוסף לקוד ספריית ה-angular.js, נכלול את קוד המודול האנגולרי angular-route.js שמספק את הראוטר (נתב בעברית), שמאפשר להחליף את תוכן הדף בתגובה לשינוי ה-url.

 

הטמפלייטים

האפליקציה כוללת שני תכנים, second.html ו-first.html. את שני הטמפלייטים שישמשו את התכנים נוסיף לתוך התיקייה pages.

/pages/first.html


<p>This page is called: {{name}}</p>

/pages/second.html


<p>This page is for {{name}}, and it got the number of {{ num }}.</p>

<p><a href="/#/second/1">1</a> | <a href="/#/second/2">2</a> | <a href="/#/second/3">3</a></p>

ערך המשתנים name ו-num מתקבל מקוד ה-JavaScript, כפי שנראה מיד.

קוד ה-JavaScript

כשאנחנו יוצרים את האפליקציה, נגדיר ברשימת התלויות את המודול ngRoute.


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

נכתוב את הקונטרולרים. שני קונטרולרים לשני תכנים.

בתוך הקונטרולר 'firstController' נגדיר את ערך המשתנה name שישמש את הקונטרולר.


myApp.controller('firstController', function($scope){
    $scope.name = "the first";
});

בתוך הקונטרולר 'secondController' נגדיר את ערך המשתנה name שישמש את הקונטרולר. בנוסף, נגדיר את ערך המשתנה num שיקבל את ערכו מפרמטרים שיועברו בכתובת. קבלת ערך המשתנה מהכתובת מתאפשרת הודות לשימוש באובייקט routeParams$. אותה נעביר כתלות לקונטרולר.


myApp.controller('secondController', function($scope,$routeParams){
    $scope.name = "the second";
    $scope.num  = $routeParams.num || 1;
});

הראוטר, שמחליף את התוכן לפי ה-url , פועל בתוך המתודה config. כדי שזה יעבוד מזריקים לקונטרולר את האובייקט routeProvider$. כך נראה הקוד המלא של הראוטר:


myApp.config(function($routeProvider) {
    
  $routeProvider.
  when('/first', {
     templateUrl: 'pages/first.html',
     controller : 'firstController'
  }).
  when('/second', {
     templateUrl: 'pages/second.html',
     controller : 'secondController'
  }).
  when('/second/:num', {
     templateUrl: 'pages/second.html',
     controller : 'secondController'
  }).
   otherwise({
     redirectTo: '/first'
  });
});

המתודה when מקבלת בתור פרמטר ראשון את ה-url, ואחר כך אובייקט שכולל את הטמפלייט ואת הקונטרולר.


$routeProvider.
  when('/first', {
     templateUrl: 'pages/first.html',
     controller : 'firstController'
  })

ניתן להגדיר ב-url את הפרמטר שאנחנו רוצים להעביר לקונטרולר.לדוגמה, הפרמטר num.


  when('/second/:num', {
     templateUrl: 'pages/second.html',
     controller : 'secondController'
  })

בקונטרולר, יתקבל ערך הפרמטר num מכתובת ה-url, וערך זה יוצב למשתנה num. הקפידו לתת ערך ברירת מחדל.


myApp.controller('secondController', function($scope,$routeParams){
    $scope.name = "the second";
    $scope.num  = $routeParams.num || 1;
});

 

סיכום

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

לכל מדריכי ה- AngularJS

הוסף תגובה חדשה

 

= 4 + 9

תמונת המגיב

רבקה בתאריך: 13.12.2016

כתיבה בהירה ומובנת, תודה

תמונת המגיב

יוסי בן הרוש בתאריך: 13.12.2016

תודה, רבקה.

תמונת המגיב

מוש בתאריך: 20.02.2017

נהדר!

תמונת המגיב

יוסי בן הרוש בתאריך: 20.02.2017

בכיף, מוש.