Daten backupen

    JSON.stringify(localStorage)

Daten wiederherstellen

    Object.keys(objectdata).forEach(function(key) { 
        localStorage.setItem(key, objectdata[key]);
    }

Wir haben ein Element mit einen Außenabstand. Nun möchte ich ein Element in diesen Element (zB Headergrafik) aber relativ auf die komplette Bildschirmbreite setzen.
Das ganze geht ganz einfach, man muss nur die Einheit „vw“ statt „%“ verwenden.

vw: view width
vh: view height

.fullSize {
    position: relative;
    width: 100vw;
    // Korrektur des linken randes
    left: -15px;
}

Einrichtung

Für die Entwicklung von Angular benötigen wir node.js und npm.
Wenn dies in den entsprechenden Versionen vorhanden ist installieren wir uns angular.

npm install -g @angular/cli 

Das erste Projekt

Nun starten wir unser Projekt, auch dies geht einfach über die Konsole.

-- projekt anlegen
ng new my-test 
-- projekt starten
cd my-test/ 
ng serve --open 

Anlegen von Komonenten

Einzelne Komponenten können auch über die Konsole erstellt werden, das ist auch sehr sinnvoll, da wir uns so die händischen „includes“ sparen.

-- neue componente anlegen 
-- ng generate component name 
ng g c login

Routing

Wahrscheinlich benötigt die Anwendung auch ein Routing, hiefür bietet sich des RouterModule an.
Auch das ist schnell erledigt.

In der app.module einen Array mit Routen definieren, die Componenten müssen natürlich vorher definiert werden.

var routes = [
    {
        path: "",
        component: HomeComponent,
    },
    {
        path: "login",
        component: LoginComponent,
    },
    {
        path: "home",
        component: HomeComponent
    },
    {
        path: "admin",
        component: AdminComponent
    },
    {
        path: '**',
        component: PageNotFoundComponent
    },
]

Im Bereich Imports müssen diese nun gesetzt werden

@NgModule ...
    imports: [
        ...
        RouterModule.forRoot(routes)
    ];

In der html Datei der App Componente muss nun noch die Ausgabe des Routings erfolgen.
Dafür genügt es an der Stelle wo der Content ausgegeben werden soll, die Directive router-outlet einzubinden.

geladen werden.

2 Wege Data Binding in Forms

Um das 2-Wege-Data-Binding in Formularen zu nutzen benötigen wir noch das FormsModule.
Auch dies setzen wir in der app.module.

@NgModule ...
    imports: [
        ...
        FormsModule
    ];

Die Verwendung im input tag des Forms sieht dann wie folgt aus:

Angular ohne NodeJS auf dem Produktivsystem einsetzen

Während sich für die Entwicklung der Angular App der Einsatz von

ng serve --open

durchaus lohnt, kann man die Anwendung für das Produktivsystem gebaut werden.

ng build

Rest mittels HttpClient

Es ist relativ einfach in einer Componente einen Rest Call abzusetzen.

  constructor(protected http: HttpClient) {
  }

  ngOnInit() {
      this.http.get('meineUrl').subscribe(data => {
          console.log(data);
      });
  }

Voraussetzung das dies funktioniert ist der Import des Modules „HttpClientModule“.
Dazu einfach in der app.module folgende Einträge setzen:

import {HttpClientModule} from '@angular/common/http';
....
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ....
    HttpClientModule,
    ....
  ],
})

Es gibt verschiedene Möglichkeiten einen Wert aus einem Select in eine Variable zu speichern.
Dennoch gibt es unterschiedliche Ergebnisse.

SELECT INTO

SELECT ID INTO @MeineID FROM Table WHERE Short = "MeinName";

Ein großer Nachteil von SELECT INTO ist, die Variable wird nur gesetzt, wenn das SELECT einen return Wert hat.
Wurde die Variable bereits vorab gesetzt und in meiner SELECT INTO Query es gab keinen Return Wert, dann bleibt die Variable auf dem alten Wert. Das kann schwerwiegende Folgen für weitere Operationen haben.

Deshalb empfinde ich es besser SET zu verwenden.

SET @MeineID = (SELECT ID FROM Table WHERE Name = "MeinName");

Hier wird die Variable immer gesetzt, ist meine Query erfolglos, ist der Wert null. Egal welchen Wert sie vorher hatte.

Wie kann ich eine Procedure debuggen?

Ich persönlich nutze dazu gern eine eigene Procedure die eine Tabelle beschreibt.

DELIMITER $$

DROP PROCEDURE IF EXISTS DEBUG_PROCEDURE;
CREATE PROCEDURE DEBUG_PROCEDURE (Identifier VARCHAR(255), Name VARCHAR(255), Value VARCHAR(255))
BEGIN

