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
Related
I'm trying to modulise my app using angular-ui-router to define a website with 2 states: main and checkout. The main state should haves multiple "section" tags which im trying to define as ui-view items. I can't tell what's wrong with my routes setup but I get a feeling that the main.html is not being loaded. Any advise on whats wrong with my definition... I could avoid using views for the secions and just use ng-include...
routes.js
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/main');
$stateProvider
.state('main', {
url: '/main',
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
views:{
'home': {
templateUrl: 'templates/main.home.html'
},
'about': {
templateUrl: 'templates/main.about.html'
},
'services': {
templateUrl: 'templates/main.services.html'
},
'shop': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})
.state('checkout', {
url: '/checkout',
templateUrl: 'templates/checkout.html',
controller: 'CheckoutCtrl'
});
index.html
<div ui-view id="app-ui-view"></div>
templates/main.html
<section ui-view="home" id="home"></section>
<section ui-view="about" id="about"></section>
<section ui-view="services" id="services"></section>
<section ui-view="shop" id="shop"></section>
Basically the page loads but main or checkout states don't load. How am i nesting things wrong?
By not specifying a parent you map both states to the default ui-view in the index.html. So when accessing main state there won't be any templates linked to the default ui-view, the only one present in the existing html.
so the main state should have this definition:
.state('main', {
url: '/main',
views:{
'': {
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
},
'home#main': {
templateUrl: 'templates/main.home.html'
},
'about#main': {
templateUrl: 'templates/main.about.html'
},
'services#main': {
templateUrl: 'templates/main.services.html'
},
'shop#main': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})
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.
http://plnkr.co/edit/i9qhqKZrbxUfsrAOKmMD
I have a basic hello world setup for a header/container/footer in AngularJs however I can't get the footer to load. The header/container is loading fine.
Here's my javascript:
angular.module('app', ['app.controllers', 'ui.router']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'pages/header/header.html',
controller: 'HeaderController'
},
'footer': {
templateurl: 'pages/footer/footer.html'
}
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'pages/home/home.html',
controller: 'HomeController'
}
}
})
.state('root.about', {
url: '/about',
views: {
'container#': {
templateUrl: 'pages/about/about.html'
}
}
});
$urlRouterProvider.otherwise('/');
});
angular.module('app.controllers', [])
.controller('HeaderController', headerController)
.controller('HomeController', homeController);
Here's my implementation on HTML:
<header ui-view="header">
</header>
<div ui-view="container">
</div>
<footer ui-view="footer">
</footer>
Changing them all to divs does not help.
There are no errors in Javascript console.
Header.html
<h1>Header</h1>
Home.html
<h1>Home</h1>
Footer.html
<h1>Footer</h1>
Page display:
Header
Home
The reason it is not working is because of a small typo in your code. This definition:
'footer': {
templateurl: 'pages/footer/footer.html'
}
should be:
'footer': {
templateUrl: 'pages/footer/footer.html'
}
This is a great example of bad design (on the part of ui-router). They could have performed checks of validity on requested views if there is no template or controller. However, I think it more importantly shows the shortcomings of allowing objects to be passed to functions. If templateUrl was a parameter to a function, this sort of problem would never arise.
Updated plunkr.
Replace templateurl with templateUrl.
I am struggling to create a container for next states, defined the states as views, divided into header, CONTAINER, footer.
The next state as an example would be the blogs, but I do not see a way of getting it into the view.
One idea was to start the HOME view as standard, but also failed.
view:
<main>
<header ui-view="header"></header>
<content ui-view="home"></content>
<footer ui-view="footer"></footer>
</main>
states:
.state('home',{
url:'/',
data: {
pageTitle: 'Home'
},
views: {
'': {
templateUrl: 'content/index.html',
},
'header#home': {
templateUrl: 'content/templates/header.html',
controller: 'HeaderController',
cache: false
},
'home#home': {
templateUrl: 'content/templates/home.html',
controller: 'IndexController',
cache: false
},
'footer#home': {
templateUrl: 'content/templates/footer.html',
//controller: 'FooterController',
cache: false
}
}
})
.state('home.blog',{
url : '/blog',
templateUrl : 'content/templates/blog.html',
controller : 'BlogController',
data: { pageTitle: 'Blog' },
access: {requiredLogin: false}
})
SUCCESS! :)
Plunker Example: http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview
In the updated question above, you've used this plunker to show how you made it working:
.state('home',{
url:'',
abstract: true,
views: {
'': {
templateUrl: 'index.html' // this
},
'header#home': {
templateUrl: 'header.html'
},
'footer#home': {
templateUrl: 'footer.html'
}
}
})
.state('home.index',{
url : '/',
templateUrl : 'home.html'
})
.state('home.blog',{
url : '/blog',
templateUrl : 'blog.html',
});
While that solution is working, it is in fact not a way you/we should go. Because the parent state 'home', injects into unnamed view itslef - templateUrl: 'index.html'
So, now there are again views header and footer, but they do differ from the root (original index.htm). Their absolute name would be 'header#home' and 'footer#home' (as used int the code snippet) - and all seems to be working.
But that is redundant. Unless we will move the layout into some 'layout' state and 'layout.html'
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
Why redundant? Because index.html already is in play (as a root) and it contains these targets. their absolute name is 'header#' and 'footer#'. And that should be the way to go.
To make it clear, there is an updated plunker and its snippets:
.state('home',{
url:'',
abstract: true,
views: {
'': {
template: '<div ui-view=""></div>'
},
'header': {
templateUrl: 'header.html'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('home.index',{
url : '/',
templateUrl : 'home.html'
})
.state('home.blog',{
url : '/blog',
templateUrl : 'blog.html',
});
Check the update here
in my file home.js have
.state('app.profile', {
url : '/profile',
views : {
'appContent' : {
templateUrl: '../templates/profile.html',
controller: 'HomeController'
}
}
})
in my file profile.html have this
<ion-view title="Profile">
<ion-content>
<!--somethings here-->
</ion-content>
</ion-view>
My directory
js
home.js
templates
profile.html
But I can't make it work. Please help me to fix this error!
If I understand you correctly, you must do so:
.state('index', {
url : '/route1',
templateUrl: '../templates/profile.html',
controller: 'Controller'
})
if you want to use multiple views:
.state('index', {
url: "/route1",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})