One of the best takeaways for me while working on my Exists App which is built on the MEAN stack was getting to learn AngularJS, better yet at SPConf it was immediately obvious that I’m not the only one who thinks that AngularJS and SharePoint Apps are a perfect fit!
If you don’t know much about AngularJS and want to learn how it relates to SharePoint then I’d highly recommend Jeremy Thake’s excellent session on the topic presented at SPConf where he gives a great introduction to what Angular can do and shows some great examples using SharePoint Apps.
AngularJS Visual Studio Project Template
I’ve been meaning to take this to the next level after toying with creating a basic template app building on the default VS SharePoint hosted App template and adding Angular and some example code in a well defined MVC style template. My intention is to convert this into a VS Template to work along side the default SharePoint App template, but for now I’ve just setup a GitHub repository with a sample (non-templated) project, which looks something like the following:
Have a look at the source on GitHub below.
SharePoint / AngularJS App Seed Project
https://github.com/martinlaukkanen/spng-seed
This is a test project designed to be a seed project (or eventually a Visual Studio Template) to implement a SharePoint single-page App built using AngularJS with a heavy emphasis on MVC design patterns.
The project structure is built to be very familiar to any ASP.NET MVC developer, while providing a good starting point for a simple (or complex) SharePoint AngularJS based App.
Initial version notes
- VS2013 SharePoint Hosted App Project Template
- NUGET AngularJS-Core package
- Folder structure as per ASP.NET MVC pattern (/Controllers, /Models, /Views, etc)
- Sample Model, View and Controller including directive and services to recreate the “‘Hello ‘ + user.get_title()” default template functionality.
Feedback Please!
I’m very keen for any feedback on this so either post below or even on GitHub, in particular my choice of using Directives vs Views or Slices or Includes is somewhat arbitrary. Although it is largely based on my view that this SPA (Single Page App) should not need routes and such as I don’t want to think how that could work within an SPAppWeb.
Finally, I am by no means an Angular expert, in fact I’m brand new to it! So all suggestions on best-practices and relevant design patterns are more than welcome.
This is very usefull thanks. If one has a huge sharepoint & angularjs project, how would one share functionality between different app parts? Would one create a Common App Part, or would one use shared links to .js files for example?
Services would be my first bet. As per the VS solution I have included a SharePointService.js where all of my common functionality relating to SharePoint is, also in other projects I have ProjectService.js and others.
If you’re more looking to talk between App Parts, e.g. when more than one are included on a specific page you need to share data, then look into postMessage (http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2014/05/07/connected-sharepoint-app-part.aspx) or SignalR (http://blogs.msdn.com/b/vesku/archive/2014/05/14/connected-sharepoint-app-parts-with-signalr.aspx) and probably write yourself a service to abstract that.
HTH,
Martin