We Keep Coding

Two states with views views defined for one

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'
}
}
})

angular-ui/ui-router parent state with a default view

I'm trying to define states in a 3 columns layout with the left column having the same content. But at this time, I had to repeat the templateUrl for all direct nested states.
.state('workspace', {
url: '/',
templateUrl: 'app/workspace/workspace.view.html'
})
.state('workspace.images', {
url: 'images',
views: {
'sidebar': {
templateUrl: 'app/workspace/sidebar.view.html',
controller : 'Workspace.SidebarController as vm'
},
'content': {
templateUrl: 'app/workspace/imageslist.view.html',
controller : 'Workspace.ImagesListController as vm'
}
}
})
.state('workspace.images.edit', {
url: '/:key',
templateUrl: 'app/workspace/editor.view.html',
controller : 'Workspace.EditorController as vm'
})
.state('workspace.documents', {
url: 'documents',
views: {
'sidebar': {
templateUrl: 'app/workspace/sidebar.view.html',
controller : 'Workspace.SidebarController as vm'
},
'content': {
templateUrl: 'app/workspace/documentslist.view.html',
controller : 'Workspace.DocumentsListController as vm'
}
}
});
As you can see, I have to repeat the "sidebar" template each time. I would like to be able to configure it form the abstract workspace state.
workspace.view.html contains the "sidebar" and "content" views :
<div class="sidebar" ui-view="sidebar">
<!-- view = sidebar -->
</div>
<div class="content" style="height: 100%" ui-view="content">
<!-- view = content-->
</div>
I think I should have a views object into the "workspace" state to define the "sidebar" templates and controllers and leave the "content" empty.
And have tried with and without named views but without success. When I do that, the sidebar template is never displayed but seems to be loaded (a wrong name cause a 404 in my console).

This will inject sidebar into parent... and child can use it or even change it:
.state('workspace', {
url: '/',
views: {
'': { templateUrl: 'app/workspace/workspace.view.html' }
'sidebar#workspace': {
templateUrl: 'app/workspace/sidebar.view.html',
controller : 'Workspace.SidebarController as vm'
},
}
})
.state('workspace.images', {
url: 'images',
views: {
'content': {
templateUrl: 'app/workspace/imageslist.view.html',
controller : 'Workspace.ImagesListController as vm'
}
}
})
...
We used views : {} even on parent state. The default unnamed is the original workspace.view.html
We also added named view 'sidebar#workspace' - the absolute name here means, that the name is 'sidebar' and its target is searched inside of the 'workspace' state templates

angularjs - ui-router multiple nested views

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

Angular UI Router not injecting footer into UI View

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.

ui-router multiple views inside a sub view

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'
}
}