Zunächst einmal: nette Idee mit AngularJS auf dem Portal selbst. Bis jetzt verwenden wir AngularJS nur für Portlets - ich erkläre später warum und wie.

Mögliche Nebenwirkungen und Konflikte

Es gibt nicht mehr Nebenwirkungen mit AngularJS als mit anderen JavaScript-Bibliotheken oder -Frameworks. Liferay wird mit AlloyUi ausgeliefert ( Ссылка ). Diese JavaScript-Bibliothek basiert auf YUI ( Ссылка ), die von Yahoo geschrieben wurden. YUI verwendet einen anderen Namespace als jQuery, sodass Sie jQuery zusammen mit AlloyUI verwenden können. Und wenn Sie jQuery ohne irgendwelche Nebenwirkungen verwenden können, können Sie AngularJS sogar noch mehr verwenden, weil AngularJS eine Untermenge von jQuery zur Verfügung stellt.

Alles, was Sie sicherstellen müssen, ist, dass Sie jQuery vor AngularJS einbinden, wenn Sie die vollständige jQuery nicht nur die jqLite-Implementierung von AngularJS benötigen. Dies können Sie leicht tun, indem Sie portal_normal.vm in Ihrem Thema ändern:

Wenn Sie die JavaScript-Dateien auf der Themenebene einschließen, können Sie für jedes Thema verschiedene Versionen verwenden. Dies ist sehr praktisch, wenn Sie mehr als eine Portalinstanz haben und Sie nicht die Möglichkeit haben, in jeder Instanz dieselbe Version zu verwenden.

Leistung

Es kommt darauf an. Man muss wissen, dass Angular die gesamte Webseite analysiert, wenn Sie Ihre ng-app Direktive auf das html Element setzen, wie in Ihrem Beispiel. Wenn Ihre Seite sehr groß ist und viel Inhalt hat, könnte das ein Leistungsproblem sein. Daher ist es besser, die ngApp-Anweisung auf Ihrer Seite etwas herunter zu setzen und die ngApp manuell zu initialisieren durch:

Verwendung von AngularJS in Portlets

Es gibt zwei Möglichkeiten, dies zu erreichen.

1) Bei großen ngApp wie in Ihrem Beispiel. Sie müssen wissen, dass Sie ngApps nicht verschachteln können. Daher muss jedes Portlet Teil Ihrer App sein. Mit diesem Ansatz verlieren Sie die Möglichkeit, dass ein Portlet Ihrer Seite ein individuelles Element bereitstellen kann. Alle Portlets müssen wissen, wie der Name Ihrer ngApp lautet und müssen diese ngApp erweitern. Sie dürfen diese Portlets nicht ohne Änderungen an anderen Portalservern verwenden, wenn sie einen anderen ngApp-Namen oder keinen anderen verwenden. Der Vorteil besteht darin, dass Sie das $rootScope in allen Ihren Portlets teilen können und die Portlets miteinander in kantiger Weise kommunizieren können (z. B. $emit , $on , gemeinsame Dienste, ...).

2) Jedes Portlet kommt mit einer eigenen ngApp. In diesem Fall gibt es keine Abhängigkeiten. Jedes Portlet kann seine eigene ngApp in angular.bootstrap instanziieren. Außerdem wird jede ngApp nur für einen kleinen Teil der Webseite erstellt und nur dann, wenn sie wirklich benötigt wird.

In beiden Fällen sollten Sie das Routing vermeiden. Weil pro Seite nur ein routeProvider verwendet werden kann.

Wir haben uns dafür entschieden, den zweiten Ansatz zu verwenden, damit die Portlets individuell bleiben und nicht von einer globalen ngApp abhängig sind.

Hilfreiche Tipps - ich hoffe

Portlet-Konfiguration

Sie wissen, dass Sie Ihre Portlets konfigurieren können. Es stellt sich also die Frage: "Wie stelle ich meine Portlet-Einstellungen meinem eckigen Portlet zur Verfügung?" Sie können natürlich eine http-Anfrage stellen, um sie zu erhalten. Dies reicht jedoch nicht aus, da Sie einen unnötigen Anruf tätigen. Ihre Portlets sind normalerweise Java-Server-Seiten, daher wäre es nett, die Einstellungen während der Generierungszeit auf dem Server zu speichern und diese Informationen an Ihre eckige App zu senden. Aber wie?

In der Methode doView Ihres Portlets können Sie ein JSON-Objekt erstellen und unter einem Schlüssel in Ihrem RenderRequest speichern:

