Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Johannes Hoppe
    @JohannesHoppe
    Hello 🅰️World!
    Johannes Hoppe
    @JohannesHoppe
    :-)
    Johannes Hoppe
    @JohannesHoppe

    // tsconfig.json

    {
        "compilerOptions": {
            "target": "es5",
            "module": "commonjs",
            "sourceMap": true,
            "noImplicitAny": true,
            "noEmitOnError": true
        },
        "exclude": [
            "node_module"
        ]
    }

    // launch.json

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "Launch and debug with node",
                "sourceMaps": true,
                "program": "${workspaceFolder}/main.js",
                "outFiles": [
                    "${workspaceFolder}/**/*.js"
                ]
            }
        ]
    }
    Johannes Hoppe
    @JohannesHoppe
    Chrome Deep Dive:
    https://youtu.be/0XKZ8M6K9Ug
    Johannes Hoppe
    @JohannesHoppe
    Beste Windows Shell überhaupt:
    https://cmder.net/
    Johannes Hoppe
    @JohannesHoppe

    classicer: ngx-translate (wird nicht mehr weiter entwickelt)

    Aktuelle i18n Alternativen:

    Lässt features vermissen: das i18n von Angular

    Johannes Hoppe
    @JohannesHoppe
    export interface Book {
      isbn: string;
      title: string;
      description: string;
      rating: number;
    }
    Johannes Hoppe
    @JohannesHoppe
    STYLE!
    1. prettier, für knallerharte code-formatierung
    Johannes Hoppe
    @JohannesHoppe

    Hands on!

    1.) Gesamtzahl der Bücher ausgeben
    2.) Sterne mit Icon/Bild anzeigen

    Jetzt bist Du gefragt! Zeige die Gesamtzahl der Bücher an einer geeigneten Stelle im Dashboard an.
    Dann wird es etwas kniffliger: Zeige die Bewertung eines Buchs mit Sternsymbolen an.

    ⭐️ <-- stern
    Johannes Hoppe
    @JohannesHoppe

    vh – Relative to 1% of the height of the viewport*

    Johannes Hoppe
    @JohannesHoppe
    import { BookRatingService } from './book-rating.service';
    import { Book } from './book';
    
    fdescribe('BookRatingService', () => {
    
      let service: BookRatingService;
      let book: Book;
    
      beforeEach(() => {
        service = new BookRatingService();
        book = {
          isbn: '000',
          title: 'Test',
          description: '',
          rating: 3
        };
      });
    
      it('[JIRA-1213] should rate up a book by one', () => {
        const ratedBook = service.rateUp(book);
        expect(ratedBook.rating).toBe(4);
      });
    
      it('should rate down a book by one', () => {
        const ratedBook = service.rateDown(book);
        expect(ratedBook.rating).toBe(2);
      });
    
      it('should not be allowed to have a rating greater than 5', () => {
        book.rating = 5;
        const ratedBook = service.rateUp(book);
        expect(ratedBook.rating).toBe(5);
      });
    
      it('should not be allowed to have a rating smaller than 1', () => {
        book.rating = 1;
        const ratedBook = service.rateDown(book);
        expect(ratedBook.rating).toBe(1);
      });
    
      it('should always return a new book instance (assuming immutability', () => {
        const ratedBook = service.rateUp(book);
        expect(ratedBook).not.toBe(book);
      });
    });
    Johannes Hoppe
    @JohannesHoppe
    Johannes Hoppe
    @JohannesHoppe
    Johannes Hoppe
    @JohannesHoppe
    book.component.html
    <div class="card mb-4">
        <div class="card-body bg-light">
          <img class="img-thumbnail float-right" src="https://api.angular.schule/avatar/{{ book.rating }}">
          <div class="card-title">
            <h2>
              {{ book.title }}
              <span class="badge badge-secondary">
                <ng-container *ngFor="let s of [].constructor(book.rating)">⭐️</ng-container>
              </span>
            </h2>
          </div>
          <p>{{ book.description }}</p>
    
          <button
            (click)="doRateDown()"
            class="btn btn-secondary mr-2"> - </button>
    
          <button
            (click)="doRateUp()"
            class="btn btn-primary mr-2"> + </button>
    
        </div>
      </div>
    Johannes Hoppe
    @JohannesHoppe
    Johannes Hoppe
    @JohannesHoppe
    create-book.comp
    <form [formGroup]="bookForm">
    
      <div class="form-group">
        <label for="isbn">ISBN</label>
        <input type="text" class="form-control" id="isbn">
    
        <div class="feedback-error">
          Bitte geben Sie eine ISBN an.
        </div>
      </div>
    
      <div class="form-group">
        <label for="title">Titel</label>
        <input type="text" class="form-control" id="title">
      </div>
    
      <div class="form-group">
        <label for="description">Titel</label>
        <textarea class="form-control" id="description"></textarea>
      </div>
    
      <div class="form-group">
        <button
          type="submit"
          class="btn btn-primary mb-4">Erzeugen</button>
      </div>
    
    </form>
    Johannes Hoppe
    @JohannesHoppe
    JSON powered / Dynamic forms for Angular
    https://github.com/ngx-formly/ngx-formly
    Johannes Hoppe
    @JohannesHoppe
    Swagger und GraphQL Code generieren: https://youtu.be/rarXH1OHpFY
    Johannes Hoppe
    @JohannesHoppe
    Johannes Hoppe
    @JohannesHoppe
    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { from } from 'rxjs';
    import { map } from 'rxjs/operators';
    
    
    @Component({
      selector: 'br-book-details',
      templateUrl: './book-details.component.html',
      styleUrls: ['./book-details.component.scss']
    })
    export class BookDetailsComponent implements OnInit {
    
      isbn$ = this.route.paramMap.pipe(
        map(paramMap => paramMap.get('isbn'))
      );
    
      constructor(private route: ActivatedRoute) { }
    
      ngOnInit() {
    
        from([1, 2 , 3, 4, 5, 6, 7, 8, 9, 10]);
    
      }
    }
    Johannes Hoppe
    @JohannesHoppe
    import { Component } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { map, switchMap } from 'rxjs/operators';
    
    import { BookStoreService } from '../shared/book-store.service';
    
    
    @Component({
      selector: 'br-book-details',
      templateUrl: './book-details.component.html',
      styleUrls: ['./book-details.component.scss']
    })
    export class BookDetailsComponent {
    
      book$ = this.route.paramMap.pipe(
        map(paramMap => paramMap.get('isbn')),
        switchMap(isbn => this.bs.getSingle(isbn))
      );
    
      constructor(private route: ActivatedRoute, private bs: BookStoreService) { }
    }
    <ng-container *ngIf="book$ | async as book; else loading">
      <h1>{{ book.title }}</h1>
    
      <p>
        {{ book.description }}
      </p>
    </ng-container>
    
    <ng-template #loading>
      Lade allererstes Buch....
    </ng-template>
    
    <a routerLink="/book/9783864904523">
      Gehe zu 9783864904523
    </a><br>
    
    <a routerLink="/book/222">Gehe zu 222</a>
    Johannes Hoppe
    @JohannesHoppe
    ng g feature books/book --module books/books --group --api --creators
    Johannes Hoppe
    @JohannesHoppe
    5 useful NgRx effects that don't rely on actions
    https://angular.schule/blog/2018-06-5-useful-effects-without-actions
    withLatestFrom(this.store$.pipe(select(selectBooks))),