Develop Reference

Prevent state reloading when changing states ui-router

I understand this has been asked and answered in multiple posts but I have attempted the solutions and still can't quite get there yet.
I have a few components that I'm routing between with ui-router and one is a contact form which, if a user enters data to and moves to another route then back to the contact form the state is reloaded and the form contents gone.
I saw another way of doing this by having a parent state and child states but couldn't recreate this in my code.
Maybe there's a simpler solution by using ui-router-extras with the sticky option although I attempted this and could't get it working either. I'll post the code as it works now.
(function () {
angular.module('personalPortfolio')
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('about', {
sticky: true,
url: '/about',
template: '<pg-about></pg-about>'
})
.state('development', {
sticky: true,
url: '/work',
template: '<pg-dev></pg-dev>'
})
.state('contact', {
sticky: true,
url: '/contact',
template: '<pg-contact></pg-contact>'
});
$urlRouterProvider.otherwise('/about');
}]);
})();

You can create a service when You will store unsaved form data.

How to add optional parameters with AngularJS router?

I have two Angularjs broadcast options one is for add and other one is for edit for both routing i have different keys to redirect user to the page. For add state $stateParams processId is rendered but for edit state ChallengeKey id is undefined. So question is how to defined optional parameters with router so if its edit it can take challengeKey and route it to appropriate page.
so far tried code..
Ctrl.js
$scope.$on('addProcessChallenge', function (s,processId){
$location.path('/addEditChallenge/' + processId);
}
$scope.$on('editPrcChallenge', function (s,chalengeKey){
$location.path('/addEditChallenge/' + chalengeKey);
}
app.js
.state('app.addChallenge', {
url: '/addChallenge/:processId:/challengeKey',
templateUrl: 'views/processChallenge.html',
controller: 'Ctrl',
data: {
authenticate: true
},

Angular 1.3 + ui-router + generator-ng-poly embedding nested(?) views not working

I am new to Angular, ui-router and generator-ng-poly and am hoping someone can help with what is likely a simple syntax issue.
I am using generator-ng-poly for a new project and working from the "Deep Level Example" with an Angular 1.3 based app using ui-router and HTML.
First I created a "home" module, then a "header" module inside that. So...
yo ng-poly:module home
yo ng-poly:module home/header
Which gives me these two controllers:
app/home/home.js
(function () {
'use strict';
/* #ngdoc object
* #name home
* #requires $stateProvider
*
* #description
*
*/
angular
.module('home', [
'ui.router',
'home.header'
]);
angular
.module('home')
.config(config);
function config($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.tpl.html',
controller: 'HomeCtrl',
controllerAs: 'home'
});
}
})();
and
app/home/header/header.js
(function () {
'use strict';
/* #ngdoc object
* #name home.header
* #requires $stateProvider
*
* #description
*
*/
angular
.module('home.header', [
'ui.router'
]);
angular
.module('home.header')
.config(config);
function config($stateProvider) {
$stateProvider
.state('header', {
url: '/header',
templateUrl: 'home/header/header.tpl.html',
controller: 'HeaderCtrl',
controllerAs: 'header'
});
}
})();
Now I want to use the "header" from within home.tpl.html and I am struggling with how to do this. From what I understand either
<div ui-view=“header”></div>
or
<div ui-view=“home.header”></div>
should work. But neither is. Hours of Googling has not helped since all the examples use the more common $stateProvider format where there are chained states like so:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.tpl.html',
controller: 'HomeCtrl',
controllerAs: 'home'
})
.state('home.header', {
url:'/header',
templateUrl: 'home/header/header.tpl.html',
controller: 'header/header-controller.js',
controllerAs: 'header'
});
How should I be referencing "header" to have it show up properly inside home.tpl.html?

To be able to use the header state in the home state, they will need to nested (chained). Your application can only be in one state at once, but nested states need allow the use that you require.
So, it's not obvious, but you can safely make one state the parent of another in separate files/configs because of the way registration works (emphasis is mine):
If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered. - Nested States
Also, the ui-view attribute does not take the name of the state that you want as you showed in your example. It is instead creating a named view (a very powerful feature - Multiple Named Views), but something you probably don't need just yet. Just leave is as:
<div ui-view></div>
So to set the application to the correct state, use $state.go() function: e.g.
$state.go('home');

did not exactly understood your target goal. Do you want to add named view header on the level of your main view home (see Multiple-Named-Views)
or simple nested view?
If so, you should not give a name to you ui-view in html,
and define a name of child route with dot syntax to infer your hierarchy to the $stateProvider, like this:
$stateProvider
.state('home.header', {...})

Can't navigate to ui-router state with URL

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}

Retain parent state in AngularUI Router

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.