Building a Single Page Application with AngularJS and Sitecore (SPA)

Question

I want to implement Sitecore application (single page design with angular js) :

1. Is that possible ?
2. If it is possible, what about experience editor, it will work with it ?
3. What about Sitecore personalization ?
4. I have no experience with angular js. what should I take in my consideration to achieve this

I will use Sitecore 8. i found this helpful blog about that but as he mentioned, page editor simply won't work

Thanks.

Answer 1

1.

Yes it is possible, I implemented a SPA in Sitecore 7 using AngularJS for the front-end and WebAPI to serve the data from Sitecore Items and it all worked really well together.

You could look into using Sitecore MVC Controllers which will work just as well as WebAPI. Or if you have time to learn a new Sitecore Technology you can look into using Sitecore's Entity Service. Either will work for serving data from Sitecore.

From experience I recommend you make controllers which are responsible for a single type of data consumed by the AnglarJS. The models passed by the controllers should be lean, containing only data relevant to the controllers purpose.

2.

For my implementation, the Experience Editor would not work as I used AngularJS to manipulate and present the data. It could be possible to use Sitecore Controls if you don't pull out the data using AngularJS but I don't think it'll be possible without hacking at it with code.

3.

Personalisation through the Experience Editor should be possible if you use Sitecore Controls. Personalisation through the Content Editor and code will be possible. I recommend you build your SPA as you would most Sitecore implementations; Layout, Sublayout etc. You can implement personalisation through code in the Controllers, Application Logic etc

4.

I had no experience with AngularJs either but I learned everything I needed to know from tutorials and the rest is logical enough for you to figure out if you're familiar with any programming language. I recommend you work through this Codecademy Tutorial that has you completing exercises - its how I learned.

I've yet to write a blog on how I achieved it but Dave Peterson has written two blogs on his experiences with SPA with Sitecore and AngularJs that might be worth a read.

Answer 2

1. Yes it is possible
2. Yes you can use the experience editor, BUT you have to build the site in a specific way. Not in the "normal" way.
3. Again, same as experience editor, you can use it, but the site has to be built to accommodate that.
4. Not sure on Angular - I have used backbone, but the principles are very similar.

I have a blog post on how we achieved this for a client: http://www.sitecorenutsbolts.net/2015/12/07/Single-Page-Applications-in-Sitecore-Part-I/

Have a read of that, it gives the principles you should follow to enable Sitecore in an SPA.