SharePoint 2013: List operation using AngularJS Part 6

This post will explain you about how to add/Delete List. I have added some validation rules which may help you setup in HTML page using "required" tag of AngularJS

Service:

    this.AddList = function (listName) {

        var item =JSON.stringify({

            "__metadata": { "type": "SP.List" },

            "AllowContentTypes": "true",

            "BaseTemplate": "104",

            "ContentTypesEnabled": "true",

            "Description": "List created by AngularJS service call",

            "Title": listName

        });

        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", item, config);

    };

    this.GetListByName = function (listName) {

        var config = {

            headers: {

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

            }

        };

        return $http.get(siteUrl + "/_api/web/lists?$filter=Title eq '" + listName+"'", config);

    };

    this.DeleteList = function (data) {

        var config = {

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

            headers: {

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

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

                "X-HTTP-Method": "DELETE",

                "If-Match": data.__metadata.etag

            }

        };

        return $http.post(data.__metadata.uri, null, config);

    };

Controller:

$scope.AddList = function () {

        ListService.AddList($scope.listName)

        .success(function () {

            alert("list created");

            $scope.$broadcast("RefillList");

        })

        .error(function () {

            alert("fail to add list");

        });

    };

    $scope.DeleteList = function () {

        ListService.GetListByName($scope.listName)

        .success(function (data) {

            var result = data.d.results[0];

            ListService.DeleteList(result)

            .success(function () {

                alert("list deleted");

                $scope.$broadcast("RefillList");

            })

            .error(function () {

                alert("failed to delete list");

            });

        })

        .error(function () {

            alert("error");

        });

    };

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

        ListService.GetLists()

        .success(function (data) {

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

            $scope.lists = results;

        })

        .error(function () {

            alert("error while getting items");

        });

    });

HTML:

<ng-form name="listForm">

<div> Total List</div>

    <input ng-model="listName" name="listName" required placeholder="List Name" />

    <span class="error" ng-show="listForm.listName.$error.required">Required!</span>

    <input type="button" ng-click="AddList()" value="Add List" ng-disabled="!listForm.$valid" /> 

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

    <input type="button" ng-click="DeleteList()" value="DeleteList" ng-disabled="!listForm.$valid"/>

<ul>

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

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

        </li>

    </ul>

    <ul>

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

        <a ng-click="GetListItemsById(listItem.Id,listItem.Title)">{{listItem.Title}}</a>

    </li>

</ul>

    </ng-form>

<ng-form name="itemForm">

<input ng-model="listName" name="listName" placeholder="List Name" required />

    <span class="error" ng-show="itemForm.itemForm.$error.required"></span>

    <input ng-model="itemId" name="itemId" ng-readonly="true" placeholder="Id" />

    <input ng-model="iTitle" placeholder="Title" required name="iTitle"  />

    <input type="button" ng-click="AddListItem()" value="AddListItem" ng-disabled="!itemForm.$valid" />

    <input type="button" ng-click="UpdateListItem()" value="UpdateListItem" ng-disabled="!itemForm.$valid" />

    <input type="button" ng-click="DeleteListItem()" value="DeleteListItem" ng-disabled="!itemForm.$valid" />

</ng-form>

<div ng-hide="true">

    {{jsonData}}

</div>

<div ng-hide="true">

    {{listItemJSON}}

</div>