Ben Clarke Ben Clarke - 1 year ago 45
AngularJS Question

angularjs changing state issue

I have my app.js StateProvider configuration setup like below:

State 'dashboard' contains the sidebar and top navigation bar and should be active when the state dashboard.home and dashboard.addclient is active.

app.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'partials/login.html',
controller: 'LoginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'partials/dashboard.html',
controller: 'DashboardController'
})
.state('dashboard.home', {
url: '/home',
templateUrl: 'partials/dashboard.home.html',
controller: 'HomeController'
})
.state('dashboard.addclient', {
url: '/addclient',
templateUrl: 'partials/dashboard.addclient.html',
controller: 'ClientsController'
})

$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});


The issue is when the user clicks on a link inside the dashboard page it calls a function which changes the state like below:

app.controller('DashboardController', function ($scope, $state) {
$scope.AddClient = function () {
$state.go('dashboard.addclient');
}
});


But for some reason the URL that it is trying to call looks like:

http://localhost/dashboard/partials/dashboard.addclient.html

HTML:

Index contains a view which the Login will get loaded into:

<body>
<div id="view" ui-view></div>
</body>


I so when the user logs in we have another ui-view on the dashboard:

<div id="page-content-wrapper">
<div ui-view></div>
</div>

Answer Source

Looks like your template URLs are relative paths because they don't begin with '/'. This means that if your browser currently has http://localhost/dashboard in the address bar when you change your state to dashboard.addclient it'll just append your template url to the current address. Instead you can try this:

.state('dashboard.addclient', { url: '/addclient', templateUrl: '/partials/dashboard.addclient.html', controller: 'ClientsController' })

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download