diff --git a/package-lock.json b/package-lock.json index c37bd97..1cd4b7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,15 +25,18 @@ "@angular/build": "^22.0.0-next.5", "@angular/cli": "^22.0.0-next.5", "@angular/compiler-cli": "^22.0.0-next.0", - "@tailwindcss/postcss": "^4.1.12", + "@tailwindcss/postcss": "^4.2.4", "@types/express": "^5.0.1", "@types/node": "^20.17.19", "jsdom": "^28.0.0", - "postcss": "^8.5.3", + "postcss": "^8.5.10", "prettier": "^3.8.1", - "tailwindcss": "^4.1.12", + "tailwindcss": "^4.2.4", "typescript": "~6.0.2", "vitest": "^4.0.8" + }, + "engines": { + "node": "24.13.1" } }, "node_modules/@acemir/cssom": { diff --git a/package.json b/package.json index be9b597..83178b3 100644 --- a/package.json +++ b/package.json @@ -32,13 +32,13 @@ "@angular/build": "^22.0.0-next.5", "@angular/cli": "^22.0.0-next.5", "@angular/compiler-cli": "^22.0.0-next.0", - "@tailwindcss/postcss": "^4.1.12", + "@tailwindcss/postcss": "^4.2.4", "@types/express": "^5.0.1", "@types/node": "^20.17.19", "jsdom": "^28.0.0", - "postcss": "^8.5.3", + "postcss": "^8.5.10", "prettier": "^3.8.1", - "tailwindcss": "^4.1.12", + "tailwindcss": "^4.2.4", "typescript": "~6.0.2", "vitest": "^4.0.8" } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 27a00f1..e80589d 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,5 +1,5 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode } from '@angular/core'; -import { provideRouter } from '@angular/router'; +import { provideRouter, withComponentInputBinding } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; @@ -8,7 +8,7 @@ import { provideServiceWorker } from '@angular/service-worker'; export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), - provideRouter(routes), + provideRouter(routes, withComponentInputBinding()), provideClientHydration(withEventReplay()), provideServiceWorker('ngsw-worker.js', { enabled: !isDevMode(), diff --git a/src/app/app.html b/src/app/app.html index 4f4ddf5..3c9377d 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,353 +1,4 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for ( - item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { - title: 'Prompt and best practices for AI', - link: 'https://angular.dev/ai/develop-with-ai', - }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { - title: 'Angular Language Service', - link: 'https://angular.dev/tools/language-service', - }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; - track item.title - ) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - + + diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..2ee7125 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,7 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +export const routes: Routes = [ + { path: '', loadComponent: () => import('./home/home') }, + { path: 'users', loadComponent: () => import('./users/users') }, + { path: 'users/:id', loadComponent: () => import('./users/single-user/single-user') }, +]; diff --git a/src/app/app.ts b/src/app/app.ts index 2474be1..d3d4001 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,9 +1,9 @@ import { Component, signal } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router'; @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, RouterLink, RouterLinkActive], templateUrl: './app.html', styleUrl: './app.css', }) diff --git a/src/app/home/home.css b/src/app/home/home.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/home.html b/src/app/home/home.html new file mode 100644 index 0000000..5f2c53f --- /dev/null +++ b/src/app/home/home.html @@ -0,0 +1 @@ +

home works!

diff --git a/src/app/home/home.spec.ts b/src/app/home/home.spec.ts new file mode 100644 index 0000000..ecaf908 --- /dev/null +++ b/src/app/home/home.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import Home from './home'; + +describe('Home', () => { + let component: Home; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Home], + }).compileComponents(); + + fixture = TestBed.createComponent(Home); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.ts b/src/app/home/home.ts new file mode 100644 index 0000000..970bec9 --- /dev/null +++ b/src/app/home/home.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + imports: [], + templateUrl: './home.html', + styleUrl: './home.css', +}) +export default class Home {} diff --git a/src/app/users/single-user/single-user.css b/src/app/users/single-user/single-user.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/users/single-user/single-user.html b/src/app/users/single-user/single-user.html new file mode 100644 index 0000000..a2b9bcc --- /dev/null +++ b/src/app/users/single-user/single-user.html @@ -0,0 +1,10 @@ +

single-user works!

+@if (userDetails.hasValue()) { + 
+    {{ userDetails.value() | json }}
+
+} + +@if (userDetails.isLoading()) { +

Loading...

+} diff --git a/src/app/users/single-user/single-user.ts b/src/app/users/single-user/single-user.ts new file mode 100644 index 0000000..89e2569 --- /dev/null +++ b/src/app/users/single-user/single-user.ts @@ -0,0 +1,15 @@ +import { JsonPipe } from '@angular/common'; +import { httpResource } from '@angular/common/http'; +import { Component, input } from '@angular/core'; + +@Component({ + selector: 'app-single-user', + imports: [JsonPipe], + templateUrl: './single-user.html', + styleUrl: './single-user.css', +}) +export default class SingleUser { + id = input.required(); + + userDetails = httpResource(() => `https://jsonplaceholder.typicode.com/users/${this.id()}`); +} diff --git a/src/app/users/users.css b/src/app/users/users.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/users/users.html b/src/app/users/users.html new file mode 100644 index 0000000..b691d4d --- /dev/null +++ b/src/app/users/users.html @@ -0,0 +1,12 @@ +

users works!

+@if (users.hasValue()) { +
+ @for (user of users.value(); track user.id) { +
+

+ {{ user.name }} +

+
+ } +
+} diff --git a/src/app/users/users.spec.ts b/src/app/users/users.spec.ts new file mode 100644 index 0000000..f10ff03 --- /dev/null +++ b/src/app/users/users.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import Users from './users'; + +describe('Users', () => { + let component: Users; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Users], + }).compileComponents(); + + fixture = TestBed.createComponent(Users); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/users/users.ts b/src/app/users/users.ts new file mode 100644 index 0000000..5f42c47 --- /dev/null +++ b/src/app/users/users.ts @@ -0,0 +1,13 @@ +import { httpResource } from '@angular/common/http'; +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-users', + imports: [RouterLink], + templateUrl: './users.html', + styleUrl: './users.css', +}) +export default class Users { + users = httpResource(() => 'https://jsonplaceholder.typicode.com/users'); +} diff --git a/src/styles.css b/src/styles.css index 70d3686..d4b5078 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,3 +1 @@ -/* You can add global styles to this file, and also import other style files */ - @import 'tailwindcss';