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.
Related
I have 10 similar boxes in my dashboard each are showing different values for a specific device. When the user clicks on each, I have to direct them to new page which shows more information about that device.
the layout of the second page for all devices is the same. I just need to update the $scope.
What is a clean angular way to achieve this, preferably not adding query to the url?
I am using $stateProvider and tried to make it work with onEnter() but couldn't yet.
$stateParams should do the trick. To use it you need to specify the parameters when routing. For example:
(function(){
'use strict';
angular
.module('app')
.config(ApplicationConfig);
//set dependencies for ApplicationConfig
ApplicationConfig.$inject = ['$stateProvider'];
function ApplicationConfig($stateProvider){
//Define route states
$stateProvider
.state('main', {
abstract: true,
url: '/main',
templateUrl: 'pages/main/main.html',
controller: 'MainCtrl',
controllerAs: 'main',
cache: true,
params: {
user: null
}
});
}
Then you use $state.go('stateName', { param: param }), for example (following the previous example):
//Inside your original controller
function goToMainPage(param) {
$state.go('main', { user: param });
}
Finally, you access the parameter inside your destination controller by doing a $stateParams.param, or, in the previous example's case, $stateParams.user.
I have a view where it is possible to have different objects loaded based on an ID. It is a get request and the controller or state should not entirely reload. I am using ui-router and I've come across the "reloadOnSearch" property. Setting this to false should not reload the controller based on the params, it should only reload on state change. However this is not working. Here is my config function:
var MAIN_CONFIGURATION = {
Setup: function(app) {
app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
$stateProvider.state("myState",
{
url: "/mystate/:id",
reloadOnSearch: false,
templateUrl: "/app/Main/templates/test.html?version=0.0.0.0001",
controller: testCtrl
});
$urlRouterProvider.when("", ["$state", function($state) {
$state.go("myState");
}]);
}]);
.
.
.
}
};
Below is my partial HTML:
<tr ng-repeat="item in items" ui-sref="myState({id: '{{item.ID}}'})">
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
</tr>
Basically a bunch of table rows are generated and when a row is clicked on, I am expecting the controller to not entirely reload. However, it does. Even when pressing the back and forward buttons on the browser, it is being reloaded.
I have no idea what I am doing wrong, any help would be appreciated.
Actually I just figured it out. The route must contain "query" parameters. Thus I cannot use "/mystate/:id". I should instead use "/mystate?id".
I have an application based on Angular with the UI-Router. I'm trying to get the following URL structure
/base/category
/base/category/id
while serving different templates for each route.
I've been searching around a lot but couldn't find anything that helps me.
My code:
$stateProvider
.state('app', {
url: '',
templateUrl: 'views/app.html',
abstract: true
})
.state('base', {
url: '/base',
template: '<div ui-view></div>',
abstract: true,
parent: 'app'
})
.state('base.cat', {
url: '/:catId',
templateUrl: 'views/cat_view.html'
})
.state('base.cat.id', {
url: '/:id',
templateUrl: 'views/id_view.html'
});
Accessing /base/category returns the correct template, but /base/category/id also returns the category template (I want it to return id_view.html). I might want to add more dynamic parameters later on so I want a clean solution for this.
This is my workaround for now:
.state('base.id', {
url: '/:catId/:id',
templateUrl: 'views/id_view.html'
});
It works but the UI-Router doesn't trigger the active classes in my menu.
Thanks for taking time to read this, if you just point me in the right direction that helps me a lot!
There is a working example with the code above
Your concept is ok, just be sure, that parent has place for its child:
<div ui-view></div>
So, in our case, I added the above line into views/cat_view.html. That is the parent state view of the state 'base.cat.id'. These links are now working:
<a href="#/base/category">
<a href="#/base/category/1">
<a href="#/base/category/22">
Check it in action here
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}
When I go to the url /blog/post/edit, 2 xhr requests trigger, as you can see in the image below.
This is how I have defined the routes:
$stateProvider
.state('blog', {
url: '/blog',
templateUrl: '/blog'
})
.state('blog.post', {
url: '/post',
template: '<ui-view></ui-view>',
abstract: true
})
.state('blog.post.edit', {
url: '/edit',
templateUrl: '/blog/post/edit'
});
Can anyone help me figuring out why this is happening?
As quickly discussed in comments, the nature of the ui-router is to work this way. To show nested states with their parent states
The best way how to think about it is like a collapsed TreeView:
if we want to see a leaf (or any not root node) we have to see/load its parent, grand-parent ... and the root as well.
but once we want to see a sibling, we do not have to reload all the parent-to-root structure... is is already in play
And that's how the ui-router was basically designed.