אנגולר4 - כללי.

שיווקי · 25/10/17

אנגולר4 - כללי.

אני כותב באנגולר4. למדתי את הכלי, אך לא מספיק כשרוצים לעצב משהו יפה.

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

ראו הודעתי:
אנגולר - datatable

למשל, אני רוצה להוסיף grid מעוצב, שיהיה אפשר לבצע עליו paging, מיון, וחיפוש.
לא היה ברור לי, לפי הדוגמאות באינטרנט, אם אני צריך להוסיף בקוד של האנגולר גם את ה-javascript של ה-jquery, ולמה בכלל לכל דבר צריך התקנה (זה בסך הכל jquery ו-bootstrap שאפשר לבצע להם link בקוד html פשוט, רק שבאנגולר - לא ברור איפה זה נמצא).

אשמח לאיזו הכוונה, לכתוב משהו פשוט (אבל בעיצוב יפה). מה ה-best practice שממליצים לכתוב באנגולר.

תודה.

שיווקי · 25/10/17

ניסית משהו כזה - להוסיף איזה רכיב פשוט ומובנה של jquery.

בגוף ה-html כתבתי:

קוד:

 <div id="testslide">
  </div>

ובקוד של ה-ts של ה-component:

קוד:

export class AboutComponent implements OnInit, AfterViewInit {
  ngAfterViewInit(): void {
    $('#testSlide').slider();
  }

אך כשאני פותח את דף ה-html אני מקבל הודעת שגיאה:

קוד:

__WEBPACK_IMPORTED_MODULE_2_jquery_dist_jquery_min_js__(...).slider is not a function
    at AboutComponent.webpackJsonp

slider כאחד הדברים הבסיסיים ב-jquery. לא ברור מה לא תקין (ביצעתי התקנה):

קוד:

npm install jquery –save
npm install datatables –save
npm install datatables.net --save
npm install angular-datatables –save
npm install @types/jquery –save-dev
npm install @types/datatables.net –save-dev

וב-angular-cli.json הוספתי:

קוד:

"apps": {
...
   "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/datatables/media/css/jquery.dataTables.min.css"       
      ],
      "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
         "../node_modules/datatables/media/js/jquery.dataTables.min.js"       
      ],
...

משום מה (לא יודע אם קשור, יש סימון של שורה מחוקה לאחר הנ"ל (בדיוק איפה שה-... בסוף. משולש אדום ב-ide).

שמתי לב שהעיצובים של bootstrap לא נמחקים (כמו jumbotron), גם אם אני כותב סתם משהו ב-angular-cli.json (כאילו התוכנה לא מתייחסת כלל לשינויים בקוד).
למשל:

קוד:

"apps": {
...
   "styles": [
        "styles.css",
        "../bla_bla_bla*node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../bla_bla_node_modules/datatables/media/css/jquery.dataTables.min.css"       
      ],
      "scripts": [
         "../bla_bla_node_modules/jquery/dist/jquery.min.js",
         "../bla_bla_node_modules/bootstrap/dist/js/bootstrap.min.js",
         "../bla_bla_node_modules/datatables/media/js/jquery.dataTables.min.js"       
      ],
... 
הוספתי סתם
bla_bla
בקוד
לא ממש שינה משהו

תודה.

selalerer · 26/10/17

זה נראה רלוונטי:

https://stackoverflow.com/questions...uery-slider-is-not-a-function-using-component
&nbsp

שיווקי · 31/10/17

לא ממש הצלחתי.

אני עבדתי לא מעט עם jquery באופן נאטיבי (script ב-notepad - משהו פשוט. ללא שימוש באנגולר).

ידוע לי גם שהתקנה של jquery היא מספיקה (זה כולל כבר את כל הרכיבים של ה-ui), כפי שניתן לראות באתר: [URL]https://jqueryui.com[/URL] .

slider זה רק דוגמה בסיסית.

בהתייחס לשיטה, אני צריך לכתוב באנגולר 4, עם פקודות שונות לשליטה על הקוד של ה-jquery.
למשל, הדוגמה של ה-slider, היא בסך הכל משהו כזה:

קוד:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="[URL]https://code.jquery.com/jquery-1.12.4.js[/URL]"></script>
  <script src="[URL]https://code.jquery.com/ui/1.12.1/jquery-ui.js[/URL]"></script>
  <script>
  $( function() {
    $( "#slider" ).slider();
  } );
  </script>
</head>
<body>
 
<div id="slider"></div>
 
 
</body>
</html>

באנגולר (גירסה 4) איך כותב את ה-script הפנימי:

קוד:

  $( function() {
    $( "#slider" ).slider();
  } );

מה שראיתי, שכדי לשים את הנ"ל, צריך להוסיף שורת קוד:
var jQuery: JQueryStatic;
אך אני מקבל את השגיאה:
Cannot find name 'JQueryStatic'.

לכן, בחיפוש נוסף ראיתי שאפשר להוסיף שורה:
import * as $ from 'jquery/dist/jquery.min.js';
וכן:

קוד:

export class showTable implements AfterViewInit {
  ngAfterViewInit() {
    alert("bbb");
    $( function() {
       $( "#slider" ).slider();
    } );
  }
}

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

בכל מקרה, דוגמה הכי בסיסית ל-slider (למשל) עם האימלמנטציה בדומה לנ"ל היתה עוזרת לי מאוד, כולל הכתיבה של ה-javascript.

תודה.

שיווקי · 1/11/17

הנושא פתור - פתרתי בשיטה קצת שונה...

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

מסתבר שהשיטה לא ממש יציבה.
השימוש הוא: "../node_modules/jquery-ui/ui/widgets/slider.js" שדורש את ה-widget.js ואת ה-core.js (ו-core.js פשוט עף על:
ERROR ReferenceError: $ is not defined), ולא ממש אפשר להשתמש ברכיבים.
על כן פשוט השתמשתי ישירות ברכיבים בשיטה הסטנדרטית והוספתי ב-angular-cli.json בקטעים של scripts ו-styles את הספריות המתאימות:
jquery-ui-1.12.1.custom

דרך להשתמש ב-$ וב-jquery זה פשוט להוסיף שורות:

קוד:

import { Component, OnInit, ElementRef, AfterViewInit} from '@angular/core';
...
declare var jquery:any;
declare var $ :any;
...
  ngAfterViewInit(): void {
    //jQuery(this.elementRef.nativeElement).find("#slider").slider()
    alert("bbb");
    $("#sliderTest").slider();
  }

רק צריך להריץ ng build.

בכל מקרה,
תודה בכל אופן.

הבעייה פתורה כבר.

אנגולר4 - כללי.

שיווקי

New member

שיווקי

New member

selalerer

New member

שיווקי

New member

שיווקי

New member