I've looked at countless examples of how to set this up. Many right here at SO. But nothing is working in my case. It's a very simple set of two views, one nested below the first. Second ui-view never loads...
Here is the simple index.html...
<body ng-app="d6Games">
<div ui-view="home"></div>
</body>
Here is the simple child view, this is inside home.html template...
<div class="d6body bilbo">
<div ui-view="content"></div>
</div>
Here are the simple states...
.state('home', {
url: '/home',
views: {
'home': {
templateUrl: '/views/home.html'
}
}
})
.state('home.intro', {
url: '/intro',
views: {
'content': {
templateUrl: '/views/game-intro.html'
}
}
})
The first /views/home.html template loads fine, as expected, however the child /views/game-intro.html never loads. It's just html and text and it's in the same folder as home.html.
What am I missing?
There is a working plunker
I just changed the template path (removed the leading '/'), and all is working (however this was required for plunker, not sure about your environment and path settings):
$stateProvider
.state('home', {
url: '/home',
views: {
'home': {
templateUrl: 'views/home.html'
}
}
})
.state('home.intro', {
url: '/intro',
views: {
'content': {
templateUrl: 'views/game-intro.html'
}
}
})
}
Check that in action here
Related
I'm trying to set up a fairly complex page design with multiple ui-views. I've extracted it to a plunker (http://plnkr.co/edit/DwridY).
I have a main ui-view with several possible templates being loaded. Several of these templates have multiple ui-views of their own, for example:
<h1>Workflows</h1>
<div class="well">
<div ui-view="workflow.list"></div>
</div>
<div class="well">
<div ui-view="workflow.details"></div>
</div>
The angular config lists the states like this:
.state('tasks', {
url: "/tasks",
views: {
"mainView": {
templateUrl: "tasks.html",
controller: "TaskController"
}
}
})
.state("task.list", {
url: "/taskList",
views: {
"task.list": {templateUrl: "task.list.html"},
}
})
.state("workflow", {
url: "/workflows",
views: {
"mainView": {
templateUrl: "workflow.html",
controller: "WorkflowController"
}
}
})
.state("workflow.list", {
url: "/workflowsList",
views: {
"workflow.list": {templateUrl: "workflow.list.html"},
"workflow.details": {templateUrl: "workflow.details.html"}
}
});
The problem is that it works with the workflow state and it's sub-views but not the task state.
When I call:
function TaskController($scope, $state) {
$state.transitionTo("task.list");
}
I get thrown an error:
No such state 'task.list'.
Can anyone see where I'm going wrong?
In general - if there is a . (dot) in the state name - UI-Router expects that it means:
before last dot - parent name (parents if more dots)
after last dot - current state name
so, what we are experiencing above with "task.list" is either
missing state "task" or
declaration "tasks.list" (the parent will be existing "tasks" instead of "task")
Here is the updated and working plunker, where I decided to use tasks as parent:
.state('tasks', {
url: "/tasks",
views: {
"mainView": {
templateUrl: "tasks.html",
controller: "TaskController"
}
}
})
//.state("task.list", {
.state("tasks.list", { // here we inherit from "tasks" not "task"
url: "/taskList",
views: {
"task.list": {templateUrl: "task.list.html"},
}
})
I have a basic Index.html file which following structure:
<body class="{{$state.current.name.replace('.','-')}}">
<div ui-view>
<div ng-include src="'partials/menu.html'"></div>
<!-- <div ng-menu class="ui top blue sidebar menu active"></div> -->
<div class="view-height-100"></div>
</div>
...
</body>
When I am in the login state, it's working very well:
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'partials/login-area.html',
controller: 'LoginController',
});
But, when I am routing to the user.management state, nothing gets shown (but Chrome is loading the template, so I can access the scope and the .html file is there):
$stateProvider
.state('user', {
url: '/:buildingName',
controller: 'CurrentBuildingController',
data: {
access: ['user']
}
})
.state('user.management', {
url: '/management',
templateUrl: '/views/management.html',
controller: 'ManagementController'
})
Can someone explain me why?
Parent state simply must have target for its child (unless we use absolute naming to target some super parent, but it is another approach)
.state('user', {
url: '/:buildingName',
template: "<div ui-view></div>",
controller: 'CurrentBuildingController',
data: {
access: ['user']
}
})
see that we now have template: "<div ui-view></div>", which will serve as a view target for any child state 'user.xxx'
Check also:
AngularJS UI-Router : Abstract state + child states not working
EXTEND - let child to target the index.html
We can use absolute naming and child will then be injected directly into index.html. There is a working plunker (by intention parent won't load, it does not have any template)
.state('parent', {
url: "/parent",
//templateUrl: 'tpl.html',
})
.state('parent.child', {
url: "/child",
views: {
'#': {
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
}
}
})
Check this for more info:
Angularjs ui-router not reaching child controller
I have an app which has three views (ui-view using Angular ui-router):
header, sidebar and content.
my index.html looks like this: (I omitted the actual classes for clearness)
<body>
<div ui-view="header" class="..."></div>
<div class="page-container">
<div ui-view="sidebar" class="..."></div>
<div class="page-content">
<div ui-view="content"></div>
</div>
</div>
</div>
</body>
This pattern works well with pages that have the header and sidebar.
But I have some pages that I don't want to display the header and sidebar, for example a login page that should fit on all page.
For this kind of pages I need something like:
ui-view which should look like this:
<body>
<div ui-view="content"></div>
</body>
So it won't be nested and under the other views <div>'s and affected by their classes.
I have some solutions in mind, but none of them gave me a good enough UX.
I tried adding <ng hide> to the header and sidebar depending on the state. It worked but there was annoying flickering (that I couldn't eliminate with ng-cloak for some reason..)
To make things more clear, here is an example of two states , one is "one pager" and the other is full page with header and sidebar:
.state('Login', {
url: '/login',
views: {
'content': {
templateUrl: './../templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('Users', {
url: '/users',
views: {
'header': {
templateUrl: './../templates/header.html',
controller: 'HeaderCtrl'
},
'sidebar': {
templateUrl: './../templates/sidebar.html',
controller: 'SidebarCtrl'
},
'content': {
templateUrl: './../templates/users.html',
controller: 'UsersCtrl'
}
}
})
I also think using nested views, but not sure whether this is the right approach.
Maybe try using nested states, ie:
.state('app', {
url: '/app',
abstract: true,
templateUrl: './../templates/treeViewTemplate.html'
})
.state('login', {
url: '/login',
templateUrl: './../templates/login.html',
controller: 'LoginCtrl'
})
.state('app.users', {
url: '/users',
views: {
'header': {
templateUrl: './../templates/header.html',
controller: 'HeaderCtrl'
},
'sidebar': {
templateUrl: './../templates/sidebar.html',
controller: 'SidebarCtrl'
},
'content': {
templateUrl: './../templates/users.html',
controller: 'UsersCtrl'
}
}
})
In your root abstract state you define a template for 3 view-layout. login state will instead take whole display.
I am trying to create a page where I have a fixed header and changing content, but the fixed header depends on the state route, I would also like the header and the content to have different controllers and templates.
For example for the URL
/user/:userId/profile
I would like the header to display the user name, so it needs to know the value of :userId.
I can achieve this by used named views and ui-router, but here us code duplication that I want to avoid
$stateProvider
.state('profile', {
url: '/user/:user_id/profile',
views: {
'header': {
templateUrl: 'user-header.html',
controller: 'HeaderController'
},
'info': {
templateUrl: 'profile.html',
controller: 'ProfileController'
}
}
})
.state('friends', {
url: '/user/:user_id/friends',
views: {
'header': {
templateUrl: 'user-header.html',
controller: 'HeaderController'
},
'info': {
templateUrl: 'friends.html',
controller: 'FriendsController'
}
}
})
<section id="startup-header" ui-view="header">
</section>
<section ui-view="info">
</section>
How can I define the header once, but have the content defined per content type.
I hope I formulate the questions in a way it's clear what I want to achieve.
Ok. Let's try this:
You can create a parent page with your header for user's profile that will be contain nested child pages:
<div id="header">
<a ui-sref="userPage.profile">Profile</a>
<a ui-sref="userPage.friends">Friends</a>
......
</div>
<div ui-view>
</div>
Read more about ui-sref ditective here
And in $stateProvider something like:
$stateProvider.state('userPage.profile', {
url: '/user/:user_id/profile',
templateUrl: 'profile.html',
controller: 'ProfileController'
}
}).state('friends', {
url: '/user/:user_id/friends',
templateUrl: 'friends.html',
controller: 'FriendsController'
}
})
I'm working with some nested states in angularjs and everything goes well till a part of the URL is dynamic.
This works well
.state('company', {
url: "/company",
templateUrl: 'views/company/index.html'
})
.state('company.list', {
url: "/",
views: {
"c_list": {
templateUrl: 'views/company/list.html',
controller: 'CompanyCtrl'
}
}
})
.state('company.view', {
url: "/:company_id",
views: {
"c_info": {
templateUrl: 'views/company/view.html',
controller: 'CompanyCtrl'
},
"c_menu": {
templateUrl: 'views/company/menu.html',
controller: 'MenuCtrl'
}
}
})
But when it comes to extend the company.view, as it has a dynamic parameter, it fails.
.state('company.view.user', {
url: "/user",
views: {
"c_nested":{
templateUrl: 'views/user/index.html',
}
}
})
.state('company.view.user.list', {
url: "/",
views: {
"u_list": {
templateUrl: 'views/user/list.html',
controller: 'UserCtrl'
}
}
})
If I extend user from company instead of company.view the nested views are shown but if I extend from company.view only the main content is shown, not the nested one.
For company/index.html I've got:
<div ui-view="c_list"></div>
<div ui-view="c_info"></div>
<div ui-view="c_menu"></div>
<div ui-view="c_nested"></div>
For user/index.html I've got:
<div ui-view="u_list"></div>
<div ui-view="u_info"></div>
<div ui-view="u_menu"></div>
<div ui-view="u_nested"></div>
Presume all other html are as simple as
<div>hi</div>
The URLs I use are:
/company [works]
/company/92 [works]
/company/92/user [no way]
What should I do to make this work with dynamic params?
I have not solved this but came around it:
.state('company.user.view', {
url: '/{user_id:[0-9]{1,8}}',
...
})
.state('company.user.edit', {
url: '/{user_id:[0-9]{1,8}}/edit',
...
})
I have to specify an id in every single url