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.
Related
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
I've tried with various anwsers without any luck.
I have this two ui-views:
<div ui-view class="expand"></div> //Inside index.html
<div ui-view></div> //Inside home.html
And this is my routing:
$stateProvider
.state('home', {
url: '/',
views: {
'#': {
templateUrl: 'app/components/home/home.html',
controller: 'HomeCtrl'
}
}
})
.state('clients', {
url: '/clients',
views: {
'#home': {
templateUrl: 'app/components/clients/clients.html',
controller: 'ClientsCtrl'
}
}
})
I've tried putting names on the view and calling them in different ways but clients.html never gets display even though the route url changes.
I'm not entirely familiar with the view syntax that you're using with $stateProvider. I'll give you two versions, the first will seem very similar to your example and the second is more aligned with best practices.
$stateProvider
.state('base', {
abstract: true,
url: '',
templateUrl: 'views/base.html'
})
.state('login', {
url: '/login',
parent: 'base',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('dashboard', {
url: '/dashboard',
parent: 'base',
templateUrl: 'views/dashboard.html'
})
Best practice version:
(function () {
'use strict';
angular
.module('app.core')
.config(stateConfig)
.run(errorHandler);
stateConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
getZipCodes.$inject = ['googleMapService'];
errorHandler.$inject = ['$rootScope', 'logger'];
function stateConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('core', {
url: '/',
templateUrl: 'app/core/core.html',
controller: 'CoreController',
controllerAs: 'vm',
resolve: {
getZipCodes : getZipCodes
}
})
}
/** #desc: Ping the back-end for a JSON object that will be converted into an array of NYC zip codes */
function getZipCodes(googleMapService) {
return googleMapService.getZipCodes();
}
/** #desc: $stateChangeError handler */
function errorHandler($rootScope, logger) {
$rootScope.$on('$stateChangeError', function (error, event) {
if (error) { logger.error('Error while changing states', error); }
if (event) { logger.error('The event that caused the error', event); }
})
}
})();
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');
}],
})
I have over 100 pages. All pages use a different templates.
Currently, I have a long list of .state('page.html').state('page2.html') etc.
After 10-15 pages, I think this becomes unreadable/hard to manage.
Is there an easier/better way of organising states?
Javascript:
angular.module('app', ['ionic', 'ngCordova', 'app.controllers', 'app.directives', 'app.services', 'app.factories'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.hide();
}
if (typeof navigator.splashscreen !== 'undefined') {
// org.apache.cordova.statusbar required
navigator.splashscreen.hide();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/main.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/pages/home.html',
controller: 'PageCtrl'
}
}
})
.state('app.page2', {
url: '/page2',
views: {
'menuContent': {
templateUrl: 'templates/pages/page2.html',
controller: 'PageCtrl'
}
}
})
//100 .state('page.html')
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
You can organize your pages into different modules and add states specific to the module in the corresponding module's config. Also I suggest you to use ui-router which supports nested states and many other features.
For example:
angular.module('myapp.appointments', ['ui.router', 'myapp'])
.config(['$stateProvider', function ($stateProvider) {
var templatePath = ROOT_PATH + 'scripts/modules/appointments/views/';
$stateProvider
.state('appointments', {
url: '/appointments',
abstract: true,
views: {
"containerView": {
template: '<div ui-view></div>'
}
}
})
.state('appointments.list', {
url: '/list',
controller: "AppointmentsListCtrl",
templateUrl: templatePath + '/appointments-list.html'
})
.state('appointments.add', {
url: '/add/:fromPopup',
controller: "AppointmentsAddCtrl",
templateUrl: templatePath + '/add-appointment.html'
})
}]);
angular.module('myapp.customers', ['ui.router', 'myapp'])
.config(['$stateProvider', function ($stateProvider) {
var templatePath = ROOT_PATH + 'scripts/modules/customers/views/';
$stateProvider
.state('customers', {
url: '/customers',
abstract: true,
views: {
"containerView": {
templateUrl: templatePath + '/index.html'
}
}
})
.state('customers.list', {
url: '/',
controller: "CustomersListCtrl",
templateUrl: templatePath + '/list.html'
});
}]);
and you can have your main app's config containing some common states such as
angular.module('myapp', ['ui.router', 'myapp.appointments', 'myapp.customers'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
"containerView": {
controller: "DashboardCtrl",
templateUrl: ROOT_PATH + 'scripts/modules/dashboard/views/dashboard.html'
}
}
})
.state('404', {
url: '/404',
views: {
"containerView": {
templateUrl: ROOT_PATH + 'scripts/modules/common/views/404.html'
}
}
});
}]);
Instead of adding al these states, isn't it a better idea to dynamicly add the template based on a variable?
You might be looking for dynamic template name based on the state params
$stateProvider.state('app.page', {
templateUrl: function ($stateParams){
return 'templates/pages/page/' + $stateParams.pageid+ '.html';
}
})
Found this answer in:
ui-router dynamic template path