కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి

సమస్యలను తొలగించడానికి మా పరికరాన్ని ప్రయత్నించండి

CRUD (క్రియేట్, రీడ్, అప్‌డేట్, డిలీట్) కోణీయ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోవడంపై కోణీయ 9 దశల వారీ ట్యుటోరియల్. మేము అవసరమైన డేటాను, కేస్ డేటాను పోస్ట్ చేసి, కేసు మార్పులను, కేసు డేటాను తొలగించి, బార్-చార్ట్‌లుగా ప్రదర్శించే గణాంక డేటాను పొందుతున్న REST API ని ఉపయోగించే ఒక కోణీయ యాప్‌ని సృష్టిస్తాము. కాబట్టి, REST API ని యాక్సెస్ చేయడానికి HTTPClient ని ఎలా ఉపయోగించాలో, కోణీయ మెటీరియల్‌తో కోణీయ ఫారమ్‌ని ఉపయోగించి, రూటింగ్ మరియు నావిగేషన్ ఉపయోగించి, మరియు Ng2Charts మరియు Chart.js ఉపయోగించి బార్ చార్ట్‌లను ప్రదర్శించడం నేర్చుకుంటాము.

ఈ ట్యుటోరియల్ అనేక దశలుగా విభజించబడింది:

  • దశ #1. కొత్త కోణీయ 9 యాప్‌ని సృష్టించండి
  • దశ #2. కోణీయ 9 రూటింగ్ మరియు నావిగేషన్ జోడించండి
  • దశ #3. కోణీయ 9 సేవను జోడించండి
  • దశ #4. కోణీయ మెటీరియల్ ఉపయోగించి డేటా యొక్క ప్రదర్శన జాబితా
  • దశ #5. కోణీయ మెటీరియల్ ఉపయోగించి డేటా వివరాలను చూపించు మరియు తొలగించండి
  • దశ #6. Ng2Charts మరియు Chart.js ఉపయోగించి గణాంకాలను చూపు
  • దశ #7. కోణీయ మెటీరియల్ ఫారమ్ ఉపయోగించి డేటాను జోడించండి
  • దశ #8. కోణీయ మెటీరియల్ ఫారమ్ ఉపయోగించి డేటాను సవరించండి
  • దశ #9. కోణీయ 9 కరోనావైరస్ కేసుల అనువర్తనాన్ని అమలు చేయండి మరియు పరీక్షించండి

చివరికి, చివరి కోణీయ 9 కరోనావైరస్ కేసుల యాప్ ఇలా కనిపిస్తుంది.

మోనాకోయిన్‌ను ఎలా కొనుగోలు చేయాలి

కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి - జాబితా
కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి - చార్ట్‌లు
కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి - వివరాలు
కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి - జోడించండి
కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి - సవరించండి



ఈ ట్యుటోరియల్ కోసం కింది టూల్స్, ఫ్రేమ్‌వర్క్‌లు మరియు మాడ్యూల్స్ అవసరం:

  1. Node.js (సిఫార్సు చేసిన వెర్షన్)
  2. కోణీయ 9
  3. కరోనావైరస్ REST API
  4. టెర్మినల్ (Mac/Linux) లేదా నోడ్ కమాండ్ లైన్ (Windows)
  5. IDE లేదా టెక్స్ట్ ఎడిటర్ (మేము విజువల్ స్టూడియో కోడ్ ఉపయోగిస్తున్నాము)

పాలిక్లినిక్ రిజర్వేషన్ కోసం మేము ఇప్పటికే REST API ని అందించాము, మీరు క్లోన్ చేయవచ్చు, NPM ని ఇన్‌స్టాల్ చేయవచ్చు, మొంగోడిబి సర్వర్‌ను అమలు చేయవచ్చు మరియు ఎక్స్‌ప్రెస్/మొంగోడిబి రెస్ట్ ఎపిఐ సర్వర్‌ను అమలు చేయవచ్చు. మీరు Node.js ని ఇన్‌స్టాల్ చేశారని మేము అనుకుంటాము. ఇప్పుడు, మేము Node.js మరియు NPM వెర్షన్‌లను తనిఖీ చేయాలి. టెర్మినల్ లేదా నోడ్ కమాండ్ లైన్ తెరిచి, ఆపై ఈ ఆదేశాలను టైప్ చేయండి.

