SharePoint Hosted Add-in mit AngularJS 2

Home/SharePoint/SharePoint Hosted Add-in mit AngularJS 2

SharePoint Hosted Add-in mit AngularJS 2

Voraussetzungen

Die folgenden Voraussetzungen müssen vorhanden sein, um ein SharePoint Hosted Add-in mit AngularJS 2 entwickeln zu können:

  • O365 oder SharePoint 2013-Umgebung
  • Visual Studio mit Office Developer Tools
  • Visual Studio Code, Nodepad++ oder ein vergleichbarer Codeeditor
  • Git: https://git-scm.com/downloads
  • Nodejs: https://nodejs.org/
  • Webpack & Typescript: Installation mittels des CMD-Befehls
    npm install -g webpack webpack-dev-server typescript

Add-in-Projekt anlegen und bereinigen

Als erstes gilt es, ein neues Projekt vom Typ „SharePoint Add-in” anzulegen, wie es in der folgenden Abbildung dargestellt wird. Im nachfolgenden Dialog ist darauf zu achten, dass der Typ „SharePoint Hosted” ausgewählt wird, da die Applikation vollständig auf clientseitige Technologien aufbauen wird.

Da die Solution vieles mitbringt, was wir in der Entwicklung mit AngularJS2 nicht benötigen, entfernen wir alle nicht benötigten Komponenten, sodass lediglich die folgenden übrigbleiben

Ebenso gilt es, das jQuery nuget-Paket zu deinstallieren. Dies kann über einen Rechtsklick auf das Projekt und „Manage NuGet Packages” unter dem Reiter „Installed” durchgeführt werden.

Die App beinhaltet nun ausschließlich ein AppIcon, eine Manifestdatei für die Festlegung der Metadaten der App sowie eine Default.aspx. Letztere bildet den Einstieg in die App und referenziert zugleich sämtliche Komponenten der App.

Einrichtung der AngularJS 2 Struktur

Nachdem das Visual-Studio-Projekt bereinigt worden ist, navigiert man in der CMD-Konsole zum Projektordner, um dort AngularJS 2 zu installieren.

Dazu beziehen wir das sogenannte Angular Seed, welches neben der Installation von AngularJS 2 eine fertige Projektstruktur vorgibt. Dafür muss der folgende Befehl in die CMD-Konsole eingegeben werden:

git clone https://github.com/angular/angular2-seed.git

Anschließend führen wir die Installation mittels des Befehls „npm install” aus.

Nun können wir den ersten Build durch den Befehl „webpack” erstellen, wodurch ein Ordner namens „dist” erzeugt wird. Dieser enthält die App, welche nun mit dem SharePoint verbunden werden muss.

Zurück in Visual Studio können wir mittels „Show All Files” alle Dateien einblenden lassen, um so den genannten Ordner zur Projektstruktur hinzuzufügen.

 

Nun gilt es die Default.aspx so anzupassen, dass diese den Inhalt der „dist/index.html” korrekt aufruft. Dadurch wird zunächst der Header-Bereich reduziert, indem sämtliche vordefinierten Verweise aus dem ContentPlaceHolder „PlaceHolderAdditionalPageHead” entfernt werden, sodass lediglich „sp.js” referenziert und der Inhalt auf „full” gestreckt wird:

Anschließend muss der Body-Bereich der „dist/index.html” in den ContentPlaceHolder „PlaceHolderMain” übertragen werden, wobei die Referenzen zu den JavaScript-Dateien relativ zur Default.aspx anzugeben sind:

Leider ist AngularJS 2 in der aktuellen Version nicht mit SharePoint kompatibel, da ein Konflikt mit der in AngularJs benötigten Zone-Funktionalität besteht: https://github.com/angular/zone.js/issues/434
Um dies zu umgehen, müssen wir mittels „window.Zone = undefined;” (s.o.) die globale Zone-Funktionalität von SharePoint entfernen. Dies stellt allerdings keine zufriedenstellende Lösung dar, da dadurch die genannte SharePoint-Funktionalität für die Default.aspx nicht mehr zur Verfügung steht.

Ab diesem Punkt nutzen wir Visual Studio lediglich für das Deployment gegen SharePoint. Die Entwicklung findet im Codeeditor der Wahl statt, wobei auch Visual Studio genutzt werden kann.

Umgang mit dem AngularJS 2 Seed

Das AngularJS 2 Seed ist so aufgebaut, dass es beispielhafte Komponenten und ein einfaches Routing implementiert, sodass aufbauend darauf die Projektstruktur leicht erweitert werden kann.

Ferner kann das Projekt losgelöst von einem Webserver (auch SharePoint) entwickelt werden, indem auf einen lokalen Node.js-Webserver zurückgegriffen wird. Bei Verwendung dieser Möglichkeit ist darauf zu achten, dass eine Datenschicht abstrahiert werden sollte, sodass die App auch ohne SharePoint verwendet werden kann.

Befehle:

  • „npm start” – Starten des Projektes auf einem lokalen Node.js-Webserver
  • „webpack” – Builden von Änderungen innerhalb des „src”-Ordners
  • „webpack –watch” – Builden von Änderungen innerhalb des „src”-Ordners, sobald Änderungen an Dateien innerhalb von „src” vorgenommen wurden

Der Befehl „webpack –watch” empfiehlt sich insbesonders, da dieser dafür sorgt, dass Änderungen an Dateien innerhalb des „src”-Ordners automatisch im Hintergrund überwacht werden und das Projekt automatisiert nach „dist” gebuilded wird. Dadurch ist ein komfortables Arbeiten innerhalb von Visual Studio möglich, ohne dass die Entwicklungsumgebung verlassen werden muss.

Weiterführende Themen

By | 2017-02-03T14:44:14+00:00 January 27th, 2017|SharePoint|0 Comments

About the Author:

Technology Specialist, Experte für: Javascript, JQuery, Ajax

Leave a Reply

%d bloggers like this: