深入聊一聊Angular开发的内容

import { UserListComponent } from './pages/user-list/user-list.component';

const routes: Routes = [{
  path: "user-list",
  component: UserListComponent
}];

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
import { UserListComponent } from './pages/user-list/user-list.component';

const routes: Routes = [{
  path: "user-list",
  component: UserListComponent
}];

@NgModule({
  imports: [RouterModule.forRoot(
    routes,
    {
      useHash: true,// 使用 hash 模式
      preloadingStrategy: PreloadAllModules
    }
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<p>{{ uppercase_var|uppercase }}</p>
<p>{{ lowercase_var|lowercase }}</p>
<p>{{ currency_var|currency:"CNY":"symbol" }}</p>
<p>{{ percent_var|percent }}</p>
<p>{{ date_var|date:'yyyy-MM-dd HH:mm:ss' }}</p>
<p>{{ json_var|json }}</p>
<p>{{ slice_var|slice:0:9 }}</p>

import { Pipe, PipeTransfORM } from '@angular/core';

@Pipe({
  name: 'getFirstCharacter'
})
export class GetFirstCharacterPipe implements PipeTransform {
  transform(value: string, ...args: unknown[]): unknown {
    return value.slice(0, 1);
  }
}

<p>{{ string_var|getFirstCharacter }}</p>

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appDirectiveConsole]'
})
export class DirectiveConsoleDirective {

  constructor(
    public elementRef: ElementRef
  ) { }

  @HostListener('keyup', ['$event.target'])
  keyupFunction(event: any) {
    if(event.value) {
      console.log(this.elementRef)
      this.elementRef.nativeElement.value = event.value.trim()
    }
  }
}

<input type="text" id="name" appDirectiveConsole>

{
  "name": "Jimmy"
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ServiceDemoService {

  constructor(
    private http: HttpClient
  ) { }

  // 获取 demo.json 数据
  getDemo() {
    return this.http.get('assets/demo.json', {
      responseType: 'json',
      params: {}
    })
  }
}

import { Component, OnInit } from '@angular/core';
import { ServiceDemoService } from 'src/app/services/service-demo.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss']
})
export class UserListComponent implements OnInit {

  public name:string = '';

  constructor(
    private demoService: ServiceDemoService
  ) { }

  nGonInit(): void {
    this.demoService.getDemo().subscribe({
      next: (data: any) => {
        this.name = data.name
      },
      error: () => {}
    })
  }
}

import { HttpClientModule } from '@angular/common/http';
// ...

@NgModule({
  imports: [
    HttpClientModule
  ],
  //...
})