angularjs route is changing my url

Question

I can't seem to get my route running...

If i go to: http://localhost:8000/#/notes, it changes my url to: http://localhost:8000/#!#%2Fnotes. This does not work either: http://localhost:8000/#!#notes.

Running angularjs 1.6 and route 1.6. I'm also using gulp webserver.

routes.js:

angular.module('NoteWrangler').config(function($routeProvider){

  $routeProvider.when('/notes', {
    templateUrl: '/templates/pages/notes/index.html'
  })

});

index.html:

<div class="wrapper">
   <div ng-view>
   </div>
</div>
<script src="/node_modules/jquery/dist/jquery.js" charset="utf-8"></script>
<script src="/node_modules/angular/angular.js" charset="utf-8"></script>
<script src="/node_modules/angular-route/angular-route.js" charset="utf-8"></script>
<script src="app.js"></script>
<script src="routes.js"></script>

gulpFile.js

var gulp = require('gulp');
var webserver = require('gulp-webserver');

gulp.task('webserver', function() {
  gulp.src('./')
    .pipe(webserver({
      livereload: true,
      open: true
    }));
});

I'm guessing your problem is the same as this http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working — Callum, Feb 16 '17 at 17:18
Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) — Callum, Feb 16 '17 at 17:21
and check http://stackoverflow.com/questions/41214312/exclamation-mark-after-hash-in-angularjs-app for another solution — Callum, Feb 16 '17 at 17:21

Amitesh · Answer 1 · 2017-02-16T18:28:37.030

You are doing it right but there is a change introduced in angular 1.6.x for $locationProvider. Prior to this version default value for hashprefix was empty '' but now it is '!'.

Check https://docs.angularjs.org/api/ng/provider/$locationProvider

and https://code.angularjs.org/1.5.11/docs/api/ng/provider/$locationProvider

Therefore modify your route.js as below

angular.module('NoteWrangler').config(function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  //$locationProvider.html5Mode(false); 
  //false is default therefore it is not required to set
  $routeProvider.when('/notes', {
    templateUrl: '/templates/pages/notes/index.html'
  })

});

angularjs route is changing my url

1 Answers1