Sitecore en AngularJS: hoe werken ze samen
Derk Hudepol Consultant 11-02-2016
©2016 Avanade Inc. All Rights Reserved.
Clickben Wie to add ik? 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
Blog : http://hookedon.digital ©2016 Avanade Inc. All Rights Reserved.
ClickistoAvanade? Wat add title • Microsoft technologie • Joint venture van Accenture en Microsoft • Global Platinum Sitecore partner • 27000 medewerkers wereldwijd • Top 1 ICT Nederland Employer
©2016 Avanade Inc. All Rights Reserved.
Click to add title
AngularJS Divider Subhead Wat is het?
©2016 Avanade Inc. All Rights Reserved.
4
Click to add title AngularJS 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
AngularJS en Sitecore Divider Subhead Hoe gebruik je het?
©2016 Avanade Inc. All Rights Reserved.
6
Click to add title Waarom? • Load times • Moderne technieken • Geen conflicten met Sitecore javascript • Directives en controllers zijn goed te isoleren • Caching
©2016 Avanade Inc. All Rights Reserved.
Click tovorm Welke add title van implementatie? Simpel Enkel hide/show/binding etc.
Medium bijvoorbeeld popups met dynamische html, web api calls
©2016 Avanade Inc. All Rights Reserved.
Full SPA
Clickheb Wat to add je nodig? title • Sitecore • AngularJS • Asp.NET MVC • Optioneel AngularJS Bootstrap
©2016 Avanade Inc. All Rights Reserved.
Clickistoeradd Wat gebruikt title in demo’s? • AngularJS • AngularJS Bootstrap • Bootstrap • Sitecore 8.1 • Mvc DisplayModes plugin van Reinoud van Dalen
©2016 Avanade Inc. All Rights Reserved.
Click moeilijk Hoe to add title is het? • Eigenlijk is de techniek niet moeilijk • Concepten • Paar belangrijke punten..
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Simpele implementatie Divider Subhead Uitdagingen
©2016 Avanade Inc. All Rights Reserved.
12
Click to add title
Medium implementatie Divider Subhead Implementatie
©2016 Avanade Inc. All Rights Reserved.
13
Click to add title Uitdagingen • Dynamische Html in Experience Editor • Alles altijd aanpasbaar • Koppelingen leggen naar dynamische html • Optioneel: Model vanuit Sitecore aanleveren
©2016 Avanade Inc. All Rights Reserved.
Click to add title Oplossingen • Aanroep van window.top.Sitecore.PageModes.ChromeManager.resetChromes() • Gebruik maken van Sitecore.PageModes.PageEditor javascript object • AngularJS directives • If..else… constructies • Service API Controller
©2016 Avanade Inc. All Rights Reserved.
Click to add title Demo • Demo van medium implementatie
©2016 Avanade Inc. All Rights Reserved.
Click to add title
SPA implementatie Divider Subhead Implementatie
©2016 Avanade Inc. All Rights Reserved.
17
Click to add title Uitdagingen • Dynamische Html in Experience Editor • SPA in Experience Editor • Placeholder • Alles altijd aanpasbaar • Koppelingen leggen naar dynamische html • Optioneel: Model vanuit Sitecore aanleveren
©2016 Avanade Inc. All Rights Reserved.
Click to add title Oplossingen • Geen SPA in editor , wel in frontend • Aanroep van window.top.Sitecore.PageModes.ChromeManager.resetChromes() • AngularJS directives • If..else… constructies • Service API Controller
©2016 Avanade Inc. All Rights Reserved.
Click to add title Demo • Demo van SPA implementatie
©2016 Avanade Inc. All Rights Reserved.
Clickblijft Wat to add er over? title • Integratie met personalisatie vanuit javascript • Generieke oplossing voor een Angular Sitecore mode
©2016 Avanade Inc. All Rights Reserved.
Click to add title
Afronding Divider Subhead Conclusie
©2016 Avanade Inc. All Rights Reserved.
22
Click to add title Opsomming • 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
©2016 Avanade Inc. All Rights Reserved.
Click to add title Vragen?
©2016 Avanade Inc. All Rights Reserved.
Click to Meer informatie add title • Email :
[email protected] • Blog: http://hookedon.digital
©2016 Avanade Inc. All Rights Reserved.