SharePoint 2013: List operation using AngularJS Part 3

This post will explain you about how to retrieve List/ List Items and add List Item.

There is one more important point needs to understand in AngularJS boradcast/emit/on event. Here we have only one controller but this will help you to broadcast or emit event from parent to child or child to parent. Its just like a listener.

HTML:

<div> Total List</div>

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

<ul>

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

        <a ng-click="GetListItemsByName(list.Title)">{{list.Title}}</a>

        </li>

    </ul>

    <ul>

    <li ng-repeat="listItem in listItems">

        {{listItem.Title}}

    </li>

</ul>

List Name : <input ng-model="listName" /> Title : <input ng-model="iTitle" /><input type="button" ng-click="AddListItem()" value="AddListItem" />

<div>

    {{jsonData}}

</div>

<div>

    {{listItemJSON}}

</div>

Controller:

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");

        });

    };

    $scope.GetListItems = function () {

        ListService.GetListItems($scope.listName)

        .success(function (data) {

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

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

            $scope.listItems = results;

        })

        .error(function () {

            alert("error");

        });

    };

    $scope.GetListItemsByName = function (listName) {

        $scope.listName = listName;

        ListService.GetListItems(listName)

        .success(function (data) {

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

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

            $scope.listItems = results;

        })

        .error(function () {

            alert("error");

        });

    };

    $scope.AddListItem = function () {

        ListService.AddItem($scope.listName, $scope.iTitle)

        .success(function () {

            $scope.$broadcast('RefillData');

         })

        .error(function () {

            alert("fail");

        });

    };

    $scope.$on('RefillData', function () {

        ListService.GetListItems($scope.listName)

        .success(function (data) {

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

            $scope.listItems = results;

        })

        .error(function () {

            alert("error while getting items");

        });

    });

}]);

Service:

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);

    };

    this.GetListItems = function (listName) {

        var config = {

            headers: {

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

            }

        };

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

    };

    

    this.AddItem = function (listName, iTitle) {

        var siteUrl = _spPageContextInfo.siteAbsoluteUrl;

        var itemType = GetItemTypeForListName(listName);

        var item = {

            "__metadata": { "type": itemType },

            "Title": iTitle

        };

        var config = {

            headers: {

                "Content-Type": "application/json;odata=verbose",

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

                "X-RequestDigest": $("#__REQUESTDIGEST").val()

            }

        };

        return $http.post(siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items", item, config);

    };

}]);

Functions:

function GetItemTypeForListName(name) {

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

}