How can I load a default child state while placing links to the child states in ui-sref and placing a an empty ui-view below. I want ui-view to load first child state by default on page load, and by user clicking ui-sref links, he/she switch between the states.
Following is the complete code explaining my scenario:
<div class="apps_head settings_top_head1">
Favorities
<img src="img/apps_menu.png"/>
<div id="row1Dropdown" style="border: solid; display: none">
<ul>
<li><a onclick="setRow1Toggle()" ui-sref="dashboard.mainContent.favorites" href="javascript:;" style="color: black">Favorities</a></li>
<li><a onclick="setRow1Toggle()" ui-sref="dashboard.mainContent.passwords" href="javascript:;" style="color: black">Passwords</a></li>
</ul>
</div>
<div ui-view></div>
//===================================================================================
//Here goes the UI-Router Configuration:
var myApp = angular.module('myApp', [
//'ngRoute',
'ui.router',
'JungleLockControllers'
]).run(function($rootScope, $state){
$rootScope.$state = $state;
});
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home',{
url:'/home',
templateUrl:'partials/home.html',
controller : 'HomepageController'
})
.state('career',{
url:'/career',
templateUrl:'partials/career.html'
})
.state('faq',{
url:'/faq',
templateUrl:'partials/faq.html'
})
.state('companyOverview',{
url:'/companyOverview',
templateUrl:'partials/companyOverview.html'
})
.state('press',{
url:'/press',
templateUrl:'partials/press.html'
})
.state('terms',{
url:'/terms',
templateUrl:'partials/terms.html'
})
.state('dashboard',{
url:'/dashboard',
views:{
'':{templateUrl:'partials/dashboard.html'},
'notifications#dashboard':{templateUrl:'partials/dashboard.notifications.html'}
}
})
.state('dashboard.mainContent',{
url:'/mainContent',
//templateUrl:'partials/dashboard.mainContent.html'
views: {
'':{templateUrl:'partials/dashboard.mainContent.html'},
'contentHeader#dashboard.mainContent':{templateUrl:'partials/dashboardContentHeader.html'},
'row1#dashboard.mainContent':{templateUrl:'partials/row1.dashboard.html'},
'row2#dashboard.mainContent':{templateUrl:'partials/row2.dashboard.html'},
'row3#dashboard.mainContent':{templateUrl:'partials/row3.dashboard.html'},
//'favorites#dashboard.mainContent':{templateUrl: "partials/favouriteContent.html"},
//'passwords#dashboard.mainContent':{templateUrl: "partials/passwordsContent.html"},
'sponsored#dashboard.mainContent':{templateUrl: "partials/sponsoredContent.html"},
'browse#dashboard.mainContent':{templateUrl: "partials/browseContent.html"},
}
})
.state('dashboard.mainContent.favorites',{
url:'/favorites',
templateUrl:'partials/favouriteContent.html'
})
.state('dashboard.mainContent.passwords',{
url:'/passwords',
templateUrl:'partials/passwordsContent.html'
})
.state('dashboard.settings',{
url:'/settings',
templateUrl:'partials/dashboard.settings.html'
})
// .state('settings',{
// url:'/settings',
// templateUrl:'partials/dashboard.settings.html'
// })
.state('logout',{
url:'/logout',
templateUrl:'partials/logout.html'
})
/*
Template for adding new empty state
.state('',{
url:'',
templateUrl:''
})
*/
;
$urlRouterProvider.otherwise('/home');
});
Change your rounter config method as:
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home/list');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne#about': { template: 'Look I am a column!' },
'columnTwo#about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
Change your default URL
Make your home url state as abstract.
Hope this helps
I've found and implemented the solutions, so what i did is, I made the parent state as Abstract, and the child state that i wanted to be displayed by default, i gave a blank URL to it. here goes an example.
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider.
.state('dashboard',{
abstract:true,
url:'/dashboard',
views:{
'':{templateUrl:'partials/dashboard.html',
controller:'DashboardController'},
'notifications#dashboard':{templateUrl:'partials/dashboard.notifications.html'}
}
})
.state('dashboard.mainContent',{
url:'',
views: {
'':{templateUrl:'partials/dashboard.mainContent.html',
controller:'DashboardController'},
'contentHeader#dashboard.mainContent':{templateUrl:'partials/dashboardContentHeader.html'},
//'contentHeader#dashboard.mainContent':{templateUrl:'partials/logoutConfirmationPrompt.html'},
'row1#dashboard.mainContent':{templateUrl:'partials/row1.dashboard.html'},
'row2#dashboard.mainContent':{templateUrl:'partials/row2.dashboard.html'},
'row3#dashboard.mainContent':{templateUrl:'partials/row3.dashboard.html'},
//'favorites#dashboard.mainContent':{templateUrl: "partials/favouriteContent.html"},
//'passwords#dashboard.mainContent':{templateUrl: "partials/passwordsContent.html"},
'sponsored#dashboard.mainContent':{templateUrl: "partials/sponsoredContent.html"},
'browse#dashboard.mainContent':{templateUrl: "partials/browseContent.html"},
}
})
This way my problem got solved, Thanks alot for your help.
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 the following code for my router:
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
})
.state('userEdit', {
url: '/user/edit',
templateUrl: 'templates/user/edit.html',
controller: 'UserEditCtrl'
})
.state('workouts', {
url: '/workouts',
templateUrl: 'templates/workouts/index.html',
controller: 'WorkoutsCtrl'
})
.state('workouts.show', {
url: '/:id',
templateUrl: 'show.html',
controller: 'WorkoutCtrl',
onEnter: function() {
console.log('this is stupid');
}
})
$urlRouterProvider.otherwise('/');
}])
My issue is with the workouts.show state. I have this link:
<div class="" ng-repeat="workout in workouts track by workout._id">
<hr>
<a ui-sref="workouts.show({id: workout._id})">{{ workout.shortURI }}</a>
<p>{{ workout.description }}</p>
<ul class="exercise-list">
<li ng-repeat="exercise in workout.exercises">{{ exercise }}</li>
</ul>
<hr>
</div>
When I click on the link with ui-sref"workouts.show({id: workout._id})" the url changes to the proper format, and adds the id dynamically, but the view does not load. It just stays on the same page.
I have seen several other questions that are similar, but none of the accepted solutions have worked for me, and I have spent too long on this now.
Thanks in advance for any help!
I had similar issue.
You must have a ui-view in your "workouts" state, so that your "workouts.show" will render as a child.
Hope this helps.
Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker.