Sitecore en AngularJS: hoe werken ze samen

Transcriptie

1 Sitecore en AngularJS: hoe werken ze samen Derk Hudepol Consultant

2 Click Wie ben 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 :

3 Click Wat is to Avanade? add title Microsoft technologie Joint venture van Accenture en Microsoft Global Platinum Sitecore partner medewerkers wereldwijd Top 1 ICT Nederland Employer

4 Click to add title Divider AngularJS Subhead Wat is het? 4

5 Click AngularJS to add title 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.

6 Click to add title Divider AngularJS en Sitecore Subhead Hoe gebruik je het? 6

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

8 Click Welke to vorm add title van implementatie? Simpel Medium Full SPA Enkel hide/show/binding etc. bijvoorbeeld popups met dynamische html, web api calls

9 Click Wat heb to add je nodig? title Sitecore AngularJS Asp.NET MVC Optioneel AngularJS Bootstrap

10 Click Wat is to er add gebruikt title in demo s? AngularJS AngularJS Bootstrap Bootstrap Sitecore 8.1 Mvc DisplayModes plugin van Reinoud van Dalen

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

12 Click to add title Divider Simpele implementatie Subhead Uitdagingen 12

13 Click to add title Divider Medium implementatie Subhead Implementatie 13

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

15 Click Oplossingen to add title Aanroep van window.top.sitecore.pagemodes.chromemanager.resetchromes() Gebruik maken van Sitecore.PageModes.PageEditor javascript object AngularJS directives If..else constructies Service API Controller

16 Click Demo to add title Demo van medium implementatie

17 Click to add title Divider SPA implementatie Subhead Implementatie 17

18 Click Uitdagingen 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

19 Click Oplossingen 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

20 Click Demoto add title Demo van SPA implementatie

21 Click Wat blijft to add er over? title Integratie met personalisatie vanuit javascript Generieke oplossing voor een Angular Sitecore mode

22 Click to add title Divider Afronding Subhead Conclusie 22

23 Click Opsomming 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

24 Click Vragen? to add title

25 Click Meer to informatie add title Derk.hudepol@avanade.com Blog: