Implementing AngularJS To SharePoint Online Office 365

Introduction

This article shows how can you use client side JavaScript library AngularJS to build SharePoint 2013 apps. Microsoft introduced a new app model in SharePoint 2013 release, which is available both for On-Premise deployments and in the hosted Service Office 365.

SharePoint apps can be built as single page Applications for a very fast, fluid and pleasant experience for your users. It will show you how to create a SharePoint-hosted app as a single page Application, using JS framework. In this article, we will walk through with Angular JS implementation in SharePoint.

SharePoint 2013

SharePoint 2013 includes lists, libraries etc. Everything changes as an app model. This new model of SharePoint 2013 can allow an access of lists and libraries in JavaScript, using JavaScript Object Model (JSOM).

We have several JavaScript Libraries and Frameworks for DOM manipulations. In addition to it, it also mplements MVVM and MVC programming on client-side. Nowadays, many people are using jQuery, Knockout, Angular.js etc.. When using JS Frameworks, many features are provided by the framework itself, such as the concept of binding data, looping and hiding/displaying a section.

Now, we will implement a SharePoint app, using Angular.js. AngularJS also provides concepts like modeling, routing, custom Directives and Services.

Today, we will take a basic example that demonstrates Angular binding. The concept can be extended to routing, Directives, Services and other features of Angular.

Angular JS

Before getting started, let’s quickly introduce JavaScript library – Angular JS. Angular JS is a JavaScript MVC framework created by Google is required to build properly architectured and maintainable Web Applications.

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed, as a JavaScript file and can be added to a Web page with a script tag.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

AngularJS is an open source, completely free and used by thousands of developers around the world.

AngularJS extends HTML with ng-Directives.

The ng-app Directive defines an AngularJS Application.
The ng-model Directive binds the value of HTML controls (input, select, textarea) to an Application data.
The ng-bind Directive binds the Application data to HTML view.

For more details about Angular JS, refer

https://www.w3schools.com/angular/angular_intro.asp
https://www.tutorialspoint.com/angularjs/
http://www.c-sharpcorner.com/technologies/angularjs
http://www.c-sharpcorner.com/UploadFile/deveshomar/basics-of-angularjs/

Implementing Angular JS into SharePoint 2013

Open Office 365 SharePoint Online portal, using http://portal.microsoftonline.com. Login with your subscription. Create a new developer site/ open your custom list and a custom list named, as shown below.

Angular JS basics

AngularJS Directives are used to extend HTML. These are special attributes starting with ng-prefix. We are going to discuss Directives given below.

ng-app − This Directive starts an AngularJS Application.
ng-init − This Directive initializes application data.
ng-model − This Directive defines the model that is variable to be used in AngularJS.
ng-repeat − This Directive repeats HTML elements for each item in a collection.

Directives declaration

ng-app

<div ng-app = "">
...
</div>

ng-init

It is used to put the values to the variables to be used in the Application

<div ng-app = "" ng-init = "countries = []">
</div>

Here, the countries are declared as an array format.

ng-model

<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

ng-repeat

ng-repeat Directive repeats HTML elements for each item in a collection.

<div ng-app = ""> ...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "item in items">
{{ 'ListItem: ' + item .name + ', ListItemValue: ' + item .locale }}
</li> </ol>
</div>

Controller

Controller part is given below.

<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
});
</script>

This is simple declaration for Angular JS Application

<html>
<head>
<title>Angular JS Implemented in SharePoint </title>
</head>
<body>
<h2>AngularJS_SharePoint Application</h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
</body>
</html>

Here, we will see how to change the syntax given below for SharePoint.

Final code

<html>
<head>
<title>Angular JS Implemented in SharePoint </title>
</head>
<body>
<h2>AngularJS_SharePoint Application</h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<div ng-repeat="item in items">
<p>{{item.Title}}</p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
GetListItems($scope, "newlist"); //Call your SharePoint Function
});
function GetListItems($scope, listName){
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/GetByTitle('"+listName+"')/items",
method: "GET",
async: false,
headers: { "Accept": "application/json;odata=verbose" },
success: function(data){
$scope.items = data.d.results;
},
error: function(sender,args){
console.log(args.get_message());
}
});
}
</script>
</body>
</html>

How to Implement the code in SharePoint 2013 Online Office 365.

Step 1

Copy the final version code given above and paste it in a Notepad. Now, save it as SPAngular.js.

Now, log in to the SharePoint Online Office 365. Open your SharePoint site and click the site contents.

Select site Assets Library. Upload the saved Angular JS file.

SharePoint

Step 2

Add the Web part to the page.

Select Settings icon in the ribbon and click Edit Page option.

SharePoint

Step 3

Add Content Editor Web Part. Follow the steps given below to add a Content editor Web part in your page.

SharePoint

Step 4

Add saves js file link in the textbox given below.

SharePoint

Step 5

Save it.

SharePoint

SharePoint list Items are displayed in a page.

I hope, you enjoyed this article. Use the comment section for issues and suggestions.

Thanks for reading my article.

5 Comments

Join the conversation! Your thoughts help the community grow.

Vijay Chavan7y ago
Nice, thanks for sharing
Nanddeep Nachan8y ago
Thanks for sharing! This was a good starting for me
Mahesh Babu9y ago
Hi Gowtham, I have tried this example and done every thing. But when loading the items, getting error. ReferenceError: $ is not defined at GetListItems (EMPView.aspx:578) at new <anonymous> (EMPView.aspx:575) at Object.e [as invoke] (angular.min.js:36) at w.instance (angular.min.js:75) at angular.min.js:58 at s (angular.min.js:7) at A (angular.min.js:58) at g (angular.min.js:51) at angular.min.js:50 at angular.min.js:18 (anonymous) @ angular.min.js:102
- prajakta patil9y ago
  Please add jquery reference.
Mahesh Babu9y ago
Nice Gowtham... Simple explanation. Sure, i will try this example.