diff --git a/angular.json b/angular.json
index 4bbb71a..8a327df 100644
--- a/angular.json
+++ b/angular.json
@@ -92,5 +92,8 @@
}
}
}
+ },
+ "cli": {
+ "analytics": false
}
}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 36093e1..d3cbf4b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,336 +1,5 @@
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
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 }}
-
-
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4d20760..4b34415 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './component/header/header.component';
+import { FooterComponent } from './component/footer/footer.component';
+
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ imports: [RouterOutlet, HeaderComponent, FooterComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..cdc1771 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,9 @@
import { Routes } from '@angular/router';
+import { HomeComponent } from './component/home/home.component';
+import { AboutComponent } from './component/about/about.component';
-export const routes: Routes = [];
+export const routes: Routes = [
+ { path: '', component: HomeComponent },
+ { path: 'home', component: HomeComponent },
+ { path: 'about', component: AboutComponent }
+];
diff --git a/src/app/component/about/about.component.css b/src/app/component/about/about.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/component/about/about.component.html b/src/app/component/about/about.component.html
new file mode 100644
index 0000000..6094aa9
--- /dev/null
+++ b/src/app/component/about/about.component.html
@@ -0,0 +1 @@
+
about works!
diff --git a/src/app/component/about/about.component.spec.ts b/src/app/component/about/about.component.spec.ts
new file mode 100644
index 0000000..74d6d9e
--- /dev/null
+++ b/src/app/component/about/about.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+ let component: AboutComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AboutComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(AboutComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/component/about/about.component.ts b/src/app/component/about/about.component.ts
new file mode 100644
index 0000000..1988da8
--- /dev/null
+++ b/src/app/component/about/about.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-about',
+ imports: [],
+ templateUrl: './about.component.html',
+ styleUrl: './about.component.css'
+})
+export class AboutComponent {
+
+}
diff --git a/src/app/component/footer/footer.component.css b/src/app/component/footer/footer.component.css
new file mode 100644
index 0000000..65945df
--- /dev/null
+++ b/src/app/component/footer/footer.component.css
@@ -0,0 +1,9 @@
+.footer {
+ background: #f5f5f5;
+ padding: 1rem;
+ text-align: center;
+ border-top: 1px solid #ddd;
+ font-size: 0.95rem;
+ color: #666;
+ margin-top: 2rem;
+}
diff --git a/src/app/component/footer/footer.component.html b/src/app/component/footer/footer.component.html
new file mode 100644
index 0000000..d4b0798
--- /dev/null
+++ b/src/app/component/footer/footer.component.html
@@ -0,0 +1,3 @@
+
diff --git a/src/app/component/footer/footer.component.spec.ts b/src/app/component/footer/footer.component.spec.ts
new file mode 100644
index 0000000..3f93915
--- /dev/null
+++ b/src/app/component/footer/footer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+ let component: FooterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [FooterComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/component/footer/footer.component.ts b/src/app/component/footer/footer.component.ts
new file mode 100644
index 0000000..08cf5c1
--- /dev/null
+++ b/src/app/component/footer/footer.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-footer',
+ imports: [],
+ templateUrl: './footer.component.html',
+ styleUrl: './footer.component.css'
+})
+export class FooterComponent {
+
+}
diff --git a/src/app/component/header/header.component.css b/src/app/component/header/header.component.css
new file mode 100644
index 0000000..c91d8d1
--- /dev/null
+++ b/src/app/component/header/header.component.css
@@ -0,0 +1,16 @@
+.header {
+ background: #f5f5f5;
+ padding: 1rem;
+ text-align: center;
+ border-bottom: 1px solid #ddd;
+}
+nav a {
+ color: #333;
+ text-decoration: none;
+ margin: 0 1rem;
+ font-weight: 500;
+}
+nav a.active {
+ color: #1976d2;
+ border-bottom: 2px solid #1976d2;
+}
diff --git a/src/app/component/header/header.component.html b/src/app/component/header/header.component.html
new file mode 100644
index 0000000..13a359d
--- /dev/null
+++ b/src/app/component/header/header.component.html
@@ -0,0 +1,7 @@
+
diff --git a/src/app/component/header/header.component.spec.ts b/src/app/component/header/header.component.spec.ts
new file mode 100644
index 0000000..204ed6e
--- /dev/null
+++ b/src/app/component/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HeaderComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(HeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/component/header/header.component.ts b/src/app/component/header/header.component.ts
new file mode 100644
index 0000000..9beb6c9
--- /dev/null
+++ b/src/app/component/header/header.component.ts
@@ -0,0 +1,17 @@
+
+import { Component } from '@angular/core';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+ selector: 'app-header',
+ imports: [RouterLink, RouterLinkActive],
+ templateUrl: './header.component.html',
+ styleUrl: './header.component.css'
+})
+export class HeaderComponent {
+ constructor(public router: Router) {}
+
+ isHomeActive(): boolean {
+ return this.router.url === '/' || this.router.url === '/home';
+ }
+}
diff --git a/src/app/component/home/home.component.css b/src/app/component/home/home.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/component/home/home.component.html b/src/app/component/home/home.component.html
new file mode 100644
index 0000000..5f2c53f
--- /dev/null
+++ b/src/app/component/home/home.component.html
@@ -0,0 +1 @@
+home works!
diff --git a/src/app/component/home/home.component.spec.ts b/src/app/component/home/home.component.spec.ts
new file mode 100644
index 0000000..1191557
--- /dev/null
+++ b/src/app/component/home/home.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HomeComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/component/home/home.component.ts b/src/app/component/home/home.component.ts
new file mode 100644
index 0000000..35c8e26
--- /dev/null
+++ b/src/app/component/home/home.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-home',
+ imports: [],
+ templateUrl: './home.component.html',
+ styleUrl: './home.component.css'
+})
+export class HomeComponent {
+
+}