我想看柯南 - HackMD

Primeng

建立專案

ng new 專案名稱

選擇第二個SCSS

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

開啟專案（在專案資料夾中）

ng serve -o

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

安裝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

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

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"

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

共享模組

在app資料夾下新增shared module
(右鍵app資料夾->選擇Generate a module 或
右鍵app資料夾->選擇Generate another schematic->module)
在shared資料夾下新增primeng module
新增完成後如下
Image Not Showing Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
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下面(如下圖，記得加",")

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

到shared.module.ts 匯入 primeng

import { PrimengModule } from './primeng/primeng.module';

//貼在import下面
  exports: [
    PrimengModule,
  ]

到app.modules.ts 匯入共享模組 (shared module)

import { SharedModule } from './shared/shared.module';

//貼在import裡面
  imports: [
    SharedModule,
  ]

建立toolbar component
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>

樣式設定 ( 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，如下圖所示

建立api

https://medium.com/itsems-frontend/api-是什麼-restful-api-又是什麼-a001a85ab638

建立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);
}

// 匯入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);
    });
  }

學長姐給的參考資料

操作小技巧

html基本語法：https://www.w3schools.com/html/default.asp
css基本語法： https://www.w3schools.com/css/default.asp
boostrap：https://getbootstrap.com/docs/5.3/layout/columns/

后端分页+前端分页显示（Angular+Primeng+SpringBoot）

打div.class自動生成以下

<div class="class"></div>

報錯處理

p-toorbar

解決

在app.module.ts加上CUSTOM_ELEMENTS_SCHEMA，如下

import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

schemas:[CUSTOM_ELEMENTS_SCHEMA],

$event

解決

煩欸，我解決不了，超生氣！

Primeng

建立專案

共享模組

建立 toolbar & sidebar

新增一個component

建立api

懶加載（這個我一直報錯

學長姐給的參考資料

操作小技巧

報錯處理