I have angular Js App with nested views, the issue i am facing is when i click on F5 in nested view it gets redirected to default state, i want to persist the current state.
I can understand on reload it goes to parent ui-view to load the dependencies and after that it redirects to default view i have mapped but how can i redirect it to initial view instead of default view.
routes.js
$urlRouterProvider.otherwise('/dashboard');
.state('dashboard', {
url: '/dashboard',
},
views: {
// the main template will be placed here (relatively named)
'': {
templateUrl: 'views/dashboard.html',
controller: 'dashboardIndexController'
},
'headbar#dashboard': {
templateUrl: 'views/headbar.html',
controller: 'headbarController'
}
}
})
.state('dashboard.home', {
url: '/home',
templateUrl: 'views/dashboard.home.html',
controller: 'dashboardController',
})
.state('dashboard.campaigns', {
url: '/campaigns',
templateUrl: 'views/campaigns.html',
controller: 'showCampaign',
})
dashboard controller
$state.go('dashboard.home');
when i click refresh on campaigns state it redirects back to dashboard.home, which it should be as per code but how can i persist the campaigns or other nested states after reload.
Use window.localStorage.
Example
On successful landing on a page, store the current page name/url in the localStorage
window.localStorage.setItem('currentPage', window.location.pathname):
And after initialization, before redirecting to the home page, redirect to the previously stored url:
if (window.localStorage.getItem('currentPage')
$state.go(window.localStorage.getItem('currentPage'));
else
// go to home page normally
Related
I have an app that has a location setting which when changed updates currency/ language etc.. This is visible on every page as it's in my parent state. When the location is changed using the below button...
<button ui-sref="{location: 'Europe'}">Europe</button>
//(which generate a href of 'href="#/Europe/home"' on my homepage)
the app should reload the current state and the suitable view and reinitialise the states controller using the new location parameters value.
The location setting button is in my parent state's view...
.state('root', {
abstract: true,
ncyBreadcrumb: {
skip: true
},
url: '/:location',
views: {
'#': {
templateUrl: function(params) {
return views + params.location + '/index.html';
},
controller: 'MainController as main'
}
},
params: {
location: null
}
})
My child states look like this...
.state('root.home', {
url: '/home',
templateUrl: function(params) {
return views + params.location + '/home.html';
}
}
This is working fine on the initial page that I load. The problem is if I load the app on the homepage(for example), navigate to another state and then change the location, the user is thrown back to the homepage(or whatever page the app was initially loaded on).
I think it's because as I navigate through the app the currentstate and generated href of the location buttons doesn't change to reflect the currentstate but I can't fix it. Is it an issue with how I'm referencing the current state in the ui-sref of the location button(not specifying a state and just updating the parameter in {})?
I could probably do $state.go in my controller through an ng-click but then I would be missing the generated href which we need for seo.
Any solutions would be greatly appreciated.
I am trying to enter a ui-router parent or child state simply by navigating to its associated URL. I know that ui-sref is a proven, simple way to enter into a state via an a link, but just typing the URL of a state into a browser seems to always redirect me to my $urlRouterProvider.otherwise() statement.
For example, I would like to be able to navigate into the page state, via going to example.com/#/page in the browser. Instead, I am redirected to the otherwise.
JS
angular.module('app', [ 'ui.router', 'subapp']);
angular.module('app').config(function($urlRouterProvider, $locationProvider) {
}).controller('appCtrl', function(){});
angular.module('subapp', ['ui.router']);
angular.module('subapp').config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('#/page/nothing', '/');
$stateProvider
.state('page', {
url: '#/page',
templateUrl: 'page.tpl.html'
})
.state('page.edit', {
url: '/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
$urlRouterProvider.otherwise('/hello');
});
Index.html
<body ng-controller="appCtrl">
This is the index.html file<br>
Go to page state<br>
Go to page child state with a parameter
<ui-view></ui-view>
PLNKR: http://plnkr.co/edit/HQziTB2CyJrCvbgzzuJm?p=preview
ote I have a subapp service which is injected into the main app—but I don't think that would make a difference, as page state should still be a 'top-level' state injected into the index.html <ui-view>
How can I make it so that I can navigate to a URL (even one with a parameter) directly? The documentation says its possible, but I can't seem to get it to work.
I would say, that you are almost there. There is an updated plunker. But while your links could (should) be with # (we are not using html5Mode)
<a href="#/page">
<a href="#/page/myparameter">
<a href="#/page/11">
The state definition should not contain that sign:
.state('page', {
// instead of this
// url: '#/page',
// we need this
url: '/page',
...
.state('page.edit', {
// instead of this
// url: '#/:page',
// we need this
url: '/:page',
And then also these will work:
<a ui-sref="page">
<a ui-sref="page.edit({page:123})">
<a ui-sref="page.edit({page:444})">
Check it here
Your parameter URL is wrong, you cannot map URL with a fixed name and other url with a parameter cause will cause a crazy rewrite thinking this is a variable
$stateProvider
.state('page', {
url: '#/page',
templateUrl: 'page.tpl.html'
}
).state('page.edit', {
url: '/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
Use URL by this way:
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.tpl.html'
}
).state('page.edit', {
url: '/page/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
I'm working on a simple angular application using ui-router. I have a couple states for selecting and then editing information about a publisher. The relevant config:
.state('select-publisher', {
url: '/select-publisher',
templateUrl: '/Content/superadmin/src/templates/publishers/publishers.html'
})
.state('publisher', {
abstract: true,
url: 'publisher/{id:int}',
templateUrl: '/Content/superadmin/src/templates/publishers/publisher.html'
})
.state('publisher.details', {
url: '/details',
templateUrl: '/Content/superadmin/src/templates/publishers/details.html'
})
.state('publisher.ad-tags', {
url: '/ad-tags',
templateUrl: '/Content/superadmin/src/templates/publishers/ad-tags.html'
})
.state('publisher.native-ads', {
url: '/native-ads',
templateUrl: '/Content/superadmin/src/templates/publishers/native-ads.html'
})
Inside the select-publisher state I have a big list of available publishers. Each one of them is bound to an ng-click event that triggers the following function in my controller:
$scope.selectPublisher = function(publisher) {
publisherService.setSelectedPublisher(publisher);
$state.go('publisher.details', {id: publisher.Id});
};
This works just fine and takes me to the publisher.details state and renders the proper view. At this point the URL in my browser points to localhost:1337/superadmin#/publisher/39/details where 39 is the ID of the publisher that I selected.
The problem is, if I refresh this page or attempt to navigate directly to it by pasting the URL into the browser from another area of the application, I am ALWAYS taken back to the select-publisher state. I would like to be able to configure my states such that I am able to navigate to the details state (or any other state) based on URL.
Worth noting is that I do have a catch all route defined after all of my states:
$urlRouterProvider.otherwise('/select-publisher');
I'm assuming that for some reason this is being triggered but I can't reason as to why navigation works in my app using either $state.go as I have indicated in my controller as well as using ui-sref directive in my HTML templates but not through navigating directly to the URL.
Maybe it's because of missing slash url: /publisher/{id:int}
I'm developing an application with AngularJS which has a phonebook. The state page.phonebook contains a list with users and companies and a form with filters. The data is loaded via ngResource from the backend. If I click on a user, I'm getting to the users detail page. When I now do a browser back (backspace), I'm getting back to the phonebook list, but with a new $scope. That means that I lost the old state with all my filters, data, etc.
I guess the problem is that I load the state page.phonebook.user in the page view, which replaces the page.phonebook state.
But is it somehow possible to retain the old state? This includes the scroll position, the filter values and the data from the server.
This is my state configuration:
$stateProvider
.state('page', {
abstract: true,
controller: 'PageController',
templateUrl: 'app/templates/page.html',
})
.state('page.phonebook', {
url: "^/phonebook",
templateUrl: 'app/templates/page.phonebook.html',
controller: 'PhonebookController'
})
.state('page.phonebook.user', {
url: "^/user/:userId",
views: {
'#page': {
controller: 'UserController',
templateUrl: 'app/templates/page.user.html'
}
}
});
You can very well maintain the state. You need to persist the filters, and scrolling position as part of your stateparams or a service. Once you are navigating between the pages you can retrieve that back.
You'll probably be able to see what I'm trying to do. I want to transitionTo() a child state onEnter() the root path. The auth resolve determines if a company or user is logged in. It currently seems to go into an infinite loop, but I'm not entirely sure why. Let me know if you can point me in the right direction. Thanks.
$stateProvider
.state "home",
template: '<ui-view autoscroll="false"/>'
abstract: true
url: "/"
resolve:
auth: (Auth) -> Auth.loggedIn()
onEnter: ($state, auth) ->
if auth.data.user? and auth.data.user
$state.transitionTo("home.user")
else if auth.data.company? and auth.data.company
$state.transitionTo("home.company")
.state "home.user",
url: ''
controller: "UsersController"
templateUrl: "<%= asset_path('users/ang_search_jobs.html.erb') %>"
.state "home.company",
url: ''
controller: "JobListingCtrl"
templateUrl: "<%= asset_path('job_listings/ang_full_user_matches.html.erb') %>"
If you are right about the infinite loop, I am guessing that the transitionTo call is happening before the initial home route has completed loading. This would make the home state begin loading again.
I would instead either use a controller for the home state with the user data injected, and perform the transitionTo from there. Otherwise I would use the router provider .when() function and inject the user data into that, performing the transitionTo from there.