CODEWITHSUNDEEP
phpangularjslaravel
user3459394
user3459394

Reputation: 127

Laravel - Angular Routes

I am trying to integrate angular with Laravel 5 and can't get the routes to show content from pages other then the index file.

It is not picking up the route under .when() as I can change the templateURL and it has no effect.

The files directory is as follows

public_html --views app.js

App.js

var adminApp = angular.module('adminApp', ['ngRoute']);

// set the routes
adminApp.config(function($routeProvider,$locationProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'views/admin/index.html',
            controller  : 'AdminController'
        })

        // route for the contact page
        .when('/home', {
            templateUrl : 'views/admin/home.html',
            controller  : 'AdminHomeController'
        })

        .when('/sessions', {
            templateUrl : 'views/admin/sessions.html',
            controller  : 'AdminSessionController'
        });

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
});



// create the controller and inject Angular's $scope
adminApp.controller('AdminController', function($scope) {

    // create a message to display in our view
    $scope.message = 'This is the admin page!';
});

// create the controller and inject Angular's $scope
adminApp.controller('AdminHomeController', function($scope) {

    // create a message to display in our view
    $scope.message = 'This is the home page!';
});    

// create the controller and inject Angular's $scope
adminApp.controller('AdminSessionController', function($scope) {

    // create a message to display in our view
    $scope.message = 'This is session page!';
});

Index.html

<html ng-app="adminApp">
<html>
    <head>

        <base href="/">
    <!-- Application Dependencies -->

        <!-- CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <!-- JS -->


    </head>

    <body ng-controller="AdminController">

    <div class="container">
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li><a href="access/admin"> Base </a></li>
        <li><a href="access/admin/home"> Home </a></li>
        <li><a href="access/admin/sessions"> Sessions </a></li>
      </ul>
    </div>
  </div>
</nav>

            <div ng-view=""></div>
      </div>
    </body>

    <!-- Application Dependencies -->
    <script type="text/javascript" src="/bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="/bower_components/angular-route/angular-route.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
    <script type="text/javascript" src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script type="text/javascript" src="/bower_components/angular-resource/angular-resource.js"></script>
    <script type="text/javascript" src="/bower_components/moment/moment.js"></script>

    <!-- Application Scripts -->

    <script type="text/javascript" src="/app.js"></script>

</html>

Laravel Route

    Route::group(['prefix' => 'access/admin'], function () {


    /* Angular routes*/ 

    Route::any('{path?}', function()
    {
        return File::get('views/admin/index.html');
    })->where("path", ".+");

Thanks

Upvotes: 2

Views: 2924

Answers (1)

Basit
Basit

Reputation: 971

I had similar problem. I modified the render function in app\Exceptions\Handler.php to

public function render($request, Exception $e)
    {
        if ($e instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException)
        {
            return response()->view('index');
        }
        return parent::render($request, $e);
    }

and created an index.blade.php view in resources\views folder, which was like

<?php
include public_path().'/views/index.html';

and it contains all the angular logic.

Upvotes: 1

Related Questions