Sitecore en AngularJS: hoe werken ze samen

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


Click to add title

AngularJS Divider Subhead Wat is het?


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.


Click to add title

AngularJS en Sitecore Divider Subhead Hoe gebruik je het?


6

Click to add title Waarom? • Load times • Moderne technieken • Geen conflicten met Sitecore javascript • Directives en controllers zijn goed te isoleren • Caching


Click tovorm Welke add title van implementatie? Simpel Enkel hide/show/binding etc.

Medium bijvoorbeeld popups met dynamische html, web api calls


Full SPA

Clickheb Wat to add je nodig? title • Sitecore • AngularJS • Asp.NET MVC • Optioneel AngularJS Bootstrap


Clickistoeradd Wat gebruikt title in demo’s? • AngularJS • AngularJS Bootstrap • Bootstrap • Sitecore 8.1 • Mvc DisplayModes plugin van Reinoud van Dalen


Click moeilijk Hoe to add title is het? • Eigenlijk is de techniek niet moeilijk • Concepten • Paar belangrijke punten..


Click to add title

Simpele implementatie Divider Subhead Uitdagingen


12

Click to add title

Medium implementatie Divider Subhead Implementatie


13

Click to add title Uitdagingen • Dynamische Html in Experience Editor • Alles altijd aanpasbaar • Koppelingen leggen naar dynamische html • Optioneel: Model vanuit Sitecore aanleveren


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


Click to add title Demo • Demo van medium implementatie


Click to add title

SPA implementatie Divider Subhead Implementatie


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


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


Click to add title Demo • Demo van SPA implementatie


Clickblijft Wat to add er over? title • Integratie met personalisatie vanuit javascript • Generieke oplossing voor een Angular Sitecore mode


Click to add title

Afronding Divider Subhead Conclusie


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


Click to add title Vragen?


Click to Meer informatie add title • Email : [email protected] • Blog: http://hookedon.digital


Sitecore en AngularJS: hoe werken ze samen

Recommend Documents