SPAS WITH ANGULARJS AND SITECORE

SPA Framework• Up-Front Loading• Eliminate DOM Manipulation• Nested Views• TDD

Intro to AngularJS• Dynamic views• Testability• Separation of concerns (MVC)

Templates

MVC• Model• View• Controller

• Loose coupling between UI, data and rendering rules

Model

• Angular Models are POJOs• No HTML

View

Controller

Dependency Injection• DI in Controllers:

• DI in Factory Methods

Angular Directives• Angular API Directives– ng-app– ng-view– ng-click– ng-repeat– ng-model– ng-controller* Often see data-ng (valid HTML)

Data Binding

*source: http://docs.angularjs.org/tutorial/step_04

Routes• Hashtag Routing

• Routing Wire-up

Three Demos• Angular Standalone• Angular + Sitecore Item Web API• Angular Integrated in Sitecore

Demo #1• Angular: Standalone App

Angular SPA• Advantages– No customization required– Very light-weight

• Disadvantages– Static content

Demo #2• Angular: Sitecore Item Web API

Angular + Web API• Advantages– Still light-weight– Dynamic content

• Disadvantages– No Sitecore layout access

• Considerations– Security: Web API access– Performance: Web API calls– Cross Domain Calls

Demo #3• Angular: Sitecore Integrated

Angular + Sitecore• Advantages– Dynamic content– Dynamic renderings

• Disadvantages– Large dependency on SPA

• Considerations– Caching– DMS & Tracking– Page Editor– Workflows (HTML validation)

When to use Angular

• It’s an Application, not a website• SEO is not a concern• Behind a login• Need to limit page refreshes

Useful Links• Side Waffle

– http://sidewaffle.com/• John Papa

– http://www.johnpapa.net/• Year of Moo

– http://www.yearofmoo.com/• Angular Tutorial

– http://docs.angularjs.org/tutorial• Angular Core NuGet

– http://www.nuget.org/packages/angularjs.core– v1.2.1 is current (11/20/13)

Q&A• Code: https://

github.com/PetersonDave/SinglePageAppDemo

• Twitter: @PetersonDave• Blog: http://petersondave.wordpress.com

• ISITE Design:http://isitedesign.com

• Built With Sitecore:http://www.isitedesign.com/sitecore