node -v v10.15.1 npm -v 6.13.6

దశ #1. కొత్త కోణీయ 9 యాప్‌ని సృష్టించండి

మేము కోణీయ CLI ని ఉపయోగించి కొత్త కోణీయ 9 యాప్‌ను రూపొందిస్తాము. దాని కోసం, మేము @కోణీయ/క్లైని తాజా సంస్కరణకు ముందుగా ఇన్‌స్టాల్ చేయాలి లేదా అప్‌డేట్ చేయాలి.

sudo npm install -g @angular/cli

తరువాత, ఈ ఆదేశాన్ని అమలు చేయడం ద్వారా కొత్త కోణీయ 9 అనువర్తనాన్ని సృష్టించండి.

ng new coronavirus-cases

దిగువ ప్రశ్న మీకు వస్తే, | _+_ | ఎంచుకోండి మరియు | _+_ | (లేదా మీరు ఎంచుకోవడానికి ఇష్టపడేది).

Yes

తరువాత, కొత్తగా సృష్టించబడిన కోణీయ 9 ప్రాజెక్ట్ ఫోల్డర్‌కు వెళ్లండి.

SCSS

మీ IDE లేదా టెక్స్ట్ ఎడిటర్‌తో ఈ కోణీయ ప్రాజెక్ట్‌ను తెరవండి. VSCode ఉపయోగించడానికి ఈ ఆదేశాన్ని టైప్ చేయండి.

? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/ documentation/syntax#scss ]

కోణీయ 9 యాప్‌ను మొదటిసారి అమలు చేయడానికి ఈ ఆదేశాన్ని టైప్ చేయండి.

cd coronavirus-cases

– ఓపెన్ పారామీటర్‌ని ఉపయోగించడం ద్వారా డిఫాల్ట్ బ్రౌజర్‌లో ఈ యాంగ్యులర్ 9 యాప్ ఆటోమేటిక్‌గా ఓపెన్ అవుతుంది. ఇప్పుడు, కోణీయ ప్రారంభ అనువర్తనం ఇలా కనిపిస్తుంది.

కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి - ప్రారంభ పేజీ

దశ #2. కోణీయ 9 రూటింగ్ మరియు నావిగేషన్ జోడించండి

కోణీయ 9 యాప్‌ను సృష్టించే మొదటి దశలో మీరు చూసినట్లుగా. మేము ఇప్పటికే ఈ కోణీయ 9 యాప్ కోసం కోణీయ రూటింగ్‌ను జోడించాము. తరువాత, మేము ఈ కరోనావైరస్ కేసుల అనువర్తనం కోసం అవసరమైన కోణీయ భాగాలను జోడిస్తాము. వాటిని రూపొందించడానికి ఈ ఆదేశాలను టైప్ చేయండి.

code .

ఆ భాగాలు స్వయంచాలకంగా app.module.ts కి నమోదు చేయబడతాయి. తరువాత, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ఈ దిగుమతులను జోడించండి.

ng serve --open

పైన పేర్కొన్న భాగాల కోసం మార్గాన్ని కలిగి ఉన్న ప్రస్తుత రూట్‌ల స్థిరాంకానికి ఈ శ్రేణులను జోడించండి.

ng g component cases ng g component cases-details ng g component add-cases ng g component edit-cases ng g component cases-stat

తెరిచి సవరించండి | _+_ | మరియు మీరు ఇప్పటికే ఉన్న రౌటర్ అవుట్‌లెట్‌ను చూస్తారు. తరువాత, CRUD పేజీకి సరిపోయేలా ఈ HTML పేజీని సవరించండి.

src/app/app-routing.module.ts

తెరిచి సవరించండి | _+_ | అన్ని SASS కోడ్‌లను దీనితో భర్తీ చేయండి.

import { CasesComponent } from './cases/cases.component'; import { CasesDetailsComponent } from './cases-details/cases-details.component'; import { CasesStatComponent } from './cases-stat/cases-stat.component'; import { AddCasesComponent } from './add-cases/add-cases.component'; import { EditCasesComponent } from './edit-cases/edit-cases.component';

దశ #3. కోణీయ 9 సేవను జోడించండి

REST API కి ఆల్-యాక్సెస్ (POST, GET, PUT, DELETE) కోణీయ 9 సర్వీస్‌లో ఉంచబడుతుంది. పరిశీలించదగినది ద్వారా విడుదల చేయబడిన REST API నుండి ప్రతిస్పందన, అది సబ్‌స్క్రయిబ్ మరియు భాగాల నుండి చదవగలదు. REST API యాక్సెస్ కోసం ఒక సేవను సృష్టించే ముందు, ముందుగా, మేము ఇన్‌స్టాల్ చేయాలి లేదా నమోదు చేయాలి | _+_ |. తెరిచి సవరించండి | _+_ | అప్పుడు FormsModule, ReactiveFormsModule (@కోణీయ/రూపాలు) మరియు HttpClientModule (@కోణీయ/సాధారణ/http) దిగుమతులను జోడించండి.

const routes: Routes = [ { path: 'cases', component: CasesComponent, data: { title: 'List of Cases' } }, { path: 'cases-details/:id', component: CasesDetailsComponent, data: { title: 'Cases Details' } }, { path: 'cases-stat', component: CasesStatComponent, data: { title: 'Cases Statistic' } }, { path: 'add-cases', component: AddCasesComponent, data: { title: 'Add Cases' } }, { path: 'edit-cases/:id', component: EditCasesComponent, data: { title: 'Edit Cases' } }, { path: '', redirectTo: '/cases', pathMatch: 'full' } ];

దీనికి జోడించండి | _+_ | తర్వాత దిగుమతులు | _+_ |.

src/app/app.component.html

టైప్ చేసిన ఫలిత వస్తువును పొందడానికి మేము టైప్ స్పెసిఫైయర్‌ని ఉపయోగిస్తాము. దాని కోసం, కొత్త టైప్‌స్క్రిప్ట్ ఫైల్‌ను సృష్టించండి | _+_ | టైప్‌స్క్రిప్ట్ కోడ్‌ల యొక్క ఈ పంక్తులను జోడించండి.

మరియు కొత్త టైప్‌స్క్రిప్ట్ ఫైల్‌ను సృష్టించండి | _+_ | టైప్‌స్క్రిప్ట్ కోడ్‌ల యొక్క ఈ పంక్తులను జోడించండి.

src/app/app.component.scss

తరువాత, ఈ ఆదేశాన్ని టైప్ చేయడం ద్వారా కోణీయ 9 సేవను రూపొందించండి.

.container { padding: 20px; }

తరువాత, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ఈ దిగుమతులను జోడించండి.

HttpClientModule

| _+_ | ముందు ఈ స్థిరాంకాలను జోడించండి.

src/app/app.module.ts

| _+_ | ఇంజెక్ట్ చేయండి కన్స్ట్రక్టర్‌కు మాడ్యూల్.

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http';

పరిశీలించదగినదిగా కనిపించే ఎర్రర్ హ్యాండ్లర్ ఫంక్షన్‌ను జోడించండి.

@NgModule

అన్ని CRUD కోసం ఫంక్షన్‌లను జోడించండి (సృష్టించడం, చదవడం, అప్‌డేట్ చేయడం, తొలగించడం) కేసులు మరియు గణాంక డేటా యొక్క REST API కాల్.

BrowserModule

దశ #4. కోణీయ మెటీరియల్ ఉపయోగించి డేటా యొక్క ప్రదర్శన జాబితా

