Download - Spas with angularjs and sitecore
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