## Primeng ### 建立專案 ``` ng new 專案名稱 ``` 選擇第二個SCSS ![](https://hackmd.io/_uploads/S1FlelPu3.png) 開啟專案（在專案資料夾中） ``` ng serve -o ``` ![](https://hackmd.io/_uploads/Hk7y-xv_3.png) 安裝Angular Cli ``` npm install -g @angular/cli ``` 安裝Angular cdk ``` npm install @angular/cdk ``` 查看安裝的Cli版本 ``` ng version | ng v ``` 新增primeflex > [ https://www.primefaces.org/primeflex/setup](https://) ``` npm install primeflex --save ``` ``` <!-- 貼在index.html --> <!-- CSS only --> <link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css"> ``` 匯入BrowserAnimationsModule到app.module.ts ``` import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; //貼在imports裡面 BrowserAnimationsModule, ``` 安裝Primeng > [https://primeng.org/installation](https://) ``` npm install primeng --save npm install primeicons --save ``` 匯入primeng樣式(如下圖，記得加",") 貼在angular.json的styles裡面 ``` "node_modules/primeicons/primeicons.css", "node_modules/primeng/resources/themes/saga-blue/theme.css", "node_modules/primeng/resources/primeng.min.css" ``` ![](https://hackmd.io/_uploads/ry6hQlwdn.png) ### 共享模組 1. 在app資料夾下新增shared module (右鍵app資料夾->選擇Generate a module 或 右鍵app資料夾->選擇Generate another schematic->module) 2. 在shared資料夾下新增primeng module 新增完成後如下 ![](https://hackmd.io/_uploads/Hy2pVlw_h.png) 3. import primeng 並在primeng資料夾中新增primeng module ``` import { InputTextModule } from 'primeng/inputtext'; import { CheckboxModule } from 'primeng/checkbox'; import { MenubarModule } from 'primeng/menubar'; import { TableModule } from 'primeng/table'; import { ButtonModule } from 'primeng/button'; import { FieldsetModule } from 'primeng/fieldset'; import { CardModule } from 'primeng/card'; import { InputTextareaModule } from 'primeng/inputtextarea'; import { TabViewModule } from 'primeng/tabview'; import { DialogModule } from 'primeng/dialog'; import { InputNumberModule } from 'primeng/inputnumber'; import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; import { DropdownModule } from 'primeng/dropdown'; import { ListboxModule } from 'primeng/listbox'; import { TagModule } from 'primeng/tag'; import { ProgressBarModule } from 'primeng/progressbar'; import { SliderModule } from 'primeng/slider'; import { MultiSelectModule } from 'primeng/multiselect'; import { SidebarModule } from 'primeng/sidebar'; import { MenuModule } from 'primeng/menu'; import { PanelMenuModule } from 'primeng/panelmenu'; import { PickListModule } from 'primeng/picklist'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { DividerModule } from 'primeng/divider'; import { InputSwitchModule } from 'primeng/inputswitch'; import { CalendarModule } from 'primeng/calendar'; import { ToastModule } from 'primeng/toast'; import { BlockUIModule } from 'primeng/blockui'; import { ProgressSpinnerModule } from 'primeng/progressspinner'; import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { PaginatorModule } from 'primeng/paginator'; import { FileUploadModule } from 'primeng/fileupload'; import { SelectButtonModule } from 'primeng/selectbutton'; import { PasswordModule } from 'primeng/password'; import { ImageModule } from 'primeng/image'; import { TabMenuModule } from 'primeng/tabmenu'; import { TooltipModule } from 'primeng/tooltip'; import { ChipsModule } from 'primeng/chips'; //貼在import下面 exports: [ InputTextModule, CheckboxModule, MenubarModule, TableModule, ButtonModule, FieldsetModule, CardModule, InputTextareaModule, TabViewModule, DialogModule, InputNumberModule, TriStateCheckboxModule, DropdownModule, ListboxModule, TagModule, ProgressBarModule, SliderModule, MultiSelectModule, SidebarModule, MenuModule, PanelMenuModule, PickListModule, AutoCompleteModule, DividerModule, InputSwitchModule, CalendarModule, ToastModule, BlockUIModule, ProgressSpinnerModule, ConfirmDialogModule, PaginatorModule, FileUploadModule, SelectButtonModule, PasswordModule, ImageModule, TabMenuModule, TooltipModule, ChipsModule ] ``` exports貼在import下面(如下圖，記得加",") ![](https://hackmd.io/_uploads/S158Bgw_n.png) 4. 到shared.module.ts 匯入 primeng ``` import { PrimengModule } from './primeng/primeng.module'; //貼在import下面 exports: [ PrimengModule, ] ``` 5. 到app.modules.ts 匯入共享模組 (shared module) ``` import { SharedModule } from './shared/shared.module'; //貼在import裡面 imports: [ SharedModule, ] ``` ### 建立 toolbar & sidebar 1. 建立toolbar component 2. toolbar & sidebar（toolbar.component.html） ``` <p-toolbar> <div class="p-toolbar-group-left"> <button pButton pRipple type="button" icon="pi pi-bars" class="p-button-rounded p-button-text p-button-plain" (click)="showSidebar = true"></button> <a href="http://localhost:4200/"> <span>Primeng Class</span> </a> </div> <div class="p-toolbar-group-right"> <!-- 右側按鈕 --> </div> </p-toolbar> <p-sidebar [(visible)]="showSidebar" [baseZIndex]="10000" [showCloseIcon]="false" (onHide)="showSidebar = false"> <h3>選單</h3> </p-sidebar> ``` 3. 樣式設定 ( toolbar.component.scss ) ``` @import 'src/app/app.component.scss'; a { text-decoration:none; span { color: hsl(0, 0%, 0%); font-size: x-large; } } ``` ( toolbar.component.ts ) ``` showSidebar = false; ``` ( app.component.html ) 全部刪掉改成以下 ``` <app-toolbar></app-toolbar><!--顯示導覽列於每個頁面--> <router-outlet></router-outlet><!--顯示該路徑頁面內容--> ``` ### 新增一個component 右鍵->generate a component->名稱（自定義表格我用table） * 檢查app.module.ts有無自動import component * 記得要在routing import table component，如下圖所示 ![](https://hackmd.io/_uploads/rk20BkEt3.png) ### 建立api [https://medium.com/itsems-frontend/api-是什麼-restful-api-又是什麼-a001a85ab638](https://) * 建立api servic：新增api資料夾->右鍵->generate a service->名稱（api） * 匯入HTTP模組、定義HttpClient ``` import {HttpClient} from '@angular/common/http'; import {Observable} from "rxjs"; constructor(private http: HttpClient) { } ``` * 匯入HttpClient模組 ``` // shared.module.ts import { HttpClientModule } from '@angular/common/http'; ``` * 定義 API 的固定網址 ``` private BaseUrl: string = 'http://localhost:8080/authority/v1.0'; ``` * 定義GET API ``` //get //加上回傳值page並設定limit為20 getAllRequest(page: number): Observable<any> { const url = this.BaseUrl + '/table' + '?page=' + page + '&limit=20'; return this.http.get(url); } ``` * GET ``` // 匯入api service import { ApiService } from "../api/api.service"; // 建構類別 constructor(private HttpApi: ApiService) {} // 宣告儲存api資料之陣列 apiData!: ApiService[]; // 取得api service定義API getAll() { this.HttpApi.getAllRequest().subscribe(request => { this.apiData = request; console.log(this.apiData); }); } ``` ### 懶加載（這個我一直報錯 ``` import { LazyLoadEvent } from 'primeng/api'; //懶加載 loadPostsLazy(event: LazyLoadEvent) { const page = (event.first! / event.rows!) + 1; this.HttpApi.getAllRequest(page).subscribe(request => { this.apiData = request; console.log(this.apiData); }); } ``` ### 學長姐給的參考資料 * [發送會議並且紀錄使用API](https://hackmd.io/@Rdong/SkGcUgfRi#%E5%89%8D%E7%AB%AF%E7%95%AB%E9%9D%A2) * [淺談Angular元件生命週期](https://hackmd.io/@Heidi-Liu/angular-lifecycle) * [Angular基礎｜從Todo List認識四種資料綁定](https://hackmd.io/@Heidi-Liu/angular-data-binding) * [【後轉前要多久】各種ng指示(ngClass、ngIf、ngFor...)](https://ithelp.ithome.com.tw/articles/10281608) * [keyup用法](https://ithelp.ithome.com.tw/articles/10207190) ### 操作小技巧 html基本語法：[https://www.w3schools.com/html/default.asp](https://) css基本語法：[ https://www.w3schools.com/css/default.asp](https://) boostrap：[https://getbootstrap.com/docs/5.3/layout/columns/](https://) * [后端分页+前端分页显示（Angular+Primeng+SpringBoot）](https://blog.csdn.net/could98/article/details/112779676) 打`div.class`自動生成以下 ``` <div class="class"></div> ``` ### 報錯處理 1. p-toorbar ![](https://hackmd.io/_uploads/HkHosgDOn.png) * 解決 > 在app.module.ts加上`CUSTOM_ELEMENTS_SCHEMA`，如下 ``` import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; schemas:[CUSTOM_ELEMENTS_SCHEMA], ``` ![](https://hackmd.io/_uploads/S1UmPys_n.png) 2. $event ![](https://hackmd.io/_uploads/ByGPsd9t3.png) * 解決 :::warning 煩欸，我解決不了，超生氣！ :zap: :::