Consider the following ui-router configuration:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.feed', {
url: "/feed",
views: {
'menuContent': {
templateUrl: "templates/feed.html",
controller: "FeedCtrl"
}
}
})
I have the following link in my app:
<a ui-sref="app.feed({ feedId: 5 })">My Link</a>
I'm trying to get the feedId in state params:
angular.module('MyApp').controller('FeedCtrl', function($state) {
console.log($state.params);
});
But, unfortunately, $state.params is always {}.
What am I doing wrong?
BONUS QUESTION
I expect FeedCtrl to be initialised every time I click on the link, i.e. every time the state is changed to app.feed. So, If I change between app.feed state and some other state multiple times, I expect the console.log above to run multiple times. But, it looks like ui-router initialises FeedCtrl only once. Why?
To pass a parameter - we have to define it:
.state('app.feed', {
url: "/feed/{feedId}",
views: {
'menuContent': {
templateUrl: "templates/feed.html",
controller: "FeedCtrl"
}
}
In this case we define it as {feedId}
See more here
URL Parameters
Some examples:
'/user/{id:[^/]*}' - Same as '/user/{id}' from the previous example.
'/user/{id:[0-9a-fA-F]{1,8}}' - Similar to the previous example, but only matches if the id parameter consists of 1 to 8 hex digits.
'/files/{path:.*}' - Matches any URL starting with '/files/' and captures the rest of the path into the parameter 'path'.
'/files/*path' - Ditto. Special syntax for catch all.
In case we do have parameter defined, and we will navigate among states with different feedId values... we will really see, that that controller FeedCtrl is reinstantiated. That's how the ui-router was designed
Related
I have some parameters for category's URL like /:rootcategory/:sub/:sub which is dynamic and for product I have to route like /product/:productname/:producturl..... It is working good using ui-sref but when I come on the URL and refresh it the config got confused and in both URL case it sends me on the category page.
.state('category3',{
url: '/:name1/:name2/:name3',
templateUrl: 'template/product/productsgridpage.html',
controller: 'categoryCtrl',
parent: 'productpagelayout'
})
.state('product', {
url: '/product/:name1/:name2',
templateUrl: 'template/product/detailpage.html',
controller: 'productCtrl',
parent: 'productpagelayout',
})
Updated Answer:
The problem was category also validates product pages, url parameter of category state (/:name1/:name2/:name3) will accept (/product/disc/test) because name1 does not have any special checks to restrict the keyword products from not passing through. So what I suggest is have a regex check which will restrict the keyword product, so that this issue will not occour.
The regex for category will be like
url: '/{name1:\b(?!\bproduct\b)\w+\b}/:name2/:name3',
if name1 parameter starts with product the regex check will fail and category state will not be entered, so it will go to product state, this is what is needed by us.
.state('category3',{
url: '/{name1:\b(?!\bproduct\b)\w+\b}/:name2/:name3',
templateUrl: 'template/product/productsgridpage.html',
controller: 'categoryCtrl',
parent: 'productpagelayout'
})
.state('product', {
url: '/product/:name1/:name2',
templateUrl: 'template/product/detailpage.html',
controller: 'productCtrl',
parent: 'productpagelayout',
})
Previous Answer:
Since you pass "products/hplaptop5050/hp-laptop" it is taking products parameter as a category itself, thus goes to category instead, you need a static variable or even an unique input variable so that it does not get confused, might I suggest something like "/{categoryid:int}/:name1/:name2/:name3" or "/0/:name1/:name2/:name3", so that we have a clear difference from the product and category page.
.state('category3',{
url: '/{categoryid:int}/:name1/:name2/:name3',
templateUrl: 'template/product/productsgridpage.html',
controller: 'categoryCtrl',
parent: 'productpagelayout'
})
.state('product', {
url: '/product/:name1/:name2',
templateUrl: 'template/product/detailpage.html',
controller: 'productCtrl',
parent: 'productpagelayout',
})
Please read the section state declaration page from UI router docs, you can come up with a different approch if needed.
Reference: ui router state docs
I'm trying to create a structure for creating, reading, updating and destroying that consists on indenting params:
/items/create
/items/1/view || /items/1/edit || /items/1/remove
The states for those are like this in $stateProvider:
.state('items.create', {
url: '/create',
templateUrl: 'item/create.html'
})
.state('items.item', {
abstract: true,
url: '/:_id',
templateUrl: 'item/itembody.html'
})
.state('items.item.view', {
url: '/view',
templateUrl: 'item/item.html'
})
.state('items.item.edit', [... and so on ...]
I'm also redirecting /1 to /1/view using $urlRouterProvider:
.when('/items/:_id', '/items/:_id/view');
Problem is when trying to reach /items/create I'm being redirected to /items/create/view. Is there a way to protect or make an exception to this word so I can reach its URL?
I think your problem is that the urls are being combined, like so:
Appended Routes (default)
When using url routing together with nested states the default behavior is for child states to append their url to the urls of each of its parent states.
$stateProvider
.state('contacts', {
url: '/contacts',
...
})
.state('contacts.list', {
url: '/list',
...
});
So the routes would become:
'contacts' state matches "/contacts"
'contacts.list' state matches "/contacts/list". The urls were combined.
Try using different state names.
This is a syntax error, change this url: '/item/:_id.view' for this url: '/item/:_id'.
I am using Angular UI Router , and I have setup two routes
One for all the content pages like /about, /terms etc
$stateProvider.state('sidebarPages.page', {
url: ':slug',
views : {
...
}
});
And now I want to add another for other pages like our-team
$stateProvider.state('sidebarPages.page', {
url: 'our-team',
views : {
...
}
});
The problem is that the second state is ignored when I go to page /our-team and the first one is executed instead which is :slug , and could accept everything.
Is there a way that I can create these two states, one for specific pages , and one that will accept everything and put it in slug param , and based on param I can then bring it from DB.
I created working plunker here. The order decides. Create states with known names, then the one with the slug:
// States
$stateProvider
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
})
.state('other', {
url: "/other",
templateUrl: 'tpl.html',
})
.state('slug', {
url: "/:slug",
templateUrl: 'tpl.html',
})
;
Check it here
I have a request to add in another URL parameter that directs to a state that I already have set up. For efficiency purposes, I'm trying to see if I can add multiple URLs to point to the same state, or should I just use the $UrlRouterProvider.when() method to re-direct to that state in this new case.
Ex. this is what already exists
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
and the request is to add www.site.com/newlink that points to the link1 page. Is there something like this;
.state('site.link1',
{
url: '/link1, /newlink',
...
Try using the Regex and a parameter in the url. It is not optimal but works.
.state('site.link1',
{
url: '/{path:link1|newlink}',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
More information on regex in Urls.
To generate links with ui-sref pass the same parameter with the state name as a function
<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>
You use params:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
.state('site.link',
{
url: '/{link}'
..
}
so when you use the same state like this
$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})
you can used when() function
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
then on root config
angular.module('myApp', [...])
.config(function ($urlRouterProvider) {
$urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
$state.go('site.link1');
}]);
});
I found this approach to be quite simple and clean: create two equal states, just changing the url property
//Both root and login are the same, but with different url's.
var rootConfig = {
url: '/',
templateUrl:'html/authentication/login.html',
controller: 'authCtrl',
data: {
requireLogin: false
}
}
var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'
$stateProvider
.state('root', rootConfig)
.state('login', loginConfig)
I had almost the same problem, only with another constraint - I didn't want to use a redirect, since I wanted the url in the browser to stay the same, but display the same state.
This was because I wanted the chrome saved passwords to work for users that already saved the previous url.
In my case I wanted these two urls :
/gilly and
/new/gilly
to both point to the same state.
I solved this by having one state defined for /gilly, and for the second url, I defined an abstract state called /new.
This should be set up like this :
$stateProvider.state('new', {
abstract: true,
url: '/new'
template: '',
controller: function() { }
}).state('gilly', {
url: '/gilly',
template: 'gilly.html',
controller: 'GillyController'
}).state('new.gilly', {
url: '/gilly', // don't add the '/new' prefix here!
template: 'gilly.html',
controller: 'GillyController'
});
I started building ionic app on top of the sidemenu starter app. The starter app has a base state 'app' which is abstract and all the sidemenu pages are children of the app for example app.search, app.browse, app.playlists etc.
I have similar hierarchy. However, I want the start page to be some other page, which means it is at the app level.
The states look like this:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'menuContent' :{
templateUrl: "templates/join.html",
controller: 'joinCtrl'
}
}
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html",
controller: 'searchCtrl'
}
}
})
.state('app.results', {
url: "/results",
views: {
'menuContent' :{
templateUrl: "templates/results.html",
controller: 'resultsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
When I run the app, the url defaults to
http://192.168.1.4:8100/#/join
and shows a blank page. Obviously, the join.html is not blank. Also, the console.log messages in joinCtrl are not outputted.
I am not able to figure out why is it not loading the join page. When I change the otherwise to point to '/app/search', everything works.
Any idea what's going on? How do I load the initial page by default and then navigate to the 'app.search' state?
I would expect that because the app is abstract - it is there for a reason. To be parent/layout state. In its template should most likely live all other states.
If yes - check this working example I created to demonstrate that. What we need is to mark the join as a child of the app state. Then the 'menuContent' placeholder will be properly searched in the app template:
.state('join', {
parent: 'app',
url: "^/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
There is a working plunker
The definition url: "^/join", is there to support the idea, that the url defined like this:
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
will work even for nested state (join is child of app). See:
Absolute Routes (^)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
This is just one way... we can do the similar stuff if the join is not nested state, but then it should target the unnmaed view '' instead of 'menuContent'