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..957702d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,27 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { NgOptimizedImage } from '@angular/common'; +import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', - imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.css' + standalone: true, + imports: [NgOptimizedImage, RouterOutlet, RouterLink], + template: ` + + + + + Angular logo + `, + styles: [ + ` + :host { + color: #a144eb; + } + `, + ], }) -export class AppComponent { - title = 'Rero-Angular'; -} +export class AppComponent {} 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/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/user/user.component.ts b/src/app/user/user.component.ts new file mode 100644 index 0000000..5680174 --- /dev/null +++ b/src/app/user/user.component.ts @@ -0,0 +1,110 @@ +import { Component } from '@angular/core'; +import { Child } from '../child.component'; +import { Comments } from '../comments.component'; + +@Component({ + selector: 'app-user', + standalone: true, + imports: [Child, Comments], + template: ` +

Welcome to the user page!

+ + @if (isServerRunning) { +

Yes, the server is running

+ } @else { +

No, the server is not running

+ } + +

Users list :

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

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

+
+ + @defer (on viewport) { + + } @placeholder { +

Future comments

+ } @loading (minimum 2s) { +

Loading comments...

+ } + `, +}) +export class User { + isServerRunning = true; + isEditable = true; + message = ''; + + users = [ + { id: 0, name: 'Sarah' }, + { id: 1, name: 'Amy' }, + { id: 2, name: 'Rachel' }, + { id: 3, name: 'Jessica' }, + { id: 4, name: 'Poornima' }, + ]; + + onMouseOver() { + this.message = 'Way to go 🚀'; + } + + addItem(event: string) { + this.users.push({ id: this.users.length, name: event }); + } +} 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 */