Ben Clarke Ben Clarke -3 years ago 107
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) {
.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'

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 () {

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



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

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

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

<div id="page-content-wrapper">
<div ui-view></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