Cannot change state from url bar with ui-router - javascript

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',
...

Related

ui router back button issue

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

How to handle static url anchors in Angularjs

How to handle the situation when you enter an URL for example http://localhost/#!/somepage/ but the problem is that AngularJS doesn't handle it and doesn't load the page, otherwise if you go to somepage through the index file it works correctly.
I use ui-router and my routing script looks like:
angular.module('WEBAPP', ['ui.router', 'bw.paging'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.when('', '/');
var states = [
{
name: 'home',
url: '/',
templateUrl: 'application/partials/home_header.html'
},
{
name: 'somepage',
url: 'somepage/',
templateUrl: 'application/partials/somepage.html',
},
{
name: '404',
url: '404/',
templateUrl: 'application/partials/404.html'
},
]
states.forEach(function (state) {
$stateProvider.state(state);
});
});
How to do the right routing, I want, when I enter url in browser http://localhost/#!/somepage/ AngularJS automatically redirect to that page.
Try it without the for each.I might be wrong but i Think when you are using for each in here only the last state gonna bind the $stateprovider instead of binding all the states. try it like this.
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'application/partials/home_header.html'
})
.state('somepage', {
url: 'somepage/',
templateUrl: 'application/partials/somepage.html',
})
.state('404', {
url: '404/',
templateUrl: 'application/partials/404.html'
})
edited
change the url this url: 'somepage/'
to this url: '/somepage'
and when you are calling remove the ! mark in the url.just http://localhost/#/somepage is enough.
var states = [
{
name: 'home',
url: '/',
templateUrl: 'application/partials/home_header.html'
},
{
name: 'somepage',
url: '/somepage',
templateUrl: 'application/partials/somepage.html',
},
{
name: '404',
url: '/404',
templateUrl: 'application/partials/404.html'
},
]
states.forEach(function (state) {
$stateProvider.state(state);
});
Use this
angular.module('WEBAPP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'application/partials/home_header.html'
}).when('/somepage', {
templateUrl: 'application/partials/somepage.html'
}).otherwise({
templateUrl: '/home'
});
});

how to change ionic ion-nav-view

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.

# appearing in URL for UI.Router

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

Ui-view within ui-view

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.

Categories