Share and Enjoy !

“To Be the Man”…

A few years ago, John Underwood authored “Adding jQuery to SharePoint” which would turn out to be the most popular blog post on our website. Each month, Danny Ryan — our patron saint of blog posts — charges each of us here at ThreeWill to try and take the top spot from John. To quote the great Ric Flair, “To be the man, you gotta beat the man.” And I figured that the best way to do that would be to shamelessly copy his jQuery blog post, except with an AngularJS spin.

I’ll start with the same caveat that John had. This article is not intended to be a tutorial for AngularJS. And though I could (and sometimes do) go on about how awesome AngularJS is, I’ll presume that you already get that and are just looking for a way to add that awesomeness to your SharePoint application.

A Spork in the Road

Adding jQuery is similar to adding Angular JS, but SharePoint has evolved since John’s article, so my questions will closely (but not quite) resemble John’s.

  1. Will you be using Angular for the majority of pages in a site, or just a few?
  2. Are you using Angular on a site page, an application page, a web part, or an app?
  3. Will your solution be deployed to an On-Premise SharePoint farm, or will it be deployed to a hosted SharePoint environment, such as Azure?

If your answer to the third question is that you’re developing a Full-Trust solution to go on an On-Premise SharePoint farm, then the same approaches that John lists out in his blog post will work just as well for Angular as they do for jQuery, therefore, I won’t cover those same approaches. If, however, you’re developing against a Hosted environment, (or you want to follow along with the SharePoint App model), then the below approaches might just be what you’re looking for.

The Designer Approach

In John’s jQuery blog post, one of his approaches was to use a CDN (content delivery network) to load jQuery. Like jQuery, you can use a CDN to load AngularJS. I like to take it a step further, though, and provide a backup in case the CDN goes down.

If you’re working on a page or web part and you just need to get angular “in there,” then perhaps this approach is for you. It has the benefit of being a “no-code” solution, meaning that it doesn’t require any deployment and will work in any SharePoint environment (On-Prem, Hosted, Azure, etc…).

First, I’ll take a copy of the AngularJS code I’ve downloaded and add it to my site’s document library.

Now, let’s say you need angular on a new site page you’re creating. Unfortunately, trying to use the tools available via the web browser haven’t worked anytime I’ve tried (the Embed tool seems to strip out any external references to script files), so you’ll have to open (or create) the page using SharePoint Designer and edit it in advanced mode.

Once opened in advanced mode, you’ll want to locate the “PlaceHolderAdditionalPageHead” section. This is where you’ll want to put all of your script tags to include AngularJS on the page.

The first script tag points to the official AngularJS CDN hosted by Google. The second script tag checks to see if angular has been defined in the current window. If not (because the CDN failed for some reason), it will load the version you have in your site’s Document Library.

The final script tag sets up an angular app and controller, which as you probably already know is required to wire things up to Angular. You can, of course, have this in a self-contained file stored in a document library, as well.

I also added the style section you see there to remove an unsightly warning message that SharePoint injects on the page to inform me that I’ve deviated from the defined page template, which is nothing to worry about.

Once you’ve got that added, you’ll next need to locate the “PlaceHolderMain” content section which should be located towards the bottom of the page. You’ll likely see some <SharePoint:SPRibbonButton> tags and a <SharePoint:EmbeddedFormField> tag. After that last tag, add the following bit of HTML.

You’ll notice that I’ve prepended the ng-app and other directives with ‘data-‘. If you don’t do this, SharePoint Designer will actually remove the directive altogether. Likewise, if you don’t provide a value to a directive, such as data-ng-app, SharePoint Designer assigns it an empty value, which causes problems within angular.

With that done, save your changes and click “ok” to any warnings you receive, then open up your page in SharePoint. You’ll see that there’s a text box that is pre-filled with the text “World” but, when you change it, the “Hello World” text changes to “Hello {{whatever you type}}.” Ah, the goodness of Angular.

If you also happen to be running a Network Traffic tool, like IE’s Developer Tools or Fiddler, you’ll see that there’s a call going out to the Google Angular CDN. You could also test that the “fallback” mechanism is working by intentionally adding a typo to the CDN url (back over in SharePoint Designer) and then refreshing your page. You’ll see that angular is being called from your document library instead of the CDN.

The SharePoint App Approach

If you’re creating a SharePoint app, then this approach is certainly for you!

Start by cranking up Visual Studios 2013 and open (or create anew) your SharePoint App project. After you configure your settings (I create a SharePoint hosted app deploy to a SharePoint Online developer site), you’ll see that you have a handful of modules already in your solution, including a Scripts module. Add an Angular folder if you want (I do), and here you’ll add your downloaded copy of AngularJS.

Next up, open up the Default.aspx page. If you read through the first approach, then you probably know what we’re doing next.

You’ll want to locate the “PlaceHolderAdditionalPageHead” section. This is where you’ll want to put all of your script tags to include AngularJS on the page. The difference is that instead of pointing to the “Shared Documents” library, we’ll be pointing to where we added Angular.

Then, down in the “PlaceHolderMain” section, we’ll add the same HTML tidbit as before, except now we can dispense with the ‘data-‘ prefixes.

Once done, press F5 (or however you like to deploy), When the process is done, you’ll see your fancy Angular-sized SharePoint App alive and well.

The SharePoint App Part Approach

This approach is much like the previous approach, except that instead of adding Angular to a “stand-alone” SharePoint app, we’re adding to an app part that is added to a page. We start with the same steps as before: Create a new SharePoint App Project (or, if you followed along with the last section, you can reuse the same project) and once opened, add Angular to the Scripts module.

After that, right-click on the name of the solution and choose “Add -> New Item” and from the list of items, choose Client Web Part (Host Web) and give it a name.

Once the web part has been added, you’ll have a new page inserted in the Pages module that contains the name of your web part. It’s here that we’ll add the script references and HTML tidbits like before. Unlike the previous examples, this page contains mostly pure HTML, so you’ll add the same script tags as before in the <head> section and the HTML in the <body> section. Once added, just deploy as before.

Once added, navigate your way back to your site’s home page and put it into edit mode, find an empty section to add your app part, and click the App Part button from the Insert section of the ribbon. You should see your App part listed in the “Parts” section. Select it and click the Add button. Once it’s added, click Save and…voila! You have an angular-size SharePoint App Part.

All Roads Lead to Angular Awesomeness!

While anyone of these approaches, or those listed by John in his blogpost, should work dandily for you, there might be, (and probably are) other methods of getting Angular into SharePoint. Now you at least have a few ideas on how you might get started. If you feel there’s a solid approach that I failed to mention, please let me know in the comments. The important thing is that you start spicing up some of that dull (and sometimes archaic) SharePoint content and functionality with the goodness that AngularJS provides us!  I hope you enjoyed learning about adding AngularJS to SharePoint.

Let me know if you have any questions in the comments below…

Share and Enjoy !

Related Content: