AngularJS Tutorial for SharePoint 2016 Part 1

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.

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

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:
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 Tutorial for SharePoint 2016 Part 1
AngularJS Tutorial for SharePoint 2016 Part 1

Hope this article will be helpful.

You May Also like the Following SharePoint Online 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 →