AngularJS – SharePoint Hosted Add-in entwickeln

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.

Erfahren Sie mehr

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Das neuste Mitglied der Office 365 Familie: Delve
Blog
Blog

Das neuste Mitglied der Office 365 Familie: Delve

Microsoft legt nach: Mit Delve startet eine neue Form des Suchens und des Auffinden von Dokumenten und Informationen.

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest
Blog
Blog

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest

Mit LUIS, der Sprach- und Texterkennungssoftware von Microsoft, und dem Bot Framework von Azure haben wir eine Lösung für den IT-Support entwickelt.

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks
Blog
Blog

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks

Neues aus der Welt von PowerApps

Nov
07
Webcast mit Microsoft: Das Intranet zu Ende gedacht
Webinar
Webinar

Webcast mit Microsoft: Das Intranet zu Ende gedacht

Am 07. November findet erneut eines unserer Webinare gemeinsam mit Mircosoft statt. Das Thema dieses Mal: Das Intranet zu Ende gedacht – Die Informationszentral...

Mit der HoloLens ein Stück Berlin nach Köln holen
News
News

Mit der HoloLens ein Stück Berlin nach Köln holen

Im Rahmen eines zweitägigen Hackathons haben sich einige Mitarbeiter der novaCapta der Microsoft HoloLens und dem Thema Mixed Reality gewidmet. Dabei haben wir...

May
04
novaCapta auf der dotnet Cologne
Event
Event

novaCapta auf der dotnet Cologne

In nächster Nachbarschaft zu unserem Kölner Büro findet am 04. und 05. Mai die dotnet Cologne im KOMED statt. Wir von der novaCapta sind auch dabei.

Azure Functions: Der Webservice ohne Webserver
Blog
Blog

Azure Functions: Der Webservice ohne Webserver

Azure Functions als Authentifizierungs-Helfer für clientseitige Lösungen mit 3rd Party APIs

Paket Dependency Manager für .NET
Blog
Blog

Paket Dependency Manager für .NET

Paket ist ein Dependency Manager für .NET, welcher es sich zum Ziel gesetzt hat einige Probleme von NuGet zu beheben.

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.