Github पर Angular का उपयोग करके उपयोगकर्ता खोज कैसे करें

• प्रतिक्रिया + RxJS 6 + पुनर्प्राप्ति का उपयोग करके GitHub पर उपयोगकर्ता खोजें कैसे करें ,
• प्रतिक्रिया + RxJS 6 + पुनर्प्राप्ति के बिना GitHub पर उपयोगकर्ता खोज कैसे करें ,
• वेनिलाजेएस का उपयोग करके जीथब पर उपयोगकर्ता खोज कैसे करें ।

• दिखाएँ कि आप जल्दी से कोणीय पर एक साधारण आवेदन लिख सकते हैं, हालांकि यह इसका मुख्य शौक नहीं है,
• कोणीय पर आवेदन के फायदे दिखाएं।

• एक और होलीवर का जलाना।

ट्रेनिंग

npm install -g @angular/cli 

 ng new github-ui cd github-ui 

 ng generate component components/user ng generate component components/error ng generate service services/github 

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClient } from '@angular/common/http'; import { AppComponent } from './app.component'; import { UserComponent } from './components/user/user.component'; import { ErrorComponent } from './components/error/error.component'; import { GithubService } from './services/github.service'; @NgModule({ declarations: [AppComponent, UserComponent, ErrorComponent], imports: [BrowserModule, ReactiveFormsModule, HttpClient], providers: [GithubService], bootstrap: [AppComponent] }) export class AppModule {} 

डेटा मॉडल

• आवेदन के साथ काम करते समय सुविधाजनक स्वत: पूर्ण,
• संकलन चरण में टाइपिंग,
• अन्य डेवलपर्स यह समझते हैं कि वे किस डेटा के साथ काम कर रहे हैं।

 export class User { login: string; id: number; node_id: string; avatar_url: string; gravatar_id: string; url: string; html_url: string; followers_url: string; following_url: string; gists_url: string; starred_url: string; subscriptions_url: string; organizations_url: string; repos_url: string; events_url: string; received_events_url: string; type: string; site_admin: boolean; name: string; company: string; blog: string; location: string; email: string; hireable: string; bio: string; public_repos: number; public_gists: number; followers: number; following: number; created_at: string; updated_at: string; } 

डेटा प्राप्त करने के लिए सेवा

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { User } from '../models/user.model'; @Injectable() export class GithubService { //      http constructor(private http: HttpClient) {} //     getUser(name: string): Observable<User> { const url = `https://api.github.com/users/${name}`; return this.http.get<User>(url); } } 

उपयोगकर्ता खोज

 <div class="container" [class.ready]="!!user"> <input [formControl]="findControl" placeholder="GitHub username" /> <app-user *ngIf="user" [user]="user"></app-user> <app-error *ngIf="error"></app-error> </div> 

 import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { GithubService } from './services/github.service'; import { User } from './models/user.model'; import { filter, switchMap, debounceTime, catchError } from 'rxjs/operators'; import { EMPTY } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { //     findControl = new FormControl(); //   error: boolean = false; //   user: User = null; //  githubService    constructor(private githubService: GithubService) {} //    ngOnInit() { this.findControl.valueChanges .pipe( //       filter(value => value.length > 2), //     debounceTime(1000), //    switchMap(value => this.githubService.getUser(value).pipe( //   catchError(err => { this.user = null; this.error = true; return EMPTY; }) ) ) ) //   .subscribe(user => { this.user = user; this.error = false; }); } } 

अन्य घटक

 <div class="github-card user-card"> <div class="header User"></div> <a class="avatar" [href]="'https://github.com/'+user.login"> <img [src]="user.avatar_url+'&s=80'" [alt]="user.name" /> </a> <div class="content"> <h1>{{user.name}}</h1> <ul class="status"> <li> <a [href]="'https://github.com/'+user.login+'?tab=repositories'"> <strong>{{user.public_repos}}</strong>Repos </a> </li> <li> <a [href]="'https://gist.github.com/'+user.login"> <strong>{{user.public_gists}}</strong>Gists </a> </li> <li> <a [href]="'https://github.com/'+user.login+'/followers'"> <strong>{{user.followers}}</strong>Followers </a> </li> </ul> </div> </div> 

 import { Component, Input, ChangeDetectionStrategy } from '@angular/core'; import { User } from '../../models/user.model'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class UserComponent { @Input() user: User; } 

 <div class="error"> <h2>Oops!</h2> <b> User not found. </b> <p>Please try searching again.</p> </div> 

 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-error', templateUrl: './error.component.html', styleUrls: ['./error.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ErrorComponent {} 

कोणीय का उपयोग करने का नियम

• उनके साथ काम करने से डाटा अधिग्रहण को अलग करना,
• टेम्पलेट को तर्क से अलग करना,
• स्पष्ट और समझने योग्य स्केलेबल संरचना,
• रूपों और सर्वर के साथ काम करने के लिए अंतर्निहित मॉड्यूल,
• अतुल्यकालिक ऑपरेशन के लिए अंतर्निहित RxJs,
• मजबूत टाइपिंग, संकलन त्रुटियों की जाँच।

स्रोत कोड

निष्कर्ष