-2

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Suraj Kumar
  • 11
  • 7
  • Does this help you? https://stackoverflow.com/questions/41484457/routing-between-angular-laravel – Rafael Aug 14 '18 at 20:22
  • You want to use [hashbang mode](https://docs.angularjs.org/guide/$location#hashbang-and-html5-modes). Any angular route will start with a hashbang , like `#!/products`. Any laravel route will not have the hashing on it. – aynber Aug 14 '18 at 20:22
  • Possible duplicate of [Routing between Angular & Laravel](https://stackoverflow.com/questions/41484457/routing-between-angular-laravel) – Rafael Aug 14 '18 at 20:23
  • Can I user laravel routing with angularjs in #bang mode? - aynber – Suraj Kumar Aug 14 '18 at 20:36
  • The suggested duplicate does not apply in this case. HTML5 mode requires URL rewriting on the server side. [From review](https://stackoverflow.com/review/close/20589662). – georgeawg Aug 14 '18 at 21:45
  • Possible duplicate of [AngularJS routing without the hash '#'](https://stackoverflow.com/a/17909743/5535245). Also [How to: Configure your server to work with html5Mode](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode) – georgeawg Aug 14 '18 at 22:10

3 Answers3

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

Jason Grim
  • 413
  • 4
  • 7
0

How to: Configure your server to work with html5Mode1

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>
Community
  • 1
  • 1
georgeawg
  • 48,608
  • 13
  • 72
  • 95
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>
Suraj Kumar
  • 11
  • 7