Angularjs SharePoint 2013/2016/Online tutorial

AngularJS Tutorial for SharePoint 2016 Part 1

In this post, we will discuss how we can use AngularJS in SharePoint 2013 or SharePoint 2016. In this series of articles, we will discuss various demos building in AngularJS for SharePoint 2016.

AngularJS build on JavaScript framework and is very much powerful compared to JavaScript for building interactive, rich Single Page Applications (SPA). AngularJS extends HTML DOM with additional attributes and makes it more responsive. AngularJS is the fully open source and it is free to use.

SharePoint deveopment training course

AngularJS is based on MVC framework. The three main component of MVC framework are:

Model: This is responsible for managing application data. This response to instructions from the controller as well as requests from view.

View: This is responsible for the presentation of data.

Controller: This is responsible for interaction between the model and view. The control usually receives input from user, validate it, process business operations and respond to view.

Below are few parts we will discuss which are really important before starting a simple demo application.

AngularJS has various directives which provide various functionality in the application.

ng-app: This directive initializes an AngularJS application. This defines the HTML as an AngularJS application.
Ex: <div ng-app = “”></div>

ng-model: This directive is used to bind the values from AngularJS application to HTML input controls (input, select etc).
Ex: <input type = “text” ng-model = “name”>

ng-bind: This directive bind AngularJS application data into HTML tags.
Ex: <span ng-bind = “name”></span>

ng-repeat: This directive is used to repeat html element.
<div ng-app=”” ng-init=”count=[1,2,3,4,5]”>
<li ng-repeat=”n in count”>
{{ n }}

This will display in <li> from 1 to 5.

Simple Demo on AngularJS for SharePoint 2013/Online

We can use AngularJS in script editor web part, content editor web part or in SharePoint apps easily.

In this particular example, I am using Office 365 SharePoint Online site and in that site, I have added a web part page. In that web part page, I edit the page and added a script editor web part from the web part gallery.

First we need to give reference to the AngularJS js file like below:

<script src = “”></script>

Then we need to use ng-app with div element which will tell that this is the start of an AngularJS application.

<script src = “”></script>

<h1>Our first AngularJS Demo Application</h1>
<div ng-app = “”>
<p>Enter your Name: <input type = “text” ng-model = “name”></p>
<p>Hello <span ng-bind = “name”></span></p>

Here ng-model creates a variable as name and we can use that anywhere in the ng-app.

And we used ng-bind to bind the ng-model value to an HTML span tag.

Once you Save the page, you will be able to see the AngularJS application functioning.

angularjs sharepoint 2013 tutorial
angularjs sharepoint 2013 tutorial

You may like following angularjs & SharePoint 2013 tutorials:

Hope this article will be helpful to learn how to use angularjs sharepoint 2013 tutorial.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)


About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site

View all posts by Bijay Kumar →
  • Do you have I solution or a suggestion for creating this AngulerJS demo on a modern Team site in SharePoint online? I’m sure you are aware that the “Script Editor” web part is not available with out of the box SharePoint Online and modern Team site template.

    • hi Matt, hope you are doing good.
      Thats correct Script editor is not available in Modern site, But we could use SPFX.