In Ihrem jsp können Sie auf dieses Konfigurationsattribut zugreifen:

portlet-config ist eine Direktive, die den JSON analysiert und die Informationen in einer Dienstinstanz speichert:

Jetzt können Sie die portletConfigService auf jeden Controller, Service, Fabrik oder was auch immer einfügen und den config-Parameter verwenden: portletConfigService.key .

Spracheigenschaften

Ein weiteres Problem, das wir hatten, waren die Spracheigenschaften. Normalerweise würden Sie sie in einer language.properties -Datei definieren und sie in Ihrem jsp verwenden. Zum Beispiel durch fmt:message -Tags. Aber Sie möchten auch in Ihrer angular js App darauf zugreifen können. Und was Sie absolut nicht wollen, ist, sie zweimal in Ihren Quellen zu haben. Wir haben dieses Problem durch einen generierten Dienst und eine Direktive gelöst, die die Eigenschaften für die Sprache des aktuellen Benutzers liest und den eckigen Kram in einem jsp erzeugt:

Sie können diese Übersetzungen jetzt als Service und als Filter verwenden. Zum Beispiel wird <div>{{'title' | translate}}</div> auf der Client-Seite zum 'Titel' ausgewertet.

Ich hoffe, Sie haben einige nützliche Informationen bezüglich Ihrer Bedenken erhalten.

Eine breite Palette von Fragen, lassen Sie mich versuchen, nach meinem besten Wissen zu antworten.

Nebenwirkungen für mehrere JS-Bibliotheken (z. B. AlloyUI und AngularJS) sind typischerweise:

• höhere Ladezeiten
• mögliche Konflikte

AlloyUI ist recht gut im Namespacing (aufgrund der Arbeit des zugrunde liegenden YUI), so dass die Wahrscheinlichkeit, dass es zu tatsächlichen Konflikten kommt, ziemlich gering ist. Aber niemand wird Ihnen garantieren, dass es nie Konflikte geben wird, Sie müssen das selbst testen. (Ich glaube, dass Sie in diesem Fall ziemlich sicher sind)

Wenn Sie nach Leistungsproblemen fragen, können höhere Ladezeiten auftreten. Meine Gegenfrage dazu lautet: An welcher Darbietung interessiert dich:

• Sekundenladezeiten beim ersten Besuch (wird davon profitieren, dass pro Seite weniger Dateien angefordert werden)
• Ladezeit in Sekunden bei wiederholtem Besuch (kann durch aggressives Caching von JS und anderen sekundär referenzierten Dateien gemildert werden)
• Zeit bis die Seite vollständig angezeigt wird (z. B. wenn JS zum Rendern der Seite verwendet wird, nachdem sie vollständig geladen wurde)
• Entwicklungszeit / -leistung, weitgehend abhängig von Ihrer (Team-) Erfahrung mit der eingesetzten Technologie
• Anzahl der gleichzeitigen Benutzer, die Ihr Server verarbeiten kann (dies hängt möglicherweise von der Anzahl der Anfragen ab, die Sie auf Ihren Server richten. Manchmal verringert die Verwendung von Ajax die Serverlast, manchmal erhöht sich die Last)
• Browserspeicherverbrauch (möglicherweise ein Problem bei mobilen Geräten)
• Menge der an den Browser übertragenen Daten (möglicherweise ein Problem bei mobilen Geräten oder Verbindungen mit geringer Bandbreite, kann jedoch durch aggressives Caching für wiederholte Besuche gemildert werden)

Um es anders auszudrücken: Was die Leistung angeht, fürchte ich, Sie müssen für sich selbst messen.

Es ist kein Problem, dass ich AngularJS in Ihren Portlets verwende. Insbesondere wenn Ihre Portlets darauf vertrauen können, dass die Bibliothek bereits geladen wird (anstatt sie selbst zu laden), sollte dies ziemlich sicher sein. Ein Nachteil, den ich mir vorstellen kann (aber das ist natürlich für alle Portlets) ist, dass Sie das Beste daran sind, wenn alle Portlets darauf angewiesen sind, dieselbe exakte Version aller verfügbaren Bibliotheken zu verwenden. Dies bedeutet auch, dass Sie alle Ihre Portlets testen / aktualisieren, wenn Sie die Version von AngularJS aktualisieren, die Sie in Ihr Design aufnehmen.

Puh, ziemlich viel. Es tut mir leid, dass dies keine schwarz-weiße Antwort sein kann, Sie müssen das selbst beurteilen. Hoffentlich hilft diese Argumentation