We Keep Coding

Error loading child state with ui-router

I have a working app though I am changing the architecture, cutting views down into smaller, more manageable documents. I currently have a state with a child state.
.state('patents', {
url: '/patents',
templateUrl: 'p3sweb/app/components/patents/views/list-patents.htm',
controller: 'listPatentsCtrl',
controllerAs: '$ctrl',
})
.state('patents.patent', {
url: '/{patentId}/:patentHref',
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
})
When I click on a table row in state patents, up pops patents.patent view below it.
I have now changed it so the child patents.patent state has multiple views like so:
.state('patents.patent', {
url: '/{patentId}/:patentHref',
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm',
views: {
'#': {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
},
'patentinfo#patents.patent': {
templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-info.htm',
controller: 'patentInfoCtrl',
controllerAs: '$ctrl'
},
'patentcostanalysis#patents.patent': {
templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-costanalysis.htm',
controller: 'patentCostAnalysisCtrl',
controllerAs: '$ctrl'
},
'patentrenewals#patents.patent': {
templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-renewals.htm',
controller: 'patentRenewalsCtrl',
controllerAs: '$ctrl'
}
})
When I now click on the row in state patents, the patents.patent view replaces the parent view. So instead of displaying below it, it's the only view displayed.
Question
How do I resolve the issue that has occurred now I have included multiple views in patents.patent state?

So it turns out, after reading ui-router wiki, using # creates an absolute path, and I wasn't targeting the view in the parent state patents.
So instead of
views: {
'#': {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
}
It should of been
views: {
'#patents': {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
}

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

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

Need to handle dynamic params in angular UI router, and load templates accordingly

I need to handle dynamic params in angular ui-router and load templates according also if someone use link to come on my site, he should be able to reach at desired page. I need to use it for multiple parameters and get the value form server to related values.
.state('home', {
url: '/:shop',
views: {
"mainbox": {
templateUrl: "app/shop/main.html",
controller: "shopMainCtrl",
controllerAs: "shop"
}
// xyz.com/wallmart should be landed here
}
})
.state('course', {
url: '/:shop/:area',
views: {
"mainbox": {
templateUrl: "app/area/nav.html",
controller: "areaNavCtrl",
controllerAs: "areaNav"
}
//xyz.com/wallmart/california should be landed here
}
})
.state('area.food', {
url: '/food',
views: {
"mainboxcontent": {
templateUrl: "app/area/food.html",
controller: "foodMainCtrl",
controllerAs: "food"
}//xyz.com/wallmart/california/food should be landed here
}
}).state('area.cloths', {
url: '/cloths',
views: {
"mainboxcontent": {
templateUrl: "app/area/cloths.html",
controller: "clothsCtrl",
controllerAs: "cloths"
}
//xyz.com/wallmart/california/cloths should be landed here
}
})
.state('buy', {
url: '/:shop/:area/:buy',
views: {
"mainbox": {
templateUrl: "app/buy/buynow.html",
controller: "buyMainCtrl",
controllerAs: "buyNow"
}
//xyz.com/wallmart/california/iphone should be landed here
}
})

https://github.com/angular-ui/ui-router/wiki
templateProvider is something you may try.
stackoverflow: Angular UI Router: decide child state template on the basis of parent resolved object

Angular ui.router dynamic sidebar

I have now tried whole day and i cant figure out how i shall solve this issue.
My goal is to display a sidebar thats get filled with data based on what state it is.
Lets say i am on the home page i may like this items:
Home item 1
Home item 2
And if i am on the about page i want this items:
About me
About my dog
I would like the data to get fetched from a service that returns data to the view based on what state it is.
I have tried to use ui.router's resolve function but i can't get the correct structure in my head to make it work.
Created a plunkr that shows how i mean but without the solution, what are the best practices and preferred ways when creating a dynamic sidebar with Angular and ui.router?
myapp.config(function($stateProvider) {
$stateProvider
.state('home', {
url: "",
views: {
"content": {
template: "This is the home.content"
},
"sidebar": {
templateUrl: 'sidebar.html',
controller: 'sidebarCtrl'
}
}
})
.state('about', {
url: "/about",
views: {
"content": {
template: "This is the about.content"
},
"sidebar": {
templateUrl: 'sidebar.html',
controller: 'sidebarCtrl'
}
}
})
})
Plunkr here
Edit
Can't figure out what i am doing wrong, no view is shown with this code:
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('root', {
url: '',
'abstract': true,
views: {
'sidebar#': {
templateUrl: '/App/Main/views/shared/sidebars/sidebar.cshtml',
controller: 'app.controllers.views.shared.sidebars.sidebar',
resolve: {
sidebarData: function (sidebarService) {
return sidebarService.getActions();
}
}
}
},
})
.state('root.home', {
url: "/",
views: {
'': {
templateUrl: '/App/Main/views/home/home.cshtml',
controller: 'app.controllers.views.home'
},
'content#root.home': {
templateUrl: '/App/Main/views/home/home-content.cshtml',
controller: 'app.controllers.views.home'
}
}
})
.state('root.about', {
url: "/customers",
views: {
'': {
templateUrl: '/App/Main/views/customers/customers.cshtml',
controller: 'app.controllers.views.customers'
},
'content#root.about': {
templateUrl: '/App/Main/views/customers/customers-content.cshtml',
controller: 'app.controllers.views.customers'
}
}
});
}]);
and here is how my home and customer views look like:
<div data-ui-view="sidebar">
Loading sidebar view.
</div>
<div data-ui-view="content">
Loading content view.
</div>

you could try to implement named and also an abstract view for your sidebar to reuse it among your other routes, also you can use the resolve parameter an return whatever dynamic data you need (from a service, resource, whatever), it could be something like this:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider) {
$stateProvider
.state('root',{
url: '',
abstract: true,
views: {
'sidebar#': {
templateUrl: 'sidebar.html',
controller: 'sidebarCtrl',
resolve:{
sidebarData:function(){
return [{
state: '/stateHere',
text: 'Need'
}, {
state: '/stateHere',
text: 'to'
}, {
state: '/stateHere',
text: 'fill'
}, {
state: '/stateHere',
text: 'this'
}, {
state: '/stateHere',
text: 'with'
}, {
state: '/stateHere',
text: 'dynamic'
}, {
state: '/stateHere',
text: 'data'
}];
}
}
}
})
.state('root.home', {
url: "/",
views: {
'content#': {
template: "This is the home.content"
}
}
})
.state('root.about', {
url: "/about",
views: {
'content#': {
template: "This is the about.content"
}
}
})
});
myapp.controller('sidebarCtrl', ['$scope','sidebarData'
function($scope,sidebarData) {
$scope.sidebarData= sidebarData,
}
]);
EDIT:
check this working example:
http://plnkr.co/edit/Nqwlkq1vGh5VTBid4sMv?p=preview