Home » Uncategorized

Archiv der Kategorie: Uncategorized

Deploy Angular

Run ng build.
This generates a folder ‚dist‚ containing another folder named like the angular project name, containing a ‚browser‚ directory. E.G. dist/my-project/browser

The browser folders content can be put into a directory that is actually served by a HTTP server.
Meaning: E.G. if an index.html is served by a HTTP server this one can be replaced by the ‚browser‘ directory content within your ‚dist‘ folder.

When I did that, still there was a problem that the index.html of our Angular build was just displayed as a blank page. When facing this, then open the developers console of the browser and observe the errors. Probably it says something about (HTTP 404) resources not found. This can be mitigated by adapting the base ref directive in the index.html file: E.G. I have changed it to <base href=“.“>

Reading

Javascript: Null, undefined, falsy, truthy

undefined‚ bedeutet, dass eine Variable nicht initialisiert wurde, z.B.:
let myVar;

Eigentlich ist ‚undefined‘ die falsche Benennung, da ja die Variable tatsächlich deklariert wurde! Eine Variable, die nicht deklariert wurde, kann man gar nicht abprüfen. Versucht man das wird das mit Fehlermeldung „… is not defined“ quittiert.

null ist eine Variable nur, wenn ’null‘ explizit zugewiesen wurde:
let myVar = null;

Check for null

myVar === null

Check for undefined

myVar === undefined

Check for null OR undefined

myVar == null

Truthy / Falthy

Als falsy gelten in JS:
0, „“ (leerer String), false, null und undefined

Diese Werte werden als false interpretiert.

„“ ist false!
0 ist false!

Module Pattern / Revealing Module Pattern

Module Pattern

Ziel:
– Objekt mit privaten Variablen erstellen

let person = (function () {
  let name = 'Veronika'; //Private Objektvariable

  return  {
    getName: function () { // Objekt-Methode 1
      return name;
    },
    setName: function (myName){ // Objekt-Methode 2
      name = myName;
    }
  };
})(); // Immediatly invoked function expression

person.name;
// undefined
person.getName();
// 'Veronika'

person.setName('Not Veronika');
person.getName;
// 'Not Veronika'

Das pattern beinhalted eine IIFE.
Ich empfinde das allerdings eher als Limitierung und erbringt bezüglich des Ziels (Objekt mit privater Variable erstellen) nichts.

Revealing Module Pattern

Das RMP unterscheidet sich zum MP nur diesbezüglich, dass das die public Funktionen nicht innerhalb des „return“-Blocks codert werden, sondern derselbige nur referenzen auf die Funktionen enthält:

let person = (function () {
  let privateAge = 0;
  let privateName = 'Andrew';

  function privateAgeOneYear() {
    privateAge += 1;
    console.log(`One year has passed! Current age is ${privateAge}`);
  }

  function displayName() {
    console.log(`Name: ${privateName}`);
  }

  function ageOneYear() {
    privateAgeOneYear();
  }

  return {
    name: displayName,
    age: ageOneYear
  };
})();

Mixins (JavaScript ‚Mehrfachvererbung‘)

Javascript kennt keine Mehrfachvererbung. Jedoch können mittel der Object.assign(target, source) Properties des einen Objektes auf ein anderes übertragen werden:

let target = {};

let source = { number: 7 };

Object.assign(target, source);

console.log(target);
// { number: 7 }

Einem Objekt können auch Properties von mehreren anderen Objekten injiziert werden:

const duck = {
  hasBill: true
};
const beaver = {
  hasTail: true
};
const otter = {
  hasFur: true,
  feet: 'webbed'
};

const platypus = Object.assign({}, duck, beaver, otter);

console.log(platypus);
// { hasBill: true, hasTail: true, hasFur: true, feet: 'webbed' }

Functional Mixins (–> Vererbungsmässige Komposition)

Code zeigt, wie mit Factory Funktionen geschachtelt aufgerufen werden um verschiedenen Eigenschaften/Methoden aus verschiedenen „Klassen“ zu komponieren:

function IceCreamFactory(obj) {
  let isCold = true;

  return Object.assign({}, obj, {
    melt: function () {
      isCold = false;
    },
    isCold: function () {
      return isCold;
    }
  });
}

let iceCream = IceCreamFactory({});

function ConeFactory(obj) {
  let isDry = true;

  return Object.assign({}, obj, {
    soggy: function () {
      isDry = false;
    },
    isDry: function () {
      return isDry;
    }
  });
}

let iceCreamCone = IceCreamFactory(ConeFactory({}));

console.log(iceCreamCone);

Angular Bootstrapping

When a user invokes a Angular App over the Internet: How is the Angular App served?
This is described beautifully in: Bootstrapping in Angular: How It Works Internally

Mentioning some key facts:

ArtifactWhat it does
angular.jsonDescribes the project(s) and for each of them the index.html and main.js that is set up at the root.
index.htmlContains:
1.) the html selector tag which is referenced in the root Angular component that implements it.
–> e.g. ‚<app-root></app-root>

2.) The references to the JavaScript files invoked
main.jsCalls some Angular libraries in order to invoke the root module. This is a Module annotated with @NgModule
–> e.g. AppModule
app.module.js
(=AppModule)
Annotated with @NgModule, meaning: It is an Angular Module definition.
Contains the
bootstrap: [AppComponent]
directive telling Angular to load the AppComponent
app.component.js
(AppComponent)
Having the this annotation (or similar):
@Component({
  selector: ‚app-root‘,
  templateUrl: ‚./app.component.html‘,
  styleUrls: [‚./app.component.css‘]
})
Telling angular, that it implements the HTML node ‚<app-root>‘ with the given template ‚./app.component.html‘

Angular Cheet Sheet

Regular Expression auf derzeitiger Web-Page als JavaScript (als Link/Bookmark) in der Browser URL ausführen

Dieser JavaScript-Link (kann gebookmarked) und aufgerufen werden um mit RegExp in der derzeitigen Page zu suchen:

javascript:(function(searchStr){console.log('SearchStr: ' + searchStr); var p=RegExp('(\\>{1}[^\n\\<]*?)([^\n\\<]{0,0}%27 + searchStr + %27[^\n\\<]{0,0})%27,%27gi%27); b=document.body; console.log(%27Pattern: %27 + p); console.log( document.body.innerText.match(p)); b.innerHTML=b.innerHTML.replace(p,%27$1<span style="background-color:red;">$2</span>%27);})(prompt(%27Was suchst du%27));

–> als link

Inspiriert von:

https://superuser.com/questions/417875/how-can-i-search-for-regular-expressions-within-webpages-using-google-chrome-or

RegExp mit Javascript:

https://stackoverflow.com/questions/884762/javascript-whats-the-point-of-regexp-compile

TLS/SSL probleme im Maven-Build lösen

mvn -Djavax.net.debug=ssl,handshake clean install

Path Variable Zeilenweise anzeigen: $env:path -split „;“

$env:path -split „;“

Find/Grep mit PowerShell ( | findstr)

Z.B.:
dir | findstr -i ubs