Ist AngularJS nur für Single-Page-Anwendungen (SPAs) geeignet?

Lesezeit: 9 Minuten

Benutzer-Avatar
Modika

Wir suchen nach Optionen, um das Frontend einer Anwendung zu erstellen, die wir erstellen, und versuchen, ein Tool zu evaluieren, das für uns funktioniert und uns die beste Plattform bietet, um voranzukommen.

Das ist ein Node.js Projekt. Unser ursprünglicher Plan war, Express zu verwenden und diesen Weg einzuschlagen, aber wir entschieden, dass es am besten wäre, sich vor Beginn dieser Phase anzusehen, was es da draußen gibt. Unsere Anwendung hat mehrere Bereiche, von denen wir glauben, dass sie nicht in das Single-Page-Modell passen, da sie aus der Anwendungsperspektive verwandt sind, aber nicht aus der Sicht.

Wir haben einige der Frameworks gesehen, die wir zum Aufbau des Clients verwenden könnten Backbone.js, Meteoretc. und auch AngularJS.

Dies mag eine ziemlich offensichtliche Frage sein, aber wir scheinen nicht zu entziffern, ob AngularJS nur für Einzelseitenanwendungen gedacht ist oder ob es für mehrseitige Anwendungen wie zum Beispiel Express verwendet werden kann.


UPDATE 17. Juli 2013
Nur um die Leute auf dem Laufenden zu halten, werde ich diese Frage aktualisieren, während wir den Prozess durchlaufen. Wir werden vorerst alles zusammen bauen, und wir werden sehen, wie gut das funktioniert. Wir haben uns an ein paar Leute gewandt, die mit AngularJS besser qualifiziert sind als wir, und die Frage gestellt, ob größere Anwendungen aufgeteilt werden sollen, die den Kontext teilen, aber möglicherweise zu groß sind, um auf einer einzelnen Seite zu arbeiten.

Der Konsens war, dass wir mehrere statische Seiten bereitstellen und AngularJS-Anwendungen erstellen könnten, die nur mit diesen Seiten funktionieren, effektiv eine Sammlung von SPA erstellen und diese Anwendungen mithilfe von Standardverknüpfungen miteinander verknüpfen. Jetzt ist unser Anwendungsfall sehr spezifisch, da unsere Lösung mehrere Anwendungen hat, und wie gesagt, wir werden zuerst die einzelne Codebasis ausprobieren und von dort aus optimieren.

UPDATE 18. Juni 2016 Das Projekt fiel von einer Klippe, also kamen wir nie dazu, zu viel zu erledigen. Wir haben es kürzlich wieder aufgegriffen, verwenden aber nicht mehr Angular und verwenden stattdessen React. Wir verwenden immer noch die im vorherigen Update beschriebene Architektur, in der wir Express- und Self-Container-Apps verwenden, also haben wir zum Beispiel a /chat Route in Express, die unsere React-Chat-App bedient, haben wir eine andere Route /projects das dient der Projekte-App und so weiter. So wie wir es betrachten, ist jede App in Bezug auf ihren Funktionsumfang ein aggregierter Stamm, sie muss in der Lage sein, eigenständig zu sein, damit sie als eigenständige App betrachtet werden kann. Technisch gesehen sind alle Informationen da draußen, es ist nur ein grundlegender Express und welche Art von clientseitiger App-Erstellung Sie verwenden möchten.

  • Wie ist es gelaufen? Ich versuche gerade herauszufinden, wie ich eine ASP.NET-Anwendung mit über 50 Seiten in eine reine HTML + Javascript + REST-Anwendung verschieben kann, und ich verstehe wirklich nicht, wie das als SPA funktionieren würde.

    – Greg

    22. Oktober 2013 um 21:07 Uhr

  • Wir mussten auf etwas anderes umsteigen. Aus den Diskussionen, die wir hatten und wieder führen werden, wenn dies wieder losgeht, geht hervor, dass SPA ein sehr konzentriertes Rädchen in einer viel größeren Maschine sein kann. Wenn Sie also unsere Instanz in Ihre übersetzen (wir haben Pure Node mit Express verwendet), könnten Sie, wenn Sie in einem vertrauten Stack (.Net) bleiben wollten, MVC als Gerüst verwenden und Winkel innerhalb der Ansichten verwenden, um die dynamischen Dinge (jedes Feature) hinzuzufügen. . Wenn Sie Ihre App nicht zusammenfassen können, könnte die Implementierung von 50 Seiten Logik auf einer einzigen Seite ersticken.

    – Modika

    24. Oktober 2013 um 10:04 Uhr

  • Dadurch wird jeder Abschnitt (dh Benutzer, Nachrichten, Produkte usw.) zu einem eigenen SPA, aber zusammen bilden sie Ihre App.

    – Modika

    24. Oktober 2013 um 11:39 Uhr

  • Grosses Dankeschön. Gibt es eine spezielle Codierung, die durchgeführt werden muss, um die verschiedenen SPAs miteinander zu verbinden? Oder nur normale Links?

    – Greg

    24. Oktober 2013 um 14:57 Uhr

  • @Greg, nach unserem bisherigen begrenzten Wissen, da es sich im Wesentlichen um eigenständige Apps handelt, würde die Standardverknüpfung funktionieren, offensichtlich wird es wahrscheinlich nicht einfach sein, da dies eine Art Persistenz (Cookies, lokaler Speicher) sein wird, um bestehen zu bleiben geteilte Informationen wie vielleicht und Identität oder Profil, wenn die App hinter irgendeiner Form der Anmeldung steckt. Unsere Apps werden eng mit unserer API verknüpft, und da wir eine vertrauenswürdige App erstellen, verwenden wir oauth, um jede Anfrage zu schützen. Ich denke, Trello macht etwas Ähnliches, aber ich könnte mich irren.

    – Modika

    30. Oktober 2013 um 16:48 Uhr

