Angularjs SharePoint 2013/2016/Online tutorial

This AngularJS SharePoint tutorial, we will discuss how to use AngularJS in SharePoint 2013/2016 or SharePoint Online. In this series of articles, we will discuss various demos building in AngularJS for SharePoint 2016/2013.

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 fully open-source and it is free to use.

AngularJS is based on the MVC framework. The three main components of the 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 the 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 that 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 the 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 the HTML element.

<div ng-app="" ng-init="count=[1,2,3,4,5]">
<ul>
<li ng-repeat="n in count">
{{ n }}
</li>
</ul>
</div>

This will display in from 1 to 5.

AngularJS for SharePoint 2013/2016/Online Example

We can use AngularJS in the 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 on 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 = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></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 = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></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>
</div>

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

You may like following angularjs & SharePoint 2013 tutorials:

This AngularJS SharePoint we learned how to use the angularjs sharepoint 2013 tutorial. In the same way, we can use Angular js in SharePoint Online or SharePoint 2019/2016.

free sharepoint training

SharePoint Online FREE Training

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

envelope
envelope

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 SharePointSky.com

  • IT Matt says:

    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.

    • Manjumdar says:

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

  • >