మేము కోణీయ మెటీరియల్ టేబుల్ ఉపయోగించి డేటా జాబితాను ప్రదర్శిస్తాము. API సేవ నుండి ప్రచురించబడిన డేటా కోణీయ 9 భాగంలో కేస్ మోడల్‌గా సబ్‌స్క్రైబ్ చేయడం ద్వారా చదవబడుతుంది. దాని కోసం, తెరవండి మరియు సవరించండి | _+_ | గతంలో సృష్టించిన API సేవ యొక్క దిగుమతిని జోడించండి.

imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, AppRoutingModule ],

తరువాత, API సేవను నిర్మాతకు ఇంజెక్ట్ చేయండి.

src/app/cases.ts

తరువాత, యూజర్ ఇంటర్‌ఫేస్ (UI) కోసం మేము కోణీయ మెటీరియల్ మరియు CDK ని ఉపయోగిస్తాము. టేబుల్ వంటి మెటీరియల్ కాంపోనెంట్‌ని ఒక కాంపోనెంట్‌గా జనరేట్ చేయడానికి CLI ఉంది, కానీ మేము టేబుల్ కాంపోనెంట్‌ను మొదటి నుండి ఇప్పటికే ఉన్న కాంపోనెంట్‌కి క్రియేట్ చేస్తాము లేదా యాడ్ చేస్తాము. కోణీయ మెటీరియల్ (@కోణీయ/మెటీరియల్) ఇన్‌స్టాల్ చేయడానికి ఈ ఆదేశాన్ని టైప్ చేయండి.

export class Cases { _id: string; name: string; gender: string; age: number; address: string; city: string; country: string; status: string; updated: Date; }

దిగువ ప్రశ్నలు ఉంటే, డిఫాల్ట్ మరియు అవును సమాధానం ఉపయోగించండి.

src/app/statistic.ts

మేము అవసరమైన అన్ని కోణీయ మెటీరియల్ భాగాలు లేదా మాడ్యూల్‌లను | _+_ | కు నమోదు చేస్తాము. ఆ ఫైల్‌ను తెరిచి, సవరించండి, ఆపై అవసరమైన కోణీయ మెటీరియల్ కాంపోనెంట్‌ల దిగుమతులను జోడించండి.

export class Statistic { _id: any; count: number; }

పై మాడ్యూల్‌లను | _+_ | కు నమోదు చేయండి దిగుమతులు.

ng g service api

తరువాత, తిరిగి | _+_ | అప్పుడు ఈ దిగుమతిని జోడించండి.

src/app/api.service.ts

కన్స్ట్రక్టర్ ముందు కోణీయ మెటీరియల్ టేబుల్ డేటా సోర్స్ యొక్క వేరియబుల్స్ ప్రకటించండి.

import { Observable, of, throwError } from 'rxjs'; import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; import { catchError, tap, map } from 'rxjs/operators'; import { Cases } from './cases'; import { Statistic } from './statistic';

| _+_ | సవరించండి కేసుల జాబితాను వెంటనే పొందడానికి ఫంక్షన్.

@Injectable

తరువాత, తెరవండి మరియు సవరించండి | _+_ | ఈ కోణీయ మెటీరియల్ ట్యాగ్‌లతో అన్ని HTML ట్యాగ్‌లను భర్తీ చేయండి.

const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'}) }; const apiUrl = '/api/';

చివరగా, కొద్దిగా UI సర్దుబాటు చేయడానికి, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ఈ CSS కోడ్‌లను జోడించండి.

HttpClient

దశ #5. కోణీయ మెటీరియల్ ఉపయోగించి డేటా వివరాలను చూపించు మరియు తొలగించండి

జాబితా పేజీలో, వివరాలు మరియు గణాంక పేజీకి నావిగేట్ చేయడానికి 2 బటన్లు ఉన్నాయి. వివరాల పేజీ కోసం, బటన్ చర్య ID పరామితిని కూడా పంపుతుంది. తరువాత, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు దిగుమతుల ఈ పంక్తులను జోడించండి.

constructor(private http: HttpClient) { }

కన్స్ట్రక్టర్‌కు పై మాడ్యూల్స్ ఇంజెక్ట్ చేయండి.