Gar nicht. Sie können Angular verwenden, um eine Vielzahl von Apps zu erstellen. Clientseitiges Routing ist nur ein kleiner Teil davon.

Sie haben eine große Liste von Funktionen, die Ihnen außerhalb des clientseitigen Routings zugute kommen:

  • Zwei-Wege-Bindung
  • Vorlagen
  • Währungsformatierung
  • Pluralisierung
  • wiederverwendbare Steuerelemente
  • RESTful-API-Handhabung
  • AJAX-Handhabung
  • Modularisierung
  • Abhängigkeitsspritze

Es ist verrückt zu glauben, dass all das „nur in einer Single-Page-App verwendet werden könnte“. Natürlich nicht … das ist wie zu sagen “Jquery ist nur für Projekte mit Animationen”.

Wenn es zu Ihrem Projekt passt, verwenden Sie es.

  • Ein weiterer zu erwähnender Punkt ist, dass Angular nicht einmal für ganze Seiten verwendet werden muss – es kann in ein bestehendes System integriert werden, um Komponenten zu erstellen, dh ein komplexes Widget oder Plugin innerhalb einer Legacy-Anwendung.

    – Alex Osborn

    5. März 2013 um 21:06 Uhr

  • @Blesh, danke für die Antwort, es macht Sinn, aber wir haben Mühe zu finden, “wie” wir es verwenden, um mehrseitige Apps zu erstellen, weshalb die Frage gepostet wurde, das ist in der Tat eine andere Frage, also war Ihre Antwort akzeptiert, aber können wir zum Beispiel angle.js mit express.js verwenden oder ist so etwas nur Zeitverschwendung und zu kompliziert.

    – Modika

    6. März 2013 um 9:41 Uhr

  • Angular mit Express ist nahezu ideal! Es ist wirklich, wirklich einfach, eine RESTful-API mit Express zu erstellen, die Sie von Ihren Angular-Anwendung(en) nutzen können. Google NodeJS Express RESTful API und die Dienste $resource und $http von Angular. Beginnen Sie danach einfach mit dem Prototyping und spielen Sie damit. Ich denke, Sie werden feststellen, dass Sie zu viel über das “WIE” nachdenken / sich Sorgen machen, wenn Sie sehen, wie gut sie zusammenarbeiten.

    – Ben Lesh

    6. März 2013 um 14:11 Uhr

  • @Blesh, tut mir leid, dass ich zu spät zurückkomme. Wir haben bereits eine REST/Hypermedia-API, die mit Restify erstellt wurde. Ich denke, wir müssen einen ordentlichen Weg finden, um die einzelnen erstellten “Apps” irgendwie miteinander zu verknüpfen, werden dies untersuchen und die Frage wahrscheinlich irgendwann aktualisieren.

    – Modika

    11. März 2013 um 17:47 Uhr

  • @Modika konnten Sie gute Ressourcen finden oder haben Sie gute Einblicke in mehrseitige Apps?

    – Dr

    4. Juni 2013 um 22:52 Uhr

