©2016 Avanade Inc. All Rights Reserved.

Sitecore en AngularJS: hoe werken ze samen

Derk Hudepol

Consultant

11-02-2016

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Consultant bij Avanade

• Werkzaam bij Avanade voor bijna 6 jaar

• Werk 3+ jaar met Sitecore

• Meeste interessante Sitecore onderwerpen:• Experience Editor

• Services Client

• xDB

• Extending Sitecore

Wie ben ik?

Blog : http://hookedon.digital

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Microsoft technologie

• Joint venture van Accenture en Microsoft

• Global Platinum Sitecore partner

• 27000 medewerkers wereldwijd

• Top 1 ICT Nederland Employer

Wat is Avanade?

©2016 Avanade Inc. All Rights Reserved.

Click to add title

Divider

Subhead

©2016 Avanade Inc. All Rights Reserved.4

AngularJS

Wat is het?

©2016 Avanade Inc. All Rights Reserved.

©2016 Avanade Inc. All Rights Reserved.

Click to add titleAngularJS

AngularJS (commonly referred to as "Angular" or "Angular.js") is

an open-source web application framework mainly maintained

by Google and by a community of individuals and corporations to

address many of the challenges encountered in developing single-page

applications. It aims to simplify both the development and the testing of

such applications by providing a framework for client-side model–view–

controller (MVC) andmodel–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

©2016 Avanade Inc. All Rights Reserved.

Click to add title

Divider

Subhead

©2016 Avanade Inc. All Rights Reserved.6

AngularJS en Sitecore

Hoe gebruik je het?

©2016 Avanade Inc. All Rights Reserved.

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Load times

• Moderne technieken

• Geen conflicten met Sitecore javascript

• Directives en controllers zijn goed te isoleren

• Caching

Waarom?

©2016 Avanade Inc. All Rights Reserved.

Click to add titleWelke vorm van implementatie?

Simpel Medium Full SPA

Enkel hide/show/binding etc. bijvoorbeeld popups met dynamische html, web api calls

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Sitecore

• AngularJS

• Asp.NET MVC

• Optioneel AngularJS Bootstrap

Wat heb je nodig?

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• AngularJS

• AngularJS Bootstrap

• Bootstrap

• Sitecore 8.1

• Mvc DisplayModes plugin vanReinoud van Dalen

Wat is er gebruikt in demo’s?

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Eigenlijk is de techniek niet moeilijk

• Concepten

• Paar belangrijke punten..

Hoe moeilijk is het?

©2016 Avanade Inc. All Rights Reserved.

Click to add title

Divider

Subhead

©2016 Avanade Inc. All Rights Reserved.12

Simpele implementatie

Uitdagingen

©2016 Avanade Inc. All Rights Reserved.

©2016 Avanade Inc. All Rights Reserved.

Click to add title

Divider

Subhead

©2016 Avanade Inc. All Rights Reserved.13

Medium implementatie

Implementatie

©2016 Avanade Inc. All Rights Reserved.

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Dynamische Html in Experience Editor

• Alles altijd aanpasbaar

• Koppelingen leggen naar dynamische html

• Optioneel: Model vanuit Sitecore aanleveren

Uitdagingen

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Aanroep van window.top.Sitecore.PageModes.ChromeManager.resetChromes()

• Gebruik maken van Sitecore.PageModes.PageEditor javascriptobject

• AngularJS directives

• If..else… constructies

• Service API Controller

Oplossingen

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Demo van medium implementatie

Demo

©2016 Avanade Inc. All Rights Reserved.

Click to add title

Divider

Subhead

©2016 Avanade Inc. All Rights Reserved.17

SPA implementatie

Implementatie

©2016 Avanade Inc. All Rights Reserved.

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Dynamische Html in Experience Editor

• SPA in Experience Editor

• Placeholder

• Alles altijd aanpasbaar

• Koppelingen leggen naar dynamische html

• Optioneel: Model vanuit Sitecore aanleveren

Uitdagingen

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Geen SPA in editor , wel in frontend

• Aanroep van window.top.Sitecore.PageModes.ChromeManager.resetChromes()

• AngularJS directives

• If..else… constructies

• Service API Controller

Oplossingen

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Demo van SPA implementatie

Demo

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Integratie met personalisatie vanuit javascript

• Generieke oplossing voor een Angular Sitecore mode

Wat blijft er over?

©2016 Avanade Inc. All Rights Reserved.

Click to add title

Divider

Subhead

©2016 Avanade Inc. All Rights Reserved.22

Afronding

Conclusie

©2016 Avanade Inc. All Rights Reserved.

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• AngularJS is goed te gebruiken

• Er is niet veel moeite nodig

• Het gaat voornamelijk om concepten

• Nog wel wat open punten voor SPA (A/B Testing), full SPA in experience editor

• Risico: er wordt gebruik gemaakt van Sitecore javascript

Opsomming

©2016 Avanade Inc. All Rights Reserved.

Click to add titleVragen?

©2016 Avanade Inc. All Rights Reserved.

Click to add title

• Email : Derk.hudepol@avanade.com

• Blog: http://hookedon.digital

Meer informatie