{"id":3843,"date":"2023-12-05T11:13:04","date_gmt":"2023-12-05T10:13:04","guid":{"rendered":"https:\/\/www.capri-soft.de\/blog\/?p=3843"},"modified":"2023-12-05T13:16:49","modified_gmt":"2023-12-05T12:16:49","slug":"angularjs-nodejs-schulung","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=3843","title":{"rendered":"AngularJS + NodeJS Schulung"},"content":{"rendered":"\n

Vorraussetzung<\/h2>\n\n\n\n

Installation der folgenden Komponenten:<\/p>\n\n\n\n

NodeJS<\/p>\n\n\n\n

Konsolenbefehle<\/h2>\n\n\n
\nnpm init -y \/\/ erstellt die package.json und best\u00e4tigt alles mit y\nnpm install typescript --save-dev \/\/ Mit Typescript entwickeln - f\u00fcgt in package.json eine devDependencies hinzu\nnpx tsc --init \/\/ Erzeugt tsconfig.json (enth\u00e4lt z.B. die Ecma-Script-Version)\nnpx tsc --watch \/\/ Schaut nach \u00c4nderungen\nnode src\/hello.js \/\/ Interpretiert das Javascript damit wir keinen Browser brauchen mit Node kann man aufs Dateisystem zugreifen\nnpm installiert pakete\nnpx tempor\u00e4res Paket\n<\/pre><\/div>\n\n\n
Aufgabe 1: Klassen & Methoden<\/h2>\n\n\n\n
Baue eine Klasse die etwas zur\u00fcckgibt bei folgendem Code<\/p>\n\n\n
\nlet s: Student = new Student();\nlet label:string = s.getLabel(123457);\nconsole.log(label); \/\/ "Student mit Matrikelnummer: 123456"\n<\/pre><\/div>\n\n\n
L\u00f6sung 1<\/h2>\n\n\n
\nclass Student {\n    oldNumber:number = -1;\n\n    getLabel(matNr:number):string {\n        if (matNr == 123456)\n        {\n            this.oldNumber = matNr;\n            let zusammenGebaut = "Die Nr. " + this.oldNumber;\n            return zusammenGebaut;\n        }\n        else\n        {\n            return `Student mit Matrikelnummer: ${matNr}`;\n        }\n    }\n  }\n<\/pre><\/div>\n\n\n
Aufgabe 2: Konstrukturen<\/h2>\n\n\n\n
Sorge daf\u00fcr, dass diese Ausgabe \u00fcber einen Konstruktor funktioniert<\/p>\n\n\n
\nlet s: Student = new Student("Max", 123456);\nlet label: string = s.getLabel();\nconsole.log(label); \/\/ "Student Max mit Matrikelnummer: 123456";\n<\/pre><\/div>\n\n\n
L\u00f6sung 2<\/h2>\n\n\n
\nclass Student {\n    name: string;\n    mNr: number;\n\n    constructor(_name: string, _mNr: number) {\n      this.name = _name;\n      this.mNr = _mNr;\n    }\n\n    getLabel() {\n        return `Student ${this.name} mit Matrikelnummer ${this.mNr}`;\n    }\n  }\n<\/pre><\/div>\n\n\n
Aufgabe 3: Auslagern in andere Dateien<\/h2>\n\n\n\n
Lagere die Klasse Student in eine andere Datei aus, so dass sie mit den folgenden Kommandos wieder instanziert werden kann<\/p>\n\n\n
\nimport {Student} from ".\/student"\n\nlet s: Student = new Student("Max", 123456);\nlet label: string = s.getLabel();\nconsole.log(label); \/\/ "Student Max mit Matrikelnummer: 123456";\n<\/pre><\/div>\n\n\n
L\u00f6sung 3<\/h2>\n\n\n\n
Lege die Klasse student.js im gleichen Verzeichnis wie hello.js an und kopiere die Student-Klasse von L\u00f6sung 2 rein:<\/p>\n\n\n
\nexport class Student {\n    oldNumber:number = -1;\n    name: string;\n    mNr: number;\n\n    constructor(_name: string, _mNr: number) {\n      this.name = _name;\n      this.mNr = _mNr;\n    }\n\n    getLabel() {\n        return `Student ${this.name} mit Matrikelnummer ${this.mNr}`;\n    }\n  }\n<\/pre><\/div>\n\n\n
Aufgabe 4: ESLint f\u00fcr sauberen Code<\/h2>\n\n\n\n
S\u00e4ubere den Code mit ESLint<\/p>\n\n\n\n
Ansatz 4<\/h2>\n\n\n\n
F\u00fchre die folgenden Konsolenbefehle aus um ESLint zu verwenden:<\/p>\n\n\n
\nnpm init @eslint\/config\n<\/pre><\/div>\n\n\n
\"\"<\/a><\/figure>\n\n\n
\nnpx eslint src\/hello.ts\n<\/pre><\/div>\n\n\n
Beobachtung 4<\/h2>\n\n\n\n
ESLint meckert:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
L\u00f6sung 4<\/h2>\n\n\n\n
\u00c4ndere den Code so, dass aus den Variablen aus L\u00f6sung 3 anstelle von let<\/strong> das Keyword const <\/strong>verwendet wird:<\/p>\n\n\n
\nimport {Student} from ".\/student"\n\nconst s: Student = new Student("Max", 123456);\nconst label: string = s.getLabel();\nconsole.log(label); \/\/ "Student Max mit Matrikelnummer: 123456";\n<\/pre><\/div>