Мне нужно создать список задач с laravel в качестве внутреннего интерфейса и angularjs в качестве внешнего интерфейса. Я новичок в этой области. Я уверен, что моему бэкэнду возвращаются правильные данные json (проверено Почтальоном), но почему angularjs ничего от этого не получает? Я новичок в этой области. Пожалуйста, помогите мне!
У меня есть два файла: todoapp.js и index.html.
todoapp.js:
var app = angular.module('todoapp', []);
app.controller('appCtrl', function($scope, $http) {
$scope.name = "John";
$scope.todoList = {}
$http.get('http://localhost/201805CodeTesting/backend/public/api/todos')
.success(function (data, status, header, config){
$scope.todoList = data;
});
$scope.deleteTask = function(id) {
$http.delete('http://localhost/201805CodeTesting/backend/public/api/todos/' + id).
success(function(data, status, headers, config) {
$scope.ServerResponse = id;
});
};
$scope.addTask = function() {
var data = $.param({
taskName: $scope.taskName,
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post('http://localhost/201805CodeTesting/backend/public/api/todos', data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = data;
})
};
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="./js/todoapp.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>Todo List App</title>
</head>
<body class="container" ng-app="todoapp" ng-controller="appCtrl"> <div class="col-md-8 col-md-offset-2">
<div class="page-header">
<h1>TODO List</h1>
</div>
<form ng-submit="addTask()">
<div class="form-group">
<input type="text" class="form-control input-lg" name="taskName" ng-model="taskName" placeholder="Enter task name">
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Add</button>
</div>
</form>
<ul>
<li ng-repeat="task in todoList">
{{ task.id + ', ' + task.task + ', ' + task.status }} <br>
<form ng-submit="deleteTask()">
<input type="hidden" name='_method' value='DELETE'>
<input type="submit" class = 'btn btn-danger' value="Submit" />
</form>
</li>
</ul>
</div>
</body>
</html>