CREATE TABLE IF NOT EXISTS `TMP_DEBUG` (
	`id` INT(11) NOT NULL AUTO_INCREMENT,
	`identifier` VARCHAR(50) NULL DEFAULT NULL,
	`name` VARCHAR(50) NULL DEFAULT NULL,
	`value` VARCHAR(50) NULL DEFAULT NULL,
	`time` DATETIME NULL DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
AUTO_INCREMENT=1;

INSERT INTO TMP_DEBUG (`identifier`, `name`, `value`) VALUES
(Identifier,  Name, Value);

END$$
DELIMITER ;

Nun kann ich in jeder Procedure mit CALL einen Debug Eintrag erzeugen.

CALL DEBUG_PROCEDURE("ProcedureName", "Name der Var", "Value");

Wie kann ich eine Prozedur in MySQL anlegen?

Eine Procedure kann dazu verwendet werden mehrere SQL Befehle anzustoßen.

Um eine Procedure anzulegen, kann ich diverse SQL Tools nutzen, oder sebst ein SQL zum Erstellen anlegen.
Wenn ich mich für das eigene sql entscheide muss ich für das CREATE Kommando einen eigenen Delimiter verwenden.
Warum? Der Delimiter dient dazu das Ende des Befehles für den SQL Server zu markieren. Da eine Procedure mehrere Kommandos enthält, welche mit dem Semikolon abgeschlossen werden, würde der Server es nach dem ersten Semikolon einen SQL Befehl erkennen und ausführen. Das wiederum würde einen Fehler erzeugen.
Um dies zu umgehen setze ich vor der Erstellung der Procedure meinen Delimiter auf zB $$ und am Ende wieder auf ;.

-- ich setze meinen Delimiter auf $$
DELIMITER $$

-- eventuell gibt es eine alte Version meiner Prozedure, daher lösche ich diese
DROP PROCEDURE IF EXISTS MY_FIRST_PROCEDURE;
-- nun erzeuge ich meine Procedure
CREATE PROCEDURE MY_FIRST_PROCEDURE (VariableA VARCHAR(255), VariableB VARCHAR(255))
BEGIN
    -- hier kann nun ganz normaler sql ausgeführt werden
    -- SELECT, UPDATE, DELETE, Aufruf von Funtionen und Prozeduren
    
    -- innerhalb er Prozedure verwende ich den Standard Delimiter
    SELECT CONCAT('Hallo ', VariableA, ' ', VariableB);

-- am Ende den gesetzten Delimiter
END$$

-- nun setze ich den Delimiter auf Standard zurück
DELIMITER ;

Ausführen kann ich diese Prozedure wie folgt:

CALL MY_FIRST_PROCEDURE("Vorname", "Nachname");

Um die Debug-Ausgabe eines Bash-Scriptes zu aktivieren, reicht es direkt in den Script

set -x

einzufügen. Ab diesen Moment wird die Debug-Ausgabe aktiviert.

Deaktivieren kann man diese Ausgabe genauso einfach

set +x

Um die lokale Entwicklungsumgebung zu modifizieren, kann man einfach eine php Datei preloaden.

Dies kann man einfach mit php Mitteln tun:

if(file_exists("prepend.php")) {
    include_once("prepend.php");
}

Oder per .htaccess:

php_value auto_prepend_file "/mein/Pfad/prepend.php"

Ein Vorteil für die .htaccess-Variante sehe ich darin, das man sich das online unnütze file_exists spart.
Weiterhin hat man auch den Vorteil, das man die Einstellungen projektübergreifend setzen kann, da die .htaccess die gesetzten Werte ja vererbt.

Genauso gibt es auch die Möglichkeit des ladens einer Datei am Ende:

php_value auto_append_file "/mein/Pfad/append.php"

Oftmals hat man das Problem, das nach dem entwickeln doch noch Debug Ausgaben in der Javascript Console erscheinen.
Gerade bei komplexeren Javascript Bibliotheken möchte man eventuell auch die Konsolenausgaben nicht alle löschen um beim späteren weiterentwickeln nicht alle logzeilen neu zu erfinden oder diese ständig ein- und auskommentieren.

Dazu schaffe ich mir gern eine eigene Logfunktionalität.
Hierfür benötige ich zwei Variablen.
useLog diese kann true oder false sein und gibt an ob ich das Logging aktiviere oder deaktivere
customConsole ist mein LogObjekt
Wenn die Variable useLog auf true gesetzt ist, wird einfach meine Variable customConsole auf die window.console gesetzt.
Ist useLog auf false gesetzt wird das komplette Logging deaktiviert.

var useLog = false;
var useLog = false;

if(useLog === true) {
    var customConsole = window.console;
} else {
    var customConsole = {
        group   : function () {},
        log     : function () {},
        groupEnd: function () {}
    };
}

customConsole.log("Meine Logausgabe")