Question

我想开发简单的前端AngularJS和后端Laravel。我不知道为什么我的AngularJS路由未与laravel路由连接。它始终以GET http://localhost/todos 404 (Not Found)的形式提及。我希望有人可以帮助我解决它。预先感谢。

Hello.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel + Angularjs</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-App>
    <div id="todos" ng-controller="Todoctrl">
    <h3 class="page-header">Todos<small ng-if="remaining()">{{remaining()}} remaining</small>
    </h3>
    <ul  class="unstyled">
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            {{todo.text}}
        </li>
    </ul>
    </div>
</script>
    <script src="js/app.js">
</script>
</body>
</html>

Todo.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    protected $guarderd = [];

}

App.js

function Todoctrl($scope,$http){
    $http.get("/todos").success(function(todos){
        $scope.todos = todos;
    });
    $scope.remaining = function(){
        var count = 0;
        angular.forEach($scope.todos,function(todo){
            count == todo.done ? 0 : 1;
        });

    }
}

Route.php

Route::get('/', function () {
    return view('welcome');
});
Route::get('/',function(){
    return view('hello');
});
Route::get('/todos',function(){
    return Todo::all();
});

Answer 1

您需要指定整个URI，例如http://locahost:8000/todos，如果您遇到CORS问题，则可以使用以下库：LARAVEL CORS

注意：您也必须尝试此命令php artisan serve --host=0.0.0.0

Answer 2

水手们，让我们看看您要做什么。

首先，Laravel中有2种不同的路由文件和类型。

1-）route / web.php //用于查看房屋（应用程序）//
2-）route / api.php //用于api端点//

如果您发送的是GET，并且端点位于“ web.php”中，则将无法正常工作。请通过“ api.php”提供端点。

让我们分两个阶段进行调试，

1-）php artisan route：list将使您知道哪个域位于哪个端点（view或api）。您可以获取整个应用程序列表。
2-）检查您的路线是否在应确定的位置（网络或API）

完成所有这些操作后，CORS将导致您遇到问题，因为您正在同一本地主机中发送请求。

建议您快进行以下操作，不要；

进入bootstrap / app.php并将其添加到$ app之前；

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, X-Token-Auth, Authorization');

在进行开发时，这将允许您与后端进行通信，但不会通过单元测试。您可以保存一天。

稍后，您可以通过中间件或任何其他库来解决问题。

希望有帮助。

为什么获取方法在Laravel和AngularJS项目中不起作用

2 个答案: