I am trying to render a child view. However it is not showing, here is a sample of code below. Most examples I see have the entire state template in a single template; however I have several views in different templates which composed each states template.
.state({
name: 'search',
url: '/x',
abstract: true,
views: {
'searchBar': {
templateUrl: "template/template.html",
controller: "searchBar"
}
}
})
.state({
name: 'search.final',
url: '^/details',
params: {
Data: "hello World"
},
views: {
'dashb': {
templateUrl: 'template/dashb.html'
},
'sidebar': {
templateUrl: 'template/sidebar.html'
},
}
and then my index.html is as follow
<div>
<div class="row">
<div class="col-lg-3">
<div ui-view="searchBar"></div>
<br>
<div ui-view="sidebar"></div>
<br>
</div>
<div class="col-lg-9" ui-view="dashb"></div>
</div>
</div>
I have in searchBartemplate
<ui-view></ui-view> for the child view to be inserted, meaning the sideBar and dashb
and in a controller I have this:
$state.go("search.final" , {Data:"Byee"})
However I am not rendering the child view.. any help appreciated. thanks
I figured it out. We need to append # at the end of the name of the view for the child view. :)
.state({
name: 'search',
url: '/x',
abstract: true,
views: {
'searchBar': {
templateUrl: "template/template.html",
controller: "searchBar"
}
}
})
.state({
name: 'search.final',
url: '^/details',
params: {
Data: "hello World"
},
views: {
'dashb#': {
templateUrl: 'template/dashb.html'
},
'sidebar#': {
templateUrl: 'template/sidebar.html'
},
}
Related
Trying to figure out multiple nested views concept and don't seem to understand what I'm doing wrong.
app.js routing config :
.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
'ngInject';
$stateProvider.state('home', {
url: '/',
templateUrl: 'tpls/views/welcome.html'
})
.state('feeds', {
url: '/feeds',
views: {
'main': {
templateUrl: 'tpls/views/main.html'
},
'siderbar#feeds' : {
templateUrl: 'tpls/views/sidebar.html',
controller: 'MyCtrl',
controllerAs : 'main'
},
'mainfeed#feeds': {
templateUrl: 'tpls/views/mainfeed.html',
controller: 'MyCtrl',
controllerAs : 'main'
}
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
HTMLs:
on index.html I have an an empty directive <div ui-view></div>
and this is main.html :
<div class="row">
<div class="col-md-4 no-float sidebar">
<div ui-view="sidebar"></div>
</div>
<div class="col-md-8 no-float">
<div ui-view="mainfeed"></div>
</div>
</div>
My views arent rendering. When in /feeds I only see the background.
Can you please help me spot the problem?
Went over the github documentation and still couldn't infer the solution.
Thanks!
Make sure that base page index.html should have named view main.
<div ui-view="main"></div>
If main named view isn't there then, you could have '' in your base view of feeds like below.
Code
.state('feeds', {
url: '/feeds',
views: {
//used blank to target unnamed `ui-view` placed on html
'': {
templateUrl: 'tpls/views/main.html'
},
'siderbar#feeds' : {
templateUrl: 'tpls/views/sidebar.html',
controller: 'MyCtrl',
controllerAs : 'main'
},
'mainfeed#feeds': {
templateUrl: 'tpls/views/mainfeed.html',
controller: 'MyCtrl',
controllerAs : 'main'
}
}
});
This is how the syntax look like for Nested views. Please cross check with your
Syntax.
Note : This one is third party so we used ui.router.stateHelper
angular.module('myApp', ['ui.router', 'ui.router.stateHelper'])
.config(function(stateHelperProvider){
stateHelperProvider.setNestedState({
name: 'root',
templateUrl: 'root.html',
children: [
{
name: 'contacts',
templateUrl: 'contacts.html',
children: [
{
name: 'list',
templateUrl: 'contacts.list.html'
}
]
},
{
name: 'products',
templateUrl: 'products.html',
children: [
{
name: 'list',
templateUrl: 'products.list.html'
}
]
}
]
});
});
visit this more details..https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
I have a template with multiple named, nested views:
template 1:
<body>
<div ui-view></div>
</body>
template 2:
<header></header>
<div ui-view="left"></div>
<div ui-view="canvas"></div>
<div ui-view="right"></div>
and I have the following config setup:
.state("metricDashboard", {
url: "/metric-dashboard",
css: { href: "core/metric-dashboard/style.css" },
views: {
"": {
templateUrl: "core/metric-dashboard/view.html",
controller: 'MetricDashboard',
},
"left#metricDashboard": {
templateUrl: "core/metric-dashboard/partials/left.html",
controller: "MetricDashboardLeft",
},
"canvas#metricDashboard": {
templateUrl: "core/metric-dashboard/partials/canvas.html",
controller: "MetricDashboardCanvas"
},
"right#metricDashboard": {
templateUrl: "core/metric-dashboard/partials/right.html",
controller: "MetricDashboardRight"
}
}
})
How would I go about changing an individual route? For example, If I wanted to change "left#metricDashboard", but leave the "canvas" and "right" routes alone. I cannot seem to find a syntax without creating a new state and explicitly declaring all the routes over again.
Ok I'm guessing you want to create another state that will change only one of the views not all of them.
Let's call it left and make it a child of metricsDashboard
.state("metricDashboard", {
url: "/metric-dashboard",
css: { href: "core/metric-dashboard/style.css" },
views: {
"": {
templateUrl: "core/metric-dashboard/view.html",
controller: 'MetricDashboard',
},
"left#metricDashboard": {
templateUrl: "core/metric-dashboard/partials/left.html",
controller: "MetricDashboardLeft",
},
"canvas#metricDashboard": {
templateUrl: "core/metric-dashboard/partials/canvas.html",
controller: "MetricDashboardCanvas"
},
"right#metricDashboard": {
templateUrl: "core/metric-dashboard/partials/right.html",
controller: "MetricDashboardRight"
}
}
})
.state("metricDashboard.left", {
url: "left",
views: {
"left#metricDashboard" : {
templateUrl: "some.html",
controller: "AwesomeCtl",
controllerAs: "awe"
}
}
})
Now when you enter that state only the left view will change the others will remain as defined in the parent state metricDashboard.
I'm try to use ui-router to manage nested views on a single page app.
Let's say I want to create a dashboard application with a common area and multiple views.
The main and the nested states are handled like this:
$stateProvider.state('home', {
url: '/',
template: 'MY HOME PAGE'
})
.state('login', {
url: '/login',
templateUrl: '/pages/login.html'
})
.state('registration', {
url: '/registration',
templateUrl: '/pages/registration.html'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: '/pages/dashboard/dashboard.html'
})
.state('dashboard.me', {
url: '/me',
templateUrl: '/pages/dashboard/me.html'
})
.state('dashboard.messages', {
url: '/messages',
templateUrl: '/pages/dashboard/messages.html'
})
.state('dashboard.friends', {
url: '/friends',
templateUrl: '/pages/dashboard/friends.html'
});
The dashboard HTML page is the following:
<div class="container" ng-controller="dashboardCtrl" ng-init="init()">
<h2>DASHBOARD</h2>
<ul>
<li><a ui-sref="dashboard.me">Me</a></li>
<li><a ui-sref="dashboard.messages">My Messages</a></li>
<li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>
<div ui-view></div>
The above HTML is also included inside an ui-view.
Everything works fine if I navigate my application using the anchors.
By the way if I try to go directly to myhost/dashboard/me or myhost/dashboard/friends (every path with two levels of nested views) the app doesn't work. I get an angular (unexpected token <) but I don't think it's relevant...
It seems like it's not able to resolve the first level of nested view.
The following images show the HTML obtained when the navigation is done using anchors:
and the HTML obtained when the page is called directly from the browser address link:
Any ideas? Thanks.
The problem is that angular is not loading, hence the error. The code looks correct to me though, unless you missed the closing tag for
<div class="container" ng-controller="dashboardCtrl" ng-init="init()">
?
JavaScript State Configurations :
$stateProvider.state('home', {
url: '/',
template: 'MY HOME PAGE'
})
.state('login', {
url: '/login',
templateUrl: '/pages/login.html'
})
.state('registration', {
url: '/registration',
templateUrl: '/pages/registration.html'
})
.state('dashboard', {
url: '/dashboard',
abstract: true,
parent: 'home',
templateUrl: '/pages/dashboard/dashboard.html'
})
.state('dashboard.me', {
url: '/me',
views: {
'#dashboard_view': {
templateUrl: '/pages/dashboard/me.html'
}
}
})
.state('dashboard.messages', {
url: '/messages',
views: {
'#dashboard_view': {
templateUrl: '/pages/dashboard/messages.html'
}
}
})
.state('dashboard.friends', {
url: '/friends',
views: {
'#dashboard_view': {
templateUrl: '/pages/dashboard/friends.html'
}
}
});
Dashboard HTML
<div class="container" ng-controller="dashboardCtrl" ng-init="init()">
<h2>DASHBOARD</h2>
<ul>
<li><a ui-sref="dashboard.me">Me</a></li>
<li><a ui-sref="dashboard.messages">My Messages</a></li>
<li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>
<div ui-view="dashboard_view"></div>
You can get more details:
Multiple Named Views
Nested States and Nested Views
I have the following structure in my angular application template structure:
partials/main.html
<body ui-view></body>
partials/club.html
<main role="main" ui-view></main>
<div class="modal" ui-view="modal"></div>
partials/club.members.html
<div class="md-view">
<div class="master-view">...</div>
<div class="detail-view" ui-view></div>
</div>
partials/club.members.view.html
<div class="card">...</div>
partials/club.members.assign.html
<span class="member_name" ng-bind="memberName"></span>
app.js:
$stateProvider.state('club', {
url: '/:club_id',
templateUrl: '/partials/club.html',
controller: 'ClubViewCtrl'
}).state('club.members', {
url: '/members',
templateUrl: '/partials/club.members.html',
controller: 'MemberListCtrl'
}).state('club.members.view', {
url: '/:member_id',
templateUrl: '/partials/club.members.html',
controller: 'MemberViewCtrl'
}).state('club.members.view.assign', {
url: '/assign',
views: {
'modal': {
templateUrl: '/partials/club.members.assign.html',
controller: 'MemberAssignCtrl'
}
}
});
Currently, everything works till club.members.view:
/my-club/members/1
However, when I got to club.members.view.assign:
/my-club/members/1/assign
For some reason this doesn't even call anything inside MemberAssignCtrl. Can someone shed a light on this issue for me?
If you are referencing a view which is not in the same namespace as your current view, you will have to use absolute names.
In your case change
views: {
'modal': {
templateUrl: '/partials/club.members.assign.html',
controller: 'MemberAssignCtrl'
}
}
To:
views: {
'modal#club': {
templateUrl: '/partials/club.members.assign.html',
controller: 'MemberAssignCtrl'
}
}
I've seen a few questions like this, so forgive me if I've overlooked a crucial detail from them.
When I load http://localhost:8000/characters/#/mages/detail/3 I get redirected to my 'otherwise' url: $urlRouterProvider.otherwise("/users");
But my state provider (if I've understood this correctly) should load the correct page:
$stateProvider
.state('users', {
url: "/users",
templateUrl: DjangoProperties.STATIC_URL + "partials/users.html"
})
.state('users.list', {
url: "/list",
templateUrl: DjangoProperties.STATIC_URL + "partials/users.list.html",
controller: 'UserListCtrl'
})
.state('users.detail', {
url: "/detail/{userID:int}",
templateUrl: DjangoProperties.STATIC_URL + "partials/users.detail.html",
controller: 'UserDetailCtrl'
})
.state('mages', {
url: "/mages",
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
url: "/list",
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
controller: 'MageCtrl'
})
.state('mages.detail', {
url: "/detail/{mageID:int}",
views:{
"#mage.detail": {
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.detail.html",
controller: 'MageCtrl',
},
"characteristics#mage.detail": {
templateUrl: DjangoProperties.STATIC_URL + "common_partials/characteristics.html"
},
"attributes#mage.detail": {
templateUrl: DjangoProperties.STATIC_URL + "common_partials/attributes.html"
},
"skills#mage.detail": {
templateUrl: DjangoProperties.STATIC_URL + "common_partials/skills.html"
},
"spells#mage.detail": {
templateUrl: DjangoProperties.STATIC_URL + "partials/spells.html"
},
}
});
}]);
Here is my mages.html:
<h1>Mages</h1>
<hr/>
<a ui-sref="mages.list">Show List</a>
<div ui-view></div>
and my mages.detail.html
<h4>{{mage.name}}</h4>
<div ui-view>
<div ui-view="characteristics"></div>
<div ui-view="attributes"></div>
<div ui-view="skills"></div>
<div ui-view="spells"></div>
</div>
None of these are loaded, just the default 'list' page.
I feel I've gotten muddled over my view names, but I can't figure out what to do to fix them?
There is another working plunker
In case we want to have only two levels
mages
mages.list
mages.deatil
We have to adjust the state def like this:
.state('mages', {
url: "/mages",
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
url: "/list",
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
controller: 'MageCtrl'
})
.state('mages.detail', {
url: "/detail/{mageID:int}",
views:{
"": {
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.detail.html",
controller: 'MageCtrl',
},
"state#mages.detail" : {
templateUrl: "tpl.html",
},
"characteristics#mages.detail": {
//templateUrl: DjangoProperties.STATIC_URL + "common_partials/characteristics.html"
template: "common_partials/characteristics.html",
},
"attributes#mages.detail": {
//templateUrl: DjangoProperties.STATIC_URL + "common_partials/attributes.html"
template: "common_partials/attributes.html"
},
"skills#mages.detail": {
//templateUrl: DjangoProperties.STATIC_URL + "common_partials/skills.html"
template: "common_partials/skills.html"
},
"spells#mages.detail": {
//templateUrl: DjangoProperties.STATIC_URL + "partials/spells.html"
template: "partials/spells.html"
},
}
});
And the mages.list.html will be now like this (no place for child detail)
<h3>The mages list</h3>
<h4>{{mage.name}}</h4>
<li>mages/detail/1
<li>mages/detail/2
<li>mages/detail/3
<li>mages/detail/4
And the mages.detail.html wil be:
<div >
<a ui-sref="mages.list">back to list</a>
<div ui-view="state"></div>
<div ui-view="characteristics"></div>
<div ui-view="attributes"></div>
<div ui-view="skills"></div>
<div ui-view="spells"></div>
</div>
check it here
I tried to adjust your settings, and show you one possible way.
There is a working plunker
So, these would be new states mages:
.state('mages', {
url: "/mages",
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
url: "/list",
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
controller: 'MageCtrl'
})
where detail is child of the list
.state('mages.list.detail', {
url: "/detail/{mageID:int}",
views:{
/*
"#mage.detail": {
templateUrl: DjangoProperties.STATIC_URL + "partials/mages.detail.html",
controller: 'MageCtrl',
},
*/
"" : {
templateUrl: "tpl.html",
},
"characteristics#mages.list": {
//templateUrl: DjangoProperties.STATIC_URL + "common_partials/characteristics.html"
template: "common_partials/characteristics.html",
},
"attributes": {
//templateUrl: DjangoProperties.STATIC_URL + "common_partials/attributes.html"
template: "common_partials/attributes.html"
},
"skills": {
//templateUrl: DjangoProperties.STATIC_URL + "common_partials/skills.html"
template: "common_partials/skills.html"
},
"spells": {
//templateUrl: DjangoProperties.STATIC_URL + "partials/spells.html"
template: "partials/spells.html"
},
}
});
And these are two basic tmplates
mages.html (as it was, no change):
<h1>Mages</h1>
<hr/>
<a ui-sref="mages.list">Show List</a>
<div ui-view></div>
The mages.list.html
<h3>The mages list</h3>
<h4>{{mage.name}}</h4>
<li>mages/list/detail/1
<li>mages/list/detail/2
<li>mages/list/detail/3
<li>mages/list/detail/4
<hr />
<div >
<div ui-view=""></div>
<div ui-view="characteristics"></div>
<div ui-view="attributes"></div>
<div ui-view="skills"></div>
<div ui-view="spells"></div>
</div>
It is now containing the links to detail and also contains the anchor for detail views
I would like to show how the view naming is working. There is a working plunker
So, let's have this index.html:
<H1><ui-view name="title" /></H1>
<ul>
<li><a ui-sref="parent">parent</a>
<li><a ui-sref="parent.child">parent.child</a>
</ul>
<div ui-view=""></div>
There is one unnamed view, and one named (title). We have two states. and both will be targeting this 'title' view:
.state('parent', {
...
views : {
...
"title" : {
template : "parent is setting title inside of index.html"
}
}
})
.state('parent.child', {
...
views : {
...
"title#" : {
template : "CHILD is setting title inside of index.html"
},
}
})
What we can see, is that parent calls the view "title" (relative name). The reason is, that index.html (root view) is its parent. The absolute name would work as well (and in fact is created behind the scene): "title#"
On the other hand, child must use absolute naming, because it targets view which is not part of the parent... it is grand-parent (root). So the view name is: "title#"
Now, child template, injected into parent is:
<div>
<h4>Child</h4>
<hr />
View A:
<div ui-view="viewA" ></div>
View B:
<div ui-view="viewB" ></div>
</div>
and that means that child state definition now will be:
.state('parent.child', {
...
views : {
"" : {
templateUrl: 'tpl.child.html',
controller: 'ChildCtrl',
},
"viewA#parent.child" : {
template : "<h5>child content of the view A</h5>"
},
"viewB#parent.child" : {
template : "<h5>child content of the view B</h5>"
}
... // title into the root
}
})
So firstly we injected child template into parent unnamed view "": {...
And next we inject some views (existing inside of this child) with absolute naming === using the child full state name "viewB#parent.child"
Check it in action here
Documentation:
Multiple Named Views
...
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.