JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
<div ng-app="myApp">
        
    <div ng-controller="myController">
        <div class="alert" ng-if="error">Sorry there seems to be some problems in fetching your todos from our servers.</div>
        <ul >
            <li ng-repeat="item in datalist">{{item}} <button ng-click="deleteClicked($index)">Delete</button></li>
        </ul>
    </div>
</div>

JavaScript

angular.module('myMocks', ['ngMockE2E']).run(function ($httpBackend, $location) {
    //console.log($httpBackend);
    //console.log($location);
    var todoList = {todoList:["item 1","item 2","item 3","item 4"]};
    $httpBackend.whenGET('/api/getTodoList').respond(function (method, url, headers) {
        
			return [200, todoList, {}];
		}
	);
    
    $httpBackend.whenPOST('/api/deleteAtIndex').respond(function (method, url, headers) {
            console.log(JSON.parse(headers).index);
            
            todoList.todoList.splice(JSON.parse(headers).index, 1);
			return [200, todoList, {}];
		}
	);
});

var anyVar = angular.module("myApp",['myMocks']);

anyVar.controller("myController", function(todoListService, $scope){
    todoListService.getTodoData().then(function(response){
        console.log("success")
        $scope.datalist = response.todoList;
    },function(reason){
        console.log("failure")
        $scope.error = true;
    });
    $scope.hello = "Hello";
    $scope.deleteClicked = function(index){
        todoListService.deleteAtIndex(index).then(function(response){
            $scope.datalist = response.todoList;
        },function(reason){
            $scope.error = true;
        });
    }
});
   
anyVar.factory("todoListService", function($http, $q){
    var returnValue = {};
    
    function getTodoData(){
        var deferred = $q.defer();
			$http.get('/api/getTodoList').success(function (response) {
				deferred.resolve(response);
			}).error(function () {
				deferred.reject();
			});
			return deferred.promise;
        //return todoList;
    }
    
    function deleteAtIndex(index){var deferred = $q.defer();
                                  $http.post('/api/deleteAtIndex', {index:index}).success(function (response) {
				deferred.resolve(response);
			}).error(function () {
				deferred.reject();
			});
			return deferred.promise;
    }
    
    returnValue.getTodoData = getTodoData;
    returnValue.deleteAtIndex =...