I have a layout with header, footer, sidebar and content that should be used for some pages. All pages should be includes inside the content section.
<div class="wrapper">
<header class="main-header" ui-view="header"></header>
<aside class="main-sidebar" ui-view="left"></aside>
<div class="content-wrapper" ui-view></div><!-- all pages should be included here -->
<footer class="main-footer" ui-view="footer"></footer>
<aside class="control-sidebar control-sidebar-dark" ui-view="right"></aside>
<div class="control-sidebar-bg"></div>
</div>
My routes:
.state('main', {
views: {
'left': {
templateUrl: 'partials/design/left.html'
},
'header': {
templateUrl: 'partials/design/header.html'
},
'right': {
templateUrl: 'partials/design/right.html'
},
'footer': {
templateUrl: 'partials/design/footer.html'
}
},
url: '/'
})
.state('info', {
url: '/info',
templateUrl: "partials/info.html",
})
.state('foobar', {
url: '/foobar',
templateUrl: "partials/foobar.html",
})
So info and foobar should be childrens of main, but I don't know how to do this.
Instead of
.state('info', {
url: '/info',
templateUrl: "partials/info.html",
})
.state('foobar', {
url: '/foobar',
templateUrl: "partials/foobar.html",
})
Do this:
.state('main.info', {
url: '/info',
templateUrl: "partials/info.html",
})
.state('main.foobar', {
url: '/foobar',
templateUrl: "partials/foobar.html",
})
I found out that it is also possible with ng-include
<div class="wrapper">
<header class="main-header" ng-include src="'partials/design/header.html'"></header>
<aside class="main-sidebar" ng-include src="'partials/design/left.html'"></aside>
<div class="content-wrapper"><ui-view></ui-view></div><!-- all pages should be included here -->
<footer class="main-footer"ng-include src="'partials/design/footer.html'"></footer>
<aside class="control-sidebar control-sidebar-dark" ng-include src="'partials/design/right.html'"></aside>
<div class="control-sidebar-bg"></div>
</div>
So everyone who has this template as parent will be shown in the <ui-view></ui-view>section.
Related
I have ui-view in index.html and I have a page for info and there I want to put second ui-view with 4 links.
In my index.html
<body ng-app="myApp">
<div ui-view></div>
</body>
This is my info. I want to open default in info.html a page info-number.html.
<div class="col-sm-8" style="border:1px solid; min-height:
<h1>Some text</h1>
<div ui-sref></div>
</div>
This is my app.
myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html"
})
.state("info", {
url: "/info",
templateUrl: "info.html",
})
.state("info-number", {
abstract: true,
parent: "info",
url: "/info-number",
templateUrl: "info-number.html"
})
.state("info-about", {
parent: "info",
url: "/info-about",
templateUrl: "info-about.html"
})
.state("info-where", {
parent: "info",
url: "/info-where",
templateUrl: "info-where.html"
})
}
]);
Schema of my page for info
Thanks for help.
You don't need put info-number to be abstract even if its default.
Your abstract view should be info. So when user clicks on "info" link (button) you can just redirect him to info/info-number as default.
I would write it as:
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html"
})
.state("info", {
url: "/info",
abstract: true,
templateUrl: "info.html",
})
.state("info.info-number", {
url: "/info-number",
templateUrl: "info-number.html"
})
.state("info.info-about", {
url: "/info-about",
templateUrl: "info-about.html"
})
.state("info.info-where", {
url: "/info-where",
templateUrl: "info-where.html"
})
The info.html has structure similar to:
<div>
<h1>Some Text</h1>
<div ui-view></div>
</div>
I'm working on something and I want to redirect the content to a page in angularjs, but I face the following error:
angular.js:12477 Error: Could not resolve 'dashboard.home' from state 'dashboard'
My code:
.state(
'dashboard.home',
{
url: '/home',
views: {
"content#main": {
templateUrl: '/home'
// controller: 'HomeController',
}
}
}
)
.state(
'dashboard',
{
url: '',
parent: "main",
views: {
"sidebar#main": {
templateUrl: "/sidebar/view"
}
}
})
sidebar.html.twig
<li>
<a ui-sref="dashboard.home">Home <span class="sr-only">(current)</span></a>
</li>
The state 'dashboard.home' exists, why the error appears?
I think you're probably trynig to use views to split header/footer/siderbar from the content which is the only thing to change according states.
I don't have the answer of what exactly is your problem but I may have an answer to a more broader question that you might are trying to solve :
How to mix views for header/content/footer and nested stated for content navigation ?
Solution : use views only for header/content/footer, use '#' to insert direct child by using the default view (no name) and use grand child as you would do normally without views
// root state
.state('home', {
url:'/home',
views:{
'header':{
templateUrl: 'template/header.html',
controller:'HeaderCtrl'
},'sidepanel':{
templateUrl: 'template/sidepanel.html',
controller:'SidePanelCtrl',
},'footer':{
templateUrl: 'template/footer.html'
}
},
'abstract':false
})
//direct child
.state('home.main', {
url:'/main',
// need that for every direct child of home
views:{
'#':{templateUrl: 'template/main.html',
controller: 'MainCtrl'
}
}
})
//grandchild
.state('home.main.child1', {
url:'/child1',
templateUrl: 'template/child1.html',
controller: 'Child1Ctrl'
// NO view anymore for grand child!!
}
})
And the Relevant HTML
<section id="header">
<!--- not container -->
<div data-ui-view="header"></div>
</section>
<section id="content">
<div class="row clearfix">
<div id="mySidebar>
<div data-ui-view="sidepanel"></div>
</div>
<div id="myContent">
<div data-ui-view></div>
</div>
</div>
</section>
<section id="footer">
<div data-ui-view="footer"></div>
</section>
The templateUrl expects the relative path of the html template that you want to render.
.state(
'dashboard.home',
{
url: '/home',
views: {
"content#main": {
templateUrl: 'home.html'
}
}
}).state(
'dashboard',
{
url: '',
parent: "main",
views: {
"sidebar#main": {
templateUrl: "sidebar/view.html"
}
}
})
I have next view.html for example:
<div>
<h1> Block 1 </h1>
<div>
<h1> Block 2 </h1>
</div>
</div>
in js file
$stateProvider
.state('blocks', {
url: '/blocks',
template: require('./view.html'),
controller: 'MainController',
controllerAs: 'ctrl'
})
And it works. But i want to move "Block 2" to template. And i created ./units/block2.html
view.html:
<div>
<h1> Block 1 </h1>
<div ui-view="block2"/>
</div
js file:
$stateProvider
.state('blocks', {
url: '/blocks',
template: require('./view.html'),
controller: 'MainController',
controllerAs: 'ctrl'
})
.state('blocks.block2', {
views: {
'block2#blocks.block2': {
templateUrl: "./units/block2.html"
}
}
})
}
What is wrong? I try next ways - and i can not see content from block2:
template: require('./units/block2.html')
'block2': {
template: require('./units/block2.html')
I'm creating an application and in the dashboard I have the header and the sidebar that will be in every single page of the dashboard, and for that reason I created partial files for them.
The problem is that if I access /dashboard/users I get the same thing that is in the /dashboard, I was wondering how to keep the header and sidebar but change the main content to the /views/dashboard/users.html file?
I created the states like this:
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.state('dashboard', {
url: '/dashboard',
views: {
'': {
templateUrl: 'views/dashboard.html'
},
'header#dashboard': {
templateUrl: 'views/dashboard/partials/header.html'
},
'sidebar#dashboard': {
templateUrl: 'views/dashboard/partials/sidebar.html'
}
},
controller: 'DashboardCtrl',
controllerAs: 'dashboard'
})
.state('dashboard.users', {
url: '/users',
views: {
'': {
templateUrl: 'views/dashboard/users.html'
}
},
controller: 'DashboardUsersCtrl',
controllerAs: 'dashboard/users'
});
});
/main.html
<p>main</p>
/index.html
<body ng-app="freelancerApp">
<div ui-view></div>
</body>
/views/dashboard.html
<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>
/views/dashboard/users.html
<div ui-view="header"></div>
<p>users</p>
<div ui-view="sidebar"></div>
/views/dashboard/partials/header.html
</p>header</p>
/views/dashboard/partials/sidebar.html
<p>sidebar</p>
I would say, that your parent template, is just missing place for a child (unnamed view target)
//views/dashboard.html
<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>
should be
//views/dashboard.html
<div ui-view="header"></div>
<div ui-view="">
// we can keep it or remove the content
<p>dashboard</p> // just visible in parent
</div>
<div ui-view="sidebar"></div>
Now, we have a target <div ui-view=""></div> for an unnamed child view, defined as views :{ '': {...}} in a .state('dashboard.users'...
Add abstract:true in this snippet
.state('dashboard', {
url: '/dashboard',
abstract: true,
views: {
'': {
templateUrl: 'views/dashboard.html'
},
'header#dashboard': {
templateUrl: 'views/dashboard/partials/header.html'
},
'sidebar#dashboard': {
templateUrl: 'views/dashboard/partials/sidebar.html'
}
},
controller: 'DashboardCtrl',
controllerAs: 'dashboard'
})
In my app I have the root state named "app":
.state('app', {
abstract: true,
views: {
'app': {
templateUrl: 'prebuilt/views/pages/index.html',
controller: 'MainController'
}
}
})
and its child "app.pages"
.state('app.pages', {
abstract: true,
views: {
'custom#app': {
templateUrl: 'prebuilt/views/templates/custom-styles.html'
},
'header#app': {
templateUrl: 'prebuilt/views/layout/header.html'
},
'topBar#app': {
templateUrl: 'prebuilt/views/layout/topbar.html'
},
'sideBar#app': {
templateUrl: 'prebuilt/views/layout/sidebar.html'
},
'infoBar#app': {
templateUrl: 'prebuilt/views/layout/infobar.html'
},
'contentSide#app': {
templateUrl: 'prebuilt/views/layout/contentside.html'
}
}
})
And grand child "app.pages.dashboard"
.state('app.pages.dashboard', {
url: '/',
views: {
'content#app.pages': {
templateUrl: 'prebuilt/views/index.html',
controller: 'DashboardController'
}
},
resolve: {
loadCalendar: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'prebuilt/bower_components/fullcalendar/fullcalendar.js',
]);
}]
}
})
Now app loads an html view, inside that view are nested views which are/should be loaded when i navigate to "app.pages".
Now up to this point everything works just fine, however now I want to load a page in the content body of "app.pages", I've tried several times but the view never gets loaded:
This is a simplified version of my app.php:
<html>
<head></head>
<body>
<div ui-view="app"></div>
</body>
</html>
This is a simplified version of my index.html:
<div ui-view="header"></div>
<nav ui-view="topBar"></nav>
<div id="wrapper">
<div>
<di ui-view="sideBar">
</div>
<div>
<div>
<div>
<div class="col-md-9" ui-view="content">
</div>
<div class="col-md-3" ui-view="contentSide">
</div>
</div> <!--wrap -->
</div>
<footer>
<div class="clearfix">
<ul class="list-unstyled list-inline pull-left">
<li>© 2015</li>
</ul>
<button><i class="fa fa-angle-up"></i></button>
</div>
</footer>
</div>
</div>
</div>
<div ui-view="infoBar"></div>
One issue is incorrect absolute naming here:
// NOT correct
.state('app.pages.dashboard', {
url: '/',
views: {
// here is incorrect absolute name
'content#app.pages': {
templateUrl: 'prebuilt/views/index.html',
controller: 'DashboardController'
}
},
...
Because this is part of index.html, which is part of state 'app'
...
<div class="col-md-9" ui-view="content">
...
So the proper naming is just '...#app'
.state('app.pages.dashboard', {
url: '/',
views: {
// CORRECT
'content#app': {