Below is how the ui-router state provider has been set for our project. Showing below a part of it.
$stateProvider
.state('Parent', {
url: '/mainpath/:Id',
templateUrl: getViewUrl('Main.html'),
controller: 'MainController',
controllerAs: 'main',
abstract: true,
resolve: {
})
.state('Parent.Child', {
templateUrl: getViewUrl('Child.Html'),
controller: 'ChildController',
controllerAs: 'child',
url: '/child',
requireADLogin: true
})
.state('Parent.Child1', {
templateUrl: getViewUrl('Child1.Html'),
controller: 'Child1Controller',
controllerAs: 'child1',
url: '/child1',
requireADLogin: true
})
.....many more child state.
Parent Path Contains url as '/mainpath/:Id', the Id is part of the parent and based on this value parent runs a number of resolve before loading any of the child state(parent being abstract cannot be navigated to any which way).
The end URL looks like http://something/x.html/mainpath/124353534/child1, the final html contains top section which is parent and below section contains the child
<Html>
<Parent>
<Child>
</Child>
<Parent>
</Html>
On the Parent HTML there is a dropdown list to change the Id in the path '/mainpath/:Id'(this is the problem), this value in the dropdown is captured in the main controller (parent) and the current child state is reloaded with $state.go('passing the new ID cause child value will change based on this Id'). All works fine except that i am not able to change the Id value in the URL.
Can you guys please help with this.
I would store the id's in a service, and inject this service to the different controllers that uses it.
Related
I have the following states declaration (angular v1.5.5):
$stateProvider
.state('appPublic', {
abstract: true,
data: { restricted : false }
})
.state('home', {
url: '/',
parent: 'appPublic',
templateUrl: 'app/views/main.html',
controller: 'mainCtrl'
});
When I open my site, I don't see the main html content (the home state). But, when I remove the parent: 'appPublic' declaration - it works then. So, why I can't to specify the state's parent ?
Every parent, must provide a view target for its child (if using unnamed views are used, i.e parent is not skipped with absolute view naming - Angularjs ui-router not reaching child controller). So this should work
.state('appPublic', {
abstract: true,
data: { restricted : false },
template: '<div ui-view=""></div'
})
now, child view (unnamed view) will be placed in the ui-view target, declared in parent's template
try this:
$routeProvider.when('/userLogin',
{
templateUrl: 'WebrtcLogin.html',
controller: 'UserLoginController'
})
ok, I needed to include template: '<ui-view/>' in my abstract state. The answer is here https://stackoverflow.com/a/33181762/106616
I'm trying to use the same template for 2 different views. My set up is this
$stateProvider.state('me', {
url: '/me',
templateUrl: 'partial/profile/profile.html',
controller: 'ProfileController'
});
$stateProvider.state('myteam', {
url: '/myteam',
templateUrl: 'partial/myteam/myteam.html',
controller: 'MyteamController'
});
$stateProvider.state('myteam.teamMember', {
url: '/:username',
templateUrl: 'partial/profile/profile.html',
controller: 'ProfileController'
});
However whenever I try and access myteam.teamMember, the URL changes but the view doesn't change. Anyone have any advice?
When you redirect to child state it looks for ui-view(it can be named view) on current state HTML, and load the state template in it. Basically you are redirecting to child state of myteam, so to get the changes on view you should have ui-view somewhere inside partial/myteam/myteam.html HTML file.
partial/myteam/myteam.html
<div>
MY HTML
......
.......
<div ui-view></div>
</div>
My route definition is:
$stateProvider.state("passages", {
abstract: true,
url: "/passages",
controller: "PassageController",
template: "<div ui-view></div>"
}).state("passages.list", {
url: "/list",
templateUrl: "/views/passages/list.html"
}).state("passages.upsert", {
url: "/upsert/:passageId",
templateUrl: "/views/passages/upsert.html"
});
And in my PassageController, I have console.log $stateParams.passageId, and it goes to undefined. The URL I hit is http://localhost:3000/passages/upsert/myId
it's only possible to read $stateParams property in state where it is defined.
i could be wrong but your child states don't extend the url of the parent state. the abstract parent state url is simply a default which a child will inherit if no url is defined for a child.
try defining the urls in your child states as ...
url: "/passages/list"
AND
url: "/passages/upsert/:passageId"
I have app with many main states, one of them is user profile:
$stateProvider.state('profile', {
url: '/profile/',
templateUrl: 'profile/profile.html',
controller: 'Profile',
});
But this is just an container for nested pages with different profile settings. It's template only contains main menu and ui-view for nested states. Controller is only for that menu handling.
One of nested views should be default url and have same URL as parent, so there shouldn't be any suffixes added into url, but I can't achieve that.
Here's what I tried:
$stateProvider.state('profile.details', {
url: '',
templateUrl: 'profile/details.html',
controller: 'ProfileDetails',
});
this is not working at all, at url /profile/ only menu appears and an empty ui-view element. Second approach:
$stateProvider.state('profile.details', {
url: '/',
templateUrl: 'profile/details.html',
controller: 'ProfileDetails',
});
This matches on url /profile// (with 2 slashes at end). At url /profile/ there is still menu and empty ui-view element.
How can I achieve that result? Is this even possible using angular-ui-router?
Make your parent state abstract. This will prevent from going into that state, and force to go to child states only. Abstract states are perfect as templates for child ones. Also get rid of url:
$stateProvider.state('profile', {
abstract: true,
templateUrl: 'profile/profile.html',
controller: 'Profile',
});
Now for your child state define absolute URL
$stateProvider.state('profile.details', {
url: '^profile',
templateUrl: 'profile/details.html',
controller: 'ProfileDetails',
});
That should work.
The parent route doesn't contain any view. I put the child routes in a parent to share its name so that the url becomes like this .../sites/site1 or .../sites/site2
$stateProvider
.state('sites', {
url: '/sites',
abstract: true
})
.state('sites.site1', {
url: '/site1',
templateUrl: 'templates/site1.html'
})
.state('sites.site2', {
url: '/site2',
templateUrl: 'templates/site2.html'
})
// ...
// Other routes
But this doesn't seem to work when I go to :
<a ui-sref="sites.site1">Go to first site</a>
<a ui-sref="sites.site2">Go to second site</a>
Nothing's showing up. (Other normal routes are working fine)
There must be a target in parent for a child:
.state('sites', {
url: '/sites',
abstract: true,
// THIS line is essential,
// 1) it will inject the parent template into root
// (index.html) ui-view=""
// 2) and will also create a target for a child view
template: '<div ui-view=""></div>',
})
The reason is: child state is using implicit view naming, expecting that parent will have some unnamed target ui-view=""