Implementing AngularJS To SharePoint Online Office 365

Gowtham Rajamanickam
7y
11.8k
0
4

Article

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>