private handleError (operation = 'operation', result?: T) { return (error: any): Observable => { // TODO: send the error to remote logging infrastructure console.error(error); // log to console instead // Let the app keep running by returning an empty result. return of(result as T); }; }

API నుండి పొందిన కేసుల డేటాను కన్స్ట్రక్టర్ ముందు వేరియబుల్స్‌ని ప్రకటించండి.

getCases(): Observable { return this.http.get(`${apiUrl}`) .pipe( tap(cases => console.log('fetched cases')), catchError(this.handleError('getCases', [])) ); } getCasesById(id: string): Observable { const url = `${apiUrl}/${id}`; return this.http.get(url).pipe( tap(_ => console.log(`fetched cases id=${id}`)), catchError(this.handleError(`getCasesById id=${id}`)) ); } addCases(cases: Cases): Observable { return this.http.post(apiUrl, cases, httpOptions).pipe( tap((c: Cases) => console.log(`added product w/ id=${c._id}`)), catchError(this.handleError('addCases')) ); } updateCases(id: string, cases: Cases): Observable { const url = `${apiUrl}/${id}`; return this.http.put(url, cases, httpOptions).pipe( tap(_ => console.log(`updated cases id=${id}`)), catchError(this.handleError('updateCases')) ); } deleteCases(id: string): Observable { const url = `${apiUrl}/${id}`; return this.http.delete(url, httpOptions).pipe( tap(_ => console.log(`deleted cases id=${id}`)), catchError(this.handleError('deleteCases')) ); } getStatistic(status: string): Observable { const url = `${apiUrl}/daily/${status}`; return this.http.get(url).pipe( tap(_ => console.log(`fetched statistic status=${status}`)), catchError(this.handleError(`getStatistic status=${status}`)) ); }

API నుండి కేసుల డేటాను పొందడం కోసం ఒక ఫంక్షన్‌ను జోడించండి.

src/app/cases/cases.component.ts

భాగం ప్రారంభించినప్పుడు ఆ ఫంక్షన్‌కు కాల్ చేయండి.

import { ApiService } from '../api.service';

కేసును తొలగించడానికి ఈ ఫంక్షన్‌ను జోడించండి.

constructor(private api: ApiService) { }

వీక్షణ కోసం, తెరవండి మరియు సవరించండి | _+_ | దీనితో అన్ని HTML ట్యాగ్‌లను భర్తీ చేయండి.

ng add @angular/material

చివరగా, తెరవండి మరియు సవరించండి | _+_ | CSS కోడ్‌ల యొక్క ఈ పంక్తులను జోడించండి.

? Choose a prebuilt theme name, or 'custom' for a custom theme: Indigo/Pink [ Preview: http s://material.angular.io?theme=indigo-pink ] ? Set up global Angular Material typography styles? Yes ? Set up browser animations for Angular Material? Yes

దశ #6. Ng2Charts మరియు Chart.js ఉపయోగించి గణాంకాలను చూపు

కరోనావైరస్ కేసుల గణాంకాలను ప్రదర్శించడానికి మేము బార్ చార్ట్‌ను ఉపయోగిస్తాము. కాబట్టి, మేము ఈ ఆదేశాన్ని టైప్ చేయడం ద్వారా Ng2Charts మరియు Chart.js మాడ్యూల్‌లను ఇన్‌స్టాల్ చేయాలి.

src/app/app.module.ts

తరువాత, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ng2- చార్ట్‌ల దిగుమతిని జోడించండి.

import { MatInputModule } from '@angular/material/input'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSortModule } from '@angular/material/sort'; import { MatTableModule } from '@angular/material/table'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSliderModule } from '@angular/material/slider'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatSelectModule } from '@angular/material/select';

@NgModule దిగుమతులకు ఈ మాడ్యూల్‌ని జోడించండి.

@NgModule

తరువాత, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు chart.js చార్ట్ ఆప్షన్స్, చార్ట్ టైప్, చార్ట్ డేటాసెట్స్, ng2- చార్ట్స్ లేబుల్, ApiService మరియు స్టాటిస్టిక్ డేటా రకం యొక్క దిగుమతులను జోడించండి.

