Dart for the Web

Angular Dart


Ein sehr einfaches AngularDart Projekt . Es wurde mit Visual Studio Code erstellt und ist Grundlage, soweit nicht anders angegeben, für die Code Beispiele AngularDart betreffend.

:host {
/* This is equivalent of the 'body' selector of a page. */
}
view raw app_component.css hosted with ❤ by GitHub
import 'package:angular/angular.dart';
import 'src/my_Component/my_Component.dart';
// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components
@Component(
selector: 'my-app',
styleUrls: ['app_component.css'],
templateUrl: 'app_component.html',
directives: [my_Component],
)
class AppComponent {
// Nothing here yet.
}
view raw app_component.dart hosted with ❤ by GitHub
<my_Component></my_Component>
view raw app_component.html hosted with ❤ by GitHub
import 'package:angular/angular.dart';
@Component(
selector: 'my_Component',
template: '<h1>Hallo Liebe AngularDart Welt !!</h1>',
)
class my_Component {
}
view raw my_Component.dart hosted with ❤ by GitHub
Alle Code Beispiele sind getestet und laufen ohne Fehlermeldungen.

Update zu AngularDart 30.05.21


Google hat sich für eine Abkehr von AngularDart entschieden. Wie in diesem Artikel nachzulesen ist, empfiehlt man jetzt Flutter Web, oder Angular in Verbindung mit Typescript / JavaScript. Das ist zwar noch nicht das Ende von AngularDart. Aber ohne das starke Engagement von Google, ist die Entwicklung dieser Plattform höchst unsicher.
Der Schritt ist gewagt, da Flutter für das Web nach wie vor zum Teil stark kritisiert wird. 
Hauptsächlich werden in diesem Zusammenhang mangelnde Geschwindigkeit und eingeschränkte Scroll Möglichkeiten angeführt. Man darf gespannt sein.

Dart web-simple Basis Projekt



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>dartweb1</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script defer src="main.dart.js"></script>
</head>
<body>
<div>
<h1 class="display-4" id="output"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
import 'dart:html';
void main() {
querySelector('#output').text = 'Die Dart Anwendung funktioniert';
}
view raw main.dart hosted with ❤ by GitHub
Dieser Boiler Code ist der Ausgangspunkt für Artikel in diesem Blogg, wenn nicht anders erwähnt.

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Flutter: ein eigenes Widget erstellen und einbinden

Bild
Wenn man sich mit Flutter beschäftigt, stößt man früher oder später an Grenzen. Dabei meine ich jetzt nicht eine spezifische Problemstellung, sondern vielmehr die Strukturierung und die Organisation des eigenen Codes. Das mag einem geübten, professionellen Programmierer nur ein müdes Lächeln entlocken. Menschen die programmieren lernen, ob jetzt aus beruflichen Gründen, oder aus Spaß an der Sache, eher weniger. In diesem Post schauen wir uns deshalb, die Möglichkeit an ein Custom Widget zu verwenden. Starter Code  Über die letzten Artikel habe ich den Starter Code eigentlich nicht mehr verändert. Er dient als Anker für die Demo Widgets die ich erstelle, um Flutter zu testen: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import 'package:flutter/material.dart' ; import 'package:flutter/rendering.dart' ; import 'package:tutflutter_002/meine_widgets.dart' ; void main() { debugPaintSizeEnabled = false; runApp(MeinDemo()); }...
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

Dart Basic: Parameter in Funktionen

Bild
Im letzten Artikel zu Dart haben wir uns ja mit, abstrakten Klassen beschäftigt. Ein zugegebener Massen abstraktes Thema (dieser flache Scherz musste jetzt sein) . In diesem Artikel geht es um Parameter, also Übergabewerte. Nicht wenige Funktionen verrichten ihre Arbeit nur, wenn wir Ihnen einen, oder mehrere Werte beim Aufruf übergeben. Dabei kann jede Funktion zwei Arten von Parametern übernehmen: benötige(Pflicht) Werte und optionale . Beispiel: Funktion mit Parametern In diesem sehr einfach Beispielcode wird eine Funktion benutzt, die zwei Zeichenketten als Übergabewerte erwartet. Sollten wir diese Funktion ohne, oder mit nur einem Parameter aufrufen, oder sollten die Übergabewerte den falschen Typ haben, wird uns der Compiler einen Fehler melden . Im Beispiel haben wir also zwei Pflichtwerte zu übergeben. Das Beispiel können wir jetzt um optionale Parameter erweitern. Optionale Parameter gibt es in zwei Varianten : solche die wir durch ihre Position definier...
Mehr anzeigen