Laravel 5 & AngularJS ng-view issue

Question

I have setup my API backend using Laravel 5 Here is a look.

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')));

And I am using the /public folder for AngularJs things the folder structure

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

In my /views folder I have my index.php file

<!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>

Now here comes the problem as you can see I have ng-view in my index.php file and willing so to inject the view.

In my app.js file I have the following.

(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
            });
    });
}());

Some how I can't get the view from the dashboard.html file.

Here is my dashboard controller

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

    });

and here is my dashboard.html file.

 <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>

Finally I have the structure in picture. filestructure

I am stuck with this the whole day! Please help!

The problem is I have no idea how to debug this. I am fairly new into Angular. Here is my console.log

Please someone tell me what I am doing wrong.

console.log

I have tried this as well. templateURL: "../views/advanced/dashboard.html" — user3641381
– user3641381, Commented Oct 7, 2015 at 19:06
look in dev tools console network to see what paths are actually being requested and status of those requests. Each template will be an ajax requests there also — charlietfl
– charlietfl, Commented Oct 7, 2015 at 19:13
I'd highly recommend you checkout github.com/angular-ui/ui-router — Michael J. Calkins
– Michael J. Calkins, Commented Oct 7, 2015 at 19:16
Have you tried just templateURL: "/views/advanced/dashboard.html"? — eluong
– eluong, Commented Oct 7, 2015 at 19:26

user3641381 · Accepted Answer · 2015-10-07 21:07:26Z

1

Great Scott!

I finally solved this problem! I had something terribly wrong in my app.js file

I re-wrote it and it's worked like charm! Here is the code.

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
        });
    });

Thank you again everyone who tried to help!

answered Oct 7, 2015 at 21:07

user3641381

1,0863 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel 5 & AngularJS ng-view issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related