imports: [ ... MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortModule, MatTableModule, MatIconModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatSliderModule, MatSlideToggleModule, MatButtonToggleModule, MatSelectModule, ],

బార్ చార్ట్ నిర్మించడానికి కన్స్ట్రక్టర్ ముందు ఈ అవసరమైన వేరియబుల్స్ ప్రకటించండి.

src/app/cases/cases.component.ts

నిర్మాతకు ApiService ఇంజెక్ట్ చేయండి.

import { Cases } from '../cases';

REST API నుండి గణాంక డేటాను లోడ్ చేయడానికి ఒక ఫంక్షన్‌ను జోడించి, ఆపై దాన్ని బార్ చార్ట్‌గా అమలు చేయండి.

displayedColumns: string[] = ['name', 'age', 'status']; data: Cases[] = []; isLoadingResults = true;

NgOnInit ఫంక్షన్‌కు ఆ ఫంక్షన్‌కు కాల్ చేయండి.

ngOnInit

స్థితి విలువ ద్వారా గణాంక డేటాను మార్చడానికి లేదా రీలోడ్ చేయడానికి ఒక ఫంక్షన్‌ను జోడించండి.

ngOnInit(): void { this.api.getCases() .subscribe((res: any) => { this.data = res; console.log(this.data); this.isLoadingResults = false; }, err => { console.log(err); this.isLoadingResults = false; }); }

తరువాత, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ng2- చార్ట్‌లు/Chart.js బార్ చార్ట్‌ని గణాంక డేటాతో అమలు చేయడం ద్వారా అన్ని HTML ట్యాగ్‌లను భర్తీ చేయండి.

src/app/cases/cases.component.html

చివరగా, సవరించడం ద్వారా దీనికి కొద్దిగా శైలిని ఇవ్వండి | _+_ | వీటితో.

Corona Virus Cases List

add Cases bar_chart Statistic
Cases Name {{row.name}} Age {{row.age}} Status {{row.status}}

దశ #7. కోణీయ మెటీరియల్ ఫారమ్ ఉపయోగించి డేటాను జోడించండి

కరోనావైరస్ కేసును జోడించడానికి ఒక ఫారమ్‌ను సృష్టించడానికి, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ఈ దిగుమతులను జోడించండి.

src/app/cases/cases.component.scss

కన్స్ట్రక్టర్‌కు పై మాడ్యూల్స్ ఇంజెక్ట్ చేయండి.

/* Structure */ .example-container { position: relative; padding: 5px; } .example-table-contai

ఫారమ్ గ్రూప్ కోసం వేరియబుల్స్ మరియు ఫారమ్ లోపల అవసరమైన అన్ని ఫీల్డ్‌లను కన్స్ట్రక్టర్ ముందు ప్రకటించండి.

src/app/cases-details/cases-details.component.ts

ప్రతి ఫీల్డ్ కోసం ప్రారంభ ధ్రువీకరణను జోడించండి.

import { ActivatedRoute, Router } from '@angular/router'; import { ApiService } from '../api.service'; import { Cases } from '../cases';

సమర్పించడం లేదా POST ఉత్పత్తి ఫారమ్ కోసం ఒక ఫంక్షన్‌ను సృష్టించండి.

constructor(private route: ActivatedRoute, private api: ApiService, private router: Router) { }

ప్రధాన తరగతి | _+_ | ముందు కొత్త తరగతిని సృష్టించండి.

cases: Cases = { _id: '', name: '', gender: '', age: null, address: '', city: '', country: '', status: '', updated: null }; isLoadingResults = true;

తరువాత, తెరవండి మరియు సవరించండి | _+_ | దీనితో అన్ని HTML ట్యాగ్‌లను భర్తీ చేయండి.

getCasesDetails(id: string) { this.api.getCasesById(id) .subscribe((data: any) => { this.cases = data; console.log(this.cases); this.isLoadingResults = false; }); }

