We Keep Coding

Set default nested state in ui-router

I have two level nested state on ui-router and I can't set a default nested state for some view.
I need to load the state cars.detail.supply.list when the state cars.detail is active without changing the current url.
I'm expecting to show supplies list without click on List supplies button.
What am I missing?
Full code: https://plnkr.co/edit/DqwhaDXh3biMbq9PLCV3?p=preview
ui-states:
.state('cars.detail', {
parent: 'cars',
url: '/edit/:id',
views: {
'content#index': {
templateUrl: 'cars.detail.html',
controller: 'CarDetailController'
},
'supplies': {
templateUrl: 'cars.supply.html',
controller: 'CarDetailController'
}
}
})
.state('cars.detail.supply', {
url: '',
parent: 'cars.detail',
abstract: true,
//'default': '.list',
views: {
'supplies#cars.detail': {
templateUrl: 'cars.supply.html',
//controller: 'SupplyListController'
}
}
})
.state('cars.detail.supply.list', {
parent: 'cars.detail.supply',
url: '',
views: {
'#cars.detail.supply': {
templateUrl: 'cars.supply.list.html',
controller: 'SupplyListController'
}
}
})
.state('cars.detail.supply.add', {
parent: 'cars.detail.supply',
url: '/add-supply',
views: {
'#cars.detail.supply': {
templateUrl: 'cars.supply.add.html',
controller: 'AddSupplyController'
}
}
})
The view:
<div>
...
<h4 ng-if="car.id">
Supplies
<a class="btn btn-default btn-sm pull-right" ui-sref="cars.detail.supply.add({ carId: car.id })">
<i class="glyphicon glyphicon-plus"></i> Add supply
</a>
<a class="btn btn-default btn-sm pull-right" ui-sref="cars.detail.supply.list({ carId: car.id })">
<i class="glyphicon glyphicon-plus"></i> List supplies
</a>
</h4>
<div ui-view="supplies" class="">
</div>
</div>
I've tried:
https://github.com/nonplus/angular-ui-router-default
set abstract state for cars.detail.supply
solutions from many SO related questions
set url = '' as mentioned here https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state

In order to get it to work, you have to differentiate the cars.detail's and cars.detail.supply.list's urls. So, step one is to give cars.detail.supply.list a url:
.state('cars.detail.supply.list', {
parent: 'cars.detail.supply',
url: '/list',
templateUrl: 'cars.supply.list.html',
controller: 'SupplyListController'
})
Once the state urls can be differentiated, you need to transition to the list state by either updating the link in the car list repeater to
ui-sref="cars.detail.supply.list(...)"
or
by indicating a redirect from the details state to the details's list state in app.js:
$urlRouterProvider.when('/dashboard/cars/edit/{id}', '/dashboard/cars/edit/{id}/list');

Nested Views with Dynamic Id's Angular & Rails

