SharePoint Development is all about preferences. While there’s about six ways to do everything in SharePoint, I think a lot of the content out there about using Angular with SharePoint is mediocre at best. While those solutions may work, I don’t believe they’re scalable or the correct approach. In this post and some of the following posts, I’ll talk about different how you can easily get a SharePoint project up and running using Angular.
I believe that if you’re using Angular on more than one page in your site, you should place it in the master page and not a page layout. While Angular is touted as a solution for single page applications, intranets built using SharePoint are not single page applications; I need Angular everywhere.
To make Angular available anywhere, you’ll need to customize the master page.
In your master page, load Angular and any other JavaScript libraries somewhere in the <head> tag.
<%-- Javascript libraries --%> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script type="text/javascript" data-app-id="yridhere" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script> <script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
Now that we have loaded the Angular library, we need to add the ng-app directive so that we can start using Angular.
The ng-app directive lets us essentially summon Angular within our pages. Without it, we can’t do anything with Angular.
Since Angular will be used for conceivably anything in this solution, I want this at the highest possible point, or root element of the master page. For SharePoint, the best way to accomplish that is by adding it to the div s4-workspace.
<%-- workspace --%> <div id="s4-workspace" class="ms-core-overlay" ng-app="clientIntranet"> <div id="s4-bodyContainer">
And that’s it. I like this approach because the ng-app directive can only be used once in a solution, while other directives – which will come in the form of our web parts – can have multiple instances and be nested.