深入聊一聊Angular開發(fā)的內(nèi)容
前言
閱讀本文，是在你了解 Angular 基本知識的前提下，如果讀者還不了解，請前往官網(wǎng)了解。
如果讀者有 vue 或者 React 的開發(fā)經(jīng)驗，會很好理解接下來講解的內(nèi)容～
組件 Component
團隊開發(fā)都有自己的約定。我們這里約定 app/pages 目錄下的組件是頁面組件，其頁面組件下的 components 是頁面組件的私有組件。app/components 是公有組件。
現(xiàn)在我們新建一個用戶的列表頁面。
mkdir pages 后，直接進入 pages 目錄執(zhí)行 ng generate component user-list 創(chuàng)建用戶列表。你會得到下面的目錄：
user-list
├── user-list.component.html // 頁面骨架
├── user-list.component.scss // 頁面獨有樣式
├── 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>
這樣瀏覽器進入路徑 http://localhost:4200/user-list 就可以看到效果了。
默認的是 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)該對這個不默認。
Angular 有默認的管道元件，比如:
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（駝峰式）管道，很是方便。因為這里的功能比較簡單，我們簡單修改下 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
可以理解為指令是對控制器的補充，主要功能是對Dom元素和數(shù)據(jù)的操作，已有的指令，如：ngModel，這些指令直接到官網(wǎng)上查看就可以了，比較簡單。
下面我們說的是自定義的指令。
老樣子，我們進入 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 的地方吧。
進入 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 進行方法的編寫，通過 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
],
//...
})運行之后，如下圖：
嗯～
整體熟悉下來，你想基本 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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能,結(jié)合實例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
本文用實例詳細給大家展示了angular.js分頁代碼，代碼很詳細，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了Angular的事件和表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對Angular進行單元測試的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要給大家介紹了關(guān)于如何測試angular組件間傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
本篇文章主要介紹了解決AngualrJS頁面刷新導(dǎo)致異常顯示問題的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
AngularJs是一個不錯的用于開發(fā)SPA應(yīng)用（單頁Web應(yīng)用）的框架。通過本文給大家介紹angularjs基礎(chǔ)教程，需要的朋友要求學(xué)習(xí)吧2016-04-04
在AngularJS中$interval用來處理間歇性處理一些事情,接下來通過本文給大家介紹AngularJS中$interval的用法，需要的朋友參考下2016-02-02
這篇文章主要介紹了Angular6中使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本文通過示例給大家詳解angularjs 的filter知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03