Angularjs

Für sonstige Unterhaltungen, welche nicht direkt mit Lazarus zu tun haben
Benutzeravatar
m.fuchs
Lazarusforum e. V.
Beiträge: 2285
Registriert: Fr 22. Sep 2006, 19:32
OS, Lazarus, FPC: Winux (Lazarus 2.0.8, FPC 3.0.4)
CPU-Target: x86, x64, arm
Wohnort: Berlin
Kontaktdaten:

Re: Angularjs

Beitrag von m.fuchs »

carli hat geschrieben:
m.fuchs hat geschrieben:Hm, das ist jetzt kein Alleinstellungsmerkmal. Ajax-Formulare (mit Reaktion auf Eingabeevents) habe ich auch in anderen Frameworks.


Bei Angular.js musst du aber die Funktion hinter den "Eingabeevents" nicht manuell coden, sondern du verknüpfst sie mit dem Modell. Ich wüsste nicht, welches andere Framework das hätte. Nenn' doch mal ein Beispiel! (Hinweis: Zend, Wordpress, jQuery und sonst alle Frameworks, die ich kenne, haben es nicht)


ASP.NET MVC
Software, Bibliotheken, Vorträge und mehr: https://www.ypa-software.de

carli
Beiträge: 660
Registriert: Sa 9. Jan 2010, 17:32
OS, Lazarus, FPC: Linux 2.6.x, SVN-Lazarus, FPC 2.4.0-2
CPU-Target: 64Bit

Re: Angularjs

Beitrag von carli »

m.fuchs hat geschrieben:
carli hat geschrieben:
m.fuchs hat geschrieben:Hm, das ist jetzt kein Alleinstellungsmerkmal. Ajax-Formulare (mit Reaktion auf Eingabeevents) habe ich auch in anderen Frameworks.


Bei Angular.js musst du aber die Funktion hinter den "Eingabeevents" nicht manuell coden, sondern du verknüpfst sie mit dem Modell. Ich wüsste nicht, welches andere Framework das hätte. Nenn' doch mal ein Beispiel! (Hinweis: Zend, Wordpress, jQuery und sonst alle Frameworks, die ich kenne, haben es nicht)


ASP.NET MVC


Okay, das ist jetzt nicht so verfügbar für mich. Und die Codebeispiele, die ich mir angeschaut habe, sind alle ziemlich komplex. In Angular schreibt man einfach sowas:

Code: Alles auswählen

<div ng-controller="TestController">
<h1>{{text}}</h1>
<input type='text' ng-model='text'/>
</div>
<script>
    function TestController($scope) {
    $scope.text = 'Hallo Welt';
    }
</script>

Benutzeravatar
m.fuchs
Lazarusforum e. V.
Beiträge: 2285
Registriert: Fr 22. Sep 2006, 19:32
OS, Lazarus, FPC: Winux (Lazarus 2.0.8, FPC 3.0.4)
CPU-Target: x86, x64, arm
Wohnort: Berlin
Kontaktdaten:

Re: Angularjs

Beitrag von m.fuchs »

So einfach geht es durchaus auch, beziehungsweise auch noch einfacher. Eine Datenklasse auswählen, Visual Studio sagen: mach mir mal einen View und fertig ist das Formular inklusive Bindung.

Hat aber an dieser Stelle alles den Nachteil, dass man an das seltsame .NET-Framework gebunden ist.
Software, Bibliotheken, Vorträge und mehr: https://www.ypa-software.de

carli
Beiträge: 660
Registriert: Sa 9. Jan 2010, 17:32
OS, Lazarus, FPC: Linux 2.6.x, SVN-Lazarus, FPC 2.4.0-2
CPU-Target: 64Bit

Re: Angularjs

Beitrag von carli »

m.fuchs hat geschrieben:So einfach geht es durchaus auch, beziehungsweise auch noch einfacher. Eine Datenklasse auswählen, Visual Studio sagen: mach mir mal einen View und fertig ist das Formular inklusive Bindung.


Na schreib' doch mal den Code hin, das will' ich seh'n. Besonders, wie du die Überschrift mit dem Eingabefeld mit weniger als 9 Zeilen verbinden willst.

Benutzeravatar
m.fuchs
Lazarusforum e. V.
Beiträge: 2285
Registriert: Fr 22. Sep 2006, 19:32
OS, Lazarus, FPC: Winux (Lazarus 2.0.8, FPC 3.0.4)
CPU-Target: x86, x64, arm
Wohnort: Berlin
Kontaktdaten:

Re: Angularjs

Beitrag von m.fuchs »

Was mir bei deinem Beispiel fehlt ist die Kommunikation mit dem Server? Ist das alles rein clientseitig? Das könnte ich dann schwerlich nachbauen.
Software, Bibliotheken, Vorträge und mehr: https://www.ypa-software.de

