I have ui-router's config like below:
.state('xxx.components',{
url: '/:runId/component',
reloadOnSearch: false,
templateUrl: '/modules/xxx//views/cloud-components/templates/cloud-components.tpl.html',
controller: 'CloudComponentsCtrl',
controllerAs: 'ctrl'
})
if i go to the component page without any runId, the url will look like below:
http://localhost:3031/xxx/run-topologies//component
It will contain double slash in the url, i want it only contains one slash like below, what should i do can solve this issue?
expect behavior:
with runId: (This is correct due to current config)
http://localhost:3031/xxx/run-topologies/6/component
without runId: (should be only 1 slash)
http://localhost:3031/xxx/run-topologies/component
What you are asking is not possible AFAIK. But, there are two ways that you might be interested in which will use the CloudComponentsCtrl for both routes.
Define a separate state with a url without runId
.state('xxx.components',{
url: '/component',
reloadOnSearch: false,
templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
controller: 'CloudComponentsCtrl',
controllerAs: 'ctrl'
})
.state('xxx.componentsForRunId',{
url: '/:runId/component',
reloadOnSearch: false,
templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
controller: 'CloudComponentsCtrl',
controllerAs: 'ctrl'
})
Remove runId from the route and include it as a query parameter.
.state('xxx.components',{
url: '/component?runId',
reloadOnSearch: false,
templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
controller: 'CloudComponentsCtrl',
controllerAs: 'ctrl'
})
Then you can access runId in from your $stateParams.
Hope this addresses your problem in some way.
Related
I am using $stateProvider to define my routes, and I'm facing issues where if I have two routes with the same number of path parameters they go in a loop with each other and though I'm using ui-sref with the name of the route specifically.
for example :
$stateProvider
.state( {
name: 'main',
url: '/{clientId}',
templateUrl: '/main.html',
controller: 'mainCtrl',
})
is getting in a loop with :
.state('battview_mobile',{
url: '/batteries',
templateUrl: 'modules/batteries/views/batteries.html',
controller: 'batterieseCtrl',
})
though in the HTML I call :
ui-sref="battview_mobile"
Can you advise me why it's happening though I'm naming my state to go to?
Your second state is missing the name parameter:
Also your are passing a parameter clientId with the wrong way. It should be :clientId That means this:
$stateProvider
.state('main',{
url: '/:clientId',
templateUrl: '/main.html',
controller: 'mainCtrl',
})
.state('battview_mobile',{
url: '/batteries',
templateUrl: 'modules/batteries/views/batteries.html',
controller: 'batterieseCtrl',
})
I am Working On AngularJs, If I Type On Browser like
http://localhost/vistorsday it went to,
http://localhost/vistorsday/vapp/home.
I Want To Change My URL to http//localhost/vistorsday/home or http//localhost/visitorsday.
Here is my code below
.state('vapp', {
abstract: true,
url: '/vapp',
templateUrl: 'tpl/vtapp.html',
controller: "headerCtrl"}
)
.state('vapp.home', {
url: '/home',
templateUrl: 'tpl/home.html',
controller: "homeCtrl"}
) // JavaScript Document
Please help me out with this Situation.
Just change the URL of the vapp, so that it points to '/' instead of '/vapp' (unless you have any specific reason to keep it as '/vapp').
.state('vapp', {
abstract: true,
url: '/',
templateUrl: 'tpl/vtapp.html',
controller: "headerCtrl"}
)
Hope this helps.
in my app.js folder I have a
$stateProvider
.state('state1', {
url: '/',
templateUrl: 'app/list.html',
controller: 'Ctrl1',
})
.state('state2', {
url: '/details',
templateUrl: 'app/details.html',
controller: 'Ctrl2'
})
.state('state3', {
url: '/list',
templateUrl: 'app/list.html',
controller: 'Ctrl3'
});
At the moment I am calling all of these altogether in index.html using
Is there a way to specify which controller you want displayed in each part of the page. As I'm calling it now it seems that it simply calls everything where it is called in the index.html page which makes it quite hard to organise.
I'm making a project in Angular 1.4, and i'm using ui-router, I have split my project in several sub-modules, there's one 'parent' module (not sure if i'm using the concept of parent and child right) and several 'child' modules.
The 'parent' has routes for the global login, and the two main menus of each group, the groups are: guides, projects; each one of them has it's own 'child' modules some of them are: guides[Web, Mobile, Desktop], projects[Business, Community]. Each module has it's own routes, and what i want is to be able to route the app though each module.
The main routes are:
/
/login
/guides
/guides/login
/guides/web
/guides/mobile
/guides/desktop
/projects
/projects/login
/projects/business
/projects/community
The site has somehow same login concept of SE, people can have a global account, or a single account on a specific module.
What i've tried so far if to make the routes as Doc says:
angular.module('main', ['main.guides', 'main.projects']).config(function ($stateProvider) {
$stateProvider.
state('main', {
url: '/',
templateUrl: './views/index.html',
controller: 'IndexCtrl'
}).
state('login', {
url: '/login',
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).
state('guides', {
url: '/guides',
templateUrl: './views/guides-menu.html',
controller: 'GuidesCtrl'
}).
state('projects', {
url: '/projects',
templateUrl: './views/projects-menu.html',
controller: 'ProjectsCtrl'
});
});
angular.module('main.guides', []).config(function ($stateProvider) {
$stateProvider.
state('main.guides-login', {
url: '/login',
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).
state('main.guides-menu', {
url: '/login',
templateUrl: './views/menu.html',
controller: 'LoginCtrl'
}).
state('main.guides-web', {
url: '/web',
templateUrl: './views/web/list.html',
controller: 'ListCtrl'
}).
state('main.guides-mobile', {
url: '/web',
templateUrl: './views/mobile/list.html',
controller: 'ListCtrl'
});
});
angular.module('main.projects', []).config(function ($stateProvider) {
$stateProvider.
state('main.projects-login', {
url: '/login',
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).
state('main.projects-business', {
url: '/business',
templateUrl: './views/business/list.html',
controller: 'ListCtrl'
}).
state('main.projects-menu', {
url: '/business',
templateUrl: './views/menu.html',
controller: 'ListCtrl'
}).
state('main.projects-community', {
url: '/business',
templateUrl: './views/community/list.html',
controller: 'ListCtrl'
})
});
But don't know how to access to those urls... also would like some opinion about this approach, would there be a better practice?
I created a plunkr to demo your states. I altered the code to use templates instead of templateUrl but that shouldn't change what you are trying to figure out. I made some assumptions about your layout based on the urls provided. If you pop it out into the external viewer you can see the urls being used. Find it here:
http://plnkr.co/edit/9lPQ3GlmH0AEqhzX7lj9?p=preview
Urls in the ui-router are used as part of what specifies the state. So when you want /projects/business you have a state that is a child of projects that has a url of /business. Something like:
state('projects.business', {
url: '/business',
template: '<div> projects business</div>',
controller: 'ListCtrl'
})
The dot notation in the state definition tells the ui router that this is child state of projects. The url value provided is added to the parent state url.
I think your module strategy is solid. You just need to wrap your head about the parent child relationships used in the ui.router.
I have states in 2 languages, like this:
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
});
$stateProvider
.state('contacts.edit', {
url: "/edit",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos', {
url: "/contatos",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos.editar', {
url: "/editar",
templateUrl: 'contacts.html'
})
Right now I'm looping an array to push all my states.
Is there another way to do that?
Sure. Your state name isn't used for what the user does, so that doesn't need to be translated. Only the URL does. Unfortunately ui-router doesn't yet support having multiple URLs in a single state, but somebody has a solution using urlMatcherFactory decoration here:
https://github.com/angular-ui/ui-router/issues/185#issuecomment-48124930