Angularjs ui router ui-sref generate wrong url

Question

Trying to switch between child views, however ui-sref generate a wrong url when the other child is already loaded. The correct link: 'template/viewname.html' The actual link: 'home/template/viewname.html' How to stop ui-sref from adding 'home/' to the link ? Thanks

app

 angular.module('app',[,'ngRoute','ui.router']);

config

angular.module('app').config(['$urlRouterProvider', '$stateProvider',    '$locationProvider', function ($urlRouterProvider, $stateProvider,    $locationProvider) {
   $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
$urlRouterProvider.otherwise('/');

$stateProvider.state('home', {
    url: '/home',
    templateUrl: 'template/index.html',
    controller: 'contr'

})
.state('home.about', {
    parent:'home',
    url: '/about',
    templateUrl: 'template/about.html',
    controller: 'contr'

})
.state('home.contact', {
    parent: 'home',
    url: '/contact',
    templateUrl: 'template/contact.html',
    controller: 'contr'

})  }]);

Home page

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 <meta charset="utf-8" />
</head>
<body>
 <h3>Home</h3>
   <div>
     <a ui-sref="home.about">abouttt</a>
     <a ui-sref="home.contact">contact</a>
   </div>
   <div ui-view>
  </div>
 </body>
</html>

JB Nizet · Accepted Answer · 2015-09-03 23:00:04Z

2

You're shooting yourself in the foot:

you set requireBase to false, instead of using the default. The reason for the base tag is precisely that it allows relative URLs to be treated as relative to the base URL, rather than to the current URL
despite your choice to not use a base tag, you still use relative URLs, instead of absolute ones (i.e. URLs starting with `/, and which thus always point to the same location whatever the current location is).

See https://docs.angularjs.org/guide/$location#relative-links for more information.

edited Sep 3, 2015 at 23:00

answered Sep 3, 2015 at 22:41

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Comments

JanisP · Accepted Answer · 2015-09-03 22:54:20Z

0

just a small plnkr: http://plnkr.co/edit/RbjGt8zhAGSRb00idkEU?p=preview

var app = angular.module('plunker', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
   $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
 })

  $stateProvider.state('home', {
    url: '/home',
})
.state('home.about', {
    parent:'home',
    url: '/about',
   views:{
      '@':{
        'templateUrl': '/tpl1.html'
      }
    }
    //controller: 'contr'

})

answered Sep 3, 2015 at 22:54

JanisP

1,24315 silver badges16 bronze badges

Comments

muenchdo · Accepted Answer · 2015-09-03 22:40:40Z

0

I would recommend to use absolute URLs in your templateUrl, i.e. with a leading slash. For example:

$stateProvider.state('home', {
    url: '/home',
    templateUrl: '/template/index.html',
    controller: 'contr'
});

answered Sep 3, 2015 at 22:40

muenchdo

2,1811 gold badge17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angularjs ui router ui-sref generate wrong url

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related