立即使用Laravel和Angularjs Routing

Question

I am working on an E-Commerce WebApp. In which I am using Laravel for the backend and Angularjs for the front end. But the problem it when I click on specifc navigation item it will work fine but when I reload the page,It will go for laravel routing and all me css, js, images etc. will not loaded properly.

Laravel Code :

Route::get('/', function () {
    return view('index');
});

Route::get('/dashboard', function () {
    return view('dashboard');
});

Route::get('/products', function () {
    return view('products');
});

Angularjs Routing:

var ecommerceApp=angular.module('ecommerceApp',['ngAnimate', 'ngSanitize', 'ui.bootstrap','ngRoute']);

ecommerceApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {

        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });

        $routeProvider
        .when("/a", {
            templateUrl : "dashboard",
            controller: 'ecommerce'
        })

        .when("/products", {
            templateUrl : "products",
            controller: 'ecommerce'
        })
    }]);

Before Refresh

After Reload

I am stuck in this problem plz help me. Thanks in advance

Answer 1

You can make a route that sends all request to a single controller action or view file so routing is done client side rather than server side.

Add the following as the last route in your routes file. If you need any server side routing they need to be before it.

// [Needs to be last] Catch all non-routed GET request to SpaController
Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

This is using a regular expression to basically send everything to a single action. See: https://laravel.com/docs/5.4/routing#parameters-regular-expression-constraints