AngularDart Part 2 -- Installation Boiler Projekt

AngularDart Logo
Im ersten Teil zu AngularDart, haben wir schon eine Annäherung versucht. In diesem Post setzten wir das fort und erstellen nun das BoilerProjekt in Visual Studio Code.

Wer regelmäßig alle Updates, sowohl für VSC, als auch für Dart installiert hat, sollte keine Probleme haben, schließlich erledigt die IDE alles für uns.

Wir öffnen die Befehlspalette in Visual Studio Code, wählen Dart: neues Projekt und dort AngularDart. Unten ein kleines Video dazu. Aber es ist wirklich einfach...







Nach dem das Boiler Projekt steht, sollte man noch sicherheitshalber die installierten Abhängigkeiten updaten. Entweder über $pub get im Terminal (bitte kontrollieren ob man sich im richtigen Verzeichnis befindet), oder einfacher über den vorhandenen Button von Visual Studio Code. Diesen erhält man, wenn man die pubspec.yaml Datei geöffnet hat, oben rechts. Wenn das geschehen ist und wir keine Fehlermeldungen bekommen haben, sind wir schon fast startbereit. Was jetzt noch fehlt ist die Möglichkeit unser Boiler Projekt im Browser anzuschauen.

Um das zu bewerkstelligen müssen wir das Terminal nutzen. Hier benötigen wir das Programm webdev, welches wir ganz einfach mit pub global activate webdev  installieren. Global bedeutet im übrigen, das webdev in unserem path ist und wir keine Probleme mit dem Zugriff haben.

localhost:8080
Hier möchte ich noch einmal erwähnen wie wichtig das updaten aller Komponenten ist. Dart, AngularDart, Flutter, aber auch verwandte Programme werden ständig weiterentwickelt. Während sich einiges automatisch updaten lässt, muss man anderes "von" Hand machen. Man erspart sich im Zweifelsfall viel Arbeit bei der Fehlersuche...
Wenn alles fehlerfrei ist, sollten wir auf localhost:8080 dann unsere Page haben. An sich nichts weltbewegendes, aber ein guter Startpunkt für weitere Schritte in AngularDart.

Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Dart und Void

Bild
  In diesem Post betrachte ich den Begriff void in der Programmiersprache Dart. Wenn Du Dart lernst, wird dir void schon bei den ersten Schritten in dieser Programmiersprache aufgefallen sein. Schliesslich wird in den meisten Code Beispielen die main(...) Funktion aufgezeigt und die hat den Rückgabe Wert void . Wie oft in diesem Blog empfehle ich für kleine Experimente das DartPad . Es läuft nicht nur im Browser, sondern ist in seiner aktuellen Version auch in der Lage mit einigen externen Packages umzugehen. Aber dazu mehr in einem anderen Post Beispiel 1: Du weißt sicher schon, das die main Funktion den Einstiegspunkt des Betriebssystems in Dein Programm darstellt. Mit void wird deklariert, das diese main Funktion keinen Wert, also kein Resultat an das Betriebssystem zurück gibt. Falls Du lustig bist, kannst Du dir den Begriff void ins Deutsche übersetzen lassen. Du erhälst dann vom Google Uebersetzer Leere als Resultat.  Der Code oben, der Standard DartPad Code, zeig...
Mehr anzeigen

Dart Final Const

Bild
Der Einsatz von  Final und Const in Dart ist nicht ganz einfach zu verstehen. Beide Schlüsselwörter deklarieren eine Variable, die explizit im Code initialisiert werden muss und im weiteren Verlauf nicht mehr veränderbar ist. Wir können zum Beispiel  deklarieren:  int zahl ; . Die Variable zahl ist nicht initialisiert und wird von Dart mit dem Wert  null belegt. Das sollte man nicht mit 0 verwechseln. null lässt sich am besten mit " undefiniert " übersetzen und ist ein Sprachkonstrukt, welches sich innerhalb von Dart auch benutzen bzw abfragen lässt. Im weiteren Verlauf des Programms können wir der Variable zahl werte zuweisen, sprich den Inhalt von zahl ändern. Bei final und const sieht das anders aus. const Beispiel Code: Die erste Variable wird const int tage deklariert. Jeder Versuch sie im weiteren Programmverlauf zu ändern, wird eine Fehlermeldung hervorrufen. Die zweite Variable entsteht aus einer Berechnung, wobei die erste mit ei...
Mehr anzeigen

Flutter fluttertoast Modal Bottom Sheet

Bild
In Flutter kennen wir die AppBar , aber auch die BottomNavigationBar .  In diesem Post betrachten wir die letztere im Zusammenhang mit Modal Bottom Sheet . Die Erklärung von Wikipedia: Modale Dialoge sperren den Rest der Anwendung (oder sogar der Benutzeroberfläche), solange der Dialog angezeigt wird. Bottom Sheet's gibt es in zwei Varianten: Persistent und Modal . Beide fungieren als, im Vergleich zum "Main Screen", kleine Anzeigeflächen für Informationen. Während die Variante Modal die restliche App sperrt solange aktiv, fungiert die persistente Version als Ergänzung zur laufenden App. In diesem Post schauen wir uns die Modal Variante an. Der Beispiel Code arbeitet mit fluttertoast , einer Library die wir zuerst im pubspec.yaml File einbinden: dependencies: flutter: sdk: flutter fluttertoast: ^ 3.1 . 0 Der erste Teil des Beispielquellcode's ist wie immer der Einstieg in die App: import 'package:flutter/material.dart' ; ...
Mehr anzeigen