###### tags: `Web` `Front End` `Angular` `Package`
# Angular 常用套件
## UI排版美化
### [bootstrap](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
**版面配置，RWD排版**
npm命令`npm install bootstrap --save-dev`
在`scr/style.css`內加入
`@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';`
### [font-awesome](https://fontawesome.com/v4.7.0/get-started/)
**讓字體字型變美，免費Icon**
npm命令`npm install font-awesome --save`
在`scr/style.css`內加入
`@import '../node_modules/font-awesome/css/font-awesome.min.css';`
[Icon大小設定](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons)
```
fa-sm
fa-lg
fa-2x
fa-3x
fa-5x
fa-7x
fa-10x
```
### [ng-bootstrap](https://ng-bootstrap.github.io/#/getting-started)
**angular bootstrap強化版本，提供各式各樣元件，支援bootrstrap4和angualr5版本以上**
npm命令`ng add @ng-bootstrap/ng-bootstrap`
在`app.module.ts`內加入
```typescript=
import { NgbPaginationModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent,
],
imports: [
NgbPaginationModule,
NgbAlertModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
### [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/#/)
**angular bootstrap強化版本，提供各式各樣元件，支援bootstrap3和4**
建議使用ng-bootstrap
### [bootswatch](https://bootswatch.com/)
**可以替換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](https://alertifyjs.com/)
**在右下角顯示通知或彈跳視窗(確認、提醒)等等，個人比較推薦[ngx-toastr](#ngx-toastr)**
npm命令`npm install alertifyjs --save`
在`scr/style.css`內加入
```css
@import '../node_modules/alertifyjs/build/css/alertify.min.css';
@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';
```
創建AlertifyService
在`alertify.service.ts`內加入
```typescript=
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常見問題](https://hackmd.io/@XYgt55MbRECxOgopZXu19g/HkHoOrnVD)*
### [ngx-toastr](https://github.com/scttcper/ngx-toastr)
**通知提示可以自訂提示通知的位置**
npm命令
```
npm install ngx-toastr --save
npm install @angular/animations --save
```
### [sweetalert2/ngx-sweetalert2](https://github.com/sweetalert2/ngx-sweetalert2)
**精美的對話視窗**
npm命令`npm install --save sweetalert2 @sweetalert2/ngx-sweetalert2`
在`app.module.ts`內加入
```typescript=
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](https://www.npmjs.com/package/ngx-spinner)
**載入時，所需要的載入畫面**
ng add ngx-spinner
## 圖片輪播
### [ngx-swiper-wrapper](https://github.com/zefoy/ngx-swiper-wrapper)
## 圖片畫廊
### [ngx-gallery/core](https://www.npmjs.com/package/@ngx-gallery/core)
NPM `npm i ng-gallery @angular/cdk`
[其他參考](https://github.com/MurhafSousli/ngx-gallery/wiki/Gallery) 解說非常詳細
https://www.npmjs.com/package/@kolkov/ngx-gallery
## 表單
### [ngx-datatable](https://github.com/swimlane/ngx-datatable)
### [angular-datatables](https://github.com/l-lin/angular-datatables)
## 特效
### [Animate.css](https://medium.com/better-programming/angular-animate-css-in-five-easy-steps-624b337169ad)
## 圖片裁切
[ngx-image-cropper](https://github.com/Mawi137/ngx-image-cropper)
## UI框架
### [ngx-admin](https://github.com/akveo/ngx-admin)(待補)
### Angular Material(待補)
### [NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd)
## 其他套件
### [auth0/angular-jwt](https://github.com/auth0/angular2-jwt)
安裝方式
```
npm install @auth0/angular-jwt
```
**解析JWT Token的使用功能**
簡易範例如下
```typescript=
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`查看安裝的套件
```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兩者差別](https://stackoverflow.com/questions/58711696/aspnet-signalr-vs-microsoft-signalr-javascript-libraries)
主要是將@aspnet/signalr的專案類別移動到@microsoft/signalr，因此如果要使用請使用@microsoft/signalr套件
## 解除安裝
npm指令`npm uninstall [package]`
## 其他待補
npm angular套件搜尋
https://www.npmjs.com/search?q=angular-spinner
- [ngx-admin](https://github.com/akveo/ngx-admin)
- [Angular Material](https://material.angular.io/)
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/
Sign in with Wallet
Connect another wallet