שילוב של mysql ב-grid ב-angular4.

[שיווקי]

שילוב של mysql ב-grid ב-angular4.

היי,
אני מעוניין לקרוא בקוד angular4 נתונים מ-mysql ולשים אותם ב-grid.

איך אני מבצע את הנ"ל?
אשמח לדוגמת קוד.

תודה.

 

[nocgod]

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

בונה restAPI שחושף את המידע שאתה צריך מהבסיס נתונים
פונה אליו ב HTTP מה client side שלך

 

[שיווקי]

אפשר דרך ה-node js?

זה חייב להיות דרך web api?
אי אפשר דרך ה-node js? זה נראה לי עדיף (אנגולר4 ו-node js עובדים ביחד).

אם אפשר דרך ה-node js - רציתי לראות דוגמה לכך.

תודה.

 

[nocgod]

מה זאת אומרת עובדים ביחד? קרטל?

Angular רץ אצל הלקוח בדפדפן, אומנם אתה משתמש בכלים כמו nodejs ו npm ובשפת typescript כדי לכתוב את הקוד שלו, בסופו של יום הוא מתקמפל (עובר transpilation) ל JS שמבין הדפדפן ורץ אצל הלקוח בדפדפן. קריא - מהדפדפן של הלקוח לא אמורה להיות גישה לבסיס נתונים שלך כי זה אומר שהמפתחות לבסיס נתונים גם נמצאים אצל הלקוחות.

אתה לא חייב לכתוב webapi (כאילו asp.net) אתה יכול לכתוב גם בPHP, או ב nodeJS+express או ב ruby on rails או בגדול כל פריימוורק MVC שיהווה את התיווך בין הבסיס נתונים שלך לבין הצד לקוח בדמות restful api.

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

 

[שיווקי]

אז מה זה ה-ng serve?

ng serve - אני משתמש לצורך עבודה תקינה עם אנגולר.

מרים שרת node server.js - האין זו גם אפשרות לעבוד עם node.js (שמהווה סקריפט בשרת בדומה ל-php ודומייו)?

אם כבר הוא מרים שרת node js, מה הטעם שאני לא אנצל זאת, ואשתמש בשרת node js, במקום להרים php או כל אחד אחר (אז, ניכר שה-node js מיותר ... ולמה הוא בהכרח מותקן עם התקנה סטנדרטית של אנגולר. לא נראה שאפשר להסיר אותו ועדיין לעבוד תקין עם אנגולר).

אני התקנתי visual studio code לעבודה נוחה עם אנגולר.
כחלק מההתקנה זה גם התקנה של node js server, ואך ורק באמצעות כך אני יכול בכלל להריץ משהו באנגולר שיעבוד.

נראה שפשוט זה יכול להיות ajax שמחזיר json אחד גדול (עם ה-data), ואז אני מבצע, אך איפה בא לידי ביטוי יכולות הניצול של ה-mvc.

מה שביצעתי ב-html:

<table class="table table-striped">
  <tr>
    <th>
      Season
    </th>
    <th>
      Vacation
    </th>
  </tr>
  <tr *ngFor = "let item of allvalues | paginate: { itemsPerPage: 10, currentPage:p }">
    <td>
      {{item.Name}}
    </td>
    <td>
      {{item.Vacation}}
    </td>
  </tr>
</table>
<pagination-controls (pageChange)="p=$event"></pagination-controls>

ב-type-script:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { TestHttpServiceService } from '../test-http-service.service';

class SeasonClass
{
  Name: string;
  Vacation: boolean;
}

class AllSeasons {
  Seasons: SeasonClass[];
}

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css'],
  providers: [ TestHttpServiceService ]
})

export class AboutComponent implements OnInit {
  allvalues=[];
  AllSeasonsObj: AllSeasons;
  @Output() onSuggest: EventEmitter<string> = new EventEmitter();
//  Service 
  constructor(private _service: TestHttpServiceService) { }

  ngOnInit() {
    var str: string;
    this.onSuggest.subscribe((sub: string) => 
    {
     this.AllSeasonsObj =  JSON.parse(sub) as AllSeasons;
     this.allvalues = this.AllSeasonsObj.Seasons;
    });
    this._service.GetTestStr(this.onSuggest);
  }
}

וכן ב-test (ה-service):

import { Injectable, Output, EventEmitter } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class TestHttpServiceService {

  constructor(private _http: Http) { }

 public GetTestStr(ev: EventEmitter<string>) {
    var str: string;
    str = "xxx";
    setTimeout(function() {
    }, (1000));
    
    this._http.get("assets/testxx.json").subscribe((sub) =>
      {
        // str = JSON.stringify(sub.text());
        str = sub.text();
        console.log(str);
        ev.emit(str);
      }
    );
  }
}

ב-service אני אקרא לקוד אחר (למשל במקום http.get וכו', אוכל לקרוא ל-rest api שמחזיר json אחד גדול ולתרגם אותו, ואני יכול גם קוד של ajax - זה מוכר, וזה לא העניין העיקרי.
אך נראה שה-angular קצת יותר מסודר מהנ"ל, ואני לא ראיתי משהו של node.js שקורא ל-mysql (אם כך, למה ה-ng serve, אם אני בכלל אשתמש ב-ruby או ב-python. השמיים הם הגבול).

בקיצור - מהי הדרך המקובלת לבצע התנהגות שרתית בעבודה עם angular גירסה 4 (והכי חשוב!!! לא 1, ששונה מהותית מ-2 ומ-4)?