tags: Web Front End Angular Package

Angular 常用套件

UI排版美化

bootstrap

版面配置，RWD排版
npm命令npm install bootstrap --save-dev
在scr/style.css內加入
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

font-awesome

讓字體字型變美，免費Icon
npm命令npm install font-awesome --save
在scr/style.css內加入
@import '../node_modules/font-awesome/css/font-awesome.min.css';

Icon大小設定

fa-sm
fa-lg
fa-2x
fa-3x
fa-5x
fa-7x
fa-10x

ng-bootstrap

angular bootstrap強化版本，提供各式各樣元件，支援bootrstrap4和angualr5版本以上
npm命令ng add @ng-bootstrap/ng-bootstrap
在app.module.ts內加入

import { NgbPaginationModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,    
  ],
  imports: [
    NgbPaginationModule,    
    NgbAlertModule,    
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

ngx-bootstrap

angular bootstrap強化版本，提供各式各樣元件，支援bootstrap3和4
建議使用ng-bootstrap

bootswatch

可以替換bootstrap的skin，根據喜歡的主題進行替換
npm命令npm install bootswatch
可以在node_modules\bootswatch\dist內下方發現主題，這邊採用darkly當作範例

在scr/style.css內加入
@import '../node_modules/bootswatch/dist/darkly/bootstrap.min.css';

UI通知/對話窗/載入系列

AlertifyJs

在右下角顯示通知或彈跳視窗(確認、提醒)等等，個人比較推薦ngx-toastr
npm命令npm install alertifyjs --save
在scr/style.css內加入

@import '../node_modules/alertifyjs/build/css/alertify.min.css';
@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';

創建AlertifyService
在alertify.service.ts內加入

import { Injectable } from '@angular/core';
import * as alertify from 'alertifyjs';

@Injectable({
  providedIn: 'root',
})
export class AlertifyService {
  constructor() {}

  success(message: string) : void {
    alertify.success(message);
  }

  error(message: string) : void {
    alertify.error(message);
  }

  warning(message: string) : void {
    alertify.warning(message);
  }

  message(message: string) : void {
    alertify.message(message);
  }
}

補充: 由於AlertifyJs屬於javascript元件，因此在typescript內使用時，顯示的屬性皆為any，因此直接使用alertify類別即可，需要注意方法名稱。

此時會有錯誤訊息提示

在src目錄底下創建typings.d.ts。完整目錄scr/typings.d.ts
declare module 'alertifyjs'

注意: 如果啟用ng serve發現有錯誤訊息，請參考Angular常見問題

ngx-toastr

通知提示可以自訂提示通知的位置
npm命令

npm install ngx-toastr --save
npm install @angular/animations --save

sweetalert2/ngx-sweetalert2

精美的對話視窗
npm命令npm install --save sweetalert2 @sweetalert2/ngx-sweetalert2
在app.module.ts內加入

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

@NgModule({
  declarations: [],
  imports: [   
    SweetAlert2Module.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

簡易測試
<button [swal]="['Hello Title', 'Body Content', 'success']">Test SweetAlert2</button>

ngx-spinner

載入時，所需要的載入畫面

ng add ngx-spinner

圖片輪播

ngx-swiper-wrapper

圖片畫廊

ngx-gallery/core

NPM npm i ng-gallery @angular/cdk
其他參考 解說非常詳細

https://www.npmjs.com/package/@kolkov/ngx-gallery

表單

ngx-datatable

angular-datatables

特效

Animate.css

圖片裁切

ngx-image-cropper

UI框架

ngx-admin(待補)

Angular Material(待補)

NG-ZORRO

其他套件

auth0/angular-jwt

安裝方式

npm install @auth0/angular-jwt

解析JWT Token的使用功能
簡易範例如下

import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable({
  providedIn: 'root',
})
export class ExampleService {
  jwtHelper = new JwtHelperService();

  constructor() {}
   
  // 檢查token是否過期
  isTokenExpired(token: string): boolean {    
    return !this.jwtHelper.isTokenExpired(token);
  }
  
  // 解析token取得一些資料，例如使用者名稱等等
  decodeToken(token: string): any {    
    return this.jwtHelper.decodeToken(token);
  }
}

查看套件安裝的所在地

可以前往package.json查看安裝的套件

  "dependencies": {
    "@angular/animations": "~10.0.14",
    "@angular/common": "~10.0.14",
    "@angular/compiler": "~10.0.14",
    "@angular/core": "~10.0.14",
    "@angular/forms": "~10.0.14",
    "@angular/localize": "~10.0.14",
    "@angular/platform-browser": "~10.0.14",
    "@angular/platform-browser-dynamic": "~10.0.14",
    "@angular/router": "~10.0.14",
    "@auth0/angular-jwt": "^5.0.1",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "alertifyjs": "^1.13.1",
    "bootstrap": "^4.5.2",
    "font-awesome": "^4.7.0",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
    ...其他
  },

SignalR

https://www.npmjs.com/package/@microsoft/signalr

https://code-maze.com/netcore-signalr-angular/

@microsoft/signalr vs @aspnet/signalr兩者差別
主要是將@aspnet/signalr的專案類別移動到@microsoft/signalr，因此如果要使用請使用@microsoft/signalr套件

解除安裝

npm指令npm uninstall [package]

其他待補

npm angular套件搜尋
https://www.npmjs.com/search?q=angular-spinner

• ngx-admin
• Angular Material

https://www.telerik.com/blogs/17-angular-libraries-you-should-know-about
https://aglowiditsolutions.com/blog/top-angular-component-libraries/
https://blog.bitsrc.io/11-angular-component-libraries-you-should-know-in-2018-e9f9c9d544ff

Angular Datatables
https://www.ngdevelop.tech/best-angular-tables/