Use Laravel and Angularjs Routing at once

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

Does this help you? stackoverflow.com/questions/41484457/… — Rafael
– Rafael, Commented Aug 14, 2018 at 20:22
You want to use hashbang mode. Any angular route will start with a hashbang , like #!/products. Any laravel route will not have the hashing on it. — aynber
– aynber, Commented Aug 14, 2018 at 20:22
Can I user laravel routing with angularjs in #bang mode? - aynber — Suraj Kumar
– Suraj Kumar, Commented Aug 14, 2018 at 20:36
The suggested duplicate does not apply in this case. HTML5 mode requires URL rewriting on the server side. From review. — georgeawg
– georgeawg, Commented Aug 14, 2018 at 21:45

Jason Grim · Accepted Answer · 2018-08-14 20:22:49Z

0

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

answered Aug 14, 2018 at 20:22

Jason Grim

4234 silver badges7 bronze badges

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

1 Comment

Suraj Kumar Over a year ago

The problem is remain same

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

How to: Configure your server to work with html5Mode¹

When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites. Here is an example:

Apache Rewrites

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 14, 2018 at 22:37

georgeawg

49k13 gold badges78 silver badges98 bronze badges

1 Comment

Suraj Kumar Over a year ago

If require I can send the source code, If you can fix this?

Suraj Kumar · Accepted Answer · 2018-08-16 02:00:39Z

0

I found the solution for that, Now when I use $stateProvider instead of $locationProvider It is working fine and smooth.

//Angularjs Code

ecommerceApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
	
  $stateProvider
	.state('products', {
      url: '/products',
      templateUrl: '/products',
      controller: 'ecommerce'
    })
	.state('product/add', {
      url: '/product/add',
      templateUrl: '/product/add',
      controller: 'ecommerce'
    });
 }]);

<li class=""><a ui-sref="products"><i class="fas fa-tags"></i>Product</a></li>



<div data-ui-view=""></div>

answered Aug 16, 2018 at 2:00

Suraj Kumar

117 bronze badges

Collectives™ on Stack Overflow

Use Laravel and Angularjs Routing at once

3 Answers 3

1 Comment

How to: Configure your server to work with html5Mode¹

Apache Rewrites

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

How to: Configure your server to work with html5Mode1

Apache Rewrites

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

How to: Configure your server to work with html5Mode¹