إرسال البيانات من الخادم الخلفي NestJs إلى الخادم الأمامي Angular ثم استخدامها في الواجهة
تثبيت Angular :
npm install -g @angular/cli
الأوامر الهامة في Angular :
ملف خدمة مثالي في الواجهة الأمامية:
ملف مثالي لـ users.service.ts -
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { users } from '../models/users.model';
@Injectable({
providedIn: 'root'
})
export class UsersService {
backEndURL: string;
list: users[] = [];
oneItem: users;
constructor(private http: HttpClient) {
this.backEndURL = this.getBackEndUrl();
}
//Get
getAllUsers(): Observable<any> {
return this.http.get(`${this.backEndURL}/users`);
}
//Get
getOnceUser(id:number): Observable<any> {
return this.http.get(`${this.backEndURL}/users/`+ id);
}
//Post
postItem(item: users) {
return this.http.post(`${this.backEndURL}/users`, item).subscribe(data => {
alert("لقد تمت إضافة العنصر الجديد بنجاح");
},
(error: HttpErrorResponse) => {
alert("هناك مشكلة أدّت إلى عدم إضافة العنصر");
}
);
}
updateItem(id:number,item: users) {
return this.http.post(`${this.backEndURL}/users/${id}/update`, item).subscribe(data => {
alert("لقد تم تعديل العنصر بنجاح");
},
(error: HttpErrorResponse) => {
alert("هناك مشكلة أدّت إلى عدم تعديل العنصر");
}
);
}
deleteItem(id:number,item: users) {
return this.http.post(`${this.backEndURL}/users/${id}/delete`, item).subscribe(data => {
alert("لقد تم حذف العنصر بنجاح");
},
(error: HttpErrorResponse) => {
alert("هناك مشكلة أدّت إلى عدم حذف العنصر");
}
);
}
getBackEndUrl(): string {
const segements = document.URL.split('/');
const reggie = new RegExp(/localhost/);
return reggie.test(segements[2]) ? 'http://localhost:3000' : 'https://nestjs-typeorm-postgres.herokuapp.com';
}
}
ملف model.ts مثالي:
import { Injectable, Input } from "@angular/core";
import { Expose } from "class-transformer";
import { Branch } from "./branch.model";
import { JobTitles } from "./job-titles.model";
import { rolesPermission } from "./roles-permission.model";
import { sex } from "./sex.model";
import { statuses } from "./statuses.model";
@Input()
export class users {
id: number;
username: string;
email: string;
password: string;
mobile?: string;
phone_no?: string;
fax_no?: string;
ar_address?: string;
en_address?: string;
website?: string;
birth_date?: string;
emp_id: string;
//ar_name
ar_first_name: string
ar_middle_name?: string;
ar_last_name: string;
ar_full_name: string;//Getter
//en_name
en_first_name: string;
en_middle_name?: string;
en_last_name: string;
en_full_name?: string;
//End
last_login?: Date = new Date();
work_loc?: Branch;
reg_date?: Date = new Date();
last_update: Date = new Date();
is_active: boolean;
ar_status?: string;
en_status?: string;
role: rolesPermission;//this is foreign key
job_title_id?: JobTitles;//this is foreign key
gender?: sex;//this is foreign key
modified_by?: users;
created_by?: users;
}
-----------------------------------------------------------
طريقة استدعاء القيم:
import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/services/users.service';
@Component({
selector: 'app-about-me',
templateUrl: './about-me.component.html',
styleUrls: ['./about-me.component.scss']
})
export class AboutMeComponent implements OnInit {
public users: any;
public user: any;
constructor(public usersService: UsersService) { }
ngOnInit(): void {
//استدعاء العديد من المستخدمين
this.usersService.getAllUsers().subscribe((res: any) => {
this.users = res;
})
//استدعاء مستخدم واحد
this.usersService.getOnceUser(5).subscribe((res: any) => {
this.user = res;
})
}
}
-----------------------------------------------------------
يجب تحديث ملف الـ app.module.ts ليكون بهذا الشكل:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AboutMeComponent } from 'src/about-me/about-me.component';
import { MatCardModule } from '@angular/material/card';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
AboutMeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatCardModule,
HttpClientModule
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
محتوى ملف الـ .gitignore الخاص بملفات Angular
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
المشاكل والحلول:
المشكلة: Property 'users' has no initializer and is not definitely assigned in the constructor.
الحل:
Just go to tsconfig.json and set
"strictPropertyInitialization": false
to get rid of the compilation error.
Otherwise you need to initialize all your variables which is a little bit annoying
المشكلة: vendor.js:44530 ERROR NullInjectorError: R3InjectorError(AppModule)[UsersService -> HttpClient -> HttpClient -> HttpClient]:
إعداد:
م. عبدالله السالم
تعليقات
إرسال تعليق