transfer 2 angular

README.md

@@ -1,4 +1,4 @@
-# Landingpage
+# AngUniversityHttpclient
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
 

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "landingpage": {
+    "ang-university-httpclient": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -23,7 +23,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/landingpage",
+            "outputPath": "dist/ang-university-httpclient",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
@@ -35,9 +35,8 @@
               "src/assets"
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css",
-              "node_modules/bootstrap5/src/css/bootstrap.min.css",
+              "node_modules/bootstrap5/src/css/bootstrap.min.css"
-              "src/styles.css"
             ],
             "scripts": [
               "node_modules/bootstrap5/src/js/bootstrap.bundle.min.js"
@@ -71,10 +70,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "landingpage:build:production"
+              "buildTarget": "ang-university-httpclient:build:production"
             },
             "development": {
-              "buildTarget": "landingpage:build:development"
+              "buildTarget": "ang-university-httpclient:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -82,7 +81,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "landingpage:build"
+            "buildTarget": "ang-university-httpclient:build"
           }
         },
         "test": {
@@ -98,7 +97,6 @@
               "src/assets"
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "landingpage",
+  "name": "ang-university-httpclient",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -11,23 +11,23 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.1.0",
-    "@angular/cdk": "^17.1.1",
     "@angular/common": "^17.1.0",
     "@angular/compiler": "^17.1.0",
     "@angular/core": "^17.1.0",
     "@angular/forms": "^17.1.0",
-    "@angular/material": "^17.1.1",
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
+    "@types/lodash": "^4.14.202",
     "bootstrap5": "^1.1.9",
+    "lodash": "^4.17.21",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.1.0",
-    "@angular/cli": "^17.1.1",
+    "@angular/cli": "^17.1.0",
     "@angular/compiler-cli": "^17.1.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",

src/app/app-routing.module.ts

@@ -1,16 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ListLinksComponent } from './list-links/list-links.component';
+import { LinksComponent } from './links/links.component';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'list-links', pathMatch: 'full' },
+  { path: '', redirectTo: '/list-links', pathMatch: 'full'},
-  { path: 'list-links', component:ListLinksComponent },
+  { path: 'list-links', component:LinksComponent }
-  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

@@ -1,25 +1,24 @@
-<nav class="navbar navbar-expand-lg bg-body-tertiary" >
+<header>
-  <div class="container-fluid">
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <a class="navbar-brand" href="hallo">Navbar</a>
+    <div class="container">
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+      <a href="#" class="navbar-brand">
-      <span class="navbar-toggler-icon"></span>
+        <img src="assets/img/net-so.org.logo.png" alt="" width="100" class="d-inline-block align-text-center">
-    </button>
+        Net-So.Org
-    <div class="collapse navbar-collapse" id="navbarNavAltMarkup" data-bs-theme="dark">
+      </a>
-      <div class="navbar-nav">
-
-        <a class="nav-link" routerLink="/list-links" routerLinkActive="active" ariaCurrentWhenActive="page">Internal Links</a>
-
-
-      </div>
     </div>
-  </div>
+  </nav>
-</nav>
+
-<div class="container-fluid text-center">
+</header>
-<!-- The routed views render in the <router-outlet>-->
+
+
+<div class="container">
   <router-outlet></router-outlet>
 </div>
 
-
+<footer>
-<footer class="container-fluid text-center">
+  <div class="container bg-light text-center">
-  <p>Footer Text</p>
+    Most of the stuff people worry about ain’t never gonna happen anyway.
+  </div>
 </footer>
+
+

src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'landingpage'`, () => {
+  it(`should have as title 'ang-university-httpclient'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('landingpage');
+    expect(app.title).toEqual('ang-university-httpclient');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, landingpage');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ang-university-httpclient');
   });
 });

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  title = 'landingpage';
+  title = 'ang-university-httpclient';
 }

src/app/app.module.ts

