first

@knowleadge/สร้างโปรเจ็ค.txt

@@ -0,0 +1,142 @@
+  n nSTEP 1 — สร้างโปรเจ็กต์ใหม่
+
+ng new accounting-ng-nuttakit --no-standalone
+
+STEP 2
+
+npm install bootstrap
+npm install @angular/material @angular/cdk
+
+และเพิ่มใน angular.json
+
+
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.min.css",
+  "src/styles.scss"
+]
+
+
+STEP 3  สร้าง Module แรก
+ ng generate module main --route main --module ../app-routing.module.ts 
+ ng g module controls/login-control --routing
+
+STEP 4
+
+ng generate component modules/goods/goods-content
+ng generate component modules/goods/goods-page
+ng generate service modules/goods/goods-state
+
+STEP 5
+
+shared/interfaces/product.interface.ts
+
+
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  category: string;
+  imgUrl: string;
+}
+
+
+goods-state.service.ts
+
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Product } from 'src/app/shared/interfaces/product.interface';
+
+@Injectable({ providedIn: 'root' })
+export class GoodsStateService {
+  private goodsState = new BehaviorSubject<Product[]>([]);
+  goodsState$ = this.goodsState.asObservable();
+
+  setState(data: Product[]) {
+    this.goodsState.next(data);
+  }
+
+  getStateResult() {
+    return this.goodsState$;
+  }
+}
+
+
+STEP 10 — สร้าง Content Component (ตัวควบคุมหลัก)
+
+import { Component, OnInit } from '@angular/core';
+import { GoodsStateService } from './goods-state.service';
+import { Product } from 'src/app/shared/interfaces/product.interface';
+
+@Component({
+  selector: 'app-goods-content',
+  templateUrl: './goods-content.component.html',
+})
+export class GoodsContentComponent implements OnInit {
+  products: Product[] = [];
+
+  constructor(private goodsState: GoodsStateService) {}
+
+  ngOnInit(): void {
+    this.goodsState.getStateResult().subscribe(data => {
+      this.products = data;
+    });
+    this.mockData(); // ตัวอย่าง data
+  }
+
+  private mockData() {
+    const mock: Product[] = [
+      { id: 1, name: 'Phone', price: 9000, category: 'Electronics', imgUrl: 'phone.jpg' },
+      { id: 2, name: 'Laptop', price: 25000, category: 'Electronics', imgUrl: 'laptop.jpg' }
+    ];
+    this.goodsState.setState(mock);
+  }
+}
+
+goods-page.component.html
+
+
+
+<div class="row">
+  <div *ngFor="let item of products" class="col-md-3">
+    <div class="card mb-3">
+      <img [src]="item.imgUrl" class="card-img-top">
+      <div class="card-body">
+        <h5>{{ item.name }}</h5>
+        <p>{{ item.price | currency:'THB' }}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+app-routing.module.ts
+
+
+
+const routes: Routes = [
+  {
+    path: 'goods',
+    canActivate: [AuthControl],
+    loadChildren: () => import('./modules/goods/goods.module').then(m => m.GoodsModule)
+  },
+  { path: '**', redirectTo: '/goods' }
+];
+
+
+
+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
+MODULE
+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
+
+
+# สร้างโฟลเดอร์ control
+mkdir src/app/controls/login-control
+cd src/app/controls/login-control
+
+# สร้าง module พร้อม routing
+ng g module controls/login-control --routing
+
+# (optional) guard
+ng g guard controls/login-control/login
+