greifch67520
/
MDT5_Angular
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

V0.1j Routing + Navbar funktioniert. Zweiter Einkaufszettel angelegt

master
Christian Greif 3 years ago
parent
4279edffe4
commit
71a495e9b4
19 changed files with 133 additions and 33 deletions
Split View Show Diff Stats
  1. 3
    3
      package-lock.json
  2. 1
    1
      package.json
  3. 4
    1
      src/app/app.component.html
  4. 11
    3
      src/app/app.module.ts
  5. 0
    1
      src/app/components/blog-create/blog-create.component.html
  6. 0
    0
      src/app/components/einkaufszettel2/einkaufszettel2.component.css
  7. 3
    0
      src/app/components/einkaufszettel2/einkaufszettel2.component.html
  8. 25
    0
      src/app/components/einkaufszettel2/einkaufszettel2.component.spec.ts
  9. 15
    0
      src/app/components/einkaufszettel2/einkaufszettel2.component.ts
  10. 0
    0
      src/app/components/home/home.component.css
  11. 10
    0
      src/app/components/home/home.component.html
  12. 25
    0
      src/app/components/home/home.component.spec.ts
  13. 15
    0
      src/app/components/home/home.component.ts
  14. 3
    0
      src/app/components/navbar/navbar.component.css
  15. 17
    0
      src/app/components/navbar/navbar.component.html
  16. 0
    0
      src/app/components/navbar/navbar.component.spec.ts
  17. 0
    0
      src/app/components/navbar/navbar.component.ts
  18. 0
    23
      src/app/navbar/navbar.component.html
  19. 1
    1
      src/index.html

+ 3
- 3
package-lock.json View File

@@ -481,9 +481,9 @@
"integrity": "sha512-DyUDGxp4kF4majcm9COVzu/9wzmgnfj+d6GUEjYkbqSH9QP05LonJ6wHMNxNMN6qMfawdCxDe0TnNDRPmHUj9w=="
},
"@angular/router": {
"version": "9.1.7",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.7.tgz",
"integrity": "sha512-ycrkhkCbfOMCe9PngFjnyk8nH5jt0Kyb2NPtjmaGOtSCuZBZ0kOU0rQGmQnj3d2PiT0Yir59S8eEAf3Fh0iDuw=="
"version": "9.1.11",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.11.tgz",
"integrity": "sha512-D6CCDeSK/F6dWSB/a1g/zB072xG5LadLSV8afQ57oX1KHePx21LcoRG4tUtFMMHh/jZXRc9pMQIR1/9FrrXF3Q=="
},
"@babel/code-frame": {
"version": "7.8.3",

+ 1
- 1
package.json View File

@@ -18,7 +18,7 @@
"@angular/forms": "~9.1.7",
"@angular/platform-browser": "~9.1.7",
"@angular/platform-browser-dynamic": "~9.1.7",
"@angular/router": "~9.1.7",
"@angular/router": "^9.1.11",
"bootstrap": "^4.5.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",

+ 4
- 1
src/app/app.component.html View File

@@ -1,3 +1,6 @@
<app-header></app-header>
<app-blog-create></app-blog-create>
<body>
<router-outlet></router-outlet>
</body>
<app-footer></app-footer>


+ 11
- 3
src/app/app.module.ts View File

@@ -4,10 +4,14 @@ import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { NavbarComponent } from './navbar/navbar.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { BlogCreateComponent } from './components/blog-create/blog-create.component';
import { AppRoutingModule } from './app-routing.module';
import { Einkaufszettel1Component } from './components/einkaufszettel1/einkaufszettel1.component';
import { HomeComponent } from './components/home/home.component';
import { Einkaufszettel2Component } from './components/einkaufszettel2/einkaufszettel2.component';

@NgModule({
declarations: [
@@ -16,12 +20,16 @@ import { BlogCreateComponent } from './components/blog-create/blog-create.compon
NavbarComponent,
HeaderComponent,
FooterComponent,
BlogCreateComponent
BlogCreateComponent,
Einkaufszettel1Component,
HomeComponent,
Einkaufszettel2Component
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
ReactiveFormsModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]

+ 0
- 1
src/app/components/blog-create/blog-create.component.html View File

@@ -1,4 +1,3 @@
<h1>Einkaufszettel1</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div>

src/app/navbar/navbar.component.css → src/app/components/einkaufszettel2/einkaufszettel2.component.css View File


+ 3
- 0
src/app/components/einkaufszettel2/einkaufszettel2.component.html View File

@@ -0,0 +1,3 @@
<h1>Einkaufszettel2</h1>
<app-blog-create><app-blog-entry></app-blog-entry></app-blog-create>


+ 25
- 0
src/app/components/einkaufszettel2/einkaufszettel2.component.spec.ts View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { Einkaufszettel2Component } from './einkaufszettel2.component';

describe('Einkaufszettel2Component', () => {
let component: Einkaufszettel2Component;
let fixture: ComponentFixture<Einkaufszettel2Component>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Einkaufszettel2Component ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(Einkaufszettel2Component);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 15
- 0
src/app/components/einkaufszettel2/einkaufszettel2.component.ts View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-einkaufszettel2',
templateUrl: './einkaufszettel2.component.html',
styleUrls: ['./einkaufszettel2.component.css']
})
export class Einkaufszettel2Component implements OnInit {

constructor() { }

ngOnInit(): void {
}

}

+ 0
- 0
src/app/components/home/home.component.css View File


+ 10
- 0
src/app/components/home/home.component.html View File

@@ -0,0 +1,10 @@
<nav>
<h1>Willkommen in der Einkaufszettel-App</h1>
<div>
<h3>Bitte wählen sie einen Einkaufszettel aus:</h3>
<a routerLink="/einkaufszettel1" routerLinkActive="active">Einkaufszettel1</a>
</div>
<div>
<a routerLink="/einkaufszettel2" routerLinkActive="active">Einkaufszettel2</a>
</div>
</nav>

+ 25
- 0
src/app/components/home/home.component.spec.ts View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';

describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 15
- 0
src/app/components/home/home.component.ts View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}

+ 3
- 0
src/app/components/navbar/navbar.component.css View File

@@ -0,0 +1,3 @@
.nav-link {
color: red
}

+ 17
- 0
src/app/components/navbar/navbar.component.html View File

@@ -0,0 +1,17 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="collapse navbar-collapse"
[ngClass]="{ 'show': navbarOpen }">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="einkaufszettel1">Einkaufszettel1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="einkaufszettel2">Einkaufszettel2</a>
</li>
</ul>
</div>
</nav>

src/app/navbar/navbar.component.spec.ts → src/app/components/navbar/navbar.component.spec.ts View File


src/app/navbar/navbar.component.ts → src/app/components/navbar/navbar.component.ts View File


+ 0
- 23
src/app/navbar/navbar.component.html View File

@@ -1,23 +0,0 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Menü
</a>

<button class="navbar-toggler" type="button"
(click)="toggleNavbar()">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"
[ngClass]="{ 'show': navbarOpen }">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Einkaufszettel 1</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Einkaufszettel 2</a>
</li>
</ul>
</div>
</nav>

+ 1
- 1
src/index.html View File

@@ -8,6 +8,6 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<app-root></app-root>
</body>
</html>

Write Preview
Loading…
Cancel
Save