For the following case :
$routeProvider
.when('/:city/:locality', {
controller: 'controller1'
})
.when('/:state/:city', {
controller: 'controller2'
});
Is there any way to distinguish between the two URLs on front-end to serve different controllers? For sake of scalability, please assume there can be other cases of similar variable URLs.
Edit: I cannot append constants in route because of SEO purposes.
Those 2 routes are exactly the same. They state that there are 2 path params that are dynamic.
You would neednto have something staric in the path for the route to know what your are trying to do.
Such as
/city/:city/:locality
And
/state/:state/:city
Related
I was wondering if it was possible with AngularJS to do something like this :
I currently have a route with a first parameter called 'resource' that can be "device" or "group". There is a second parameter called 'id' but it doesn't matter. With the following code the route accepts anything as first parameter :
.when("/templates/:resource/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
It makes me check in the controller if the value of the first parameter is either 'device' or 'group'. I would like to get rid of this verification part without creating two routes if possible :
.when("/templates/group/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
.when("/templates/device/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So my question is, is it possible, using ONE route, to have several urls ? Something like this for instance :
.when("/templates/('device'|'group')/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So I don't have to check the value of the parameter afterwards in the controller myself using
if([('group', 'device'].includes($routeParams.resource))...
Do you know if it's possible ? Or a similar way to do it?
Best regards,
You can't do what you want. If you want to use ui-router you can pull it off but AngularJS ngRoute does not give you the ability to use regexes, or bind route parameters to types. If you are willing to switch to ui-router I can give you an example of how to do what you want.
I am willing to switch to ui-router if it can help me achieve what I want to do.
Also, if it supports types it's nice as I have parameters that must be integers. I am going to have a look at some examples.
If you have any example with regexes It would be nice !
Trying to implement the following route system with angular stateProvider:
some_domain.com/abc/pqr/xyz
Issue is the number of levels after "some_domain.com" can vary. It can be like
some_domain.com/abc/pqr/xyz
some_domain.com/abc/pqr
some_domain.com/abc
some_domain.com/abc/pqr/xyz/1234
tried the many approaches for this in the state definition:
$stateProvider
.state('dummy', {
url: '/*',
templateUrl: 'views/home.html',
controller: 'LandingPage'
});
}]);
Can anybody help me regarding this?
As the parameters you are talking about are part of the route itself, so you cannot have a single route to handle all these cases. I can think of 2 ways to go about it :
Create a seperate route for each case.
Use optional parameters if you can modify the logic accordingly. If the parameters can be optional, they should sent as query parameters instead of making them part of URL as such. So, the URL becomes something like :
url: '/dummy?param1?param2?param3'
I am facing a url structure problem using ui-router in AngularJS. I want to have first level SEO friendly url structure like this:
https://people-profile.com/mike-david-tringe
So I can grab the SEO name "mike-david-tringe" via stateParam and use it to find data in database and populate the page.
The $stateProvider has code like this:
$stateProvider
.state('people', {
url: '/:nameUrl',
templateUrl: 'app/frontend/page.tmpl.html',
params: {
nameUrl: {squash: true},
},
controller: "PageController",
controllerAs: 'vm'
})
.state('admin', {
url:'/admin/:userId',
templateUrl:'app/frontend/admin/admin.html',
controller:'AdminController',
controllerAs: 'admin'
})
With above code, I can have https://people-profile.com/mike-david-tringe working with nameUrl = mike-david-tringe and I got SEO friendly first level url link. mike-david-tringe is SEO friendly and most important keywords beside the domain name.
But with this structure, https://people-profile.com/admin/ or https://people-profile.com/login/ will not work now. Since my controller try to grab admin as nameUrl and looking for data. And admin is not a nameUrl so my database will return null, the app will fail.
In short, stateParam nameUrl will grab anything after "/" so the url setting will think admin and login is :nameUrl but in fact, it is not.
So how do I structure my app ui-router structure to have SEO friendly url like https://people-profile.com/mike-david-tringe but when url is https://people-profile.com/admin/, it will load admin.html template and use AdminController instead as I defined in $stateProvider?
All you need to do is swap the order of them. The router will check in order of definition, so if /:nameUrl comes before /admin it will trigger first. But if you put /:nameUrl last then it will trigger on any url that hasn't already triggered something above.
A word of warning however. Moving between two urls that trigger the same state (like two urls that both hit /:nameUrl in your case) will not reload the controllers on the page. Only changing state will do that. There are options to change this behaviour, but it has always been very buggy for me.
I have a route string like the following var global_book_route = /books/:id specified in a variable.
I want to be able to use $route or $location to deep link to this route in a controller, is there a way to do this without re-specifying the url prefix?
This would work: var id=1; $location.path('books/'+id') -> '/books/1'
However, this does not: $location.path(global_book_route).search({id:1}) -> 'books/:id?id=1'
Is there a way I can use the route specified in the string to go to the correct location?
I think you are mixing up the route itself (/books/:id) with the representation of the route in your code.
For example, your global_book_route should be only "/books/".
Then, if you want to load a specific book, you can go the the location global_book_route + book_id as long as the route is declared in your code, like:
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
}
})
On a side node, when dealing with routes in Angular, it's really worth it to look into angular-ui, the ui-router offers a way better system to manage your routes and states.
In my AngularJS app I have one template and one controller that I can reach via 2 different url:
$routeProvider.when('/site/contents/:obj/:parent/:isnew?', {
templateUrl: '/partials/site/data.html',
resolve: {
loggedin: checkLoggedin
}
});
$routeProvider.when('/site/contents/new-obj', {
templateUrl: '/partials/site/data.html',
resolve: {
loggedin: checkLoggedin
}
});
The second route should statically set a parameter isnew=1, as I would do using a RewriteRule in apache, but looking at the documentation https://docs.angularjs.org/api/ngRoute/provider/$routeProvider it seems impossible to do.
Anyone had encountered the same question?
You can't really set default route parameters in Angular, if that is what you are trying to do.
The best idea would probably be to check in your controller if $routeParams.isnew is set and, if not, default it to 1.
Angular routes are supposed to be fairly simple rather than being heavily pattern based like RewriteEngine in apache, so the logic should be in your controller.
Your controller could look like so:
function($routeParams) {
$scope.isNew = ($routeParams.isnew || 1);
}
In your case, you can probably even get away with having no isnew param. Use the first route for modifying existing objects and the second for creating them (so the existence of obj in the params defines if it is new or not).