carli
Beiträge: 660
Registriert: Sa 9. Jan 2010, 17:32
OS, Lazarus, FPC: Linux 2.6.x, SVN-Lazarus, FPC 2.4.0-2
CPU-Target: 64Bit

Re: Angularjs

Beitrag von carli »

m.fuchs hat geschrieben:Was mir bei deinem Beispiel fehlt ist die Kommunikation mit dem Server? Ist das alles rein clientseitig? Das könnte ich dann schwerlich nachbauen.

Angular.js ist komplett clientseitig. Bau es doch mal nach, dass du ein Objekt hast

Code: Alles auswählen

type TPerson = class
  name: string;
end;

und ein Formular, das in der Überschrift den Namen der Person, sowie ein Eingabefeld für den Namen anzeigt.

Benutzeravatar
m.fuchs
Lazarusforum e. V.
Beiträge: 2285
Registriert: Fr 22. Sep 2006, 19:32
OS, Lazarus, FPC: Winux (Lazarus 2.0.8, FPC 3.0.4)
CPU-Target: x86, x64, arm
Wohnort: Berlin
Kontaktdaten:

Re: Angularjs

Beitrag von m.fuchs »

Ok, da hätten wir dann diesen View der die Bindungen an das Eingabefeld und die Überschrift macht:

Code: Alles auswählen

@ModelType MyMvcTest.Person
 
@Code
  Layout = Nothing
End Code
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Action</title>
</head>
<body>
     <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/ajax.livebinding.min.js"></script>
     <script type="text/javascript">
        $(document).ready(function () {
            addLiveBinding("Form1", "/My/MyAction");
        })
    </script>
     @Using Ajax.BeginForm("/My/MyAction", Nothing, New AjaxOptions With {.UpdateTargetId = "data-container"}, New With {.Id = "Form1"})
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(True)
        @<fieldset id="data-container">
            <h1>@Model.Name </h1>
            <legend>MyModel</legend>
             <div class="editor-label">
                @Html.LabelFor(Function(model) model.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(model) model.Name)
                @Html.ValidationMessageFor(Function(model) model.Name)
            </div>
             <p>
                <input class="hidden" type="submit" value="Save" />
            </p>
        </fieldset>
    End Using
 </body>
</html>
 


Dazu gibt es dann noch einen Controller, der die Daten entgegennimmt und genauso wieder herausreicht:

Code: Alles auswählen

Public Class MyController
    Inherits System.Web.Mvc.Controller
 
  Function MyAction(model As Person) As ActionResult
    ModelState.Clear()
    dim result as New Person With {.Name = model.Name}
    Return View(result)
  End Function
 
End Class


Bevor du sagst, dass das nun alles sehr viel länger ist: der Code vom View ist fast komplett automatisch erzeugt aus dem Model.

Allerdings halte ich das an dieser Stelle auch für keinen sinnvollen Einsatz eines Livebindings. Daten zum Server schicken, nur damit eine Überschrift aktualisiert wird.
Software, Bibliotheken, Vorträge und mehr: https://www.ypa-software.de

carli
Beiträge: 660
Registriert: Sa 9. Jan 2010, 17:32
OS, Lazarus, FPC: Linux 2.6.x, SVN-Lazarus, FPC 2.4.0-2
CPU-Target: 64Bit

Re: Angularjs

Beitrag von carli »

m.fuchs hat geschrieben:Allerdings halte ich das an dieser Stelle auch für keinen sinnvollen Einsatz eines Livebindings. Daten zum Server schicken, nur damit eine Überschrift aktualisiert wird.


Und genau das ist der Punkt, denn Angular.js ist clientseitig. Nennt man auch MVVM - ModelView-ViewModel. Der Client hat ein lokales Modell, das mit einer UI manipuliert wird. (Und Daten in Echtzeit gebunden werden). Ist das Modell auf dem Client fertig, wird es als JSON-Daten oder in einem beliebigen anderen Format an den Server geschickt wird.

Benutzeravatar
m.fuchs
Lazarusforum e. V.
Beiträge: 2285
Registriert: Fr 22. Sep 2006, 19:32
OS, Lazarus, FPC: Winux (Lazarus 2.0.8, FPC 3.0.4)
CPU-Target: x86, x64, arm
Wohnort: Berlin
Kontaktdaten:

Re: Angularjs

Beitrag von m.fuchs »

Ich sehe das rein.clientseitige Modell da nicht als Vorteil. Wenn bei ASP.NET MVC das Formular abgesandt wird, dann kommt im Controller auch ein Objekt meines Modells an. Nicht einfach nur JSON-Code oder sonstwas. Ist doch viel einfacher. Ich arbeite sowohl client- als auch serverseitig mit dem Modell.

Das Angular.js mag aber ideal sein für saubere JS-Anwendungen.
Software, Bibliotheken, Vorträge und mehr: https://www.ypa-software.de

