greifch67520/MDT5_Angular
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Christian Greif 2020-06-13 12:59:12 +02:00
parent 4279edffe4
commit 71a495e9b4
19 changed files with 133 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

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

2
package.json
View File

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

5
src/app/app.component.html
View File

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

14
src/app/app.module.ts
View File

@ -4,10 +4,14 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 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 { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component'; import { FooterComponent } from './components/footer/footer.component';
import { BlogCreateComponent } from './components/blog-create/blog-create.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({ @NgModule({
declarations: [ declarations: [
@ -16,12 +20,16 @@ import { BlogCreateComponent } from './components/blog-create/blog-create.compon
NavbarComponent, NavbarComponent,
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
BlogCreateComponent BlogCreateComponent,
Einkaufszettel1Component,
HomeComponent,
Einkaufszettel2Component
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule, FormsModule,
ReactiveFormsModule ReactiveFormsModule,
AppRoutingModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

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> <app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2> <h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div> <div>

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

3
src/app/components/einkaufszettel2/einkaufszettel2.component.html Normal file
View File

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

25
src/app/components/einkaufszettel2/einkaufszettel2.component.spec.ts Normal file
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
src/app/components/einkaufszettel2/einkaufszettel2.component.ts Normal file
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
src/app/components/home/home.component.css Normal file
View File

10
src/app/components/home/home.component.html Normal file
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
src/app/components/home/home.component.spec.ts Normal file
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
src/app/components/home/home.component.ts Normal file
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
src/app/components/navbar/navbar.component.css Normal file
View File

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

17
src/app/components/navbar/navbar.component.html Normal file
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>

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

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

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>

2
src/index.html
View File

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