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>
Related
I'm using $state.go() other places in my app but it's not working in a simple function and I can't work out why. It's not showing an error or showing the right state called in $state.go().
I've tested it with $stateChangeStart, $stateChangeError, $viewContentLoading & $stateChangeSuccess. It reaches all the correct stages: $stateChangeStart, $viewContentLoading then $stateChangeSuccess with the right content in each however, doesn't load the page.
I originally tried it with ui-sref and that didn't work so I tried it with $state.go() and now that isn't working I'm really confused. I can't see any difference between this code and what I have in other places where $state.go() works.
HTML link:
<li ng-repeat="thing in things" class="item" ng-click="showThingDetails()">
Code in controller:
$scope.showThingDetails = function () {
$state.go('thingDetails');}
Code in state:
.state('thingDetails', {
url: '/thingDetails',
views: {
'menuContent': {
templateUrl: 'templates/thingDetails.html',
controller: 'thingDetails'
}
}
})
thingDetails.html
<ion-view view-title="Thing Details">
<ion-content>
<h1>{{title}}</h1>
</ion-content>
</ion-view>
thingDetails.js
angular.module('controllers')
.controller('thingDetails', function($scope, $stateParams) {
$scope.title = "thing";
});
I've just found the answer to my own problem. I had copied the state from another place in my app and defining the templateUrl and controller in the views object was causing it to play up. I took templateUrl and controller out of the views object and it worked.
Code in state is now as below and works:
.state('sweepstakeDetails', {
url: '/sweepstakeDetails',
templateUrl: 'templates/sweepstakeDetails.html',
controller: 'sweepstakeDetails'
})
If anyone can add a more detailed answer as to why then I'd appreciate it.
Do you have an ui-view called 'menuContent' where the view should be loaded?
Else you could try to use this state without the menuContent views
.state('thingDetails', {
url: '/thingDetails',
templateUrl: 'templates/thingDetails.html',
controller: 'thingDetails'
})
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
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.
I created a tabbed edit form like this:
<ul class="nav nav-tabs">
<li role="presentation" ui-sref-active="active">
<a ui-sref="products.edit.general">General</a>
</li>
... more tabs ...
</ul>
My routes look like:
$stateProvider
.state('products.edit', {
abstract: true,
url: '/{product_id:int}/edit',
templateUrl: 'partials/products.edit.html',
controller: 'ProductsEditController'
})
.state('products.edit.general', {
url: '',
templateUrl: 'partials/products.edit.general.html'
})
I have several files like partials/products.edit.general.html for each tab. each of them contains different form fields.
Now, I'm looking to extend this code to create products using the same form fields and just switching between POST/PUT on the controller. To do so, I created the products.new set of routes, but I'm failing to implement them on the HTML above. Or should I set up my .new rules differently?
You can pass data or promises to the controller from the .state configuration as follows
.state('products.edit', {
abstract: true,
url: '/{product_id:int}/edit',
templateUrl: 'partials/products.edit.html',
controller: 'ProductsEditController',
resolve: {
action: function () {
return 'edit';
}
}
});
This will resolve as a dependency (or dependencies if multiple properties used in resolve) of the controller:
angular.module('myApp').controller(function( action, /*other dependencies...*/){
if(action === 'edit'){
// editing specific code or variables
}else{
// create specific code
}
});
See UI Router docs for more details
I have some two ui-router states in my angular application, which works fine, like this:
app.config(["$stateProvider",
function($stateProvider){
$stateProvider
.state("settings", {
url: "/settings",
views: {
"secondMenu": {
templateUrl: "second_menu.html?parent=settings",
controller: "settingsController"
},
"thirdMenu": {
template: empty_template
}
}
})
.state("cabinet", {
url: "/cabinet",
views: {
"secondMenu": {
templateUrl: "second_menu.html?parent=cabinet",
controller: "cabinetController"
},
"thirdMenu": {
template: empty_template
}
}
})
But only part of my menu i need work with angular. Other part of menu must go to static (not angular) url of my site, like this:
<ul>
<li>static-url</li>
<li><a ui-sref="cabinet">cabinet angular url</a></li>
<li><a ui-sref="settings">settings angular</a></li>
</ul>
And when i click on angular-urls - i get need information in my ng-view , but if after then i click on static-url - my url changing from /#/cabinet (for ex.) to /static-url/, but query to server does not exist. Page content saving as in cabinet angular url.
How I can disabling angular ui-router working on /static-url/ ?
So for future lurkers, here's what you need to do. Just add this attribute to your static page's anchor tag:
target="_self"
Like this:
<ul>
<li>static-url</li>
<li><a ui-sref="cabinet">cabinet angular url</a></li>
<li><a ui-sref="settings">settings angular</a></li>
</ul>