I am building an application in AngularJs (Front End). I would like to make it Dynamic using $route etc. The back end consists of a SharePoint 2010 Server with Categories, Look Ups, etc. I have been advised to use spservices (jQuery) to update using caml query from SharePoint to the application I have written in Angular. I'm curious if anyone has a better suggestion or advise on a resource to connect data from SharePoint 2010 to the application. It is written in Visual Studio 2010, but I'm trying to figure out the best way to populate the data from SharePoint into the view in my application. Any help or suggestions would be sincerely appreciated.
I can confirm that this architecture can work. I have developed multiple SharePoint 2013 custom visual web parts that utilize single page Angularjs apps to display their data in the past and recently I had to use Angularjs in conjunction with SharePoint 2010 too.
Usually, my web parts have to display tabular data, and for this reason I found out that the
ngTable plugin works the best and provide easy to configure pagination and filtering support. The only times I avoid using the plugin are scenarios that require heavy customization of the rendered output, to the point that using a table doesn't seem appropriate anymore. Also to consider is that while ngTable does support custom header and footers, using them can sometime mean that you will need to build up the filter field manually.
ngRoute seem to work also pretty well, but I should add I didn't have any need to really dive in some of it most advanced usage scenarios. The main reason I use routes is to have easy support for app views navigation/switching and to use urls for supporting linking to specific views/details display (for example: an item change mail alert can provide a link to the item detail view).
I also use other plugins as needed, mainly
ngDialog to display dialog windows. I sometime also use the standard
spDialog api, but usually I prefer the ngDialog because it doesn't require the additional steps SharePoint 2013 on demand script loading impose over the spDialog approach. Also, standard OOTB SharePoint dialogs often break up or misbehave when the master page has been heavly (badly) customized, so angularjs powered dialogs become even more desirable.
My data most of the time come from hybrid sources: SharePoint lists and custom SqlServer hosted databases. For this reason, I almost never use the SharePoint default services but instead develop custom SharePoint hosted one. This way, I can wrap any business/data access logic inside the service and keep the "client" application as lite as possible. It is pretty easy to access a SharePoint hosted service from angularjs - just build up a service that wrap the needed service call. The resulting promises can then be used from the view controllers to populate the data. The mayor problem I had was supporting operations that usually would require a valid SharePoint form digest - in those situations you have to manually add the required headers to your service requests. It is pretty easy and there are plenty of examples around about that, but fell free to post a question here if you will ever need assistance.
Lastly, a special notice about SharePoint 2010. As you may know, SharePoint 2010 default master pages force the document rendering mode to IE8 compatibility level -
<meta http-equiv="X-UA-Compatible" content="IE=8"/>. This obviously is very bad for angularjs.
You have two options
- work with an old version of angularjs that supports IE8: this means that you will be limited in the choices of available plug-ins too;
- modify the masterpage: this is an option too, but ensure that all the rest of the site works as expected, especially any other customization you may have.
(there is actually a third option, having the page/web part change the active compatibility level in code behind, but I would avoid that if possible).
In the end the choice is your here, but either way try if possible to build a simple mock-up of what you are trying to do before starting any serious development, to avoid begin stuck later.