מדריך אנגולר 2, פרק 4 – Multiple Components

יום רביעי, ספטמבר 28, 2016

לתוכן העניינים.   בפרק הקודם נכנסנו קצת יותר לעומק של הספרייה, למדנו על ngFor, ngIf, ngModel, עבדנו עם אירועים ועם מחלקות. בשיעור היום נלמד על הדברים הבאים: הצגת יותר מ – Component אחד במסך. תקשורת בין שני Components נכיר את המושג של Input   הורדת קוד המקור, עד (כולל) פרק 4.   נתחיל. נכון לעכשיו יש לנו בתוך ה – app.component שני חלקים, צד ימין שמציג את כל הרשימה, וצד שמאל שמציג מישהו בודד (מתוך הרשימה, ומאפשר לערוך אותו). אנחנו רוצים לחלק כל אחד מהם ל – Component נפרד, השלבים שלנו הם כדלהלן: להוציא...
תגובה אחת

מדריך אנגולר 2, פרק 3 – Master/Detail

יום שלישי, ספטמבר 27, 2016

לתוכן העניינים   בפרק הקודם התחלנו להעמיק קצת יותר לתוך הספריה, ולמדנו איך עושים binding דו כיווני, וכיצד מפרידים בעזרת templateUrl בין קובץ התצוגה לבין קובץ הלוגיקה.   בפרק היום נלמד על: הוספת מספר Heroes נוספים. הצגה של הרשימה קצת עיצוב אף פעם לא יזיק הצגת המידע בתנאים מסויימים הוספת אירועים   בשלב ראשון נרצה להציג יותר מ – hero בודד, ולכן נגדיר מערך של heroes (בהמשך הרשימה תגיע מהשרת, לעת עתה hatd code), נוסיף את הקוד הבא בתחתית הקובץ app.component.ts. Code Snippet const HEROES: Hero = [    { id: 11, name:...
2 תגובות

מדריך אנגולר 2, פרק 2 – The Hero Editor

יום שני, ספטמבר 26, 2016

לתוכן העניינים בפרק הקודם התחלנו ללמוד איך יוצרים פרויקט ראשון שיציג לנו תוכן HTML כלשהו, הוספנו את הספריות האלוונטיות, כתבנו קודים בשפת typescript, בסופו של קוד, החלק החשוב (שבו נתמקד היום) היה קובץ שנקרא app.component.ts שבו כתבנו את הקוד הבא: Code Snippet import { Component } from '@angular/core'; @Component({    selector: 'my-app',    template: '<h1>My First Angular App</h1>'})export class AppComponent { } המאפיין selector גורם לכך שכאשר בדף ה – html יהיה את התוכן <my-app> ייכנס במקומו התוכן שמוגדר על ה – template, ויווצר מופע של המחלקה AppComponent.   בפרק היום נלמד על הדברים הבאים: נראה כיצד...
3 תגובות

מדריך אנגולר 2, פרק 1 – התחלת העבודה

יום ראשון, ספטמבר 25, 2016

לתוכן העניינים.   בפרק זה נלמד על הדברים הבאים: כמה מילים על סביבת העבודה (IDE) הסבר על שפת הפיתוח (Type script) יצירת פרויקט ראשון (Hello World) הוספת הקבצים הרלוונטיים. (עם טיפה הסבר על כל אחד מהם) הסבר על החלקים המינימליים ביותר שצריך לכתוב. הרצת הפרויקט   כמה מילים על סביבת העבודה בדרך כלל אני עובד עם Visual Studio 2015, בהקשר זה חשוב לציין, שנכון להיום - עבודה עם Visual Studio קצת פחות נוחה (אני מאמין שבהמשך הם יפתרו את כל הבעיות), אז כרגע לפעמים אני עובד עם Web Storm.   הסבר על...
5 תגובות

אנגולר 2, הקדמה ותוכן העניינים

ממש לאחרונה יצאה גרסה סופית של angular2, וכנראה שהגיע הזמן הנכון לכתוב סדרת פוסטים אודות הספרייה. יש הרבה מאוד מה לכתוב, אבל בסדרה הזאת אני אלך עם המדריך הרשמי שלהם (מה שהם קוראים לזה “TOUR OF HEROES”), אני אציג בפרקים הבאים כיצד עובדים עם המנגנון, ונלמד אודות תכונות חשובות של הספרייה, בהמשך ייתכן שאכתוב סדרת המשך על נושאים מתקדמים יותר בספרייה. שוב חשוב לציין, המדריך הנוכחי הינו סוג של “תרגום” למדריך הרשמי שלהם עם קצת תוספות משל עצמי.   מטרת המדריך היא, שבסוף שבעת הפרקים, תוכלו להתחיל לעבוד עם הספרייה ולהקים מערכות אינטרנטיות המבוססות על ספריה זו, כמובן שיהיה לכם הרבה דברים נוספים...
7 תגובות

jQuery ui datepicker directive for angular with typescript

יום רביעי, מאי 11, 2016

לאחרונה כתבתי מערכת מבוססת אנגולר עם typescript, והייתי צריך להטמיע jquery ui datepicker, כדי לעשות זאת כתבתי directive קטן שיעזור לבצע את העבודה. אני אציג כאן את שני הגרסאות של הקוד, אחד באנגולר רגיל והשני בעטיפה ל – typescript   אנגולר Code Snippet function datePickerUi() {    return {        restrict: 'A',        require: 'ngModel',        link: function (scope, element, attrs, ngModelCtrl) {            element.datepicker({                isRTL: true,                dateFormat: 'dd/mm/yy',                onSelect: function (date) {                    scope.$apply(function () {                        ngModelCtrl.$setViewValue(date);                    });                }            });            ngModelCtrl.$render = function () {                element.datepicker('setDate', ngModelCtrl.$modelValue);            };            element.datepicker('option', $.datepicker.regional);        }    }} החלק הראשון במתודת ה – link, מטפל ביצירת האלמנט ל...
תגובה אחת

dblclick on kendo grid with angular

יום שלישי, מאי 12, 2015

אחד מהספריות החביבות עלי זהו Kendo, יש להם כיום תמיכה מלאה באנגולר, אבל לצערי דוקמנטצייה חסרה עבור אנגולר. לאחרונה התבקשתי לכתוב directive של אירוע dblclick עבור כל הגרידים של Kendo. השימוש ב – html יראה משהו בסגנון הזה: Code Snippet <div kendo-grid="grid"         my-dbl-click="testFunc"         k-options="gridOPtions"></div>   הפוקנציה ב – controller, תהיה פשוטה, ואמורה לקבל את האובייקט המקושר לשורה שעליה לחצו dblclick. Code Snippet $scope.testFunc = function (item) {    console.log(item);};   הקוד היותר מורכב יהיה ה – directive עצמו כמובן. Code Snippet app.directive('myDblClick', function () {    return {        link: function (scope, elem, attrs)...
תגיות: , , ,
אין תגובות

bootstrap-combobox-angular

יום שני, פברואר 2, 2015

בפוסט בעבר כתבתי על שימוש על שימוש ב – bootstrap-combo, יחד עם אנגולר, בפוסט שם לא רציתי ליצור directive מיוחד, אבל בסופו של דבר החלטתי כן ליצור אותו, ולמעשה הקוד הוא די פשוט. (לינק להורדה) בבואנו ליצור directive שעוטף control כלשהו, עלינו לוודא כמה דברים: בטעינה הראשונית להפוך אותו לפקד המתאים שלנו (לרוב באנגולר נעבוד ב – SPA, כך שלא מתאים לכתוב קוד ב – document.ready). עדכון המודל שלנו כשהפקד משתנה. עדכון הפקד כשהמודל משתנה. במקרה של פקד עם מקור מידע (כמו בדוגמא שלנו – קומבו) צריך גם לשמור על סנכרון הפקד במידה והרשימה השתנתה....
אין תגובות

Authentication and Ajax

יום חמישי, ינואר 22, 2015

לקוח תיאר לי את הבעייה הבאה, “יש לי אתר שעובד ב – forms authentication, וה – timeout מוגדר עשרים דקות (ברירת המחדל היא 30), כמובן שבצורה אוטומטית ברגע שהמשתמש לוחץ על לחצן הפונה לשרת, לאחר שהזמן תם, הוא מועבר לדף הלוגין. לאחרונה עברנו לעבודה עם ajax, תוך שימוש ב – angular ו – singal page application, מה שקורה שברגע שהמשתמש לוחץ על לחצן (שעכשיו עושה פניית ajax) במידה שעברו ה – 20 דקות, התשובה מהשרת היא דף ה – html של הלוגין – אבל המשתמש לא רואה כלום, מכיוון שלא חזרה תשובת אין הרשאות לדפדפן” הבעייה שלו היא די...
תגיות: , , , ,
אין תגובות

AngularJS – todolist

יום שני, דצמבר 22, 2014

בפוסט זה נלמד מספר דברים בסייסים על עבודה עם אנגולר,  הפוסט יציג דוגמה לניהול רשימת משימות (todo list) עם היכולות הבאות: רשימת המשימות תגיע ב – ajax מהשרת. כל משימה יש לה טקסט והאם היא בוצעה. ניתן להוסיף משימות חדשות. ניתן לסמן האם המשימה בוצעה או לא. ניתן להסתיר את המשימות שבוצעו. המשימות יהיו מסודרים ברשימה ממויינת. הדמו עצמו נלקח חלקית מהאתר של angular וברובו מתוך הספר (המדהים) Pro AngularJS. חשוב לציין העיצוב בדוגמאות הבאות מבוססות Bootstrap, ואני לא מסביר אותם במהלך הפוסט. ניתן להוריד את הדוגמה המלאה מכאן, (צד השרת מבוסס ASP.NET...
4 תגובות