liferay-theme

___ qstnhdr ___ Verwendung von AngularJS mit Liferay ___ answer21236562 ___

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 %code% in Ihrem Thema ändern:

%Vor%

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 %code% 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:

%Vor%

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 %code% in allen Ihren Portlets teilen können und die Portlets miteinander in kantiger Weise kommunizieren können (z. B. %code% , %code% , 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 %code% 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 %code% 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 %code% Ihres Portlets können Sie ein JSON-Objekt erstellen und unter einem Schlüssel in Ihrem %code% speichern:

%Vor%

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

%Vor%

%code% ist eine Direktive, die den JSON analysiert und die Informationen in einer Dienstinstanz speichert:

%Vor%

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

Spracheigenschaften

Ein weiteres Problem, das wir hatten, waren die Spracheigenschaften. Normalerweise würden Sie sie in einer %code% -Datei definieren und sie in Ihrem jsp verwenden. Zum Beispiel durch %code% -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:

%Vor%

Sie können diese Übersetzungen jetzt als Service und als Filter verwenden. Zum Beispiel wird %code% auf der Client-Seite zum 'Titel' ausgewertet.

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

    
___ qstntxt ___

Ich würde globale AngularJS mit Liferay Portal verwenden. Denn wie die Devise von AngularJS:

  

Warum AngularJS?        HTML eignet sich hervorragend zum Deklarieren statischer Dokumente, wird jedoch bei der Deklaration dynamischer Ansichten in Webanwendungen nicht verwendet.   Mit AngularJS können Sie das HTML-Vokabular für Ihre Anwendung erweitern. Das   resultierende Umgebung ist außerordentlich ausdrucksstark, lesbar und   schnell zu entwickeln.

Ich würde die deklarative Syntax von html einfach verwenden, indem ich Liferay-Theme und Portlets entwickle.

Für diese Anforderung habe ich ein neues Liferay-Theme erstellt und ein wenig das %code% :

angepasst %Vor%

hier %code% :

%Vor%

und ich kann den Controller erweitern, wie den Namen Liferay-Site zu erhalten.

Was hilft das alles?

Hiermit kann ich einfach auf die Liferay JavaScript-Werte zugreifen & amp; Funktionen über deklarative HTML-Syntax, ohne direkte JavaScript-Funktion aufrufen, wie AngularJS Weg.

z. jetzt ist es möglich, Werte und Funktionen von Liferay JavaScript durch deklarativen HTML-Code zu erhalten, wie hier, um die aktuelle URL in Web-Content-Anzeige zu bekommen:

%Vor%

Meine Fragen sind jedoch:

  • Welche Nebenwirkungen können auftreten, wenn AngularJS global in Liferay verwendet wird?
  • Könnte es zu Leistungsproblemen kommen?
  • Konflikte mit anderen JavaSripts, z. Legierung?
  • Verwendung von AngularJS innerhalb von Portlets?
___ answer21157436 ___

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

    
___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123angularjs ___ Für Fragen zu AngularJS (1.x), dem Open-Source-JavaScript-Framework. Verwenden Sie dieses Tag NICHT für Angular 2 oder höhere Versionen. Verwenden Sie stattdessen das [eckige] -Tag. ___ tag123liferay ___ Liferay ist ein Open-Source-JSR-286-konformes Portal und eine soziale Plattform, die in Java geschrieben sind. Es bietet voll funktionsfähige integrierte Portlets (60+) und verschiedene Integrationspunkte für die nahtlose Integration mit Drittanbieter-Software wie Alfresco, Sharepoint usw. ___ tag123lifearaytheme ___ Liferay-Themes sind Hot-Deployable-Plugins, die beim Anpassen des Layouts und des gesamten Look & Feels von Portalseiten helfen. Das Liferay-Design verwendet verschiedene Vorlagen-Engines, um das Seitenlayout und die Stile des Portals anzupassen. ___ answer28839732 ___

Hoffe das hilft immer noch; Die vorher erwähnten Kommentare sind, denke ich, tot. Es gibt wahrscheinlich keine Namensraumprobleme und die Leistung könnte sich von Implementierung zu Implementierung ändern.

Bezüglich der Verwendung von AngularJS in Portlets oder global hier ist meine Eingabe:

Ich habe viele Beispiele mit AngularJS in einem Portlet gesehen. Ich habe ein paar grundlegende Beispiele ausprobiert und es nutzt, wie einfach es ist, es einzurichten und eigenständige Konfigurationen.

Nun sprechen Sie über die globale Verwendung von AngularJS. Ich denke, das ist ein interessanter Weg und ich versuche derzeit, dies umzusetzen. Es ist ziemlich anders, da, zumindest mein Ansatz, alles über die Sicht auf AngularJS und nicht auf das Portlet lassen wird. Um dies mit Liferay zu nutzen, nutze ich das Delegator-Servlet, mit dem Sie die Liferay-API nutzen können. Grundsätzlich können Sie mehrere URL-Zuordnungen zu verschiedenen Klassen einrichten. Ich gebe immer ein JSON-Objekt mit diesen Aufrufen zurück. Die Grundidee wäre so:     - Globale AngularJS App.     - Verwenden Sie AngularJS-Vorlagen, um die gesamte Ansicht zu erstellen.     - Verwenden Sie Ajax-Aufrufe für die Delegatorportlet-Zuordnung zu einer benutzerdefinierten Klasse, die ein JSON-Objekt zurückgibt.     - Verwenden Sie AngularJS-Controller, um die Daten von den Aufrufen des Delegators abzurufen.

Ich erwähnte, dass das etwas anders ist, und das ist, weil Liferay im Grunde nur ein Dienstanbieter sein würde und das gesamte Rendering AngularJS überlassen wird. Dies scheint auch mehr auf die AngularJS Art zu beruhen.

    
___
3
Antworten

Verwendung von AngularJS mit Liferay

Ich würde globale AngularJS mit Liferay Portal verwenden. Denn wie die Devise von AngularJS:    Warum AngularJS?        HTML eignet sich hervorragend zum Deklarieren statischer Dokumente, wird jedoch bei der Deklaration dynamischer Ansichten...
15.01.2014, 14:50