我已经使用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
});
});
再次感谢所有试图帮助我的人!