אנגולר, מבוא לאנגולר

הקבצים של אנגולר

איך עובדת מערכת הקבצים של אנגולר?

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

קובץ התבנית

קובץ התבנית מכיל את דף ה-HTML של התוכנית. שם הקובץ יהיה במבנה של: comp_name.component.html.

בקובץ התבנית יהיה כל הקוד של התצוגה למשתמש. למשל הקוד הבא:

<label>Enter English</label>
<input class="input" (input)="text=$event.target.value" />
<button class="button" (click)="submit()">Translate</button>

<h1>{{ TranslatedText }}</h1>

קובץ הקוד

הקובץ שמכיל את ההיגיון של התוכנית, הקוד שמעבד את מה שאנחנו מקבלים מהמשתמש ושולח את המידע לדף התצוגה. שם הקובץ יהיה במבנה של: comp_name.component.ts.

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

import { Component } from "@angular/core";
import { TranslateService } from "./translate.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  text: string;
  translatedText: any;

  constructor(private translateService: TranslateService) {}

  submit() {
    this.translateService.translate(this.text).subscribe((result) => {
      this.translatedText = result;
    });
  }
}

קובץ Service

הקובץ שבו אנחנו מבצעים פעולות מול DB, מושכים מידע ממקורות שונים, מעבירים מידע בין קומפוננטות ועוד. מבנה הקובץ הוא: service_name.service.ts.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TranslateService {
  url = 'https://translation.googleapis.com/language/translate/v2?key=AIzaSyCf0Xy0OnhxlduyEt3K8zP-sOuu-l_u6uA';

  constructor(private http: HttpClient) { }

  translate(text: string) {
    return this.http.post(this.url, {
      "q": text,
      "target": "es"
    }).pipe(
      map((res: any) => {
        return res.data.translations[0].translatedText;
      })
    );
  }
}