Hey I have Angular rendering a list of Quotes as resources. The Quotes are stored in a rails back end. I am at the point where I would like to use Angular to render the show.html for that specific quote resource.
I havent been able to get angular to resolve to the state.
I'm not sure if I understand how to pass id's into state.
I need help figuring out how to get angular to render the show.html in the ui-view labeled "fullquote" for the specific quote. Here is my code.
Quotes.html
<div class="quotes col-xs-10 col-md-8" ng-controller="QuotesCtrl" >
<div ng-repeat="quote in quotes">
<a ng-click="showQuote(quote);">
<span ng-if="quote.read == false"> *NEW*</span>
<span>Quote id: {{quote.id}}</span>
<span>Name: {{quote.name}}</span>
<span>Email: {{quote.email}}</span>
<span>City: {{quote.city}}</span>
<span>Region: {{quote.region}}</span>
<span>State: {{quote.state}}</span>
</a>
<div ng-show="quote.visible">
<a ui-sref="quotes/{{quote.id}}"> View </a>
<ui-view="fullquote"></ui-view="fullquote">
<a ng-click="quotes.splice($index, 1)"> Delete </a>
<div ng-if"">
<span> {{quote.question2 }}</span>
<span> {{quote.question3 }}</span>
<span> {{quote.question4 }}</span>
<span> {{quote.question5 }}</span>
<span> {{quote.question6 }}</span>
<span> {{quote.question7 }}</span>
<span> {{quote.question8 }}</span>
<span> {{quote.question9 }}</span>
<span> {{quote.question10 }}</span>
<span> {{quote.question11 }}</span>
<span> {{quote.question12 }}</span>
<span> {{quote.question13}}</span>
</div>
</div>
</div>
</div>
Quotes.js
app.factory('Quotes', ['$resource',function($resource){
return $resource('/quotes.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
app.factory('Quote', ['$resource', function($resource){
return $resource('/quotes/:id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT', params: {id: '#id'} },
delete: { method: 'DELETE', params: {id: '#id'} }
});
}]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', { url: '', templateUrl: 'static_pages/home.html'})
.state('quotes', { url: '/quotes', abstract: false, views : { templateUrl: 'quotes.html', controller: 'QuotesCtrl'}})
.state('quotes/:id', { url: 'quotes/:id', view: { "fullquote": { templateUrl: 'show.html', controller: 'QuotesCtrl'}}})
.state('quotes/:id.pdf', { url: 'quotes/:id.pdf', controller: 'QuotesCtrl'})
.state('users', { url: '/users', templateUrl: 'users.html', controller: 'UsersCtrl'})
.state('/users/:id', { url: 'users_show.html', controller: "UsersCtrl" });
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("home");
})
$locationProvider.html5Mode({ enabled: true, requireBase: false });
});
app.controller("QuotesCtrl", ['$scope', '$state', '$http', 'Quotes', 'Quote', '$location', function($scope, $state, $http, Quotes, Quote, $location ) {
$scope.quotes = Quotes.query();
$scope.quote = Quote.query();
$scope.showQuote = function (quote) {
quote.visible = !quote.visible;
}
}]);

There are several things you should look into:
Your state naming is incorrect. I assume you are trying to use nested states.In this case you need to have quotes.detail or something of the kind. Also, in the state, you need to name your object views instead of view. Please, refer to UI.Router multiple views guide for more information.
.state('quotes.detail',
{ url: 'quotes/:id',
views: {
"fullquote": { templateUrl: 'show.html',
controller: 'QuoteCtrl'}
}
})
To pass a parameter to the state you need to change your link to this. If you'd like to know more about passing parameters to ui.router states - read the manual:
<a ui-sref="quotes.detail({{quote.id}})"> View </a>
If you want to have a separate view, you also need to have separate controller for it. I named it it QuoteController. You can get ht :id from the URL by injecting $stateParams in the controller. More info about getting parameters into the controllers - here:
//QuoteController
['$stateParams, Quote , function($stateParams, Quote) {
Quoute.get({id:$stateParams.id});
}]
I'm not sure this will completely solve your problem, but it will certainly bring you closer to solving it. I hope I was helpful!

Angular ui-router Nested states open from url

I'm try to use ui-router to manage nested views on a single page app.
Let's say I want to create a dashboard application with a common area and multiple views.
The main and the nested states are handled like this:
$stateProvider.state('home', {
url: '/',
template: 'MY HOME PAGE'
})
.state('login', {
url: '/login',
templateUrl: '/pages/login.html'
})
.state('registration', {
url: '/registration',
templateUrl: '/pages/registration.html'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: '/pages/dashboard/dashboard.html'
})
.state('dashboard.me', {
url: '/me',
templateUrl: '/pages/dashboard/me.html'
})
.state('dashboard.messages', {
url: '/messages',
templateUrl: '/pages/dashboard/messages.html'
})
.state('dashboard.friends', {
url: '/friends',
templateUrl: '/pages/dashboard/friends.html'
});
The dashboard HTML page is the following:
<div class="container" ng-controller="dashboardCtrl" ng-init="init()">
<h2>DASHBOARD</h2>
<ul>
<li><a ui-sref="dashboard.me">Me</a></li>
<li><a ui-sref="dashboard.messages">My Messages</a></li>
<li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>
<div ui-view></div>
The above HTML is also included inside an ui-view.
Everything works fine if I navigate my application using the anchors.
By the way if I try to go directly to myhost/dashboard/me or myhost/dashboard/friends (every path with two levels of nested views) the app doesn't work. I get an angular (unexpected token <) but I don't think it's relevant...
It seems like it's not able to resolve the first level of nested view.
The following images show the HTML obtained when the navigation is done using anchors:
and the HTML obtained when the page is called directly from the browser address link:
Any ideas? Thanks.

