תגית: angular

שיעור 3 ב- ionic – המונח Page ואיך עובד הניווט ?

נדבר הפעם על 2 נושאים :

המונח Page ב-ionic – הוא :

  • מבחינת מעשית מדובר ב-component רגיל של אנגולר.
  • מבחינת קונספט, הוא משמש כמסך אחד – שהוא מה שמוצג על המסך.
  • אפשר כמובן לכלול בתוכו קומפונטות אחרות של אנגולר.

איך עובד הניווט ב- ionic ?

  • ב-ionic 2 ואילך, לא עושים שימוש ב-angular router
  • במקום זאת, משתמשים במערכת ניווט שמאפשרת לנווט בין מערך של Pages.
  • זאת הסיבה שמוגדר ב-ionic שהיא חייבת להתחיל עם rootApp משלה – רואים את זה בקובץ app.module.ts, בחלק של bootstrap.
  • בנוסף רואים זאת בקובץ app.html.
  • אנחנו יכולים להוסיף למערך של ה-Pages כל פעם דף חדש.
  • העיקרון הוא שאנחנו רואים על המסך רק את ה-Page האחרון שהכנסנו למערך. (הכנסנו – פעולת push ) .
  • מה שאומר…שאם נסיר את ה-Page האחרון שהכנסנו, אנחנו נראה בחזרה את ה-Page שקדם לו במערך. ( הסרה – פעולת pop ).
  • העיקרון הזה מאוד חשוב להבנה – הניווט של ionic הוא ניווט בין דפים (pages).
    וכדי לנווט אנחנו מכניסים ומוציאים דפים מתוך מערך.

התגית של סרגל הניווט

בקובץ app.html מופיעה השורה הבאה :

<ion-nav [root]="rootPage"></ion-nav>

התגית ion-nav היא זו שיוצרת את סרגל הניווט, כאשר המאפיין root הוא זה שקובע מהו העמוד הראשון שרואים – בדוגמא הנוכחית , זה העמוד rootPage.

איפה רואים מה המשמעות של rootPage ? 

תשובה :  אם נסתכל בקובץ app.component.ts נראה שם את המשתנה שנקרא rootPage

 rootPage:any = TabsPage;

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

 

 

שיעור 4 ב-angular – שימוש ב-TypeScipt

מה זה TypeScript ?

TypeScript היא הרחבה ל-JavaScript שפותחה על ידי מיקרוסופט.

היא מאפשרת לנו לכתוב ב-JavaScript עם שיפורים כמו :

  • אובייקטים של מונחה עצמים.
  • ממשקים (=אינטרפייס).
  • הגדרה מפורשת של סוגי המשתנים.
  • ועוד…

בסופו של דבר, כאשר אנחנו כותבים ב-TypeScript אז זה מתקמפל ל-JS על ידי TSX שהוא הקומפיילר שעושה זאת.

כמובן שכדי שיהיה לנו נוח, ונראה מראש את השגיאות, צריך עורך קוד שתומך ב-TS.

קבצי TS מסתיימים בסייומת ts.

דוגמאות ל-TypeScript :

  • הגדרת משתנה מסוג מחרוזת :
let name:string = 'Koko Moko';
  • הגדרת פרמטרים לפונקציה בתור מספרים , והגדרת הפונקציה עצמה – ככזו שמחזירה מספר :
