Skip to content

Commit ddfe8db

Browse files
committed
Add angular example
1 parent 6ace334 commit ddfe8db

29 files changed

Lines changed: 11766 additions & 469 deletions
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Angular E-commerce (Spoosh)
2+
3+
E-commerce demo showcasing the Spoosh data layer with `@spoosh/angular`
4+
built with standalone components, signals, the new control flow (`@if`, `@for`,
5+
`@switch`), `input()` route bindings, and `output()`.
6+
7+
It mirrors the [`react-ecommerce`](../react-ecommerce) example feature-for-feature,
8+
so you can compare the exact same app across both frameworks.
9+
10+
## Spoosh Features Demonstrated
11+
12+
- **Reactive reads**`injectRead` re-runs automatically when a signal it
13+
reads (page number, route id) changes
14+
- **Optimistic updates** — instant UI feedback for likes, comments, and cart
15+
actions, with automatic rollback on failure
16+
- **Automatic invalidation** — mutations invalidate related queries by path tag
17+
- **Polling** — order status refreshes every 2s until paid (`pollingPlugin`)
18+
- **Hover prefetch** — preload product details on hover with `prefetch`
19+
- **Transform** — derived cart totals via `transformPlugin` (`meta().transformedData`)
20+
- **Smart retry** — retry failed requests on 5xx only
21+
- **Cache & deduplication** — efficient fetching with `cachePlugin` and
22+
`deduplicationPlugin`
23+
24+
## Mocking
25+
26+
API requests are mocked in the browser with [MSW](https://mswjs.io), so no
27+
backend is required. The worker script lives in `public/mockServiceWorker.js`.
28+
If it ever goes missing, regenerate it:
29+
30+
```bash
31+
pnpm --filter @spoosh/example-angular-ecommerce msw:init
32+
```
33+
34+
## Run
35+
36+
```bash
37+
pnpm --filter @spoosh/example-angular-ecommerce dev
38+
```
39+
40+
Then open the printed local URL (defaults to http://localhost:4204).
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-ecommerce": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:application",
15+
"options": {
16+
"outputPath": "dist/angular-ecommerce",
17+
"index": "src/index.html",
18+
"browser": "src/main.ts",
19+
"polyfills": ["zone.js"],
20+
"tsConfig": "tsconfig.app.json",
21+
"assets": [
22+
{
23+
"glob": "**/*",
24+
"input": "public"
25+
}
26+
],
27+
"styles": ["src/styles.css"],
28+
"scripts": []
29+
},
30+
"configurations": {
31+
"production": {
32+
"budgets": [
33+
{
34+
"type": "initial",
35+
"maximumWarning": "800kB",
36+
"maximumError": "2MB"
37+
},
38+
{
39+
"type": "anyComponentStyle",
40+
"maximumWarning": "4kB",
41+
"maximumError": "8kB"
42+
}
43+
],
44+
"outputHashing": "all"
45+
},
46+
"development": {
47+
"optimization": false,
48+
"extractLicenses": false,
49+
"sourceMap": true
50+
}
51+
},
52+
"defaultConfiguration": "production"
53+
},
54+
"serve": {
55+
"builder": "@angular-devkit/build-angular:dev-server",
56+
"options": {
57+
"prebundle": false
58+
},
59+
"configurations": {
60+
"production": {
61+
"buildTarget": "angular-ecommerce:build:production"
62+
},
63+
"development": {
64+
"buildTarget": "angular-ecommerce:build:development"
65+
}
66+
},
67+
"defaultConfiguration": "development"
68+
}
69+
}
70+
}
71+
},
72+
"cli": {
73+
"analytics": false
74+
}
75+
}
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@spoosh/example-angular-ecommerce",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"ng": "ng",
7+
"dev": "ng serve --port 4204",
8+
"build": "ng build",
9+
"preview": "ng serve --port 4214 --configuration production",
10+
"typecheck": "ng build --configuration development",
11+
"lint": "eslint 'src/**/*.ts' --fix",
12+
"format": "prettier --write 'src/**/*.ts'",
13+
"msw:init": "msw init public --save"
14+
},
15+
"dependencies": {
16+
"@angular/common": "21.2.16",
17+
"@angular/compiler": "21.2.16",
18+
"@angular/core": "21.2.16",
19+
"@angular/forms": "21.2.16",
20+
"@angular/platform-browser": "21.2.16",
21+
"@angular/router": "21.2.16",
22+
"@spoosh/core": "workspace:*",
23+
"@spoosh/devtool": "workspace:*",
24+
"@spoosh/plugin-cache": "workspace:*",
25+
"@spoosh/plugin-debounce": "workspace:*",
26+
"@spoosh/plugin-deduplication": "workspace:*",
27+
"@spoosh/plugin-gc": "workspace:*",
28+
"@spoosh/plugin-invalidation": "workspace:*",
29+
"@spoosh/plugin-optimistic": "workspace:*",
30+
"@spoosh/plugin-polling": "workspace:*",
31+
"@spoosh/plugin-prefetch": "workspace:*",
32+
"@spoosh/plugin-progress": "workspace:*",
33+
"@spoosh/plugin-refetch": "workspace:*",
34+
"@spoosh/plugin-retry": "workspace:*",
35+
"@spoosh/plugin-transform": "workspace:*",
36+
"@spoosh/angular": "workspace:*",
37+
"msw": "^2.11.3",
38+
"rxjs": "~7.8.0",
39+
"tslib": "^2.3.0",
40+
"zone.js": "~0.15.0"
41+
},
42+
"devDependencies": {
43+
"@angular-devkit/build-angular": "21.2.14",
44+
"@angular/cli": "21.2.14",
45+
"@angular/compiler-cli": "21.2.16",
46+
"@types/node": "^20.0.0",
47+
"typescript": "~5.9.2"
48+
}
49+
}

0 commit comments

Comments
 (0)