SharePoint Pals
 | Sign In
Basics of AngularJS in SharePoint
by Ahamed Fazil Buhari 5 Sep 2016
SharePoint Developer
Today  :   13     Total  :    1654

Hello everyone, in this article we will look into some of the basic functionalities of AngularJS and how they can be used in your SharePoint environment. Let me skip the introduction to AngularJS, you can find lot more introduction in google. Let’s jump into our core concept. First and foremost thing is, we need to have couple of things in our page to make use of AngularJS ->

1. <script src=""></script> here in there official website you can find libraries with all versions,

2. Second thing is ng-app which is application directive for Angular. This one is special directive that Angular looks for in our HTML and it will take control of section of DOM where the ng-app applies. Only one ng-app per page is allowed and if we want multiple then we need to bootstrap the modules to have multiple ng-app in same page.

I’ll explain the basic components in Angular with an example. So I’ve created a new JavaScript file and named it as MyAngular.js and added the below code

 (function () { //IIFE - Immediate Invoke Function Expression, to avoid global variables 
     // creating our own module, A module is a collection of controllers, directives, //filters, services, and configuration information
     // first param - module name
     // second param - dependent module, here we have no dependent module so we use [] //which will access all default angular functions
     var app = angular.module("myapp", []);
     var MyController = function ($scope) {
         $scope.testData = "Hi, My Angular is working!!!";
     //controller usually live in modules, we can define the controller as show below
     //1st param - controller name
     //2nd param - function
     app.controller("MyController", MyController);
     //app.controller("MyController", ["$scope", MyController]);
 } ());

In SharePoint aspx page inside Content Place holder,

 <asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <script src=""></script>
 <script src="../SiteAssets/JS/Form JS/MyAngular.js"></script>
 <div id="appDiv" ng-app="myapp">
 	<div id="controllerDiv" ng-controller="MyController">


If you get the above output then it means your app directive and controller are rightly coded,

{{ }} - It is one of the binding directive in angular and it is called as Data Binding Directive, this binding expression will call the Model and pull out the data in the page.

$scope – Everyone knows that Angular follows MVC framework, so if we consider like that then an AngularJS application consists of,

· Model, which is the data available for the current view.

· View, which is the HTML part.

· Controller, which is the JavaScript function that makes/changes/controls/removes the data.


$scope is the application object (the owner of application variables and functions), which are available for both the View and the Controller. Actually, $scope is not the model, but the data and things that we embed to that $scope are going to be the Model.

ng-controller – In Angular Controllers are in responsible for building a Model. A Model has the data we need to work with and a controller will help to grab that data. So the data might need to make some sort of manipulations or calculations or call back to a web server that talks to a database. Controller’s primary responsibility is to create the $scope object.

ng-model (two-way binding) – It is extremely useful directive, because we can apply it to Inputs, Selects, Textarea. ng-model will help to keep our data in sync. For example, include the below table inside the div id – controllerDiv

             Email ID:
             <br />
             <input type="text" id="txtTitle" ng-model="username" />
             <br />
             <span ng-show="username">{{username}}</span>

And the output will be, the <span> below the textbox will be visible only if there’s any value inside the textbox.

ng-show and ng-hide If the ng-show="username" or ng-hide="!username” both gives the same result. If “username” is truthi, then it will be taken as true



ng-click – Just like ng-model we need to specify the expression here ng-click="expression"

, typically here the expression can a function call or some manipulation on objects. An object needs to be attached to $scope, so that the angular will invoke it.

Append the below <input/> into the controllerDiv

<input type="button" value="Click count - {{count}}" ng-click="clickCount(count)" />

Inside the Controller function, I have defined another function called clickCount and incrementing the value here.

 var MyController = function ($scope) {
     $scope.clickCount = function (count) {
         $scope.count += 1;
     $scope.count = 0;
     $scope.testData = "Hi, My Angular is working!!!";


ng-include – It is useful to bring your HTML from another source, and then we can use that HTML in our current page. Add ng-include directive in the div and use single quotes inside the double quotes, so that expression shouldn’t be resolve by $scope and the value of the expression should be the location of the file.

Created a page, AnotherCustom.html and added simple div and img tag, as shown below


To have this html page in our main page we can use ng-include,

<div ng-include="'../SiteAssets/AnotherCustom.html'" ></div>


Even more useful Directives – Over 50 directives that comes with Angular core library. In addition to this, Angular allows to write custom directives as well. There are lot of custom directives as open-source project and to perform activities like media players, drag & drop, or Google maps wrapper etc.

In the below table you can find some useful directives,


























Happy Coding


blog comments powered by Disqus

SharePoint Pals

SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile


Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community

SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to in a word document.

Related Resources

Recent Tweets

Twitter October 23, 22:21
How to Add/Remove User Custom Actions (in Site Actions Menu) Programmatically using CSOM PNP in SharePoint -

Twitter October 21, 21:34
How to Add a JS Link Reference to the Display Form or Any other ASPX Programmatically using CSOM PNP in SharePoint -

Twitter October 20, 13:01
How to Add a JS Link Reference to the NewForm and EditForm Programmatically using CSOM PNP in SharePoint Office 365-

Twitter October 12, 12:15
How to Deploy Provider Hosted Apps (Add-Ins) by App Stapling in SharePoint Office 365 -

Twitter October 11, 13:39
How to Deploy Provider HostedApp programmatically using CSOM in SharePoint Office 365 Activating Developer Feature -

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation