I have the following:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: 'account'
})
.state('account.settings', {
url: '/settings',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.user', {
url: '/user',
templateUrl: 'pages/templates/account.user.html',
controller: 'account.user'
})
I am trying to make it so if I go to:
/account => it goes to /account/settings
/account/setting => goes to /account/settings
/account/user => goes to /account/user
Basically making account.settings the default.
Is there a way to do this?
The big reason I want to do this is because of the following (maybe someone has a better suggestion for a work around)
I have a link like so:
<a ui-sref="account.settings" ui-sref-active="active">Account<a>
I'd like it to have the active class regardless of what nested view (settings or user). But I want this link to always send the user to account.settings.
If anyone could help me out, it'd be greatly appreciated.
Try:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: 'account'
})
.state('account.settings', {
url: '',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.settings2', {
url: '/settings',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.user', {
url: '/user',
templateUrl: 'pages/templates/account.user.html',
controller: 'account.user'
})
Or redirect from the abstract to the concrete state... the code snippet removes the specified 'account' controller reference, but the code in the snippet can be added to the controller if needed:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: ['$scope', '$state',
function( $scope, $state) {
$state.go('account.settings');
}],
})
Related
I am using UI-router to control the states of a single page application. I have a big chain of states that I narrowed to these:
$stateProvider
.state('app', {
url: "/",
abstract: true
})
.state('app.main', {
url: "/main",
abstract: true
})
.state('app.main.users', {
url: "/users",
abstract: true,
controller: 'UsersController',
controllerAs: 'uc'
})
.state('app.main.users.list', {
url: "/list",
templateUrl: "list.html",
});
Imagine that this app.main.users is an abstract state for a CRUD which will use the same controller for all the operations.
The problem is that the "list.html" file from the child controller cannot see the values from the controller.
I have put up a plunkr sample to the issue: Plunkr
Here is the full code:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('app', {
url: "/",
abstract: true
})
.state('app.main', {
url: "/main",
abstract: true
})
.state('app.main.users', {
url: "/users",
abstract: true,
controller: 'UsersController',
controllerAs: 'uc'
})
.state('app.main.users.list', {
url: "/list",
templateUrl: "list.html",
});
})
myapp.controller('UsersController', usersController);
function usersController() {
console.log("UsersController instantiated");
var vm = this;
vm.user = 'username';
}
If you have any idea, please let me know. I can't find a solution to this.
Thanks!
I've solved the problem.
I was missing some things in the concept of the states. First of all I needed an on my app.main state so it could render the app.main.users state. Also my controllers declaration was wrong.
This Plunkr is working with the desired scenario.
Thanks for the help.
i am working on web app that uses ui-router version 0.3.2 and angular 1.5. i am having an issue with back button, when i hit the back button the url updates to appropriate state url, but does not reloads / renders the page. The controller of the new state (updated url) does not get executed. Following is my state config
$stateProvider
.state('home', {
url: '/',
reloadOnSearch: false,
templateUrl: 'homePage.html',
controller:'homeController'
})
.state('home.overView', {
url:'overView',
reloadOnSearch: false,
views: {
ovSB: {
templateUrl: 'searchParameterBarTemplate.html',
controller: 'searchParameterBarController'
}
}
})
.state('home.overView.result', {
url:'/:docType?abc&xyz&type&user&temp1&temp2',
abstract: true,
reloadOnSearch: false,
templateUrl: 'resultViewTemplate.html',
controller : 'resultPanelController'
})
.state('home.overView.result.dashboard', {
url:'',
reloadOnSearch: false,
views: {
'chart': {
templateUrl: 'chart-template.html',
controller: 'chart-Controller'
},
'oVGrid': {
templateUrl: 'ov-grid-template.html',
controller: 'ov-grid-controller'
},
'filterGrid': {
templateUrl: 'filter-stats-template.html',
controller: 'filter-stats-controller'
}
}
})
.state('home.delta',{
reloadOnSearch: false,
url:'Delta',
views:{
pcSB:{
templateUrl: 'search-parameterbar-delta-template.html',
controller : 'search-parameterBar-delta-controller'
}
}
})
.state('home.delta.result',{
url:'/:docType?xyz_1&abc_1&xyz_2&abc_2',
reloadOnSearch: false,
templateUrl: 'delta-template.html',
controller : 'delta-controller'
})
.state('home.details', {
url: 'details',
views: {
detailsSB: {
templateUrl: 'search-paramBar-details-template.html',
controller: 'search-paramBar-details-controller'
}
}
})
.state('home.details.result', {
url: '/:documentType?abc&xyz&user&temp1&temp2',
abstract: true,
templateUrl: 'details-view-template.html',
controller: 'details-view-controller'
})
.state('home.details.result.dashboard',{
url:'',
views:{
perGraph : {
controller :'per-graph-controller',
templateUrl: 'per-graph-template.html'
},
detailsGrid: {
controller: 'details-grid-controller',
templateUrl: 'details-grid-controller-template.html'
}
}
});
So for example if i navigate from home.overview.result.dashboard (url -> localhost:12345/overview/doctype?abc&xyz&user&temp1&temp2) state to home.details.result.dashboard state with url localhost:12345/details/doctype?abc&xyz&user&temp1&temp2 and hit backbutton, the url updates to localhost:12345/overview/doctype?abc&xyz&user&temp1&temp2 however it does not reloads/renders the page.
I believe I can you use this solution and trigger the reload, but I am looking for a better solution than this which adheres to ui router. is there something i am missing with state config / doing wrong? Any help pertaining to this would be highly appreciated.
Thank you
it will be firing $stateChangeStart event. use location directive to rout it . please refer the below snippet
$rootScope.$on('$routeChangeStart', function (event,next) {
$location.path(next.$$route.originalPath);
});
this can resolve your problem. but its not the perfect solution
Im writing a mobile app using Ionic framework, it has two languages: English and Spanish, I want to be able to switch the nav-view (as a template), to show in English or Spanish depending on the user selection language.
I'm trying to do this on my StateProvider definition, here is part of my code:
(function(){
'use strict';
angular
.module('app.core')
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/auth/login/login.html',
controller: 'LoginCtrl',
})
.state('loginEs', {
url: '/loginEs',
templateUrl: 'app/auth/login/loginEs.html',
controller: 'LoginCtrl',
})
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabsEs', {
url: '/tabEs',
abstract: true,
templateUrl: 'templates/tabsEs.html'
})
.state('tabs.dashboard', {
url: '/dashboard',
views: {
'tab-dash': {
templateUrl: 'app/dashboard.html',
//controller: 'SignupCtrl',
}
}
})
.state('tabsEs.dashboardEs', {
url: '/dashboard',
views: {
'tabEs-dash': {
templateUrl: 'app/dashboardEs.html',
//controller: 'SignupCtrl',
}
}
})
.state('tabs.adults', {
url: '/adults',
views: {
'tab-dash': {
templateUrl: 'templates/tab-adults.html',
//controller: 'DashCtrl'
}
}
})
.state('tabs.adultsEs', {
url: '/adultsEs',
views: {
'tab-dash': {
templateUrl: 'templates/tab-adultsEs.html',
controller: 'customersCtrl'
}
}
})
.state('passwordResetForm', {
url: '/passwordResetForm',
templateUrl: 'app/auth/login/passwordResetForm.html',
controller: 'PasswordResetCtrl',
});
$urlRouterProvider.otherwise('login');
}]);
})();
When the state is tabsEs.dashboardEs it display correctly my navbar in spanish from templates/tabsEs.html. But I have been struggling some days to do the same when state change to tabs.adultsEs, but is not working, allways shown templates/tabs.html (english).
Does anybody see the error, or give me a tip to do this?
Regards,
Victor
Don´t duplicate your templates, use a plugin like angular-translate to add internationalization to your app. Explore the docs, it's really simple.
I had an issue a few days ago where I would get a random # inside the URL like:
http://localhost:55462/#/forgotpassword
I asked a question about this and added this inside my app.config section:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Thiss did not remove the # sign but just move it and now the URL looks like this:
http://localhost:55462/#forgotpassword
My current routing looks like:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'partials/login.html',
controller: 'loginController'
})
.state('forgotpassword', {
url: '/forgotpassword',
templateUrl: 'partials/forgotpassword.html',
controller: 'forgotPasswordController'
})
.state('forgotpasswordcode', {
url: '/forgotpasswordcode',
templateUrl: 'partials/forgotpasswordcode.html',
controller: 'forgotPasswordController'
})
.state('forgotpasswordnewpassword', {
url: '/forgotpasswordnewpassword',
templateUrl: 'partials/forgotpasswordnewpassword.html',
controller: 'forgotPasswordController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'partials/dashboard.html',
controller: 'calenderController'
})
.state('dashboard.calender', {
url: '/calender',
templateUrl: 'partials/dashboard.calender.html',
controller: 'calenderController'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
//.otherwise({ redirectTo: '/login', controller: 'loginController' })
});
and when i am redirecting to another page i am using:
$location.path('/forgotpasswordcode');
Can anyone help me out with this issue?
Use $state.go() instead of $location.path(). Make sure to inject $state wherever you want to use it also
$state.go(stateName[,params]) // example $state.go('dashboard.calender')
$state is a service provided by ui-router
i've an application that has multiple modules and it's using ui-view to switch between those modules.
My idea is to have within these parent $stateProvider, another $stateProvider inside each of these modules, so it can navigate inside those modules without the page reloading.
The outer $stateProvider is:
$stateProvider
.state('core',{
url: '/core'
})
.state('thing', {
url: '/core/thing',
templateUrl: './modules/thing/views/base.html'
})
.state('people',{
url: '/core/people',
templateUrl: './modules/people/views/list.html'
})
})
This is an example, but this system could scale a lot. And i want to use $stateProvider inside the module that is responsible for people state, for example. And inside the module 'app.people', using this config:
$stateProvider
.when('list',{
url: 'list/',
templateUrl: 'views/list.html',
controller: 'ListController',
controllerAs: 'list'
})
.when('insert',{
url: 'insert/',
templateUrl: 'views/form.html',
controller: 'FormController',
controllerAs: 'form'
})
.when('edit',{
url: 'edit/:id',
templateUrl: 'views/form.html',
controller: 'FormController',
controllerAs: 'form',
resolve: {
entity: ['EntityService', '$stateParams', function (EntityService, $stateParams) {
return EntityService.load($stateParams.id);
}]
}
})
Is this possible?
It's kinda easy to do that. Sorry about the question, but you just have to do this:
$stateProvider
.state('thing.list', {
url: '/list',
templateUrl: './modules/thing/views/list.html',
controller: 'ListController',
controllerAs: 'list'
})
.state('thing.insert', {
url: '/insert',
templateUrl: './modules/thing/views/form.html',
controller: 'FormController',
controllerAs: 'form'
})
.state('thing.edit', {
url: '/edit/:id',
templateUrl: './modules/thing/views/form.html',
controller: 'FormController',
controllerAs: 'form'
})
in the module that is on the inside.