I have a $state configured as below:
.state('app.subjects.current', {
abstract: true,
url: "/:subjectId",
template: "<div ui-view />",
ncyBreadcrumb: {
skip: true
}
})
.state('app.subjects.current.home', {
url: '/home',
templateUrl: "assets/src/subject/subjectHome.html",
resolve: loadSequence('subjectHomeCtrl'),
ncyBreadcrumb: {
label: 'View'
},
string: 'sidebar.nav.pages.SUBJECTHOME'
})
I transit to this state using $state.go('app.subjects.current.home', {subjectId: '999'});
The url appears in the address bar as “http://localhost:12253/#/app/subjects//home?subjectId=999”. It should have been actually “http://localhost:12253/#/app/subjects/999/home”.
Thanks for any help.
I created working example with exactly the same mapping - to show you that your approach is working
So, these are the states
.state('app', {
template: '<div ui-view=""></div>',
})
.state('app.subjects', {
template: '<div ui-view=""></div>',
})
.state('app.subjects.current', {
abstract: true,
url: "/:subjectId",
template: "<div ui-view />",
ncyBreadcrumb: {
skip: true
}
})
.state('app.subjects.current.home', {
url: '/home',
templateUrl: "assets/src/subject/subjectHome.html",
//resolve: loadSequence('subjectHomeCtrl'),
ncyBreadcrumb: {
label: 'View'
},
string: 'sidebar.nav.pages.SUBJECTHOME'
})
And this way we can call them
// $state.go
<button ng-click="$state.go('app.subjects.current.home', {subjectId: '999'});">
// ui-sref
<a ui-sref="app.subjects.current.home({subjectId: '888'})">
Check it here. It should help to find out what is different in your app...
Related
It doesn't work with the last one where there are three states. How do I make it work?
There is no error. The page itself doesn't load (It`s like I press link and nothing changes (except url in browser address line) )
.state('parent', {
url: '/home',
abstract: true,
template: '<ui-view/>'
})
.state('parent.index', {
url: '/index',
template: '<h1>test1</h1>'
})
.state('parent.contact', {
url: '/contact',
template: '<h1>test2</h1>'
})
.state('parent.contact.test', {
url: '/test',
template: '<h1>test3</h1>'
})
Try for this,
To be short, contact states are children of parentstate, so they can't have access of Test view, because it's related to test state.
So you need to write :
.state('parent.contact.test', {
url: "/test",
views: {
'Test#test' :{
templateUrl: "test.html"
}
}
})
I want use nested views in AngularJS 1.6, with UI-router.
I have 3 states, the first is an abstract view named settings, and the second and the third are two views.
.state('settings', {
url: '/settings',
abstract: true,
template: '<ui-view />'
})
.state('settings.account', {
url: '/account',
templateUrl: './partials/settings/account.html',
resolve: {
loginRequired: loginRequired
}
})
.state('settings.password', {
url: '/password',
templateUrl: './partials/settings/password.html',
resolve: {
loginRequired: loginRequired
}
})
The problem is that nothing appears when I go to settings/account or settings/password...
I am building a webapp that contains some elements that appear on every "page" and one area where the content changes according to which "page" is navigated to. To achieve this,, I'm using ui-router with multiple named views and nested states. My problem comes when I try to nest a state in one of the named views of its parent. I'm thinking I'm not targeting the named view in the parent correctly because nothing in the nested state is displayed.
$stateProvider
.state('stc', {
abstract: true,
url: '/',
views: {
'shell': {
template: '<div ui-view="topbar"></div>' +
'<div ui-view="navbar"></div>' +
'<div ui-view="content"></div>'
}
}
})
.state('stc.sections', {
url: '',
views: {
'topbar#stc': {
template: "<p>top bar</p>"
},
'navbar#stc': {
template: "<p>nav bar</p>"
},
'content#stc': {
template: '<div ui-view></div>'
}
}
})
.state('stc.sections.homepage', {
url: '/',
template: '<h1>Nested Home Page Content</h1>'
});
I'm can't figure out how to target the parent's named view: content#stc so that i can nest dynamic content based on the url. In this case, I'm trying to load home page content.
Is there some special notation required to target a named view?
I ended up removing the line: url: '' from the stc.sections configuration and replaced url: '/' with url: '' in the `state.sections.homepage config. I'm now able to add routes for sibling pages using something like:
.state('stc.sections.login', {
url: 'login',
controller: 'main.common.login as loginCtrl',
template: require('./views/login.html')
})
and access them in a browser with URLs like
mydomain.com/
mydomain.com/login
mydomain.com/signup
etc
Modified Code
$stateProvider
.state('stc', {
abstract: true,
url: '/',
views: {
'shell': {
template: '<div ui-view="topbar"></div>' +
'<div ui-view="navbar"></div>' +
'<div ui-view="content"></div>'
}
}
})
.state('stc.sections', {
views: {
'topbar#stc': {
template: "<p>top bar</p>"
},
'navbar#stc': {
template: "<p>nav bar</p>"
},
'content#stc': {
template: '<div ui-view></div>'
}
}
})
.state('stc.sections.homepage', {
url: '',
template: '<h1>Nested Home Page Content</h1>'
})
.state('stc.sections.login', {
url: 'login',
template: '<h1>Login Here</h1>'
})
I am currently using <div ng-include src="'js/app/partials/layout/header.html'"></div> just above my <div ui-view> in my index.blade.php file while using Angular with Laravel.
I have looked into parent state inheritance in ui.router but it seems to not work, and feels complicated / or perhaps an overkill for layouts. I just want to inject a header and a footer.
This is what I was doing earlier in my attempt to use ui.router states to create a layout injection system. As you can see below.
<div ui-view="header"></div>
<div ui-view></div>
.state('root', {
url: '/',
abstract: true,
views: {
'header': {
templateUrl: 'js/app/partials/header.html'
}
},
data: {
requireLogin: false
}
})
.state('root.login', {
url: '/login',
templateUrl: 'js/app/partials/login.html',
controller: 'LoginCtrl',
data: {
requireLogin: false
}
})
You need to change your structure of your html, by making named views & those will be specified with templateUrl & controller from views option of the state.
Basically inside your home.html you would have three named views such as header, content & footer, root state is setting header & footer templates with controlllers. Then your child state login will set the content view by using absolute state name using content#root in this #root because content named view has been loaded inside root state.
Markup
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
Code
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('root', {
abstract: true,
url: '/',
//templateUrl: 'js/app/partials/home.html',//remove this
views: {
'': {
templateUrl: 'js/app/partials/home.html' //add it here
},
'header': {
templateUrl: 'js/app/partials/header.html'
},
'footer': {
templateUrl: 'js/app/partials/header.html'
}
},
data: {
requireLogin: false
}
})
.state('root.login', {
url: 'login',
views: {
'content#root': {
templateUrl: 'js/app/partials/login.html',
controller: 'LoginCtrl',
},
},
data: {
requireLogin: false
}
})
});
Working Plunkr
I Think you use this.
`.state('header', {
abstract : true,
templateUrl: 'js/app/partials/header.html'
})
.state('home', {
url: '/',
templateUrl: 'js/app/partials/home.html',
parent : 'header',
data: {
requireLogin: false
}
})
.state('login', {
url: '/login',
parent : 'header',
templateUrl: 'js/app/partials/login.html',
controller: 'LoginCtrl',
data: {
requireLogin: false
}
})`
I am using ui-router and my states are:
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
abstract: true
}).state('app.dashboard', {
url: "/dashboard",
templateUrl: "assets/views/pages_timeline.html",
title: 'Dashboard',
controller: 'TimelineCtrl'
}).state('app.user.services', {
url: "/user/services",
templateUrl: "assets/views/user_services.html",
title: 'Service Integrations'
})
.state('login', {
url: '/login',
template: '<div ui-view class="fade-in-right-big smooth"></div>',
abstract: true
}).state('login.signin', {
url: '/signin',
templateUrl: "assets/views/login_login.html",
controller: 'AuthenticationCtrl'
}).state('login.forgot', {
url: '/forgot',
templateUrl: "assets/views/login_forgot.html"
}).state('login.registration', {
url: '/registration',
templateUrl: "assets/views/login_registration.html"
})
I am currently in the app.dashboard state, and I have a link:
<a ui-sref="app.user.services">
Service Integrations
</a>
However, when I click it, I get an error: Error: Could not resolve 'app.user.services' from state 'app'
What am I doing wrong?
The dot . notation is used to specify a parent relationship in ui-router, so the parent of state dashboard is state app.
With app.user.services there is no parent state app.user. So you need to define it (you can make it abstract):
.state("app.user", {
abstract: true,
template: "<div ui-view></div>"
})