@@ -1,29 +1,21 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { MatGridListModule } from '@angular/material/grid-list';
-import {MatSidenavModule} from '@angular/material/sidenav';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { LinksComponent } from './links/links.component';
-import { ListLinksComponent } from './list-links/list-links.component';
+import * as _ from 'lodash';
 
 @NgModule({
   declarations: [
     AppComponent,
-    PageNotFoundComponent,
+    LinksComponent
-    ListLinksComponent,
-    PageNotFoundComponent,
-    ListLinksComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule,
+    HttpClientModule
-    MatGridListModule,
-    MatSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/links.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LinksService } from './links.service';
+
+describe('LinksService', () => {
+  let service: LinksService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LinksService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/links.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Links } from './links';
+import { Observable } from 'rxjs';
+import * as _ from 'lodash';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LinksService {
+
+  constructor(private http: HttpClient) { }
+    private apiUrl = 'http://10.0.0.104:8055/items/landingpage';
+    public apiKey = 'KGjpxZ3tesmhEXHS7C7JbKDyW6YJlgQT';
+
+    httpOptions = {
+      headers: new HttpHeaders({
+        'Authorization': `Bearer ${this.apiKey}`,
+      }),
+    };
+
+    getLinks(): Observable<Links> {
+      return this.http
+        .get<Links>(this.apiUrl, this.httpOptions)
+
+
+    }
+}

src/app/links.ts

@@ -1,9 +1,8 @@
-export interface Applications {
+export interface Links {
   id: string;
   name: string;
   beschreibung: string;
   bild: string;
   link: string;
-  link_zu_software: string;
+  link_zu_software: string
-  status: string
 }

src/app/links/links.component.html

@@ -0,0 +1,14 @@
+
+<div class="card"  *ngFor="let link of linkList">
+  <a href="{{ link.link }}" target="_blank" class="card-link">
+    <img src="http://10.0.0.104:8055/assets/{{ link.bild }}?access_token={{ apiKey }}&width=200" alt=" {{ link.name }}" style="width:200px" >
+  </a>
+  <div class="card-body">
+    <h5 class="card-title"> {{ link.name }} </h5>
+    <p class="card-text">{{ link.beschreibung }}</p>
+
+    <a href="{{ link.link_zu_software }}" target="_blank" class="card-link">Website: {{ link.name }}</a>
+  </div>
+</div>
+
+

src/app/links/links.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ListLinksComponent } from './list-links.component';
+import { LinksComponent } from './links.component';
 
-describe('ListLinksComponent', () => {
+describe('LinksComponent', () => {
-  let component: ListLinksComponent;
+  let component: LinksComponent;
-  let fixture: ComponentFixture<ListLinksComponent>;
+  let fixture: ComponentFixture<LinksComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ListLinksComponent]
+      declarations: [LinksComponent]
     })
     .compileComponents();
     
-    fixture = TestBed.createComponent(ListLinksComponent);
+    fixture = TestBed.createComponent(LinksComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/links/links.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { LinksService } from '../links.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-links',
+  templateUrl: './links.component.html',
+  styleUrl: './links.component.css'
+})
+export class LinksComponent implements OnInit {
+
+  linkList: any = [];
+  apiKey = this.linkservice.apiKey;
+
+  constructor (public linkservice: LinksService) {}
+
+  ngOnInit(): void {
+      this.getLinks();
+  }
+
+  getLinks() {
+    return this.linkservice.getLinks().subscribe((data: any) => {
+      this.linkList = data.data;
+      this.apiKey;
+      console.log(this.linkList);
+
+    });
+  }
+
+}

src/app/list-links/list-links.component.css

@@ -1,3 +0,0 @@
-mat-grid-tile {
-  background: lightblue;
-}

src/app/list-links/list-links.component.html

@@ -1,2 +0,0 @@
-<p>works</p>
-

src/app/list-links/list-links.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-list-links',
-  templateUrl: './list-links.component.html',
-  styleUrl: './list-links.component.css'
-})
-export class ListLinksComponent {
-
-}

src/app/page-not-found/page-not-found.component.html

@@ -1,7 +0,0 @@
-<h1>Seite nicht gefunden</h1>
-<div>
-  <img src="../assets/pics/the_end.jpg" alt="This is the End">
-</div>
-<div>
-  You have reached the end of the Internet
-</div>

src/app/page-not-found/page-not-found.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageNotFoundComponent } from './page-not-found.component';
-
-describe('PageNotFoundComponent', () => {
-  let component: PageNotFoundComponent;
-  let fixture: ComponentFixture<PageNotFoundComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [PageNotFoundComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(PageNotFoundComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/page-not-found/page-not-found.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-not-found',
-  templateUrl: './page-not-found.component.html',
-  styleUrl: './page-not-found.component.css'
-})
-export class PageNotFoundComponent {
-
-}

src/index.html

@@ -1,15 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 <head>
   <meta charset="utf-8">
-  <title>Landingpage</title>
+  <title>Homenas Landing Page</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="mat-typography">
+<body>
   <app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -1,35 +1 @@
 /* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
- /* Remove the navbar's default margin-bottom and rounded borders */
- .navbar {
-  margin-bottom: 0;
-  border-radius: 0;
-}
-
-/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
-.row.content {height: 450px}
-
-/* Set gray background color and 100% height */
-.sidenav {
-  padding-top: 20px;
-  background-color: #f1f1f1;
-  height: 100%;
-}
-
-/* Set black background color, white text and some padding */
-footer {
-  background-color: #555;
-  color: white;
-  padding: 15px;
-}
-
-/* On small screens, set height to 'auto' for sidenav and grid */
-@media screen and (max-width: 767px) {
-  .sidenav {
-    height: auto;
-    padding: 15px;
-  }
-  .row.content {height:auto;}
-}