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 - Kapitel I

Alles in Dart ist ein Objekt. Beim erlernen dieser Programmiersprache sollte man sich dies immer  vor Augen halten! void main(){ // hier steht das "Hauptprogramm" } Das ist das Grundgerüst jedes Dart Programms.  Die main() Funktion ist der Einstiegspunkt in unser Programm. Hier sehen wir auch, wie Kommentare einzufügen sind, was mit // geschieht. Teile des Programmes können und werden sich auch ausserhalb der main() Funktion befinden, aber dazu später mehr. Was wäre ein Programm ohne Variablen ? Genau, das ist nicht möglich! Variablen lassen sich Werte zuweisen, sie können im Programm weiterverwendet und, bis auf Ausnahmen, auch geändert werden: void main(){ String name; String name2 = "max"; } Oben definieren wir einen String (Zeichenkette) mit der Bezeichnung " name ", also unsere erste Variable. Wir weisen ihr aber nichts zu. D.h. aber jetzt nicht, das diese Variable leer ist. Für den Dart Compiler hat diese Variable den Wert NULL ...
Mehr anzeigen

Flutter BloC Pattern 1

Bild
Las Vegas Bei grösseren Projekten stellt sich die Frage, wie man das State - Management lösen möchte.  Wer schon seine ersten Schritte mit Flutter gemacht hat, weiß, das es Widgets ohne State gibt und solche mit. Ein Umgang mit diesen Stateful Widgets, wird schnell zur zentralen Frage bei der Softwareentwicklung mit Flutter. Basis BloC Es gibt verschiedene Konzepte um mit dem State umzugehen, diese stehen nicht in Konkurrenz. Es ist an dem Entwickler, sich für ein Konzept zu entscheiden, je nach den erwarteten Erfordernissen der geplanten Software. BloC steht für B usiness Lo gic Co mponent und ermöglicht das Handling der State's. Es wird gerne als Pattern bezeichnet, also als Muster, mit welchem wir den Umgang mit einem State konzipieren. Die hinter BloC ist die Trennung der Präsentation (UI / StatelessWidgets) von der Logic (StatefulWidgets). Das heißt der Button, den wir in der App drücken, muss nichts darüber wissen, was nach dem drücken passiert. In einem Fall wi...
Mehr anzeigen

Flutter Beispiel 6 -- BoxDecoration

Bild
Container -- mit BoxDecoration Container in Flutter kann man leicht unterschätzen. Manche vergleichen sie mit dem Div-Tag in Html. Sie gehören aber zu den häufigst gebrauchten Flutter Widgets, wenn es darum geht ein Layout zu programmieren. Hier links sehen wir ein einfaches Rechteck, mit blauer Hintergrundfarbe und einem zentrierten Text. Hier der Code dazu auf GitHub. Mit Verwendung von BoxDecoration können wir den Rand, den Körper des Containers, und gegebenenfalls den Schattenwurf des Containers kontrollieren. Dieser Container kann rechteckig, aber auch rund sein. Wichtig dabei ist auch zu wissen, wie Flutter diesen auf den Bildschirm bringt. Flutter zeichnet dabei in Ebenen. Die erste ebene die gezeichnet wird, ist die Hintergrundfarbe, welche den Container ausfüllt. Sollten wir dabei noch einen Gradienten definiert haben, kommt der als nächstes obendrauf. Beide Arten füllen den Container komplett aus. Sollte der Container noch ein Bild enthalten, wird dieses als näc...
Mehr anzeigen