I tryed simple layout but it seems nothing gets render. Layout.html is being loaded and that is all. There are no errors in console.
This is part of my config file
$stateProvider
.state('layout', {
url: '',
abstract: true,
templateUrl: viewsRoot + "layout.html",
controller: 'LayoutController',
})
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
})
.state('layout.mainview', {
abstract: true,
templateUrl: viewsRoot + "container.html",
})
.state('layout.mainview.object-details', {
url: '/object-details',
templateUrl: viewsRoot + "object-details.html",
controller: 'ObjectDetailsController'
})
.state('layout.mainview.home', {
url: '/',
templateUrl: viewsRoot + "home.html",
controller: 'HomeController'
})
$urlRouterProvider.otherwise('/');
This is layout.html:
<div ui-view="sidebar">
</div>
<div class="page-content-wrapper">
<div class="page-content" style="min-height: 1227px">
<!-- END PAGE SPINNER -->
<div ui-view="mainview">
</div>
<!-- END PAGE CONTENT-->
</div>
</div>
This is container.html
<ui-view></ui-view>
Should I use nested views instead of nested states?
You need to identify what renders where. You have two areas, "siderbar" and "mainview", but you are not identifying what template goes to what view in your state configs
$stateProvider
.state('layout.home',{
views: {
'mainview': {
templateUrl: '...',
controller: ...
},
'siderbar': {
templateUrl: '...',
controller: ...
}
}
})
See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views for more information
Related
I'm trying to display a nested template using ui-view.
AngularJS routing config
angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '',
abstract: true
})
.state('home.default', {
parent: 'home',
url: '/home',
data: {
pageTitle: 'Homepage'
},
views: {
'content#': {
templateUrl: 'app/default/default.html',
controller: 'defaultController',
controllerAs: 'defaultController'
}
}
})
.state('default.subview', {
parent: 'default',
url: '/default/subview',
data: {
pageTitle: 'Homepage - subview'
},
views: {
'content#': {
templateUrl: 'app/subview/subview.html',
controller: 'subviewController',
controllerAs: 'subviewController'
}
}
})
;
}]);
Home: /#/home
<!-- this URI should be #/home -->
<h2>Homepage</h2>
<select>
<option>Subview</option>
</select>
<hr>
<!-- nested subview -->
<div ui-view=""></div>
Subview: /#/home/subview
<h2>Subview</h2>
So basically, I want the parent view (home) and subview's content to be included when I visit (/#/home/subview). However, only the subview content is being displayed.
Any tips on how to correctly utilize ui-view and nested subviews in AngularJS?
Your subview has to be a child of home and you set the subview with 'content#' to an defined ui-view wich replaces your view from home.
And I edited some copy paste issue since it looks like your home route was called default before
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
template: '<ui-view/>'
})
.state('home.default', {
url: '/home/default',
data: {
pageTitle: 'Homepage'
},
views: {
'': {
templateUrl: 'home.html',
controller: 'defaultController',
controllerAs: 'defaultController'
}
}
})
.state('home.subview', {
parent: 'home',
url: '/subview',
data: {
pageTitle: 'Homepage - subview'
},
views: {
'': {
templateUrl: 'subview.html',
controller: 'subviewController',
controllerAs: 'subviewController'
}
}
});
}]);
Edit:
I created a Plunker with an working configuration, there was some more issues with that abstract home state (I never get it to work as expected) but if you click the links everything appears as expected.
Plunker
There really is no need for the views section if you have only one ui-view
angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '',
abstract: true,
template: '<ui-view></ui-view>'
})
.state('home.default', {
// parent: 'home', // No need to set parent if you already prefixed state name
url: '', // The default subview of an abstract view should have '' for url
data: {
pageTitle: 'Homepage'
},
templateUrl: 'app/default/default.html',
controller: 'defaultController',
controllerAs: 'defaultController'
})
.state('home.default.subview', {
// parent: 'default', // No ned for parent
url: '/subview', // Only pu the part of the url here that is added to the parent'ls url
data: {
pageTitle: 'Homepage - subview'
},
templateUrl: 'app/subview/subview.html',
controller: 'subviewController',
controllerAs: 'subviewController'
})
;
}]);
In addition I've also changed the ui-sref in index.html
<a ui-sref="home.default.subview">Subview Route</a>
And the ui-view in home.html
<!-- nested subview -->
<ui-view></ui-view>
Check this plunker:
https://plnkr.co/edit/vEDYvXhp5mNjVT0yLRJN?p=preview
i want to add a side menu to my project so i added the menu.html to my templates and i added a state in my app.js :
.state('app', {
url: '/menu',
templateUrl: 'templates/menu.html',
controller: 'menuCtrl'
})
.state('ListeUsers', {
url: '/ListeUsers',
views: {
'menuContent': {
templateUrl: 'templates/ListeUsers.html',
controller: 'UsersCtrl'
}
}
});
$urlRouterProvider.otherwise('/ListeUsers');
`
my index.html body:
<body ng-app="starter" >
<ion-nav-view> </ion-nav-view>
</body>
it seems that the state app in not activated when the project is launched.
when i enable server log output i get this at the end:
SOLUTION:
to resolve this problem, i had to define ListeUsers as a child of app so the app.js becomes like this :
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.ListeUsers', {
url: '/ListeUsers',
views: {
'menuContent': {
templateUrl: 'templates/ListeUsers.html',
controller: 'UsersCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/ListeUsers');
});
By default activate you should do like this or more info give link below.
$urlRouterProvider.otherwise('/menu');
https://scotch.io/tutorials/angular-routing-using-ui-router
I'm using ui-router for state handling. This works fine, but now I have to create page 404 and would like to display it on the whole page and not inside the page as other pages.
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('!').html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('stateIndex', {
url: '/',
templateUrl: '/templates/list.html',
controller: 'dashListController'
})
.state('stateList', {
url: '/list',
templateUrl: '/templates/list.html',
controller: 'dashListController'
}).state('stateDashboard', {
url: '/dashboard/:id',
templateUrl: '/templates/dashboard.html',
controller: 'dashboardController'
})
.state('stateWidgetsList', {
url: '/widgetsList',
templateUrl: '/templates/widgetsList.html',
controller: 'widgetsListController'
})
.state('404', {
url: '/404',
templateUrl: '/templates/404.html'
});
}]);
and on my index.html I have
<div ui-view></div>
where I display all the pages, outside of this I have logo, menu, etc.. which I would like to hide while displaying 404 page.
How can I do it?
Personally I would redesign the index.html, and bring the outer template (logo, menu, etc), into it's own template and state. Then you can sit child states below it in the ui-router hierarchy. For example:
$stateProvider
.state('app', {
abstract: true,
url: '',
templateUrl: '/templates/appcontainer.html'
})
.state('app.stateIndex', {
url: '/',
templateUrl: '/templates/list.html',
controller: 'dashListController'
})
.state('404', {
url: '/404',
templateUrl: '/templates/404.html'
});
Then you just need to put your logos/menus, etc inside appcontainer.html, and then just have a single <div ui-view></div> inside your index.html. Also if you do it this way, don't forget to add the child ui-view inside appcontainer.html.
You can create a root parent state that will contain your layout stuff (logo, menu, etc) and have the 404 live outside of that.
routes
$stateProvider
.state('root', {
abstract: true, // makes this state not directly accessible
templateUrl: 'root.html'
})
.state('root.stateIndex', {
url: '/',
templateUrl: '/templates/list.html',
controller: 'dashListController'
})
// ...
.state('404', {
url: '/404',
templateUrl: '/templates/404.html'
});
root.html
<nav><!-- menu stuff --></nav>
<ui-view></ui-view>
<footer></footer>
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 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
}
})`