చివరగా, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ఈ CSS కోడ్‌లను జోడించండి.

ngOnInit(): void { this.getCasesDetails(this.route.snapshot.params.id); }

దశ #8. కోణీయ మెటీరియల్ ఫారమ్ ఉపయోగించి డేటాను సవరించండి

కాల్ ఎడిట్ పేజీ కోసం కేస్ డిటైల్స్ కాంపోనెంట్ లోపల మేము ఇప్పటికే ఎడిట్ బటన్‌ను ఉంచాము. ఇప్పుడు, తెరవండి మరియు సవరించండి | _+_ | అప్పుడు ఈ దిగుమతులను జోడించండి.

deleteCases(id: any) { this.isLoadingResults = true; this.api.deleteCases(id) .subscribe(res => { this.isLoadingResults = false; this.router.navigate(['/cases']); }, (err) => { console.log(err); this.isLoadingResults = false; } ); }

కన్స్ట్రక్టర్‌కు పై మాడ్యూల్స్ ఇంజెక్ట్ చేయండి.

src/app/cases-details/cases-details.component.html

ఫారమ్ గ్రూప్ వేరియబుల్ మరియు అవసరమైన అన్ని వేరియబుల్స్‌ను కన్స్ట్రక్టర్ ముందు కేసులు-ఫారమ్‌గా ప్రకటించండి.

Corona Virus Cases Details

list

{{cases.name}}

{{cases.age}} year old
Gender:
{{cases.gender}}
Address:
{{cases.address}}
City:
{{cases.city}}
Country:
{{cases.country}}
Status:

{{cases.status}}

edit Cases delete Cases

తరువాత, భాగం ప్రారంభించినప్పుడు అన్ని ఫీల్డ్‌ల కోసం ధ్రువీకరణను జోడించండి.

src/app/cases-details/cases-details.component.scss

ప్రతి ఫారమ్ ఫీల్డ్‌లో నిండిన కేసుల డేటాను పొందడం కోసం ఒక ఫంక్షన్‌ను సృష్టించండి.

/* Structure */ .example-container { position: relative; padding: 5px; } .example-loading-shade { position: absolute; top: 0; left: 0; bottom: 56px; right: 0; background: rgba(0, 0, 0, 0.15); z-index: 1; display: flex; align-items: center; justify-content: center; } .mat-flat-button { margin: 5px; }

కేస్ మార్పులను అప్‌డేట్ చేయడానికి ఒక ఫంక్షన్‌ను సృష్టించండి.

npm i --save ng2-charts chart.js

ప్రదర్శన వివరాల బటన్‌ని నిర్వహించడానికి ఒక ఫంక్షన్‌ను జోడించండి.

src/app/app.module.ts

ప్రధాన తరగతి | _+_ | ముందు కొత్త తరగతిని సృష్టించండి.

import { ChartsModule } from 'ng2-charts';

తరువాత, తెరవండి మరియు సవరించండి | _+_ | దీనితో అన్ని HTML ట్యాగ్‌లను భర్తీ చేయండి.

imports: [ ... ChartsModule ],

చివరగా, తెరవండి మరియు సవరించండి | _+_ | CSS కోడ్‌ల యొక్క ఈ పంక్తులను జోడించండి.

src/app/cases-stat/cases-stat.component.ts

దశ #9. కోణీయ 9 కరోనావైరస్ కేసుల అనువర్తనాన్ని అమలు చేయండి మరియు పరీక్షించండి

ఐవీ CRUD యాప్‌తో కోణీయ 9 పనితీరును చూద్దాం. ఇప్పుడు, మేము ఈ ఆదేశాన్ని ఉపయోగించి కోణీయ 9 యాప్‌ను నిర్మించాలి.

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; import { Label } from 'ng2-charts'; import { ApiService } from '../api.service'; import { Statistic } from '../statistic';

