前言

閱讀本文，是在你了解 Angular 基本知識(shí)的前提下，如果讀者還不了解，請(qǐng)前往官網(wǎng)了解。

如果讀者有 vue 或者 React 的開發(fā)經(jīng)驗(yàn)，會(huì)很好理解接下來(lái)講解的內(nèi)容～

組件 Component

團(tuán)隊(duì)開發(fā)都有自己的約定。我們這里約定 app/pages 目錄下的組件是頁(yè)面組件，其頁(yè)面組件下的 components 是頁(yè)面組件的私有組件。app/components 是公有組件。

現(xiàn)在我們新建一個(gè)用戶的列表頁(yè)面。

mkdir pages 后，直接進(jìn)入 pages 目錄執(zhí)行 ng generate component user-list 創(chuàng)建用戶列表。你會(huì)得到下面的目錄：

user-list
├── user-list.component.html                          // 頁(yè)面骨架
├── user-list.component.scss                          // 頁(yè)面獨(dú)有樣式
├── user-list.component.spec.ts                       // 測(cè)試文件
└── user-list.component.ts                            // javascript 文件

使用命令行生成組件的好處是，它會(huì)自動(dòng)在 app.module.ts 中聲明本組件 UserListComponent，而不需要手動(dòng)去操作。

如果你重復(fù)去新建一個(gè)組件，則腳手架不會(huì)執(zhí)行，不用害怕在同一個(gè)地方有重復(fù)的組件出現(xiàn)

路由 Router

不同的路由，表示你訪問(wèn)不同的頁(yè)面組件。這在 app-routing.module.ts 中去添加。

首先你要引入頁(yè)面組件：

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

之后添加路由：

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

為了方便演示，只保留 app.component.html 內(nèi)容 <router-outlet></router-outlet>

這樣瀏覽器進(jìn)入路徑 http://localhost:4200/user-list 就可以看到效果了。

默認(rèn)的是 history 模式，如果你要改為 hash 模式的話，可以修改 app-routing.module.ts 內(nèi)容如下：

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 { }

此時(shí)，你訪問(wèn)的路由應(yīng)該是 http://localhost:4200/#/user-list。

管道 Pipeline

管道你可以理解為過(guò)濾器。用過(guò) vue 的讀者應(yīng)該對(duì)這個(gè)不默認(rèn)。

Angular 有默認(rèn)的管道元件，比如:

• UpperCase

• LowerCase

• Currency 貨幣

• PercentPipe

• DatePipe

• JsonPipe

• SlicePipe

使用也很簡(jiǎn)單：

<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>

當(dāng)然，你還可以自定義管道。

我們?cè)?app 目錄下 mkdir pipes 文件夾統(tǒng)一管理管道元件。

ng generate pipe get-first-character 命令行創(chuàng)建一個(gè)獲取第一個(gè)字符的管道，也會(huì)自動(dòng)在 app.module.ts 中聲明 GetFirstCharacterPipe（駝峰式）管道，很是方便。因?yàn)檫@里的功能比較簡(jiǎn)單，我們簡(jiǎn)單修改下 get-first-character.pipe.ts 文件就很滿足要求了。

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);
  }
}

調(diào)用如下：

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

Easy, Right?

指令 Directive

可以理解為指令是對(duì)控制器的補(bǔ)充，主要功能是對(duì)Dom元素和數(shù)據(jù)的操作，已有的指令，如：ngModel，這些指令直接到官網(wǎng)上查看就可以了，比較簡(jiǎn)單。

下面我們說(shuō)的是自定義的指令。

老樣子，我們進(jìn)入 app 目錄，mkdir directives 文件夾統(tǒng)一管理指令。

ng generate directive directive_console 創(chuàng)建一個(gè)輸出的指令，也會(huì)自動(dòng)在 app.module.ts 中聲明 DirectiveConsoleDirective（駝峰式）管道，很是方便。此文件的內(nèi)容如下：

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()
    }
  }
}

我們?cè)?user-list.component.html 中新增：

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

那么會(huì)有下面這種效果：

后面的章節(jié)會(huì)展開說(shuō)指令

服務(wù) Service

服務(wù)，你可以理解為請(qǐng)求 api 的地方，那也不錯(cuò)，但是不僅僅有這么個(gè)用處，在后面的章節(jié)會(huì)展開說(shuō)。

那么我們把它當(dāng)成處理 api 的地方吧。

進(jìn)入 app 目錄，mkdir services 文件夾統(tǒng)一管理服務(wù)。

ng generate service service_demo 創(chuàng)建一個(gè) demo 數(shù)據(jù)的服務(wù)。

我們?cè)?assets 文件夾下創(chuàng)建一個(gè) demo.json 文件：

{
  "name": "Jimmy"
}

下面我們對(duì) service-demo.service.ts 進(jìn)行方法的編寫，通過(guò) http 獲取 demo.json 數(shù)據(jù)。

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

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

  constructor(
    private http: HttpClient
  ) { }

  // 獲取 demo.json 數(shù)據(jù)
  getDemo() {
    return this.http.get('assets/demo.json', {
      responseType: 'json',
      params: {}
    })
  }
}

之后，我們?cè)?user-list.component.ts 文件中調(diào)用下：

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: () => {}
    })
  }
}

上面用到了 http 的相關(guān)服務(wù)，你必須在 app.module.ts 中引入其模塊才行的哦。

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

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

運(yùn)行之后，如下圖：

嗯～

整體熟悉下來(lái)，你想基本 hold 住 angular 開發(fā)單頁(yè)面系統(tǒng)，還需要你在官網(wǎng)中看下基本的語(yǔ)法，畢竟基本的語(yǔ)法在這里也沒(méi)什么好說(shuō)的。

總結(jié)

到此這篇關(guān)于Angular開發(fā)內(nèi)容的文章就介紹到這了,更多相關(guān)Angular開發(fā)的內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論