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:
Artifact | What it does |
---|---|
angular.json | Describes the project(s) and for each of them the index.html and main.js that is set up at the root. |
index.html | Contains: 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.js | Calls 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‘ |
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));
Inspiriert von:
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