Auch bei Angular hatte ich anfangs mit dem „Wie“ zu kämpfen. Dann dämmerte es mir eines Tages: „Es ist NOCH Javascript“. Es gibt eine Reihe von Beispielen zu den Besonderheiten von Angular (neben dem Buch einer meiner Favoriten https://github.com/angular-app/angular-app). Das Wichtigste, woran Sie denken sollten, ist, die js-Dateien wie in jedem anderen Projekt zu laden. Alles, was Sie tun müssen, ist sicherzustellen, dass die verschiedenen Seiten auf das richtige Angular-Objekt (Controller, Ansicht usw.) verweisen, und schon kann es losgehen. Ich hoffe, das macht Sinn, aber die Antwort war so einfach, dass ich sie übersehen habe.

Benutzer-Avatar
Fedorshishi

Vielleicht ist meine Erfahrung für jemanden nützlich. Wir haben unser Projekt logisch aufgeteilt. Eine SPA verwenden wir für den Feed, eine andere für die Arbeit mit der Karte, eine andere für die Bearbeitung eines Benutzerprofils usw. Wir haben zum Beispiel drei Apps: Feed, Benutzer und Karte. Ich verwende es in den getrennten URLs wie folgt:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

Jede dieser Anwendungen hat ihre eigenen lokalen Routing-Mappings zwischen Zuständen in der Anwendung. Ich denke, es ist eine gute Praxis, da jede Anwendung nur mit ihrem eigenen Kontext arbeitet und Abhängigkeiten lädt, die sie wirklich benötigt. Außerdem eignet es sich sehr gut für Debug- und Integrationsprozesse.

In der Tat können Sie sehr einfach eine Mischung aus SPA-Apps erstellen, zum Beispiel wird der Feed eine URL mit der Angularjs-Anwendung sein, die Benutzer-App mit den Reactjs und die Zuordnung zur Backbone.js-Anwendung.

Als Antwort auf Ihre Frage:

Angular nicht nur für SPAs, Angular spielt gut und schnell für SPA-Anwendungen, aber niemand macht sich die Mühe, MPA-Anwendungen für eine Vielzahl von SPA-Anwendungen zu erstellen. Denken Sie jedoch an Ihre URL-Architektur und vergessen Sie nicht die SEO-Verfügbarkeit Ihrer Anwendungen.

Ich unterstütze auch die Idee:

Was ist der Unterschied zwischen einem Projekt und einer App? Eine App ist eine Webanwendung, die etwas tut – zB ein Weblog-System, eine Datenbank öffentlicher Aufzeichnungen oder eine einfache Umfrage-App. Ein Projekt ist eine Sammlung von Konfigurationen und Apps für eine bestimmte Website. Ein Projekt kann mehrere Apps enthalten. Eine App kann sich in mehreren Projekten befinden.

Wenn Sie nur ein paar Seiten mit Client-Datenbindung benötigen, würde ich mich für Knockout und Javascript Namespace entscheiden.

Knockout ist großartig, besonders wenn Sie unkomplizierte Abwärtskompatibilität benötigen und ziemlich einfache Seiten haben. Wenn Sie Komponenten von Drittanbietern verwenden, sind die benutzerdefinierten Bindungen von Knockout unkompliziert und einfach zu handhaben.

Mit Javascript-Namensräumen können Sie Ihren Code getrennt und überschaubar halten.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

Und in einem Skript-Tag, nachdem Ihre anderen Skripts geladen wurden

<script>
    myCo.init();
</script>

Der Schlüssel ist, Sie verwenden jedes gewünschte Werkzeug, wenn Sie es brauchen. Benötigen Sie Datenbindung? Knockout (oder was auch immer Sie mögen). Benötigen Sie Routing? sammy.js (oder was auch immer du magst).

Der Client-Code kann so einfach oder kompliziert sein, wie Sie es wünschen. Ich habe versucht, Angular in eine sehr komplizierte Site mit einem bestehenden proprietären Framework zu integrieren, und es war ein Albtraum. Angular ist großartig, wenn Sie neu anfangen, aber es hat eine Lernkurve und zwingt Sie in einen sehr engen Arbeitsablauf. Wenn Sie sich nicht daran halten, kann sich Ihr Code sehr schnell verheddern.

Ich würde sagen, Angular ist übertrieben, wenn Sie nur ein SPA entwickeln möchten. Sicher, wenn Sie bereits damit vertraut sind, machen Sie weiter. Aber wenn Sie neu im Framework sind und nur eine SPA entwickeln müssen, würde ich etwas Einfacheres mit einer Reihe eigener Vorteile wählen. Ich empfehle, nachzusehen Vue.js oder Aurelia.io.

Vue.js verwendet bidirektionale Datenbindung, MVVM, wiederverwendbare Komponenten, einfach und schnell zu erfassen, weniger Code zu schreiben usw. Es kombiniert einige der besten Funktionen von Angular und React.

Aurelia.io, ganz ehrlich, ich weiß nicht viel darüber. Aber ich habe mich umgesehen und es scheint eine Alternative zu sein, die es wert ist, untersucht zu werden, ähnlich wie oben.

Verbindungen:
https://vuejs.org/
http://aurelia.io/

1298230cookie-checkIst AngularJS nur für Single-Page-Anwendungen (SPAs) geeignet?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy