使用Angular開發(fā)需要非常多的前置知識,比如TypeScript、RxJS等,所以學(xué)習(xí)成本比較高,下面這篇文章主要給大家關(guān)于Angular開發(fā)內(nèi)容的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

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

組件 Component

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

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

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

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

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

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

路由 Router

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

首先你要引入頁面組件：

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

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

管道 Pipeline

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

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

UpperCase
LowerCase
Currency 貨幣
PercentPipe
DatePipe
JsonPipe
SlicePipe

使用也很簡單：

<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)然，你還可以自定義管道。

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

ng generate pipe get-first-character 命令行創(chuàng)建一個獲取第一個字符的管道，也會自動在 app.module.ts 中聲明 GetFirstCharacterPipe（駝峰式）管道，很是方便。因?yà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

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

下面我們說的是自定義的指令。

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

ng generate directive directive_console 創(chuà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()
    }
  }
}

我們在 user-list.component.html 中新增：

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

那么會有下面這種效果：

后面的章節(jié)會展開說指令

服務(wù) Service

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

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

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

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

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

{
  "name": "Jimmy"
}

下面我們對 service-demo.service.ts 進(jìn)行方法的編寫，通過 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: {}
    })
  }
}

之后，我們在 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)行之后，如下圖：

嗯～

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

總結(jié)

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

深入聊一聊Angular開發(fā)的內(nèi)容

目錄

前言

組件 Component

路由 Router

管道 Pipeline

指令 Directive

服務(wù) Service

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具