الحصول على عنوان IP للعميل في تطبيق Angular بأربع خطوات
من السهل جدًا أن يكون لديك عنوان عميلنا في تطبيق Angular. مع وجود العديد من المصادر المفتوحة ، تقوم عناوين API بإرجاع عنوان IP للعميل مباشرة كطلب عميل من متصفحه الخاص إلى واجهة برمجة التطبيقات.
في هذه المقالة ، سأستخدم هذا API لعنوان IP للعميل في JSON.
excel عدم حفظ التنسيق
أولاً ، عليك إنشاء تطبيق Angular باستخدام Angular CLI.
الخطوة 1
أضف خدمة زاوية جديدة في تطبيقك باستخدام CLI بالأمر التالي:
من g خدمة IpService
بعد هذا الأمر ، يجب أن يكون لديك ملفان جديدان في مصدر تطبيق Angular.
انتقل إلى مستكشف المجلدات وتحقق من الملفات الجديدة.
الخطوة 2
افتح الآن ملف app.module.ts واستورد HttpClientModule من @ angular / common / http بحيث يمكنك العمل مع خدمات http: // واستدعاء API.
import { HttpClientModule } from '@angular/common/http'; imports: [ ...,HttpClientModule ] افتح ملف الخدمة الخاص بك واستخدم الكود التالي:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class IpServiceService { constructor(private http:HttpClient) { } public getIPAddress() { return this.http.get('http://api.ipify.org/?format=json'); } } هنا في هذا الكود ، قمنا أولاً باستيراد HttpClient من @ angular / common / http وقمنا بحقن تبعية في مُنشئ الخدمة. أخيرًا ، أنشأنا دالة باسم getIPAddress () من حيث سنعيد Observable من هنا .
ورقة مقص أتش تي أم أل الصخور
الخطوه 3
افتح الآن ملف المكون الخاص بك كما فعلت في app.component.ts الخاص بي. أولاً ، قم باستيراد كائن الخدمة وضخه في مُنشئ المكون واشترك في وظيفة getIpAddress () من خدمتك في متغير محلي ، كما في الكود التالي:
import { Component, OnInit } from '@angular/core'; import { IpServiceService } from './ip-service.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private ip:IpServiceService){} title = 'DemoApp'; ipAddress:string; ngOnInit() { this.getIP(); } getIP() { this.ip.getIPAddress().subscribe((res:any)=>{ this.ipAddress=res.ip; }); } } أخيرًا ، افتح app.component.html وحاول طباعة هذا المتغير باستخدام أقواس الاستيفاء.
Your IP Address : {{ipAddress}}
الخطوة 4
قم بتقديم تطبيقك الزاوي وافتحه في متصفحك للتحقق من عنوان IP ، لذا افتح Terminal في رمز Visual Studio واكتب الأمر:
مكان شراء عملة apl
Ng يخدم - مفتوح
قد تحصل على الإخراج كما هو موضح أدناه:
هذا هو عنوان IP الخاص بالعميل ، آمل أن تكون قد استمتعت به!
شكرا لقرائتك!
# مستطيل # عنوان #json