So I've been running into this pretty dumb problem with states lately. I am creating my states with the parent.child state as so:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/views/pages/home.html',
})
.state('home.signup', {
templateUrl: 'app/views/pages/signup.html',
url: '/signup',
controller: "signupController"
})
.state('home.login', {
controller: "loginController",
templateUrl: 'app/views/pages/login.html',
url: '/login'
})
My html is as follows:
<a ui-sref="home.login"><i class="fa fa-sign-out fa-fw"></i> Login</a>
<a ui-sref="home.signup"><i class="fa fa-sign-out fa-fw"></i> Signup</a>
The initial parent state was dashboard instead of home. So dashboard.signup and dashboard.login. I had recently changed this to home.login and home.signup. All works when I go to /home/login and /home/signup, but click on my login link and signup links I get the following error:
Could not resolve 'dashboard.login' from state 'home'
I think its still reading the dashboard parent but I have nothing that even relates to it with my login and signup. Everything looks right to me. Any help would be appreciated.
can you check $state.go,what is the state you mentioned in your controller.
Related
I'm using angular ui router and routing my pages, here my main page is contracts.html
I want to route to another page from this page hence I have written the following code. But it is not working, please take a look at the following code :
<li role="menuitem"><a ui-sref=".monthlysettings" onclick="$('#simple-btn-keyboard-nav2').text('PDC Settings')">PDC Settings</a></li>
.state('contracts', {
url: '/contracts',
controller: 'contractsController',
templateUrl: 'contracts.html'
}).state('contracts.monthlysettings', {
url: '/monthlysettings',
controller: 'monthlysettingsController',
templateUrl: 'monthlysettings.html'
})
Your state name should be the full name contracts.monthlysettings
<li role="menuitem"><a ui-sref="contracts.monthlysettings" onclick="$('#simple-btn-keyboard-nav2').text('PDC Settings')">PDC Settings</a></li>
I have my routing defined as below
$stateProvider
('MasterPage', {
url: '/',
templateUrl: 'views/master.html',
})
.state('MasterPage.dashboard', {
url: 'dashboard',
templateUrl: 'views/dash.html',
})
.state('MasterPage.test', {
url: 'test/:id',
templateUrl: 'views/test.html',
})
$urlRouterProvider.otherwise('/');
I have links that allows me to navigate from mainpage to dashboard and then to the test page which works fine. When I navigate to the test page with an id:1234, which makes my url as <HOST>/#/test/1234, and try to refresh it fails. It gives me an error saying:
Cannot resolve state 'MasterPage.test/1234' from 'MasterPage.test'
Why is UI-Router considering the url segment as a state?
Update
I dont have any ui-sref. I am going to the test page by using $state.go('MasterPage.test', {id:1234}).
There is working plunker
This issue is usually related to wrong ui-sref setting
<a ui-sref="MasterPage.test/1234">
we need to split and pass 1) the state name, and 2) state params like this:
<a ui-sref="MasterPage.test({id:1234})">
In case, we want to use href, we just have to concatenate parent and child url definitions (parent '/', child 'test/:id') :
<a href="/test/1234">
EXTEND
So, these states (almost unchanged):
.state('MasterPage', {
url: '/',
templateUrl: 'views/master.html',
})
.state('MasterPage.dashboard', {
url: 'dashboard',
templateUrl: 'views/dash.html',
})
.state('MasterPage.test', {
url: 'test/:id',
templateUrl: 'views/test.html',
})
will work with these links
<a href="#/">
<a href="#/dashboard">
<a href="#/test/1234">
<a href="#/test/9875">
<a ui-sref="MasterPage">
<a ui-sref="MasterPage.dashboard">
<a ui-sref="MasterPage.test({id:2222})">
<a ui-sref="MasterPage.test({id:4444})">
There is working plunker
I'm using UI-Router for an app but I cant for the life of me understand why the page is blank. None of the template urls are displaying. Here's the plunkr
layout.html
<div ui-view="form"></div>
sdagas
<div ui-view="results"></div>
form
This is the form page
results
Results
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("index", {
url: "/",
abstract: true,
templateUrl: 'layout.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('index.layout', {
abstract: true,
url: 'layout',
views: {
'form' : {
templateUrl: 'form.html'
},
'results': {}
}
})
.state('index.layout.results', {
url: '/results',
views: {
'results#layout': {
templateUrl: 'results.html'
}
}
});
$urlRouterProvider.otherwise('/');
});
app.controller('MainController', function($state) {
console.log($state);
console.log('hello');
});
Firstly, there is no ng-app declared in your plunker.. You should have ng-app="app" on your html tag.
Secondly, like #Bilal said, you can't have abstract:true on the states you want to transition to.
Moreover, your ui-sref should point to the states:
<a class="brand" ui-sref="index">home</a>
|
<a class="brand" ui-sref="index.layout">ui-router</a>
Here is your updated plunker
I updated a plunker which is working here
The way how we can call state resuts is:
ui-sref
<a class="brand" ui-sref="index.layout.results">
href
<a class="brand" href="#/layout/results">
We can never navigate to state which is abstract. So we cannot go to index or layout
To make the plunker running I also introduced the ng-app="app":
<!DOCTYPE html>
<html ng-app="app">
which does start up the app
Also, because the '/' is otherwise but abstract I used another setting to go to some non abstract state
$urlRouterProvider.when('/', '/layout/results');
$urlRouterProvider.otherwise('/');
And finally (but almost the most important), this is the updated super child state, which does target the named view not in layout but in index state
.state('index.layout.results', {
url: '/results',
views: {
// wrong
//'results#layout': {
// this target is in the super parent
'results#index': {
templateUrl: 'results.html'
}
}
});
Check it here
From ui-router wiki:
An abstract state can have child states but cannot get activated
itself. An 'abstract' state is simply a state that can't be
transitioned to. It is activated implicitly when one of its
descendants are activated.
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
You made root state abstract: true so it can't be transitioned.
Update:
ui-sref="/" should contain state name not the url path itself. If you really want to use url path then you should use href="/"
Plunkr
Update:
You also missed ng-app="app" in your html.
<html ng-app="app">
I am using ui-router and state provider to route the pages in my application. I have following states written in state provider.
.state('home', {
url: '/home',
templateUrl: 'public/msStream/stateFiles/stateHome.html',
controller: 'stateHomeController'
})
.state('home.profile', {
url: '/home/profile',
templateUrl: 'public/msStream/views/setting/ProfileBody.html'
})
When I am in home state. /home is added in my URL, but when I switch to home.profile state using $state.go("home.profile), my URL is not changing to /home/profile but HTML page added in templateurl of the same state is getting rendered on front.
I tried adding /profile and /home/profile in the URL of the state but nothing seems to work. What am I missing here?
I created working plunker here
The paren-child states do inherit a lot. Among other things, also the url. So we should not use for child the url part coming from parent.
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'public/msStream/stateFiles/stateHome.html',
controller: 'stateHomeController'
})
.state('home.profile', {
// HERE
// instead of this
// url: '/home/profile',
// we need this
url: '/profile',
templateUrl: 'public/msStream/views/setting/ProfileBody.html'
})
Also very improtant note - parent must contain anchor/target/ui-view for its child:
public/msStream/stateFiles/stateHome.html
<div>
<h2>this is the home</h2>
placeholder for child:
<hr />
<div ui-view=""></div>
</div>
The most important here is the <div ui-view=""></div> - a placeholder for child view (unnamed)
Check it in action here
I'm a newb and have to be doing something stupid here, and I can't figure it out for the life of me. Thanks in advance for any help!
In short, I have 3 pages that all load correctly when visiting them directly through the address bar in a browser:
#/communities
#/companies
#/companies/:id
I have used ui-router to define the company states as follows:
//companies.js file:
.config(function config( $stateProvider ) {
$stateProvider
.state( 'companies', {
url: '/companies',
views: {
"main": {
templateUrl: 'companies/companies.tpl.html'
}
},
data:{ pageTitle: '' }
});
})
//companies.detail.js file:
.config(function config( $stateProvider ) {
$stateProvider
.state( 'companies.detail', {
url: '/:id',
views: {
//use # to force use of parent ui-view tag
"main#": {
templateUrl: 'companies/companies.detail/companies.detail.tpl.html'
}
},
data:{ pageTitle: '' }
});
})
.controller('CompanyDetailCtrl', ['CompaniesService', '$stateParams',
function(CompaniesService, $stateParams) {
alert($stateParams.id); //this fires when I navigate to page briefly
var _this = this; //need to get better approach for this (ideally remove)
_this.hoas = [];
CompaniesService.getCompanyHoas($stateParams.id).then(function(response) {
_this.hoas = response;
});
}])
;
//communities.tpl.html calling page snippet:
<a ui-sref="companies.detail({id:hoa.company.id})">{{hoa.company.name}}</a>
The URL is created correctly when I hover over in a browser (ie: "companies/223") AND the companies/223 page is correctly navigated to BUT only for a split second and then redirects back to the calling page. The page IS caught in browser history (so I can go back to it and stay on it and it works perfectly), but when I click this link it always redirects back.
What am I missing??? It's killing me. Thanks for your help. :)
The reason the state was always redirecting back to the calling page is because I had teh ui-sref wrapped in a parent ui-sref element that was pointing back to the calling page:
<a ui-sref="companies" class="list-group-item"
ng-click="list.selectCommunity(community)"
ng-switch on="list.isSelected(community)"
ng-class="{'active': list.isSelected(community)}" >
<div ng-switch-when="true">
<div class="table-responsive">
<table class="table">
...
<td class="hidden-xs"><a ui-sref="companies.detail({id:hoa.company.id})">{{hoa.company.name}}</a></td>
...
</table>
</div>
</div>
</a>
I easily corrected this by changing the first line to:
<a href="#" class="list-group-item" ...
Hope this helps someone in the future. I just wish I didn't assume the problem was within my JS!