Laravel 5 & AngularJS ng-view issue


Laravel 5 & AngularJS ng-view issue

我已经使用Laravel 5设置了我的API后端

Route::get('/', function()
{
   return view('index');
});
Route::group(array('prefix' => 'api/v1'), function()
{
    Route::resource('suppliers', 'AdvancedMode'SuppliersController', array('only' => array('index', 'store', 'show', 'update', 'destroy')));
    Route::resource('statuscodes', 'AdvancedMode'EquipmentsStatusCodesController', array('Only' => array('index', 'store', 'show', 'update', 'destroy')));
    Route::resource('projects', 'AdvancedMode'ProjectsController', array('Only' => array('index', 'store', 'show', 'update', 'destroy')));
    Route::resource('platetypes', 'AdvancedMode'PlateTypesController', array('Only' => array('index', 'store', 'show', 'update', 'destroy')));

我使用/public文件夹来存放AngularJs的东西文件夹结构

/public
    /css
    /js
        /controllers
        /directives
        /packages
        /services
        app.js
    /views

在我的/views文件夹中我有我的php文件

<!DOCTYPE html>
<html ng-app="sxroApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body ng-controller="dashCtrl">
<div class="container">
    <div class="row" ng-view></div>
</div>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-route/angular-route.min.js"></script>
<script src="../../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../../assets/js/app.js"></script>
<script src="../../assets/js/controllers/AdvancedMode/dashboardController.js"></script>
</body>
</html>

现在问题来了,你可以看到,我的index.php文件中有一个ng-view,我想要注入视图

在我的app.js文件中,我有以下内容:

(function()
{
    var app = angular.module('sxroApp',
     [
        'ngRoute',
        'ngResource'
    ]);
    app.config( function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                 controller: "dashCtrl",
                 templateURL: "../assets/views/advanced/dashboard.html"
            })
            .when('/plates',{
                controller: "plateCtrl",
                templateURL: "../views/advanced/plates.html"
            });
            $locationProvider.html5Mode({
              enabled: true,
              requireBase: false
            });
    });
}());

我无法从dashboard.html文件中获取视图。

这是我的仪表盘控制器

angular.module('sxroApp')
 .controller('dashCtrl', function($scope)
    {   $scope.message = 'This routing is working!';
    });

这是我的dashboard.html文件。

 <div class="page-title"  ng-controller="dashCtrl">
                <h3>Dashboard</h3>
                <div class="page-breadcrumb">
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li class="active">Dashboard</li>
                        <h1>{{message}}</h1>
                    </ol>
                </div>
            </div>

最后我得到了图中的结构。filestructure

我一整天都被这事困住了!请帮助!

问题是我不知道如何调试这个。我是Angular的新手。这是我的console.log

请告诉我我做错了什么。

console.log

好样的!

我终于解决了这个问题!我的app.js文件出现了严重的错误

我重写了,效果很好!下面是代码。

angular.module('sxroApp',['ngRoute', 'ngResource',])
    .config(function ($routeProvider, $locationProvider)
    {
        $routeProvider
            .when('/',{
                controller: 'dashCtrl',
                templateUrl: '../../assets/views/advanced/dashboard.html'
            })
            .when('/plates',{
            controller: 'plateCtrl',
            templateUrl: '../../assets/views/advanced/plates.html'
        });
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    });

再次感谢所有试图帮助我的人!