feat: inject CarService into AppComponent and display cars

angular.json

@@ -16,19 +16,19 @@
             "outputPath": "dist/rero-angular",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
+              "src/assets",
+              "src/favicon.ico",
               {
                 "glob": "**/*",
-                "input": "public"
+                "input": "public",
+                "output": "/"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -73,20 +73,15 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }

src/app/app.component.ts

@@ -1,12 +1,34 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, inject } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { CarService } from './car.service';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  standalone: true,
+  imports: [NgOptimizedImage, RouterOutlet, RouterLink],
+  template: `
+    <nav>
+      <a routerLink="/">Home</a> |
+      <a routerLink="/user">User</a>
+    </nav>
+
+    <router-outlet></router-outlet>
+
+    <p>Car Listing: {{ display }}</p>
+
+    <img ngSrc="assets/logo.svg" alt="Angular logo" width="32" height="32" />
+  `,
+  styles: [
+    `
+      :host {
+        color: #a144eb;
+      }
+    `,
+  ],
 })
 export class AppComponent {
-  title = 'Rero-Angular';
+  carService = inject(CarService);
+
+  display = this.carService.getCars().join(' ⭐️ ');
 }

src/app/app.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { routes } from './app.routes';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [BrowserModule, AppComponent, RouterModule.forRoot(routes)],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

src/app/app.routes.ts

@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { Home } from './home/home.component';
+import { User } from './user/user.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', title: 'App Home Page', component: Home },
+  { path: 'user', title: 'App User Page', component: User },
+];

src/app/car.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root', //  makes this service available application-wide
+})
+export class CarService {
+  cars = ['Sunflower GT', 'Flexus Sport', 'Sprout Mach One'];
+
+  getCars(): string[] {
+    return this.cars;
+  }
+
+  getCar(id: number) {
+    return this.cars[id];
+  }
+}

src/app/child.component.ts

@@ -0,0 +1,15 @@
+import { Component, output } from '@angular/core';
+
+@Component({
+  selector: 'app-child',
+  standalone: true,
+  template: ` <button (click)="addItem()">Add Item</button> `,
+})
+export class Child {
+  // 👉 Output property (type string)
+  addItemEvent = output<string>();
+
+  addItem() {
+    this.addItemEvent.emit('🐢');
+  }
+}

src/app/comments.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-comments',
+  template: ` <p>Here are some comments...</p> `,
+  standalone: true,
+})
+export class Comments {}

src/app/home/home.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  template: `<h1>Welcome to the home page !</h1>`,
+})
+export class Home {}

src/app/user/user.component.ts

