How did I add Angular in SharePoint apps

SharePoint 2013 development model is based on what is called SharePoint Apps. Typically, these are applications which rely on client side, including also Angular, more and more popular among developers. For me it was a little bit of a problem to get used with new development model, because I was used with client side development on classic web forms technology. So I have tried to combine what I knew with new way of doing things.

Because I did not want to interfere with existing master pages, I have created mine and simplified it to fit the functionality I want to achieve. So, I have added a module called “MasterPages” and change the name and extension of the sample text file, included by default in the module”, to “Layout.master”. Inside the master page I have placed the following content.

<!DOCTYPE html >
<html runat="server" dir="ltr" ng-app="holidayapp">
    <head runat="server">
         <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <title><asp:ContentPlaceHolder runat="server" ID="PlaceHolderPageTitleInTitleArea" /></title>  
        <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false"  />
        <SharePoint:ScriptLink language="javascript" name="sp.js" LoadAfterUI ="true" OnDemand="false" runat="server" Localizable="false" />
        <asp:ContentPlaceHolder runat="server" ID="laceHolderAdditionalPageHead" />      
        <form runat="server" id="aspnetForm">
         <asp:ScriptManager runat="server" AjaxFrameworkMode="Enabled" EnablePartialRendering="true" LoadScriptsBeforeUI="false" ScriptMode="Debug">
          <asp:ContentPlaceHolder runat="server" ID="PlaceHolderMain">


In the elements file, I have change the URL where master page should be deployed:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="">
  <Module Name="MasterPages">
    <File Path="MasterPages\Layout.master" Url="_catalogs/masterpage/Layout.master" ReplaceContent="TRUE"  Type="GhostableInLibrary"/>

Beside classic master page code, you can notice I have added mark-up for Angular application. It remained to load required JavaScript files, for which I used script manager control. I see no reason why I should not use it. Loading script after user interface, it offers the best way of loading scripts in a web page as it does not affect performance.

<asp:ScriptManager runat="server" AjaxFrameworkMode="Enabled" EnablePartialRendering="true" LoadScriptsBeforeUI="false" ScriptMode="Debug">
<asp:ScriptReference Path="../../Scripts/angular.min.js" />

We do not have yet controller, but my intention is to add it to the content page. So, let’s move forward and change content page accordingly.

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~site/_catalogs/masterpage/Layout.master" Language="C#" %>
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderMain">
    <asp:ScriptManagerProxy runat="server"> 
            <asp:ScriptReference Path="../Scripts/Default.js"/>
    <div ng-controller="maincontent">

Please note the followings:

  • Content page is pointing now to my master page I have created before (see page directives).
  • Controller logic will be place in “Default.js” file, loaded through script manager proxy control. Again we use standard web forms technique of loading files.
  • Controller mark-up is placed in a content area.

As is not the scope of this article to discuss about Angular in details, logic of the controller is very simple.

var holidayApp = angular.module("holidayapp", []);

var content = holidayApp.controller("maincontent", function ($scope) {
    $scope.mymessage = "Message";

The idea behind this article is to show you can still use web forms and add modern technology to your project. Personally, I do not agree loading JavaScript files in the header. Script manager is still very powerful. And even more, you can combine this way Angular with Microsoft Ajax client side library.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s