I'm trying to use angular ui-router in my project and I'm running into an issue about maintaining url parameters in the parent route while adding child ones...
I have a settings page with the following route: /settings/:messageCode/:status
And now I need to add a piece of template that changes depending on the route so the new display looks like this: https://imgur.com/a/dHKzVD6
<div>
<div id="sidebar">...</div>
<div id="topbar">...</div>
<div ui-view>
<!-- This is the variable content depending on the route -->
</div>
</div>
The new routes I need to add are the following:
/settings/studio
/settings/payments
And this is my code for the nested routing
...
$stateProvider
.state("register", {...})
.state("settings", {
url: "/settings", // the objective is to keep the previous route "/status/:messageCode/:status"
templateUrl: 'settings/settings.view.html',
controller: 'SettingsCtrl as vm',
params: {
messageCode: {
value: null,
squash: true,
dynamic: true,
},
success: {
value: null,
squash: true,
},
})
.state("settings.studio", {
url: "/studio",
templateUrl: 'template-tab-studio.html',
controller: 'SettingsCtrl as vm',
})
.state("settings.payments", {
url: "/payments",
templateUrl: 'template-tab-payments.html',
controller: 'SettingsCtrl as vm',
})
At the moment, the routing is working fine, but I lost the URL params on the parent component (settings home), while adding its new children without having to add the url parameters to all childrens.
The problem of having to add the URL params to all children, is that I'll need to add many more views, so having to maintain all that routes will complicate things.
Is there a way to keep the original route in the parent (/settings/:messageCode/:status) while adding children so they can also recieve that paremeters?
Target routes would look like this: /settings/{dinamicView}/:messageCode/:status.
can't get what parameters do you mean, to pass variables to child route you could use resolve
to keep previous route change url: "/settings" to url: "settings"
Related
I am building a application which has different modules. and two modules can have same pages. So based on url i am making the appropriate ajax call to load data. So I am tring to setup my states in below way:
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController as LoginController'
}).state('logout', {
url: '/logout',
templateUrl: '',
controller: 'LogoutController as LogoutController'
}).state('module', {
url: '/:module',
params: {
module: DataService.getCurrentModule()
}
}).state('module.cover', {
url: '/cover',
templateUrl: 'cover.html',
params: {
module: 'leads'
}
}).state('module.leads', {
url: '/leads',
templateUrl: 'leads.html',
controller: 'LeadsController as ctrl',
abstract: true
})
Given that at the time of login I will fetch all modules and save it in DataService, which is happening. Then after login two things will be done. One navigation urls which i have formatted in below way:
<a href={'#/'+ module.code +"/" + (menu.type|| menu)}>
<i className={classes}></i> <span >{menu.name || menu }</span>
</a>
which is setting the correct url, and second in app.js in "run" I am checking if login is done them I am doing :
$location.path(DataService.getCurrentModule() + "/" + (home.type || home) );
which is also happening, but issue is desired controller and html page is not being loaded. Am I missing something here. Or should I have done things little differently?
Thanks for help in advance.
Avoid href when working with ui.router. To navigate to the required states use:
In HTML: ui-sref="myStateName({param1: 1, param2: 2})"
In Javascript inject the service $state and do: $state.go('myStateName', {param1: 1, param2: 2});
In your case, lets assume that there are 2 modules in an array in the $scope:
$scope.myModules = [{code: 'modA'},{code: 'modB'}];
Now in the HTML, to go to the module.cover state you would do:
<a ui-sref="module.cover({module: myModules[0].code})">My Link</a>
If you want to do it for all modules, put it inside an ng-repeat:
<a ng-repeat="mod in modules" ui-sref="module.cover({module: mod.code})">My Link</a>
Also, for state configuration, consider:
ALL STATES NEED A TEMPLATE: even if they are abstract states, they require a template to work properly. If the parent state doesn't have a template, not even one of its childs is gonna show. In this case, the state module doesn't have a template, so it will never work. define a template for it as simple as template: '<div ui-view></div>'
When you define a parameter in the URL, there's no need to define it again in with a params property. That is used only when you need parameters that you don't want to show in the URL
I've been working with Angular for a year or 2 now, but this is my first project using ui-router. I'm running into a few issues with views and sub-views. The app is a standard left-side menu bar, with the views on the right changing depending on what's clicked in the menu bar.
On index.html
<body>
<div ui-view></div>
</body>
In the config.js file, which defines the routes
.state("dashboard", {
url: "/dashboard",
templateUrl: "components/dashboard/dashboard.html",
data: {
pageTitle: "Dashboard",
requiresLogin: false
}
})
.state("dashboard.welcome", {
url: "/welcome",
templateUrl: "components/welcome/welcome.html",
data: {
pageTitle: "Welcome",
requiresLogin: false
}
})
In the dashboard.html file
<div class="dashboard">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-8">
<div ui-view>
The /dashboard path loads correctly, and will load the left-side navigation bar with a blank right side. But changing the state to dashboard.welcome (/welcome) will not load the welcome.html template.
Whenever working with ui-router you need to understand that the concept of states is different from routes. When you define a sub-state, its defined relative to its parent state. In your scenario dashboard.welcome is defined as a child state of dashboard. The routes to substate is relative to the parent and is {parent url}/{child url}. Hence you should use either of the below 2 to route to that state:
Using $state.go change the state by specifying state name
$state.go('dashboard.welcome');
Using $location.path change the route by specifying url
$location.path('/dashboard/welcome');
It sounds like you want links to /welcome to be for state dashboard.welcome. Here is a plunker showing how this can be done. I show two sets of dashboard and welcome states. The first set of states (dashboard & welcome) shows that /dashboard/welcome will bring you to the dashboard.welcome state.
The second set (dashboard2 & welcome2) shows that /welcome will go to state dashboard2.welcome2. I believe this is what you were looking for.
If you hover over the links you can see where they will take you.
https://plnkr.co/edit/AVKPFa?p=info
Nested routes in ui-router get nested urls. I would however recommend using named-views for this kind of structure. You can find more info about it here:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
The gist of it is: you can specify a named component (ui-view) for your left menu navigation and another one for content, which gives you much more control down the line, because named components can be overwritten in child states or they can keep the default template, depending on your needs.
Example:
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'templates/partials/header.html',
controller: 'headerCtrl'
},
'logo': {
templateUrl: 'templates/partials/logoView.html'
},
'footer':{
templateUrl: 'templates/partials/footer.html',
controller: 'footerCtrl'
}
}
})
.state('root.login', {
url: '/login',
views: {
'header#': {
template: ''
},
'container#': {
templateUrl: 'templates/login.html',
controller: 'loginController'
}
}
})
.state('root.report', {
url: '/report',
views: {
'container#': {
templateUrl: 'templates/eu_dashboard.html',
controller: 'reportController'
}
}
})
And in your index.html:
<div ui-view="logo"></div>
<div ui-view="header"></div>
<div id="mainView" ui-view="container"></div>
<div ui-view="footer"></div>
we have three pages in our app which can be classified under one parent page as below.
1)Parent
I)Child1
II)Child2
III)ChildIII
.state('Parent', {
url: '/Parent/:ID',
templateUrl: 'parent.html',
controller:'parentcontroller'
})
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html'
})
.state('Parent.Child2', {
url: '/Child2',
templateUrl: 'Child2.html'
})
.state('Parent.Child3', {
url: '/Child3',
templateUrl: 'Child3.html'
})
sometimes we need to call this child pages sequentially one after another from child1 to child3 without parameters and sometimes we need to call those child pages individually but requests needs to go through parent controller so that we do not have to instantiate new controller instance for each one of those child pages. to accomplish this i'm using href but i want to be able to call parent and child with out passing any params.
working href ex: <a href='../Parent/{{ID}}/child1'
Not working ex: <a href='../Parent/child1'
can anyone please guide me to accomplish this?? Thanks!!
solution:
.state('Parent', {
url: '/Parent/:ID',
templateUrl: 'parent.html',
controller:'parentcontroller',
params:{ID:null}
})
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html'
})
.state('Parent.Child2', {
url: '/Child2',
templateUrl: 'Child2.html'
})
.state('Parent.Child3', {
url: '/Child3',
templateUrl: 'Child3.html'
})
From HTML:<a ui-sref="(Parent.Child1{ID:{{value}}})">Home</a>
i wasn't aware that if we use SREF as above and controller declared at parent value can still read the params but gave a shot and it worked!!
Yes, you can do this. First you should define your params in your .state(), if you are passing params to child1 state, then it should defined by like below,
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html',
params: {
paramName: '' //here paramName can be named by your wish.
}
})
after this you should pass the call the state and pass param in ui-sref like below,
<a ui-sref="Parent.Child1({paramName: scopeName})">Click</a>
here scopeName is the name of the scope which have the value to param, if you want hard code a string, then you can pass in qoutes, ({paramName: 'some string'})
I'm a little confused about what you're asking, but the way it sounds is that all the pages use the same controller. If that's the case, just let them. Controllers will eventually be destroyed when they are no longer needed, so instantiating a new one is fine. If you're routing to a new page, it's going to look for the accompanying controller.
--Edit based on OP's comment--
If the goal is to only get data once, you can store that in a service. Every service is a singleton, so if you grab data and save it in your service, you can inject that service elsewhere and have access to it.
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.
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