.state('app.item', {
url: "/item/{title}",
params: {
color: null,
icon: null
},
cache: false,
views: {
viewContent: {
templateUrl: "templates/item.html",
controller: 'ItemController'
}
}
});
I want to rewrite the templateUrl like this
templateUrl:"templates/item/{title}.html",
I tried but doesn't work.
I think you could solve it be adding a function and using the $stateParams service like this:
.state('app.item', {
url: "/item/:title",
params: {
color: null,
icon: null
},
cache: false,
views: {
viewContent: {
templateUrl: function ($stateParams){
return 'templates/' + $stateParams.title + '.html';
},
controller: 'ItemController'
}
}
});
Related
I'm having a problem I can't seem to figure out. When using ui-sref to change to a new state, the correct controller "does" load, but the current controller ALSO reloads. Twice in fact. (I set a break-point in the JavaScript and it hits that break-point twice).
Here is the relevant UI-router code:
.state('index',
{
abstract: true,
url: "/index",
templateUrl: "app/shared/content.html"
})
.state('index.cardholder',
{
url: '/cardholder',
views: {
'content': {
templateUrl: 'app/views/cardholder/cardholder.html',
controller: 'cardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/cardholderController.js']
}
]);
}
},
params: {
loadParams: false
}
})
.state('index.cardholderedit',
{
url: '/cardholder/edit',
views: {
'content': {
templateUrl: 'app/views/cardholder/edit/editCardholder.html',
controller: 'editCardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/edit/editCardholderController.js']
}
]);
}
},
params: {
id: null,
template: null
}
})
And here is the sref that calls the new state:
<a ui-sref="index.cardholderedit({ id:cardholder.empPersonDTO.personId, template:selectedTemplate})">
I did a search on cardholderController just to make sure I didn't have a naming issue somewhere - it all looks kosher.
Why is cardholderController reloading? How do I stop it?
can anyone help me on this
I have got a question about params:
1) when I go to app.usermanagement.user({id:40}) in router.config in resolve function $stateParams is empty. I guess I missed some option.
I'm going to that state by ui-sref="app.usermanagement.user({id:40})"
Here is code below:
var states = [];
states.push({
name: 'app',
url: '/',
deepStateRedirect: true,
resolve: {
languages: function (CommonData) {
return CommonData.getLanguages();
},
r1s: load([
'ui.select'
]).deps
},
views: {
'#': {
templateUrl: 'tpl/app.html'
}
}});
states.push({
name: 'app.usermanagement',
url: 'userManagement',
templateUrl: 'app/views/user-managment.html',
controller:'UserManagmentController',
deepStateRedirect: { default: "app.usermanagement.search" }
});
states.push({
name: 'app.usermanagement.search',
url: '/search',
templateUrl: 'app/views/tabs/user-managment/user-search.html',
controller:'UserSearchController'
});
states.push({
name: 'app.usermanagement.user',
url: '/user/{id}',
controller:'UserPageController',
templateUrl: 'app/views/tabs/user-managment/user-page.html',
resolve: {
user: function ($stateParams, UserData) {
return UserData.getUserById($stateParams.id);
}
},
deepStateRedirect: { default: "app.usermanagement.user.details" }
});
states.push({
name: 'app.usermanagement.user.details',
url: '/details',
controller:'UserDetailsController',
templateUrl: 'app/views/tabs/user-managment/user-details.html'
});
states.push({
name: 'app.usermanagement.user.friends',
url: '/friends',
templateUrl: 'app/views/tabs/user-managment/user-friends.html'
});
ok I was missing property params:true in deepStateRedirect object
deepStateRedirect: { default: "app.usermanagement.user.details", params:true }
Here's the example code.
http://plnkr.co/edit/jXEQ9xemL1A5b9KKKcAw?p=preview
var app = angular.module('npAdmin', ['ui.router']);
app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',
function($httpProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('common', {
templateUrl: 'tpl.common.html',
abstract: true,
// views: {
// 'footer': {
// templateUrl: 'footer.html'
// }
// }
})
.state('common.dashboard', {
url: '/dashboard',
views: {
'content': {
template: '<div><h4>dashboard</h4></div>'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('common.crm', {
url: '/crm',
views: {
'content': {
template: '<div><h4>CRM</h4></div>'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('common.abc', {
url: '/abc',
views: {
'content': {
template: '<div><h4>ABC</h4></div>'
},
'footer': {
templateUrl: 'newfooter.html'
}
}
})
.state('landing', {
templateUrl: 'tpl.login.html',
abstract: true,
})
.state('landing.login', {
url: '/login',
template: '<div><h4>Wow</h4></div>',
});
$urlRouterProvider.otherwise('/crm');
}
]);
The default 'templateUrl' of 'footer' is 'footer.html', but it's 'newfooter.html' for some state.
Is there a good way to set default footer in this case?
I tried to use 'templateUrl' and 'views' at the same time, but it doesn't work.
There is updated plunker. We can use absolute naming in the parent 'common':
.state('common', {
abstract: true,
views: {
'': {
templateUrl: 'tpl.common.html',
},
'footer#common': {
templateUrl: 'footer.html'
}
}
})
And override it only if needed ('dashboard' and 'crm' will use the parent footer, while the 'abc' is defining an override - special one: newfooter.html)
.state('common.dashboard', {
url: '/dashboard',
views: {
'content': {
template: '<div><h4>dashboard</h4></div>'
},
// provided by parent
//'footer': {
// templateUrl: 'footer.html'
//}
}
})
.state('common.crm', {
url: '/crm',
views: {
'content': {
template: '<div><h4>CRM</h4></div>'
},
// provided by parent
//'footer': {
// templateUrl: 'footer.html'
//}
}
})
.state('common.abc', {
url: '/abc',
views: {
'content': {
template: '<div><h4>ABC</h4></div>'
},
'footer': {
templateUrl: 'newfooter.html'
}
}
Check it here
View Names - Relative vs. Absolute Names
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname#statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
For example, the previous example could also be written as:
.state('report',{
views: {
'filters#': { },
'tabledata#': { },
'graph#': { }
}
})
I'd like to navigate to the following url through the browser:
http://localhost:9001/jira.
This only works if I add a hash to the url, like this:
http://localhost:9001/#/jira.
I tried setting the html5Mode to true, but this only removes the hash from the url. It still does not allow me to navigate directly to the url.
Here is my code:
grey.config( function( $stateProvider, $provide, $locationProvider ) {
$locationProvider.html5Mode( true ).requireBase( false );
// Set up the different views
$stateProvider
.state('index', {
url: '',
views: {
'jira_filters': {
templateUrl: 'app/partials/jira_filters.html'
},
'ciq_filters': {
templateUrl: 'app/partials/ciq_filters.html'
},
'priority': {
templateUrl: 'app/partials/priority.html'
},
'status': {
templateUrl: 'app/partials/status.html'
},
'rca': {
templateUrl: 'app/partials/rca.html'
},
}
})
.state('jira', {
url: '/jira',
views: {
'jira_filters': {
templateUrl: 'app/partials/jira_filters.html'
},
'ciq_filters': {
templateUrl: 'app/partials/ciq_filters.html'
},
'priority': {
templateUrl: 'app/partials/priority.html'
},
'status': {
templateUrl: 'app/partials/status.html'
},
'rca': {
templateUrl: 'app/partials/rca.html'
},
}
});
});
Apologies if this question is obvious.
I am defining several states simultaneously in my main modules file for use with UI-Router.
My code is:
samApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"nav": {template: "index.nav"},
"header": { template: "index.viewA" },
"page": { template: "index.viewB" }
}
})
.state('articles', {
url: "/route1",
views: {
"nav": {template: "index.nav"},
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"nav": {template: "index.nav"},
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
});
As you can see, I want every route to use the same Nav. Would it be possible to write something like:
.state(['index', 'articles', 'route2'], {
url: "",
views: {
"nav": {template: "index.nav"}
}
})
Or is this just out of the question?
Thank you.
In order to group view definition, use an abstract state:
$stateProvider
.state('parent', {
// use quotes for avoiding compilation issues with this reserved word
'abstract': true,
url: '',
views: {
'nav': { template: 'index.nav' }
}
})
.state('articles', {
parent: 'parent',
url: "/route1",
views: {
// use the viewName#stateName syntax (stateName is empty since we address root no name state
"header#": { template: "index.viewA" },
"page#": { template: "index.viewB" }
}
})
/* ... quite the same for other child states */
;
See ui router view names documentation and ui router abstract state documentation.
'