This is example of my code.
$stateProvider.state('filter', {
url: "",
templateUrl: 'Filter/widgets.roomer.filter.html',
abstract: true,
controller: 'RoomerFilterCtrl'
})
.state('mainRoomer', {
url: "/main/r",
views:
{
"RoomerView": {
templateUrl: 'Pages/Roomer/Main/pages.main.html',
controller: '',
parent: 'filter'
}
}
})
I dont know, How to view filter state on page RoomerView
how to do this page 'filter' parent on mainRoomer and display it on the display?
Related
i am working on web app that uses ui-router version 0.3.2 and angular 1.5. i am having an issue with back button, when i hit the back button the url updates to appropriate state url, but does not reloads / renders the page. The controller of the new state (updated url) does not get executed. Following is my state config
$stateProvider
.state('home', {
url: '/',
reloadOnSearch: false,
templateUrl: 'homePage.html',
controller:'homeController'
})
.state('home.overView', {
url:'overView',
reloadOnSearch: false,
views: {
ovSB: {
templateUrl: 'searchParameterBarTemplate.html',
controller: 'searchParameterBarController'
}
}
})
.state('home.overView.result', {
url:'/:docType?abc&xyz&type&user&temp1&temp2',
abstract: true,
reloadOnSearch: false,
templateUrl: 'resultViewTemplate.html',
controller : 'resultPanelController'
})
.state('home.overView.result.dashboard', {
url:'',
reloadOnSearch: false,
views: {
'chart': {
templateUrl: 'chart-template.html',
controller: 'chart-Controller'
},
'oVGrid': {
templateUrl: 'ov-grid-template.html',
controller: 'ov-grid-controller'
},
'filterGrid': {
templateUrl: 'filter-stats-template.html',
controller: 'filter-stats-controller'
}
}
})
.state('home.delta',{
reloadOnSearch: false,
url:'Delta',
views:{
pcSB:{
templateUrl: 'search-parameterbar-delta-template.html',
controller : 'search-parameterBar-delta-controller'
}
}
})
.state('home.delta.result',{
url:'/:docType?xyz_1&abc_1&xyz_2&abc_2',
reloadOnSearch: false,
templateUrl: 'delta-template.html',
controller : 'delta-controller'
})
.state('home.details', {
url: 'details',
views: {
detailsSB: {
templateUrl: 'search-paramBar-details-template.html',
controller: 'search-paramBar-details-controller'
}
}
})
.state('home.details.result', {
url: '/:documentType?abc&xyz&user&temp1&temp2',
abstract: true,
templateUrl: 'details-view-template.html',
controller: 'details-view-controller'
})
.state('home.details.result.dashboard',{
url:'',
views:{
perGraph : {
controller :'per-graph-controller',
templateUrl: 'per-graph-template.html'
},
detailsGrid: {
controller: 'details-grid-controller',
templateUrl: 'details-grid-controller-template.html'
}
}
});
So for example if i navigate from home.overview.result.dashboard (url -> localhost:12345/overview/doctype?abc&xyz&user&temp1&temp2) state to home.details.result.dashboard state with url localhost:12345/details/doctype?abc&xyz&user&temp1&temp2 and hit backbutton, the url updates to localhost:12345/overview/doctype?abc&xyz&user&temp1&temp2 however it does not reloads/renders the page.
I believe I can you use this solution and trigger the reload, but I am looking for a better solution than this which adheres to ui router. is there something i am missing with state config / doing wrong? Any help pertaining to this would be highly appreciated.
Thank you
it will be firing $stateChangeStart event. use location directive to rout it . please refer the below snippet
$rootScope.$on('$routeChangeStart', function (event,next) {
$location.path(next.$$route.originalPath);
});
this can resolve your problem. but its not the perfect solution
I have a problem, i need to update url to new, but if user get old address need redirect to new. The main problem that at me the abstract state.
Example route:
{
name: 'process',
config: {
url: '',
abstract: true,
template: '<ui-view></ui-view>'
}
},
{
name: 'process.one',
config: {
url: '/process/:process_name',
abstract: true,
templateUrl: '<ui-view></ui-view>',
controller: 'OneProcess',
controllerAs: 'vm'
}
},
{
name: 'process.one.space',
config: {
url: '/version/:mode',
templateUrl: 'app/templates/process-space.html',
controller: 'ProcessSpace',
controllerAs: 'vm'
}
},
{
name: 'process.one.analytics',
config: {
url: '/analytics',
templateUrl: 'app/templates/analytics.html',
controller: 'AnalyticsCtrl',
controllerAs: 'vm'
}
},
Needed replace url: '/process/:process_name' to url: '/processes/:process_name' What best way to make it?
I am struggling to create a container for next states, defined the states as views, divided into header, CONTAINER, footer.
The next state as an example would be the blogs, but I do not see a way of getting it into the view.
One idea was to start the HOME view as standard, but also failed.
view:
<main>
<header ui-view="header"></header>
<content ui-view="home"></content>
<footer ui-view="footer"></footer>
</main>
states:
.state('home',{
url:'/',
data: {
pageTitle: 'Home'
},
views: {
'': {
templateUrl: 'content/index.html',
},
'header#home': {
templateUrl: 'content/templates/header.html',
controller: 'HeaderController',
cache: false
},
'home#home': {
templateUrl: 'content/templates/home.html',
controller: 'IndexController',
cache: false
},
'footer#home': {
templateUrl: 'content/templates/footer.html',
//controller: 'FooterController',
cache: false
}
}
})
.state('home.blog',{
url : '/blog',
templateUrl : 'content/templates/blog.html',
controller : 'BlogController',
data: { pageTitle: 'Blog' },
access: {requiredLogin: false}
})
SUCCESS! :)
Plunker Example: http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview
In the updated question above, you've used this plunker to show how you made it working:
.state('home',{
url:'',
abstract: true,
views: {
'': {
templateUrl: 'index.html' // this
},
'header#home': {
templateUrl: 'header.html'
},
'footer#home': {
templateUrl: 'footer.html'
}
}
})
.state('home.index',{
url : '/',
templateUrl : 'home.html'
})
.state('home.blog',{
url : '/blog',
templateUrl : 'blog.html',
});
While that solution is working, it is in fact not a way you/we should go. Because the parent state 'home', injects into unnamed view itslef - templateUrl: 'index.html'
So, now there are again views header and footer, but they do differ from the root (original index.htm). Their absolute name would be 'header#home' and 'footer#home' (as used int the code snippet) - and all seems to be working.
But that is redundant. Unless we will move the layout into some 'layout' state and 'layout.html'
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
Why redundant? Because index.html already is in play (as a root) and it contains these targets. their absolute name is 'header#' and 'footer#'. And that should be the way to go.
To make it clear, there is an updated plunker and its snippets:
.state('home',{
url:'',
abstract: true,
views: {
'': {
template: '<div ui-view=""></div>'
},
'header': {
templateUrl: 'header.html'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('home.index',{
url : '/',
templateUrl : 'home.html'
})
.state('home.blog',{
url : '/blog',
templateUrl : 'blog.html',
});
Check the update here
I have the following:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: 'account'
})
.state('account.settings', {
url: '/settings',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.user', {
url: '/user',
templateUrl: 'pages/templates/account.user.html',
controller: 'account.user'
})
I am trying to make it so if I go to:
/account => it goes to /account/settings
/account/setting => goes to /account/settings
/account/user => goes to /account/user
Basically making account.settings the default.
Is there a way to do this?
The big reason I want to do this is because of the following (maybe someone has a better suggestion for a work around)
I have a link like so:
<a ui-sref="account.settings" ui-sref-active="active">Account<a>
I'd like it to have the active class regardless of what nested view (settings or user). But I want this link to always send the user to account.settings.
If anyone could help me out, it'd be greatly appreciated.
Try:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: 'account'
})
.state('account.settings', {
url: '',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.settings2', {
url: '/settings',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.user', {
url: '/user',
templateUrl: 'pages/templates/account.user.html',
controller: 'account.user'
})
Or redirect from the abstract to the concrete state... the code snippet removes the specified 'account' controller reference, but the code in the snippet can be added to the controller if needed:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: ['$scope', '$state',
function( $scope, $state) {
$state.go('account.settings');
}],
})
I have now tried whole day and i cant figure out how i shall solve this issue.
My goal is to display a sidebar thats get filled with data based on what state it is.
Lets say i am on the home page i may like this items:
Home item 1
Home item 2
And if i am on the about page i want this items:
About me
About my dog
I would like the data to get fetched from a service that returns data to the view based on what state it is.
I have tried to use ui.router's resolve function but i can't get the correct structure in my head to make it work.
Created a plunkr that shows how i mean but without the solution, what are the best practices and preferred ways when creating a dynamic sidebar with Angular and ui.router?
myapp.config(function($stateProvider) {
$stateProvider
.state('home', {
url: "",
views: {
"content": {
template: "This is the home.content"
},
"sidebar": {
templateUrl: 'sidebar.html',
controller: 'sidebarCtrl'
}
}
})
.state('about', {
url: "/about",
views: {
"content": {
template: "This is the about.content"
},
"sidebar": {
templateUrl: 'sidebar.html',
controller: 'sidebarCtrl'
}
}
})
})
Plunkr here
Edit
Can't figure out what i am doing wrong, no view is shown with this code:
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('root', {
url: '',
'abstract': true,
views: {
'sidebar#': {
templateUrl: '/App/Main/views/shared/sidebars/sidebar.cshtml',
controller: 'app.controllers.views.shared.sidebars.sidebar',
resolve: {
sidebarData: function (sidebarService) {
return sidebarService.getActions();
}
}
}
},
})
.state('root.home', {
url: "/",
views: {
'': {
templateUrl: '/App/Main/views/home/home.cshtml',
controller: 'app.controllers.views.home'
},
'content#root.home': {
templateUrl: '/App/Main/views/home/home-content.cshtml',
controller: 'app.controllers.views.home'
}
}
})
.state('root.about', {
url: "/customers",
views: {
'': {
templateUrl: '/App/Main/views/customers/customers.cshtml',
controller: 'app.controllers.views.customers'
},
'content#root.about': {
templateUrl: '/App/Main/views/customers/customers-content.cshtml',
controller: 'app.controllers.views.customers'
}
}
});
}]);
and here is how my home and customer views look like:
<div data-ui-view="sidebar">
Loading sidebar view.
</div>
<div data-ui-view="content">
Loading content view.
</div>
you could try to implement named and also an abstract view for your sidebar to reuse it among your other routes, also you can use the resolve parameter an return whatever dynamic data you need (from a service, resource, whatever), it could be something like this:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider) {
$stateProvider
.state('root',{
url: '',
abstract: true,
views: {
'sidebar#': {
templateUrl: 'sidebar.html',
controller: 'sidebarCtrl',
resolve:{
sidebarData:function(){
return [{
state: '/stateHere',
text: 'Need'
}, {
state: '/stateHere',
text: 'to'
}, {
state: '/stateHere',
text: 'fill'
}, {
state: '/stateHere',
text: 'this'
}, {
state: '/stateHere',
text: 'with'
}, {
state: '/stateHere',
text: 'dynamic'
}, {
state: '/stateHere',
text: 'data'
}];
}
}
}
})
.state('root.home', {
url: "/",
views: {
'content#': {
template: "This is the home.content"
}
}
})
.state('root.about', {
url: "/about",
views: {
'content#': {
template: "This is the about.content"
}
}
})
});
myapp.controller('sidebarCtrl', ['$scope','sidebarData'
function($scope,sidebarData) {
$scope.sidebarData= sidebarData,
}
]);
EDIT:
check this working example:
http://plnkr.co/edit/Nqwlkq1vGh5VTBid4sMv?p=preview