143 lines
3.3 KiB
Plaintext
143 lines
3.3 KiB
Plaintext
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
|
|
|