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.
Related
I have 2 states; viewOrder and saveOrder. Their definition looks like this:
$stateProvider.state('viewOrder', {
url: "/orders/:orderNumber",
templateUrl: 'tpl/orders/view.html',
controller: 'ViewOrderController',
controllerAs: 'controller'
});
$stateProvider.state('saveOrder', {
url: '/orders/save?orderNumber',
templateUrl: 'tpl/orders/save/index.html',
controller: 'SaveOrderController',
controllerAs: 'controller'
});
When I use $state.go('saveOrder') it gets confused and thinks I am trying to view an order and believes the /save is the actual order number.
Is there a way I can keep my URL like it is, but stop the confusion?
Try this, I have added the url param in saveOrder with a colon..
$stateProvider.state('viewOrder', {
url: "/orders/:orderNumber",
templateUrl: 'tpl/orders/view.html',
controller: 'ViewOrderController',
controllerAs: 'controller'
});
$stateProvider.state('saveOrder', {
url: '/orders/save/:orderNumber',
templateUrl: 'tpl/orders/save/index.html',
controller: 'SaveOrderController',
controllerAs: 'controller'
});
Your $state.go('saveOrder') is changing without parameter.
change like this $state.go("saveOrder", { "orderNumber": 123});
$stateProvider.state('viewOrder', {
url: "/orders/:orderNumber",
templateUrl: 'tpl/orders/view.html',
controller: 'ViewOrderController',
controllerAs: 'controller'
});
$stateProvider.state('saveOrder', {
url: '/orders/save/:orderNumber',
templateUrl: 'tpl/orders/save/index.html',
controller: 'SaveOrderController',
controllerAs: 'controller'
});
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
When I try to go directly to an url like mysite.com/#!/about I always get redirected to the home state. I have a menu with ui-sref links which are working fine. It's working fine with ngRoute but I have nested states so I cannot switch... As you can see I'm not doing anything special... You can check the complete source here: https://github.com/misterch0c/SL-frontend
.config(function($locationProvider, $stateProvider, $urlRouterProvider, $popoverProvider, envServiceProvider, ngDialogProvider) {
$locationProvider.hashPrefix('!');
$stateProvider
.state('home', {
url: 'home',
views: {
'': {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
},
'filters#home': {
templateUrl: 'views/filters.html',
controller: 'FiltersCtrl'
},
}
})
.state('about', {
url: 'about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
});
angular.extend($popoverProvider.defaults, {
placement: "bottom",
});
})
.run(['$state',
function($state) {
$state.transitionTo('home');
}]);
Try to define your url (of each state) with leading slash '/'
$stateProvider
.state('home', {
url: '/home',
...
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');
}],
})