function Boom(firstParam:number, seconedParam:number):number {
...
...
{
  • סוגי המשתנים האפשריים ב-TypeScript הם :
    • string
    • number
    • boolean
    • array
    • any
    • void – כלומר לא מחזיר ערך.
    • null
    • tuple
  • דוגמא להגדרת מחלקה ב-TypeScript, אפשר ליצור מאפיינים, מתודות וכו' :
class MyClass {
 firstName:string;
 
 constructor(giveMeYourName:string) {
 this.firstName = giveMeYourName;
 
 }
 
 sayHi() {
 return "Hi -- " + this.firstName;
 }
 }

let obj = new MyClass("Eyal");

 

שיעור 3 ב- Angular – מבנה התיקיות בפרויקט

נציין כמה קבצים ותיקיות חשובים באנגולר.

בעיקרון המבנה ממש פשוט, ורוב הזמן אנחנו נהיה בתוך תיקיית src.

  • קובץ package.json – מכיל את הגדרות הפרויקט מבחינת NPM, מי שעבד קצת עם node , מכיר את זה הייטב.
    • שימו לב לחלק scripts, שמכיל בעצם את הפקודות המקוצרות להרצה, למשל npm start – הופך להיות ng serve.
    • בחלקים של depencies ו- devDepencies מוגדרים כל התלויות.
  • תיקית node_modules – מכילה את כל ספריות ה-node שמוגדרות בקובץ הקודם.
  • תיקית src – זו התיקיה העיקרית.
    • בתוכה תיקית app מכילה את הקבצים העיקריים.
    • כל קובץ שמסתיים ב-ts, הוא קובץ type script, נדבר על זה בהמשך.

 

שיעור 2 ב – Angular – התקנת angular cli

לאנגולר יש כלי שורת פקודה טוב מאוד, שנקרא כמובן angular cli.

כדי להתקין אותו נקליד

 

npm install -g @angular/cli

איך ליצור אפליקציה באמצעות angular cli

היות והתקנו את הכלי בצורה גלובלית ( -g ) אז אפשר מכל מקום להקליד

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

הפקודה הראשונה יוצרת את הפרויקט

הפקודה השניה נכנסת לתיקית הפרויקט

הפקודה השלישית – מריצה את הפרויקט , כך שנוכל לגלוש אליו בדפדפן. כתובת ברירת המחדל היא בפורט 4200, כלומר

http://localhost:4200/

 

הפצה (deployment) של אפליקציית angular

כדי לעשות deployment לאפליקציות של angular – מדובר במשימה ממש פשוטה.

פרמטרים שמשפיעים על ההפצה :

  • בקובץ angular-cli.json , יש הגדרה שנקראת  outDir, היא קובעת לאיזו תיקיה יופצו הקבצים ה"מקומפלים". כברירת מחדל היא מקונפגת על dist.
  • חשוב מאוד להגדיר נכון את תגית ה-base, שנמצאת בתוך src/index.html
    אם האפליקציה מופצת לדומיין (כלומר root domain לדוגמא pakapaka.com/ ) אז נשאיר את התגית על /     אבל אם מפיצים לתיקיה, או לסאב דומיין , צריך לשנות בהתאם.

ואז כדי ל"קמפל"\לארוז את הכל, פשוט ניכנס לתיקיה של הפרויקט ונריץ משם

ng build

בתהליך מהיר, הוא מקמפל הכל.

כעת נעביר את הקבצים לשרת, ו…סיימנו.

שיעור 1 – ב – Angular 4

  • אנגולר הוא פריימוורק צד לקוח נפוץ.
  • פותח על ידי גוגל.
  • קוד פתוח ברישוי בלי בעיות.
  • גירסה 1 שונה מהותית מגירסאות 2,4 שבאו אחריה.
  • המפתחים הפיצו את גירסה 2, ולאחר מכן, הגירסה הבאה מוספרה כ-4 (על 3 דילגו).

התקנת סביבה

 

  • יש לוודא ש- node + npm מותקנים במחשב.
  • נפתח תיקיה חדשה עבור הפרוייקטים שלנו באנגולר.
  • כדי להתקין את angular באופן גלובלי נקליד
npm install -g @angular/cli

לפתוח פרוייקט חדש ב- angular באמצעות כלי שורת הפקודה angular cli

 

  • לאנגולר יש כלי שורת פקודה חזק, שנקרא ng
  • כדי לפתוח פרוייקט חדש באנגולר , נקליד :
ng new my-app

כאשר את המילה my-app כמובן – צריך להחליף לפי שם הפרוייקט שלנו.

להריץ את אפליקציית האנגולר

 

  • כדי להריץ את אפליקציית האנגולר שיצרנו, ניכנס לתיקית הפרוייקט
  • ואז נקליד
ng serve
  • לאחר כמה שניות של קימפולים, אפשר להיכנס לדפדפן בכתובת הבאה, ולראות את אפליקציית האנגולר חיה ונושמת.
http://localhost:4200/

בהצלחה עם angular 4 .