diff --git a/angular.json b/angular.json index 7cff7cc..130cb74 100644 --- a/angular.json +++ b/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,10 +73,7 @@ "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": [ { @@ -84,9 +81,7 @@ "input": "public" } ], - "styles": [ - "src/styles.css" - ], + "styles": ["src/styles.css"], "scripts": [] } } diff --git a/src/app/app.component.css b/src/app/app.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index 36093e1..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1,336 +0,0 @@ - - - - - - - - - - - -
-
-
- -

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: '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.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 4d92fc2..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have the 'Rero-Angular' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('Rero-Angular'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Rero-Angular'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index eba57a2..ec125a4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,66 @@ -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { Component, inject } from '@angular/core'; +import { + NgOptimizedImage, + LowerCasePipe, + DecimalPipe, + DatePipe, + CurrencyPipe, +} from '@angular/common'; +import { RouterLink, RouterOutlet } from '@angular/router'; +import { CarService } from './car.service'; +import { ReversePipe } from './reverse.pipe'; @Component({ selector: 'app-root', - imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.css' + standalone: true, + imports: [ + NgOptimizedImage, // For optimized image loading + RouterOutlet, // For routing + RouterLink, // For router links + LowerCasePipe, // For lowercasing text + DecimalPipe, // For formatting numbers + DatePipe, // For formatting dates + CurrencyPipe, // For formatting currency + ReversePipe, // Custom reverse pipe + ], + template: ` + + + + +

Car Listing: {{ display }}

+

Username lowercased: {{ username | lowercase }}

+

Reverse Machine: {{ word | reverse }}

+ +

Pipes formatting demo

+ + + Angular logo + `, + styles: [ + ` + :host { + color: #a144eb; + } + `, + ], }) export class AppComponent { - title = 'Rero-Angular'; + carService = inject(CarService); + display = this.carService.getCars().join(' ⭐️ '); + + username = 'NathanPython2002'; + word = 'AngularRocks'; + + // Example data for pipes + num = 7.234; + birthday = new Date(1995, 6, 15); + cost = 1234.56; } diff --git a/src/app/app.config.ts b/src/app/app.config.ts deleted file mode 100644 index a1e7d6f..0000000 --- a/src/app/app.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; -import { provideRouter } from '@angular/router'; - -import { routes } from './app.routes'; - -export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] -}; diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..4fc8e18 --- /dev/null +++ b/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 {} diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..dcaa353 100644 --- a/src/app/app.routes.ts +++ b/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 }, +]; diff --git a/src/app/car.service.ts b/src/app/car.service.ts new file mode 100644 index 0000000..e524907 --- /dev/null +++ b/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]; + } +} diff --git a/src/app/child.component.ts b/src/app/child.component.ts new file mode 100644 index 0000000..301eebf --- /dev/null +++ b/src/app/child.component.ts @@ -0,0 +1,15 @@ +import { Component, output } from '@angular/core'; + +@Component({ + selector: 'app-child', + standalone: true, + template: ` `, +}) +export class Child { + // 👉 Output property (type string) + addItemEvent = output(); + + addItem() { + this.addItemEvent.emit('🐢'); + } +} diff --git a/src/app/comments.component.ts b/src/app/comments.component.ts new file mode 100644 index 0000000..8856cd1 --- /dev/null +++ b/src/app/comments.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-comments', + template: `

Here are some comments...

`, + standalone: true, +}) +export class Comments {} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..d554ad2 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + standalone: true, + template: `

Welcome to the home page !

`, +}) +export class Home {} diff --git a/src/app/reverse.pipe.ts b/src/app/reverse.pipe.ts new file mode 100644 index 0000000..aad498a --- /dev/null +++ b/src/app/reverse.pipe.ts @@ -0,0 +1,15 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'reverse', + standalone: true, +}) +export class ReversePipe implements PipeTransform { + transform(value: string): string { + let reverse = ''; + for (let i = value.length - 1; i >= 0; i--) { + reverse += value[i]; + } + return reverse; + } +} diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts new file mode 100644 index 0000000..cf21c45 --- /dev/null +++ b/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: ` +

Welcome to the user page!

+ +

+ Yes, the server is running +

+ +

No, the server is not running

+ + +

Users list :

+
+

{{ user.name }}

+
+ +

{{ message }}

+ +
This text can be edited
+ + + +
+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+
+ + + +

Your favorite framework is: {{ favoriteFramework }}

+ + +

Profile Form

+
+ + + +
+ +

Name: {{ profileForm.value.name }}

+

Email: {{ profileForm.value.email }}

+ + + + + +

Future comments

+ + `, +}) +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 🚀'; + } +} diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..bf081ac --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..a20cfe5 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,3 @@ +export const environment = { + production: false, +}; diff --git a/src/index.html b/src/index.html index 35b216f..38ed327 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,11 @@ - - - - - ReroAngular - - - - - - - + + + + + Rero Angular + + + + + diff --git a/src/main.ts b/src/main.ts index 35b00f3..d9a2e7e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,13 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { appConfig } from './app/app.config'; -import { AppComponent } from './app/app.component'; +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -bootstrapApplication(AppComponent, appConfig) +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic() + .bootstrapModule(AppModule) .catch((err) => console.error(err)); diff --git a/src/styles.css b/src/styles.css index 90d4ee0..e69de29 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */