AngularJS

@pollyou/angularjs stellt für AngularJS 1.5 und neuer (getestet mit 1.5.11 und 1.8.3) das Modul pollyou mit der Komponente <pollyou-survey-js> bereit. Sie verpackt das Web-Component <pollyou-survey> aus dem Script-Snippet – der Tag endet auf -js, weil <pollyou-survey> bereits das Web-Component selbst ist.

Altsysteme

AngularJS wird seit Januar 2022 nicht mehr weiterentwickelt. Das Paket ist für bestehende Anwendungen gedacht; für neue Projekte empfehlen wir Angular oder das Script-Snippet.

Installation mit Bundler (npm)

npm install @pollyou/angularjs

import angular from 'angular' // zuerst: das Paket verwendet window.angular
import pollyou from '@pollyou/angularjs' // registriert auch <pollyou-survey>

angular.module('app', [pollyou])

Der Standard-Export ist der Modulname 'pollyou'. Der ESM-Build importiert @pollyou/embed-core und registriert damit das Web-Component; ein zusätzliches Script ist nicht nötig.

Einbindung per Script-Tag (UMD)

Ohne Bundler laden Sie AngularJS, das embed.js von PollYou und den UMD-Build des Pakets. Der UMD-Build enthält das Web-Component nicht, er erwartet embed.js:

<script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
<script
  src="https://embed.pollyou.org/v1/embed.js"
  data-api-base="https://app.pollyou.org"
  async
></script>
<script src="https://cdn.jsdelivr.net/npm/@pollyou/angularjs/dist/umd/pollyou-angularjs.umd.js"></script>
<script>
  angular.module('app', ['pollyou'])
</script>

embed.js darf asynchron laden: Das Element wird aktualisiert, sobald das Script da ist. Mit require('@pollyou/angularjs') (CommonJS) erhalten Sie ebenfalls den UMD-Build – dann binden Sie embed.js per Script-Tag ein oder importieren @pollyou/embed-core selbst.

Verwendung

<pollyou-survey-js
  survey-id="'AbC123xyz0'"
  api-base="'https://app.pollyou.org'"
  hidden="{ kundennummer: vm.kunde.id }"
  on-complete="vm.danke($event)"
></pollyou-survey-js>

Alle Werte sind Einweg-Bindings (<) und werden als Ausdruck ausgewertet: Feste Texte stehen deshalb in einfachen Anführungszeichen (survey-id="'AbC123xyz0'"), Zahlen, true/false, Objekte und Scope-Werte ohne (show-results="false", locale="vm.sprache"). Ändert sich ein Wert, wird das Element sofort aktualisiert.

Bindings

Attribut	Bedeutung
survey-id	Öffentliche ID der Umfrage (Pflicht).
embed-id	Embed-Konfiguration.
api-base	Adresse der PollYou-API. Standard: pollYouConfigProvider, sonst embed.js/die eigene Seite.
mode	'inline' (Standard), 'popup', 'slider' oder 'fullpage'. Auslöser nur über die Embed-Konfiguration, siehe Overlays.
open	Popup ist geöffnet (nur bei mode="'popup'").
locale	Sprache, z. B. 'de'.
theme	'auto' (Standard), 'light' oder 'dark'.
show-results	false blendet Ergebnisse aus.
live-results	true: öffentliche Ergebnisse aktualisieren sich in Echtzeit.
identity-token	Signiertes Identitäts-Token des angemeldeten Nutzers (vom Server erzeugt).
meta	Objekt mit Zusatzdaten (höchstens 20 Werte zusammen mit hidden).
hidden	Objekt mit versteckten Feldern, z. B. { ref: 'newsletter' }.
channel	Kanal in den Statistiken, Standard 'angularjs'.

Callbacks

Callbacks sind &-Bindings. Sie laufen innerhalb eines Digest-Zyklus ($apply), Änderungen am Scope werden also sofort angezeigt. Verfügbare Variablen: $event (das detail des Ereignisses) und $originalEvent (das CustomEvent).

Attribut	$event
on-ready	{ surveyId, type, status }
on-start	{ surveyId }
on-answer	{ surveyId, questionKey, answer }
on-complete	{ surveyId, responseId, results }
on-close	{ surveyId, mode }
on-error	{ surveyId, phase, status }

Popup mit Button:

<button type="button" ng-click="open = true">Umfrage öffnen</button>
<pollyou-survey-js
  survey-id="'AbC123xyz0'"
  mode="'popup'"
  open="open"
  on-close="open = false"
></pollyou-survey-js>

Standardwerte

angular.module('app').config([
  'pollYouConfigProvider',
  function (pollYouConfigProvider) {
    pollYouConfigProvider.set({ apiBase: 'https://app.pollyou.org', locale: 'de' })
  },
])

Erlaubt sind apiBase, locale, theme und channel; Bindings einzelner Komponenten haben Vorrang. Beim Entfernen der Komponente (z. B. durch ng-if) werden Element und Event-Listener aufgeräumt.

Beispiel-App

Ein lauffähiges Beispiel liegt im Playground: frontend/apps/playground/static/src/angularjs.html – AngularJS 1.8 per Script-Tag, UMD-Build des Pakets und embed.js vom Embed-CDN, alle Callbacks im Protokoll.

Fehlersuche

• Die Umfrage bleibt leer oder zeigt „nicht gefunden“: Nur veröffentlichte Umfragen sind öffentlich; ein Entwurf oder eine archivierte Umfrage liefert 404. Das Ereignis on-error meldet { phase: 'load', status }.
• Fehler „blocked by CORS policy“ oder 403 origin_not_allowed: Die Embed-Konfiguration erlaubt nur bestimmte Origins. Tragen Sie die Origin Ihrer Seite ein – mit Schema und Port, also auch den lokalen Dev-Server (z. B. http://localhost:5173). api-base ist die Origin der API ohne Pfad (https://app.pollyou.org, nicht …/api).
• Content-Security-Policy: Erlauben Sie die API in connect-src (z. B. connect-src 'self' https://app.pollyou.org, für Live-Ergebnisse zusätzlich den Hub). Für embed.js muss das CDN in script-src stehen (z. B. script-src 'self' https://embed.pollyou.org). Die Styles setzt das Web-Component per Constructable Stylesheets und CSSOM, 'unsafe-inline' in style-src ist nicht nötig – nur eigenes Theme-CSS wird als <style> eingefügt und fehlt ohne 'unsafe-inline' (die Umfrage funktioniert trotzdem). Das Captcha kommt ohne Worker und eval aus.
• Lokal in Chrome keine Verbindung zur API: Chrome blockiert mit Local Network Access Anfragen von öffentlichen Seiten an localhost. Die Seite muss selbst lokal laufen (localhost/127.0.0.1), wie die Apps im Playground.
• Element bleibt leer, keine Fehlermeldung: Beim UMD-Build fehlt embed.js – ohne das Script ist <pollyou-survey> nicht definiert. Beim ESM-Build angular vor @pollyou/angularjs importieren.
• Umfrage-ID kommt nicht an: Bindings sind Ausdrücke. Feste Texte brauchen Anführungszeichen im Attribut: survey-id="'AbC123xyz0'"; ohne sie sucht AngularJS eine Scope-Variable AbC123xyz0.
• Strenge CSP: AngularJS selbst braucht ohne 'unsafe-eval' das Attribut ng-csp am Root-Element; die PollYou-Komponente benötigt keine Ausnahme.