Thursday, October 2, 2014

SharePoint 2013: List operation using AngularJS Part 1

If you want to create structure for AngularJS  based project, Please follow my previous post to create it. Here I am mentioning module vise information. I have developed Service in AngularJS to get all list from SharePoint site.


HTML Code :

<div> Total List</div>

<input type="button" ng-click="GetLists()" value="GetLists" />

<ul>

    <li ng-repeat="list in lists">

        {{list.Title}}

        </li>

    </ul>

<br />

<div>

    {{jsonData}}

</div>

Config.js

var configModule = angular.module('configModule', [

    'ngRoute',

    'listModule',

    'listServiceModule'

]);

Controller File :

var listModule = angular.module('listModule', []);

listModule.controller('listController', ['$scope', 'ListService', function ($scope, ListService) {

    $scope.GetLists = function () {

        ListService.GetLists()

        .success(function (data) {

            $scope.jsonData = JSON.stringify(data);

            var results = data["d"]["results"];

            $scope.lists = results;

        })

        .error(function () {

            alert("error");

        });

    };

}]);

Service File :

var listServiceModule = angular.module('listServiceModule', []);

listServiceModule.service('ListService', ['$http', function ($http) {

    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;

    this.GetLists = function () {

       

        var config = {

                headers: {

                    "ACCEPT": "application/json;odata=verbose"

                }

        };

        return $http.get(siteUrl + "/_api/web/lists", config);

    };

}]);

Common Function File :

function GetItemTypeForListName(name) {

    return "SP.Data." + name.charAt(0).toUpperCase() + name.slice(1) + "ListItem";

}

No comments:

Post a Comment