carli
Beiträge: 660
Registriert: Sa 9. Jan 2010, 17:32
OS, Lazarus, FPC: Linux 2.6.x, SVN-Lazarus, FPC 2.4.0-2
CPU-Target: 64Bit

Re: Angularjs

Beitrag von carli »

m.fuchs hat geschrieben:Ich sehe das rein.clientseitige Modell da nicht als Vorteil. Wenn bei ASP.NET MVC das Formular abgesandt wird, dann kommt im Controller auch ein Objekt meines Modells an. Nicht einfach nur JSON-Code oder sonstwas. Ist doch viel einfacher. Ich arbeite sowohl client- als auch serverseitig mit dem Modell.

JSON ist aber das native Datenformat von JavaScript, welches man auf Server- und Clientside einsetzen kann (node.js). Damit der Client nicht all zu blöde Daten schicken kann und der Validierungs-Code nicht zu kompliziert wird, gibt es auch noch Validationssprachen, z.B. https://github.com/carli2/jsontype
m.fuchs hat geschrieben:Das Angular.js mag aber ideal sein für saubere JS-Anwendungen.

Richtig.

rweinzierl
Beiträge: 1
Registriert: Sa 11. Jan 2014, 15:54

Re: Angularjs

Beitrag von rweinzierl »

Hallo

Der einsatz von Angularjs macht dann Sinn wenn man eine Web Anwendung und nicht nur eine Webside erstellen will.
Die Grenzen sind zwar fließend aber bei einer Webanwendung erstellt der Anwender aktiv Inhalt während er bei einer Webside vor allen Inhalte abruft.

Mittlerweile gibt es einiges an Browseranwendungen z.B. Chrome-Apps die zeigen was heute bei intensiven Javascript einsatz möglich ist.
Javascript hat einiges an Nachteilen, aber es ist die einzige Programmiersprache die der Browser versteht.
Setzt man Javascript nicht nur für die Validierung eines Eingabeformulars ein, sondern will man den Anwender das Gefühl geben er arbeitet mit einem richtigen Anwendung dann kommt man um eine gute Planung / Strukturierung nicht herum.

Angularjs kann dabei helfen. Angularjs ist z.B. von Grundauf als testbar entwickelt worden.
Da Javascript im gegensatz zu Lazarus keinen echten Compiler kennt führt jeder noch so kleine Tippfehler den bei Pascal der Compiler sofort melden würde zu einem Laufzeitfehler.
Will man bei einer komplexen Javascript Anwendung nicht bei jeder Änderung / Erweiterung anfangen zu beten ob noch alles funktioniert kommt man um autmatisierte Test nicht herum.
Damit die Testbarkeit wirklich funktioniert benötigt man Konsepte wie Dependency Injection / Inversion of Control ==> Das bietet AngularJS
Angularjs unterstützt das MVVM Konsept, und fördert dadurch eine saubere Trennung von Logik und View.

In Lazarus ist man verführt die Daten aus den Eingabefeldern direkt in der Logik zu verwenden, oder sogar Daten in Viewkomponenten zwischenzuspeichern.
Man kann in RAD Entwicklungsumgebungen jahrelang sehr umfangreiche Anwendungen in diesem Stil entwickeln, die erstaunliche Ergebnise liefern,
aber wie einfach es auch aussieht den Inhalt des Editfeldes direkt für die Berechnung (innerhalb des Formulars zu verwenden) irgendwann kommt man die Grenzen was man Pflegen kann ( vor allem wenn das Team größer wird, oder z.B. einer der Entwickler das Projekt verläßt)

In Angularjs liegen alle "Daten" im scope (viewmodel), AngularJS synchronisiert den Inhalt des scopes automatisch mit den Viewelementen und den Modeldaten, und zwar in beide Richtungen!
Klingt für jemand für den diese Art der Entwicklung neu ist komplett unverständlich / umständlich / unnötig.
Aber so reicht es z.B. den Scope (ein Object) zu sichern und man hat den kompleten Zustand z.B. eines Formulars gesichert.
Die Logik bleibt testbar, unabhängig von der View.

Mit Angularjs ist es möglich eigene HTML Tags (Directiven) zu erfinden also z.B könnte man innerhalb von HTML <Lazarus ....> .... </Lazarus> schreiben.
Richtig eingesetzt wird HTML dadurch besser lesbar /strukturierbar / erweiterbar, da eigene Komponenten Aufgaben übernehmen können.
(Angularjs ersetzt zur laufzeit mittels Javascript die eigenen Tags durch die hinterlegten Elemente).

Ohne Framework kommt man bei komplexen Webanwendungen nicht weit, und wenn nicht Angularjs (stammt immerhin von Google) was den dann ?

Ich habe mit Lazarus ein kleines Analysetool / Editor für Angularjs geschrieben. (Mein erster Versuch mit Lazarus)

https://github.com/rweinzierl1/AngularjsAnalyse

Vielleicht kanns jemand brauchen

mfg

Reinhold

Antworten