@@ -0,0 +1,166 @@
+import { Component } from '@angular/core';
+import { Child } from '../child.component';
+import { Comments } from '../comments.component';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormGroup,
+  FormControl,
+  Validators,
+} from '@angular/forms';
+
+@Component({
+  selector: 'app-user',
+  standalone: true,
+  imports: [Child, Comments, FormsModule, ReactiveFormsModule],
+  template: `
+    <h1>Welcome to the user page!</h1>
+
+    <p *ngIf="isServerRunning; else serverStopped">
+      Yes, the server is running
+    </p>
+    <ng-template #serverStopped>
+      <p>No, the server is not running</p>
+    </ng-template>
+
+    <h2>Users list :</h2>
+    <div *ngFor="let user of users; trackBy: trackById">
+      <p>{{ user.name }}</p>
+    </div>
+
+    <p>{{ message }}</p>
+
+    <div [contentEditable]="isEditable">This text can be edited</div>
+
+    <app-child (addItemEvent)="addItem($event)"></app-child>
+
+    <article>
+      <p>
+        Angular is my favorite framework, and this is why. Angular has the
+        coolest deferrable view feature that makes defer loading content the
+        easiest and most ergonomic it could possibly be. The Angular community
+        is also filled with amazing contributors and experts that create
+        excellent content. The community is welcoming and friendly, and it
+        really is the best community out there.
+      </p>
+      <p>
+        I can't express enough how much I enjoy working with Angular. It offers
+        the best developer experience I've ever had. I love that the Angular
+        team puts their developers first and takes care to make us very happy.
+        They genuinely want Angular to be the best framework it can be, and
+        they're doing such an amazing job at it, too. This statement comes from
+        my heart and is not at all copied and pasted. In fact, I think I'll say
+        these exact same things again a few times.
+      </p>
+      <p>
+        Angular is my favorite framework, and this is why. Angular has the
+        coolest deferrable view feature that makes defer loading content the
+        easiest and most ergonomic it could possibly be. The Angular community
+        is also filled with amazing contributors and experts that create
+        excellent content. The community is welcoming and friendly, and it
+        really is the best community out there.
+      </p>
+      <p>
+        I can't express enough how much I enjoy working with Angular. It offers
+        the best developer experience I've ever had. I love that the Angular
+        team puts their developers first and takes care to make us very happy.
+        They genuinely want Angular to be the best framework it can be, and
+        they're doing such an amazing job at it, too. This statement comes from
+        my heart and is not at all copied and pasted. In fact, I think I'll say
+        these exact same things again a few times.
+      </p>
+      <p>
+        Angular is my favorite framework, and this is why. Angular has the
+        coolest deferrable view feature that makes defer loading content the
+        easiest and most ergonomic it could possibly be. The Angular community
+        is also filled with amazing contributors and experts that create
+        excellent content. The community is welcoming and friendly, and it
+        really is the best community out there.
+      </p>
+      <p>
+        I can't express enough how much I enjoy working with Angular. It offers
+        the best developer experience I've ever had. I love that the Angular
+        team puts their developers first and takes care to make us very happy.
+        They genuinely want Angular to be the best framework it can be, and
+        they're doing such an amazing job at it, too. This statement comes from
+        my heart and is not at all copied and pasted.
+      </p>
+    </article>
+
+    <label for="framework">
+      Favorite Framework:
+      <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
+    </label>
+
+    <p>Your favorite framework is: {{ favoriteFramework }}</p>
+    <button (click)="showFramework()">Show Framework</button>
+
+    <h2>Profile Form</h2>
+    <form [formGroup]="profileForm" (ngSubmit)="handleSubmit()">
+      <label>
+        Name
+        <input type="text" formControlName="name" />
+      </label>
+      <label>
+        Email
+        <input type="email" formControlName="email" />
+      </label>
+      <button type="submit" [disabled]="!profileForm.valid">Submit</button>
+    </form>
+
+    <p>Name: {{ profileForm.value.name }}</p>
+    <p>Email: {{ profileForm.value.email }}</p>
+
+    <ng-container *ngIf="commentsVisible; else placeholder">
+      <app-comments></app-comments>
+    </ng-container>
+    <ng-template #placeholder>
+      <p>Future comments</p>
+    </ng-template>
+  `,
+})
+export class User {
+  isServerRunning = true;
+  isEditable = true;
+  message = '';
+  favoriteFramework = '';
+  commentsVisible = false;
+
+  users = [
+    { id: 0, name: 'Sarah' },
+    { id: 1, name: 'Amy' },
+    { id: 2, name: 'Rachel' },
+    { id: 3, name: 'Jessica' },
+    { id: 4, name: 'Poornima' },
+  ];
+
+  // Formular reactive
+  profileForm = new FormGroup({
+    name: new FormControl('', Validators.required),
+    email: new FormControl('', [Validators.required, Validators.email]),
+  });
+
+  showFramework() {
+    alert(this.favoriteFramework);
+  }
+
+  handleSubmit() {
+    alert(this.profileForm.value.name + ' | ' + this.profileForm.value.email);
+  }
+
+  addItem(event: string) {
+    this.users.push({ id: this.users.length, name: event });
+  }
+
+  trackById(index: number, user: any) {
+    return user.id;
+  }
+
+  loadComments() {
+    this.commentsVisible = true;
+  }
+
+  onMouseOver() {
+    this.message = 'Way to go 🚀';
+  }
+}

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};