ఇప్పుడు, ఉత్పత్తి కోసం కోణీయ 9 యాప్ బిల్డ్ యొక్క ES5 మరియు ES2015 బిల్డ్ మాకు ఉంది. తరువాత, మేము మొత్తం అప్లికేషన్‌ను పరీక్షించాలి, ముందుగా, మేము మొంగోడిబి సర్వర్ మరియు నోడ్/ఎక్స్‌ప్రెస్ API ని వేర్వేరు టెర్మినల్‌లో అమలు చేయాలి.

stats: Statistic[] = []; label = 'Positive'; isLoadingResults = true; barChartOptions: ChartOptions = { responsive: true, }; barChartLabels: Label[] = []; barChartType: ChartType = 'bar'; barChartLegend = true; barChartPlugins = []; barChartData: ChartDataSets[] = [{ data: [], backgroundColor: [], label: this.label }];

అప్పుడు కోణీయ 9 యాప్ బిల్డ్‌ని అమలు చేయండి, కేవలం ఈ ఆదేశాన్ని టైప్ చేయండి.

constructor(private api: ApiService) { }

ఇప్పుడు, ఈ ట్యుటోరియల్‌లోని మొదటి పేరాలో మీరు చూసినట్లుగా మీరు కరోనావైరస్ కేసుల యాప్‌ను చూస్తారు. ఇది కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి. మీరు మా పూర్తి సోర్స్ కోడ్‌ను కనుగొనవచ్చు GitHub .

మీరు మీ సమయాన్ని వృధా చేయకూడదనుకుంటే మీ స్వంత ఫ్రంట్-ఎండ్ లేదా వెబ్ డిజైనర్‌ను నియమించడం ద్వారా మీ బడ్జెట్‌ను ఖర్చు చేయండి, అప్పుడు కోణీయ టెంప్లేట్‌లు ఉత్తమమైన ప్రదేశం. కాబట్టి, మీ ఫ్రంట్ ఎండ్ వెబ్ అభివృద్ధిని ప్రీమియంతో వేగవంతం చేయండి కోణీయ టెంప్లేట్లు . మీ ఫ్రంట్-ఎండ్ ప్రాజెక్ట్ కోసం మీ టెంప్లేట్‌ను ఎంచుకోండి ఇక్కడ .

వాస్తవానికి వీరిచే ప్రచురించబడింది డిడిన్ జె వద్ద djamware.com

ధన్యవాదాలు!

twitter ఆర్కైవ్ శోధన తొలగించబడిన ట్వీట్లు

#అంగుళీయ #జావాస్క్రిప్ట్ #వెబ్-అభివృద్ధి

www.youtube.com

కోణీయ 9 ట్యుటోరియల్: ఒక CRUD యాంగులర్ యాప్‌ను త్వరగా నిర్మించడం నేర్చుకోండి

ఈ కోణీయ 9 ట్యుటోరియల్‌లో, మీరు కోణీయ అనువర్తనాన్ని త్వరగా ఎలా సృష్టించాలో (సృష్టించడం, చదవడం, నవీకరించడం, తొలగించడం) ఎలా నేర్చుకోవాలో నేర్చుకుంటారు. కొత్త కోణీయ 9 యాప్‌ని సృష్టించండి. కోణీయ 9 రూటింగ్ మరియు నావిగేషన్ జోడించండి. కోణీయ 9 సేవను జోడించండి. కోణీయ మెటీరియల్ ఉపయోగించి డేటా యొక్క ప్రదర్శన జాబితా. కోణీయ మెటీరియల్ ఉపయోగించి డేటా వివరాలను చూపించు మరియు తొలగించండి. Ng2Charts మరియు Chart.js ఉపయోగించి గణాంకాలను చూపించు. కోణీయ మెటీరియల్ ఫారమ్ ఉపయోగించి డేటాను జోడించండి. కోణీయ మెటీరియల్ ఫారమ్ ఉపయోగించి డేటాను సవరించండి. కోణీయ 9 కరోనావైరస్ కేసుల అనువర్తనాన్ని అమలు చేయండి మరియు పరీక్షించండి

ఇది కూడ చూడు:

క్రొత్త అంశాలు

చాలా చదవగలిగేది

ఎడిటర్స్ ఛాయిస్