AngularJS Tutorial for SharePoint 2016 Part 1

AngularJS Tutorial for SharePoint 2016 Part 1
InfoPath alternatives for form designing SharePoint

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

Also read:
– SharePoint 2013 Filtering and sorting of List data using Angular JS and REST API

– SharePoint 2013 Dynamically Adding Dropdown Using REST API and jQuery

– Rest API Create folder inside document library in SharePoint 2013 and Delete folder from Document library using Rest API

AngularJS is based on MVC framework. The three main component of MVC framework are:
Model : This is responsible for managing application data. This responds to instructions from controller as well as requests from view.

View: This is responsible for presentation of data.

Controller: This is responsible for interaction between 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 provides 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:
We can use AngularJS in script editor webpart, 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 a html span tag.

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

AngularJS Tutorial for SharePoint 2016 Part 1
AngularJS Tutorial for SharePoint 2016 Part 1

Hope this article will be helpful.

Similar SharePoint 2013 Tutorials

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 →

Leave a Reply