The following code works, but:
The service makes multiple API calls, the functions are very similar with a lot of code duplication. The same is true for the controllers- very similar code with only slight differences. How could I make this more clean and concise?
app.factory('listDataService', ['$http', function ($http) {
function firstListData() {
return $http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ListName')/items",
headers: { "Accept": "application/json;odata=verbose" }
}).then(function (response) {
return response.data.d.results;
}).catch(function (error) {
console.log("Error: " + JSON.stringify(error));
});
}
function secondListData() {
return $http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('SecondListName')/items",
headers: { "Accept": "application/json;odata=verbose" }
}).then(function (response) {
return response.data.d.results;
}).catch(function (error) {
console.log("Error: " + JSON.stringify(error));
});
}
return {
firstListData: firstListData,
secondListData: secondListData
}
}]);
app.factory('UtilService', function() {
return {
linkLocation: function(url, launchBehavior) {
window.open(url, launchBehavior);
}
}
});
app.controller('firstController', ['$scope', '$http', '$window', 'listDataService', 'UtilService', function ($scope, $http, $window, listDataService, UtilService) {
listDataService.firstListData().then(function (results) {
var firstLinksList = $scope.firstLinksList = [];
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
var launchBehavior;
if (results[i].LaunchBehavior == 'New tab') {
launchBehavior = '_blank';
} else {
launchBehavior = '_self';
}
firstLinksList.push({
title: results[i].Title,
linkLocationUrl: results[i].LinkLocation.Url,
launchBehavior: launchBehavior
});
}
}
});
$scope.util = UtilService;
}]);
app.controller('secondController', ['$scope', '$http', '$window', 'listDataService', 'UtilService', function($scope, $http, $window, listDataService, UtilService) {
listDataService.secondListData().then(function (results) {
var secondLinksList = $scope.secondLinksList = [];
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
var launchBehavior;
if (results[i].LaunchBehavior == 'New tab') {
launchBehavior = '_blank';
} else {
launchBehavior = '_self';
}
secondLinksList.push({
title: results[i].Title,
linkLocationUrl: results[i].LinkLocation.Url,
launchBehavior: launchBehavior
});
}
}
});
$scope.util = UtilService;
}]);
From searching I think the controllers could use a service? But not sure how to restructure them.
Edit:
The HTML is similar to what you used in the PhpFiddle, using ng-repeat
- but with ng-click
on the list item as well:
I've also added UtilService
to show how launchBehavior
is used.
<h3>First list</h3>
<ul class="promoted-links">
<li class="item default promoted-links-item" ng-repeat="link in firstLinksList" ng-click="util.linkLocation(link.linkLocationUrl, link.launchBehavior)" title="{{link.title}}">
<h6>{{ link.title }}</h6>
</li>
</ul>
<h3>Second list</h3>
<ul class="promoted-links">
<li class="item default promoted-links-item" ng-repeat="link in secondLinksList" ng-click="util.linkLocation(link.linkLocationUrl, link.launchBehavior)" title="{{link.title}}">
<h6>{{ link.title }}</h6>
</li>
</ul>