feat: introduce file-based @analogjs/router library

angular.json

@@ -6,10 +6,11 @@
     "analog-app-e2e-cypress": "apps/analog-app-e2e-cypress",
     "analog-app-e2e-playwright": "apps/analog-app-e2e-playwright",
     "astro-angular": "packages/astro-angular",
+    "astro-app": "apps/astro-app",
+    "astro-app-e2e-playwright": "apps/astro-app-e2e-playwright",
     "create-analog": "packages/create-analog",
     "docs-app": "apps/docs-app",
-    "vite-plugin-angular": "packages/vite-plugin-angular",
-    "astro-app": "apps/astro-app",
-    "astro-app-e2e-playwright": "apps/astro-app-e2e-playwright"
+    "router": "packages/router",
+    "vite-plugin-angular": "packages/vite-plugin-angular"
   }
 }

apps/analog-app/src/app/app.component.ts

@@ -1,13 +1,18 @@
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { TopBarComponent } from './top-bar/top-bar.component';
-
-@Component({
-  selector: 'analogjs-root',
-  standalone: true,
-  imports: [TopBarComponent, RouterModule],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent { }
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { TopBarComponent } from './top-bar/top-bar.component';
+
+@Component({
+  selector: 'analogjs-root',
+  standalone: true,
+  imports: [TopBarComponent, RouterOutlet],
+  template: `
+    <app-top-bar></app-top-bar>
+
+    <div class="container">
+      <router-outlet></router-outlet>
+    </div>
+  `,
+})
+export class AppComponent {}

apps/analog-app/src/app/product-alerts/product-alerts.component.ts

@@ -1,17 +1,18 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Product } from '../products';
-
-@Component({
-  selector: 'app-product-alerts',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './product-alerts.component.html',
-  styleUrls: ['./product-alerts.component.css']
-})
-export class ProductAlertsComponent {
-  @Input() product: Product | undefined;
-  @Output() notify = new EventEmitter();
-}
-
-
+import { NgIf } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Product } from '../products';
+
+@Component({
+  selector: 'app-product-alerts',
+  standalone: true,
+  imports: [NgIf],
+  template: `
+    <p *ngIf="product && product.price > 700">
+      <button type="button" (click)="notify.emit()">Notify Me</button>
+    </p>
+  `,
+})
+export class ProductAlertsComponent {
+  @Input() product: Product | undefined;
+  @Output() notify = new EventEmitter();
+}

apps/analog-app/src/app/routes/cart.ts

@@ -0,0 +1,56 @@
+import { CurrencyPipe, NgForOf } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { RouterLinkWithHref } from '@angular/router';
+
+import { CartService } from '../cart.service';
+
+@Component({
+  selector: 'app-cart',
+  standalone: true,
+  imports: [RouterLinkWithHref, NgForOf, CurrencyPipe, ReactiveFormsModule],
+  template: `
+    <h3>Cart</h3>
+
+    <p>
+      <a routerLink="/shipping">Shipping Prices</a>
+    </p>
+
+    <div class="cart-item" *ngFor="let item of items">
+      <span>{{ item.name }} </span>
+      <span>{{ item.price | currency }}</span>
+    </div>
+
+    <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
+      <div>
+        <label for="name"> Name </label>
+        <input id="name" type="text" formControlName="name" />
+      </div>
+
+      <div>
+        <label for="address"> Address </label>
+        <input id="address" type="text" formControlName="address" />
+      </div>
+
+      <button class="button" type="submit">Purchase</button>
+    </form>
+  `,
+})
+export default class CartComponent {
+  private cartService = inject(CartService);
+  private formBuilder = inject(FormBuilder);
+
+  items = this.cartService.getItems();
+
+  checkoutForm = this.formBuilder.group({
+    name: '',
+    address: '',
+  });
+
+  onSubmit(): void {
+    // Process checkout data here
+    this.items = this.cartService.clearCart();
+    console.warn('Your order has been submitted', this.checkoutForm.value);
+    this.checkoutForm.reset();
+  }
+}