專案建立

本次專案主要在Electron中套用angular，於GitHub套用已整合樣本，並安裝所需套件完整專案建立．

參考樣本連結：https://github.com/maximegris/angular-electron

• Angular(前端)：主要執行功能UI設計，使用Typescript進行功能開發
• Electron（後端):單機資料儲存與服務執行

• 安裝angular-cli安裝：提供angular component建立

npm install -g @angular/cli

專案執行

執行結果：單機運行成功

UI套件安裝

npm install primeng
npm install primeicons

angular.json

...
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/lara-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
    ...
]

styles.css

@import "primeicons/primeicons.css";
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

route module簡化頁面切換路徑

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  { path: 'home', component: HomeComponent },
  { path: 'detail', component: DetailComponent },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

detail頁面套入表格ＵＩ

export class DetailComponent implements OnInit {
  products!: Product[];

  statuses!: SelectItem[];

  clonedProducts: { [s: string]: Product } = {};
  constructor(private productService: ProductService, private messageService: MessageService) { }

  ngOnInit():void {
    void this.productService.getProductsMini().then((data: Product[]) => {
      this.products = data;
    });

    this.statuses = [
      { label: 'In Stock', value: 'INSTOCK' },
      { label: 'Low Stock', value: 'LOWSTOCK' },
      { label: 'Out of Stock', value: 'OUTOFSTOCK' }
    ];
  }

  onRowEditInit(product: Product) {
    this.clonedProducts[product.id as string] = { ...product };
  }

  onRowEditSave(product: Product) {
    if (product.price && product.price > 0) {
      delete this.clonedProducts[product.id as string];
      this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Product is updated' });
    } else {
      this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Invalid Price' });
    }
  }

執行結果

小結

本日完成專案建立與ＵＩ套件安裝與測試，後續開始建立應用程式資料存取功能．