Retrieve SharePoint List Items Using AngularJS With Multiple Apps & Multiple Controllers

Introduction

In this article you will learn how to retrieve SharePoint list items using AngularJS with multiple app directives and multiple controllers. This article mainly focuses on the angular components used in different web part zones within a single page.

Generally, we will be using one single application directive with multiple controllers. Consider a scenario where angular controllers need to be placed in different web part zones. In this case, application directive should be placed on a master page or page layout elements. But master page or page layout doesn’t support ng-app directive on their elements. So ng-app directives should be placed for each controller in their respective web parts.

So, we will see how we can retrieve data from multiple lists and display it on multiple components. In our case, we will consider how we can show the values of 2 SharePoint list's items on two different components (different web part zones) with in single page.

AngularJS will help SharePoint developers to bind the data easily on SharePoint pages. With respect to angular context, the components will have the respective controllers defined. We will consider multiple app directive which will be defined for each components where controller is defined.

Add 2 content editor web parts to 2 different web part zones in a page. Refer the angular script file in master page or page layout or before the script loads.

For first content editor web part, declare the html as below.

<div id="App1" ng-app="listApp1" ng-controller="controller1">
<h1>First List Items</h1>
<div ng-repeat="item in items">
<p>{{item.Title}}</p>
</div>
</div>

Then initialize the module and the controllers. The below snippet helps you understand how app can be initialized using the module and controller.

var appVar1 = angular.module('listApp1', []);
appVar1.controller("controller1", function($scope){
$.ajax({
url: "/_api/web/lists/GetByTitle('List1')/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());
}
});
});

For second editor web part, declare the html as below.

<div id="App2" ng-app="listApp2" ng-controller="controller2">
<h1>Second List Items</h1>
<div ng-repeat="item in items">
<p>{{item.Title}}</p>
</div>
</div>

Here is the trick. The app directive should be initialized using bootstrap method and the element id. The below code snippet helps you understand the logic.

var appVar2 = angular.module('listApp2', []);
appVar2.controller("controller2", function($scope){
$.ajax({
url: "/_api/web/lists/GetByTitle('List2')/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());
}
});
});
angular.bootstrap(document.getElementById("App2"),['listApp2']);

The below snapshot shows you web parts on different zones.

So, any number of app directives can be used in SharePoint pages. But all the app directives should be initialized using bootstrap like below. App2 denotes the element id and listApp2 denotes the app directive.

angular.bootstrap(document.getElementById("App2"),['listApp2']);

Summary:

Thus you have seen how to get the values from SharePoint list using AngularJS with multiple apps and multiple controller directives. This will help developers who define the content on different web part zones where angular logic is used.