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

Flutter -- Tutorial Teil 5 Navigator

Bild
Im letzten Teil dieser Serie sind wir auf das Stateful und das Stateless Widget eingegangen. Flutter -- Tutorial Teil 1 Grundsätzliches Flutter -- Tutorial Teil 2 State und Co Flutter -- Tutorial Teil 3 Starter Code   Flutter -- Tutorial Teil 4 StatefulWidget StatelessWidget Flutter -- Tutorial Teil 5 Navigator --  Du bist hier ! Wir erinnern uns: das Stateless Widget ist an sich nicht dazu gedacht Inhalte zu enthalten, auf die wir später direkt zugreifen wollen. Das Stateful Widget unterstützt genau dieses. Ein Großteil von den Möglichkeiten die Flutter bietet, unterstützt uns bei der Erstellung einer Benutzeroberfläche. Diese ermöglicht dem Benutzer z.b. Buttons zu clicken / drücken, Texteingaben zu machen, etwas abzuspeichern. Dabei bestehen die wenigsten Benutzeroberflächen nur aus einem Bildschirm / View, sondern implementieren meistens mehrere Screens, um den Benutzer durch die App zu navigieren. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
Mehr anzeigen

Return of the ListView (Flutter)

Bild
In meinem zweiten Post zu diesem Thema geht es um zwei Varianten von ListView . Im letzten Post haben wir gelernt, das ListView(...) in der Grundversion nur für eine kleine Anzahl an Einträgen empfohlen wird ! Die Entwickler begründen das damit, das Flutter bei dieser Variante jeden Listeneintrag erstellt. Egal ob er auf dem Bildschirm sichtbar ist oder nicht. In realen Anwendungen kommt es aber oft vor, das man nicht genau weiss, wie viele Einträge eine Liste haben wird. Ein gutes Beispiel dafür ist eine Kontaktliste. Wahrscheinlich wird sie mit der Zeit grösser, kann aber auch wieder schrumpfen.  Hier kommt ListView.builder(...) ins Spiel. Wie builder schon vermuten lässt, wird etwas aufgebaut. ListView.builder Als Basis für den Code nehme ich das Gerüst vom ersten Post zu diesem Thema: void main(){ runApp( const MeineApp()); } class MeineApp extends StatelessWidget { const MeineApp({Key? key}) : super (key: key); @ override Widget build(BuildContext conte...
Mehr anzeigen

Flutter -- Tutorial Teil 7 Form Part 1 TextFormField

Bild
Formulare Manchmal scheint es so, als seien sie allgegenwärtig: Formulare !  Aber seien wir ehrlich, ohne geht es nicht. Ob ein Log In oder bei der Erfassung von Benutzerdaten. Wir brauchen die Möglichkeit Daten geordnet zu erfassen, ob das nun am Bildschirm ist, oder auf einem Blatt Papier. Natürlich bietet hier Flutter auch Unterstützung an. Ein typisches Formular am Bildschirm besteht oft aus Textfeldern, Checkboxen und eventuell Dropdown Listenfeldern. Dieser Artikel wird seinen Fokus auf das Textfeld legen. Um mit einer Form umzugehen brauchen wir einen State in unserem Code. Für unseren Beispielcode muss es nicht gleich die Implementation von Provider oder BloC sein, ein StatefulWidget erfüllt hier seinen Zweck auch. Vorneweg etwas zu der Organisation der Files. Wenn man sich in Flutter einarbeitet und das bevorzugt mit Beispielcode macht, ist man geneigt immer wieder neue Projekte zu erstellen. Das geht natürlich auch, wird mit der Zeit aber unübersichtli...
Mehr anzeigen