Skip to main content
Angular 5Hello, AMPs

Installation

Hi, hier möchte ich euch kurz und knapp zeigen wie einfach ANGular 5 zu installiern ist

Was benötigt man:

node js

visual studio code

cmd console

node js

  1. Die msi datei von der Seite www.nodejs.com downloaden
  2. ausführen und somit installieren
  3. cmd öffnen
  4. npm install @angular/cli-g
  5. ng new myng5 --style=scss --routing wobei myng5 der name des Projektes ist
  6. ng generate componet home und
    ng generate componet page1 hier entstehne zwei Seiten die wir dann befüllen können
  7. ng generate service myservice/data um die JSON-Datein einzubinden
  8. npm install @angular/animations@latest --save für etwas animation

visual studio code

  1. Die Datei Downloaden und installieren

Angular starten

cmd

  1. ng serveim Ordner wo das Projekt steckt z.B c:/

visual studio code

  1. visual studio code öffnen und Ordner mit dem Ordner myng5 öffnen

"Browser" localhost:4200

Hier kann man nu das erstellte Projekt sehen

JSON anbinden

Was benötigt man:

Eine .json Datei

service einrichten

  1. app.module.ts
    import {DataService} from './myservice/data.service';
    und in @NGModule
    providers:[DataService] hinzufügen
  2. page1.component.ts
    import {DataService} from ‘../myservice/data.service
    und in @NGModule
    constructor(private mddataService:DataService){}
    ein Interface dafür anlegen
    postB:ifPost[];
    auserhalb definieren
    interface ifPost{
    id:number,
    title:string,
    body:string,
    userId:number
    }

    in NgOnInit() this.mddataService.getPosts().subscribe((postX) =>{ this.postB = postX; });
  3. app.module.ts
    import {HttpModule} from ‘@angular/http’;
    und in @NGModule
    imports: [ HttpModule ]
  4. data.service.ts
    import 'rxjs/add/operator/map';
    import {Http} from '@angular/http'; und in @Injectable()
    constructor(public mddataService:Http ) { }
    und um die Funktion erweitern
    getPosts1(){ return this.mddataService.get('assets/idoms.json').map(res => res.json()); }
  5. page1.component.html
    <div *ngFor="let post_onscreen of postB"> <h1>{{post_onscreen.title}} </h1> &l;/div>

Springen zwischen den Seiten

Dadurch dass mit --routing installiert worden ist ist im hauptverzeichniss eine Datei Namens app-routing.mdule.ts
die constante routes wird nu im array mit den Pfaden erweiter für page 1 und home
//ll 1.1 import { HomeComponent } from './home/home.component'; import { Page1Component } from './page1/page1.component'; //ll 1.2 const routes: Routes = [ {path: '',component:HomeComponent}, {path: 'about',component:Page1Component} ];


in app.component.html
<ul>
<li><a routerLink="home">Home</a></li>
<li><a routerLink="page1">Page1</a></li>
</ul>