الحصول على عنوان IP للعميل في تطبيق Angular بأربع خطوات

مدونة او مذكرة

الحصول على عنوان 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