I am using UI Router with html5Mode enabled, states are loaded from JSON.
Expected behavior after F5 or when pasting URL is, respectively, having current state reloaded or navigating to the said state, instead the initial application state is loaded.
For e.g. root/parent/child gets redirected to root/.
By the way, navigating with ui-sref works fine.
So, how can the state be retained after page reload?
In order to retain the state of page after reload app, a url represent the state should be gave. when you include ui-route module, url will be parsed and sent to corresponding state. You don't need to parse the url handly in most cases, ui-route born to do this.
Please can you post your code here? Specifically the $stateProvider.
This is an example of a correct $stateProvider and it works fine:
$stateProvider.state('main.admin', {
url: '/admin',
resolve: {},
views: {
'main-content#main': {
controller: 'AdminController as admin',
templateUrl: 'main/admin/admin.tpl.html'
}
}
});
Seems a bit hacky, but works for now.
app.run(['$location', '$state', function ($location, $state) {
function stateFromUrl () {
var path = $location.path(),
hash = $location.hash();
// do JSON states map parsing and find a corresponding to the URL state
return state;
}
if (stateFromUrl) {
$state.go(stateFromUrl);
} else {
$state.go('home'); // initial state
}
}]);
Related
I'm struggling with this counfiguration of $stateProvider and $urlRouterProvider for days now.
My problem is, in fact, that after I use $state.go(), state changes normally, but url in browser stays the same (#/).
Additionaly, when I set the $urlRouterProvider.otherwise('home'); option, after every $state.go() router redirects to /home, no matter what state was picked.
My configuration:
StateConfiguration.$inject = ['$stateProvider', '$urlRouterProvider'];
function StateConfiguration($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
addState("state1", "/state1", "<example-page></example-page>");
addState("state2", "/state2", "<example-page2></example-page2>");
addState("register", "/register", "<register-page></register-page>");
addState("error", "/error", "<error-page></error-page>", {
error: null
});
addState("myLibrary", "/my-library/{groupId}{groupName}", "<my-library></my-library>", {
groupId: null,
groupName: null
});
addState("home", "/home", "<main-page></main-page>");
///////////////////////////
function addState(stateName, url, template, params){
$stateProvider.state(
stateName,
{
url: url,
template: template,
params: params || {}
}
);
}
}
Can somebody point me, where I have error? Every state just uses another directive.
My goal is that when application changes state, the url in browser changes as well. Additionally, when user enter url like app.com/state-url, application redirects to state with url state-url. How should I do it?
UPDATE
As requested, I'm adding $state.go() calls, but they're not very "big".
service.home = function(params){
$state.go("home", params);
};
service.register = function(params){
$state.go("register", params);
};
Also, after looking closer, after going to register state, url changes for 0.5 s to register and then, goes back to home.
Your use of this is wrong:
$urlRouterProvider.otherwise('home');
The clue is in the name (urlRouterProvider) - it deals with url, not state, so you should do it like this:
$urlRouterProvider.otherwise('/home');
I can't comment on your $state.go calls, because you haven't provided examples of those.
I am working on web application using AngularJS and have used ui.router for routing.
I have configured the app
.state('init', {
url: '/',
controller: 'LocalizationCtrl',
templateUrl: 'partials/common/init.html'
})
.state('login', {
url: '/login',
templateUrl: 'partials/auth/login.html',
controller: 'LoginCtrl',
resolve: {
skipIfLoggedIn: skipIfLoggedIn
}
});
In init I load the localization json from server
If I hit the following URL it all works fine
http://localhost/app/index.html
However if I hit the following URL or any other state directly the localization files do not load
http://localhost/app/index.html#/login
How can I make sure that when app is loaded first using any URL the localization code should execute and not bypassed.
/ Bu default go to state -
angular.module('yourModuleName').run(["$location", function ($location) {
$location.url('/');
}]);
So, when you refresh or take your web application, your site will go to url /, so it should invoke your state, init to work.
Or you can use $state to go to a state upon starts
/ Bu default go to state -
angular.module('yourModuleName').run(["$state", function ($state) {
$state.go('init');
}]);
Its very simple there is a property "Resolve" you can use that.
In your parent state you can write this -
.state('parentState', {
resolve : {
localize : function() {
//Localization code here
}
}
};
Resolve will ensure that your localization work will be done before controller is loaded.
I have a couple of states the use the same controller. Some of these do not require a URL parameter while some do. How do I avoid a state from being accessible if the URL parameter is not provided?
Example:
I have 2 views or states, list and single. They both share the same controller. I have the routes mapped as follows:
state: app.list
url: /list
controller: appCtrl
state: app.single
url: /single/:id
controller: appCtrl
Now, I want single to be accessed only if the id is specified, other wise redirect to some other page. How is that possible using the same controller?
Approach 1
You can use $urlRouterProvider with when() for redirection.
app.config(function($urlRouterProvider){
// when there is an single route without param, redirect to /list
$urlRouterProvider.when('/single/:id', ['$match', '$state', function($match, $state) {
if($match.id === ""){
$state.transitionTo("app.list");
}
}
]);
});
Working demo: http://plnkr.co/edit/sEoUGGCEge0XbKp3nQnc?p=preview
Approach 2
You can check the param in controller side and redirect it to specific page
myApp.controller('MainCtrl', function($state, $stateParams) {
if($state.current.name == 'app.single' && $stateParams.id === ""){
$state.transitionTo("app.list");
}
});
Working demo: http://plnkr.co/edit/QNF1RHy4Prde4CRhNLFa?p=preview
Note: In the above demos, redirection works when your current state should not be app.single. Means, State will not change if you are in app.single state and trying without param. So go to main page, then click the link without param of single state. it will redirect to list state.
I can't figure out a reasonable way, which doesn't feel like a hack, to solve this rather trivial problem.
I want a guest to see a splash page when they access the index of the website and a logged in user to see their profile, with each page having it's own template and controller. Ideally, there would be two states for one url, and somehow I would be able to automatically alter the active one depending on the loggin status. Both of these views will have their own nested views so ng-include cannot be used (I assume).
I'm quite new to angular and ui router and think I might be overlooking an easy solution to the problem.
Could it be done with named views and ng-show?
If you're using UI Router, just create three states: the root state, with the '/' URL, and two direct descendant states with no URLs. In the onEnter of the root state, you detect the state of the user and transition to the correct child state accordingly. This gives the appearance of keeping the same URL for both child states, but allows you to have to separate states with separate configurations.
The templateUrl can be a function as well so you can check the logged in status and return a different view and define the controller in the view rather than as part of the state configuration
My Solution:
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/',
controller: function (Auth, $state) {
if (someCondition) {
$state.go('state1');
} else {
$state.go('state2');
}
}
});
});
where state 1 and state 2 are defined elsewhere.
For docs purposes, I used:
$rootScope.$on('$stateChangeStart', function(event, toState) {
if ((toState.name !== 'login') && (!$localStorage.nickname)) {
event.preventDefault();
$state.go('login');
}
});
Using $routeChangeStart didn't work for me.
It is used for me conditional view in ui-route
$stateProvider.state('dashboard.home', {
url: '/dashboard',
controller: 'MainCtrl',
// templateUrl: $rootScope.active_admin_template,
templateProvider: ['$stateParams', '$templateRequest','$rootScope', function ($stateParams, templateRequest,$rootScope) {
var templateUrl ='';
if ($rootScope.current_user.role == 'MANAGER'){
templateUrl ='views/manager_portal/dashboard.html';
}else{
templateUrl ='views/dashboard/home.html';
}
return templateRequest(templateUrl);
}]
});
If I understand the question; you want to make sure that the user who hasn't logged in cannot see a page that requires log in. Is that correct?
I've done so with code like this inside a controller:
if(!'some condition that determines if user has access to a page'){
$location.path( "/login" );
}
Anywhere (probably in some high-level controller) you should be able to just bind a '$routeChangeStart' event to the $rootScope and do your check then:
$rootScope.$on('$routeChangeStart', function(next, current){
if(next != '/login' && !userLoggedIn){
$location.path( "/login" );
}
});
This will get fired every time a new route is set, even on the first visit to the page.
The way I've done this is pretty simple. I made one for our A/B testing strategy. This is the gist:
resolve: {
swapTemplate: function(service) {
// all of this logic is in a service
if (inAbTest) {
this.self.templateUrl = '/new/template.html';
}
}
... other resolves
}
This gets called before the template is downloaded and therefor you're allowed to swap out the template url.
In my case, if two states can share logic of same controller, conditional template is a good choice. Otherwise, creating separate states is a good option.
I have an app setup with 2 states, A and A.B done this way:
$stateProvider.state('A', {
url: "/A/{aId}",
controller: 'AController',
templateUrl: function($stateParams) {
return "/A/" + $stateParams.aId + "/layout";
}
}).state('A.B', {
url: "/B/{bId}",
controller: 'BController',
templateUrl: function($stateParams) {
return "/A/" + $stateParams.aId + "/B/" + $stateParams.bId+ "/layout";
}
});
When I'm in state A.B ( the url would be somthing like #/A/12/B/123 ) and go back using the back button of the browser or transitionTo the url changes, state A.B is cleared but state A doesn't render back. As far as I can tell the controller isn't triggered.
So if I'm in A/12/B/123 and go back to A/12 nothing happens, but if I go back to A/13 ( using transitionTo ) it renders.
On the sample app from angular-ui-router project this scenario works fine, so I think there might be something wrong in my setup. I think it's worth mentioning that on index.html I have a ui-view which loades state A and the template for state A has another ui-view that loads state A.B
If anyone could help, I would really appreciate it
Have you tried using this:
$state.reload()
Its a method that force reloads the current state. All resolves are re-resolved, events are not re-fired, and controllers reinstantiated
This is just an alias for:
$state.transitionTo($state.current, $stateParams, {
reload: true, inherit: false, notify: false
});