The problem is that angular is not loading, hence the error. The code looks correct to me though, unless you missed the closing tag for
<div class="container" ng-controller="dashboardCtrl" ng-init="init()">
?

JavaScript State Configurations :
$stateProvider.state('home', {
url: '/',
template: 'MY HOME PAGE'
})
.state('login', {
url: '/login',
templateUrl: '/pages/login.html'
})
.state('registration', {
url: '/registration',
templateUrl: '/pages/registration.html'
})
.state('dashboard', {
url: '/dashboard',
abstract: true,
parent: 'home',
templateUrl: '/pages/dashboard/dashboard.html'
})
.state('dashboard.me', {
url: '/me',
views: {
'#dashboard_view': {
templateUrl: '/pages/dashboard/me.html'
}
}
})
.state('dashboard.messages', {
url: '/messages',
views: {
'#dashboard_view': {
templateUrl: '/pages/dashboard/messages.html'
}
}
})
.state('dashboard.friends', {
url: '/friends',
views: {
'#dashboard_view': {
templateUrl: '/pages/dashboard/friends.html'
}
}
});
Dashboard HTML
<div class="container" ng-controller="dashboardCtrl" ng-init="init()">
<h2>DASHBOARD</h2>
<ul>
<li><a ui-sref="dashboard.me">Me</a></li>
<li><a ui-sref="dashboard.messages">My Messages</a></li>
<li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>
<div ui-view="dashboard_view"></div>
You can get more details:
Multiple Named Views
Nested States and Nested Views

Angular UI-Router

I am using angular pre-defined shell to build a basic working poc for my new project. Basic template is loaded by using ng-include in the index.html. But other views are linked to menu components using ui-router. Everything in the code side is perfect still I am having problem in loading the views when clicking on the menu items after running the shell.
I added the href tags to check if that works, but still no use.Could someone help me with this.
<li ng-class="{active: $state.includes('app')}">
<a href="">
<i class="fa fa-desktop"></i>
<span class="nav-label">{{ 'APPVIEWS' | translate }}</span>
<span class="pull-right label label-primary">SPECIAL</span>
</a>
<ul class="nav nav-second-level" ng-class="{in: $state.includes('app')}">
<li ui-sref-active="active">
<a ui-sref="app.contacts">Contacts</a>
</li>
</ul>
</li>
My states in config file are defined as :
function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider) {
IdleProvider.idle(5);
IdleProvider.timeout(120);
$urlRouterProvider.otherwise("/dashboards/dashboard_1");
$ocLazyLoadProvider.config({
debug: false
});
$stateProvider
.state('app', {
abstract: true,
url: "/app",
templateUrl: "views/common/content.html",
})
.state('app.contacts', {
url: "/contacts",
templateUrl: "views/contacts.html",
data: { pageTitle: 'Contacts' }
})
}

If the "app" route is going to be abstract you can take the url off of it
the app.contacts could have a parent of the app route
$stateProvider
.state('app', {
"abstract": true,
templateUrl: "views/common/content.html",
})
So when i set up my "app" route as abstract and wanted all my other views to be nested inside of that route i defined a named view that they would go into
so my "app" template would be like
// html stuff here for app
<div ui-view="content"></div>
// more html stuff here
then my app.contacts route would look like
.state('app.contacts', {
parent: "app"
url: "/contacts",
views: {
"content": {
templateUrl: "views/contacts.html"
}
},
data: { pageTitle: 'Contacts' }
})

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