AngularJS and Spring MVC Project remove '#!'

Question

I'm working on a project Using AngularJS as front-end and Spring MVC as back-end. Also I used plugin ui-router. The base url looks like localhost:8080/PROJECT_NAME/#! For a better looking I'm trying to remove the /#!/ from url.

I failed to get a correct result from the common solution from internet:

// Insert this into Angularjs module config file
$locationProvider.html5Mode(true);

// Add this into META tag
<base href="/">

After doing this what I got is all resources crashed, so I added my project name:

<base href="PROJECT_NAME">

Resources are correctly fetched, however, the log shows:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:

(anonymous function)    @   angular.js:68
(anonymous function)    @   angular.js:4756
forEach @   angular.js:357
loadModules @   angular.js:4717
createInjector  @   angular.js:4639
doBootstrap @   angular.js:1838
angular.resumeBootstrap @   angular.js:1867
maybeBootstrap  @   hint.js:569

I don't know what to do next, may need your help, thanks!

Router code:

app.config(
    function ($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state('index', {
                url: "/",
                templateUrl: "homeview"
            });

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

Hi @Nagaveer Gowda I've posted on tail of my question body, it's quite standard. I supported that templateURL from spring MVC controller. — Darklizard
– Darklizard, Commented Dec 13, 2016 at 6:49

imbond · Accepted Answer · 2017-10-16 13:51:27Z

1

[1] Set html5Mode as true using below mentioned code,

.config(["$locationProvider", function($locationProvider) {
    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode(true);
}])

[2] Set base url in index.html as follows,

<base href="/" />

[3] Create a controller to redirect urls to the index file

@RequestMapping(value = "/{[path:[^\\.]*}")
public String stalklist() {
    return "forward:/";
}

answered Oct 16, 2017 at 13:51

imbond

2,0981 gold badge24 silver badges22 bronze badges

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

Comments

Pritam Banerjee · Accepted Answer · 2016-12-13 06:38:55Z

0

That # notifies the AngularJS that there is no need to go to the server for that url instead go to ng-router.

So ideally you should not remove that.

answered Dec 13, 2016 at 6:38

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

Comments

User_Alpha · Accepted Answer · 2016-12-13 08:00:28Z

0

use the $locationProvider module and set html5Mode to true.

angular.module('StudentView', []).
 config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

$routeProvider.
  when('/student', {templateUrl: 'partials/studentList.html',   controller: StudentListCtrl}).
  when('/student/:studentId', {templateUrl: 'partials/studentDetail.html', controller: StudentDetailCtrl}).
  otherwise({redirectTo: '/phones'});

$locationProvider.html5Mode(true);

  }]);

answered Dec 13, 2016 at 8:00

User_Alpha

532 silver badges10 bronze badges

1 Comment

Darklizard Over a year ago

Thanks. This is what I did, however, it looks like it goto the server instead of angular, and returned me 404.

Collectives™ on Stack Overflow

AngularJS and Spring MVC Project remove '#!'

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related