Actually my angularjs routing is working fine, but now I want to route to different route from the searched url.
ex.:
I have two urls that are:
/en/Feedback
/ar/Feedback
These two url should route to the same route below.
.when("/Feedback", {
templateUrl: "/Scripts/Cms/Feedback.html",
controller: "FeedBackCtrl"
})
And if possible, I want to get 'en' or 'ar' to a variable before $routeProvider route to the url.
note: en and ar cannot be passed as parameter. It should be in the same format as given in url.
finally i found a way to change the url. I will not prescribe that way...
i just modified the "angular-route.js".
I just Edit the url before route checking from our set of routes we defined, has happen from "route.js"
Related
When I navigate first to my index page where the url is '/', I want to display the content of the state '/matches'. What you think is better?
I can use
$urlRouterProvider.otherwise('/matches');
that works, but I know it's not a good solution.
So I have to choose between
1- redirecting / to /matches and I tried
$urlRouterProvider.when('/','/matches');
but it didn't work.
2- specify multiple paths / and /matches to the same state matches which I don't know how to do.
In ng-route I used to do it like this:
.when('/', {
redirectTo : '/matches'
})
but I don't think it's good to combine ng-route with ui-router.
I found a perfect solution
app.run(function($state){
$state.go('/matches');
});
Once the app runs, I call the state that I want to load using $state.go and I also kept the
$urlRouterProvider.otherwise('/matches');
in case the user tries to enter an invalid url (state), he will be redirected to the initial state.
I have an issue where I want to have a parameter on the route url e.g
$stateProvider.state('/someRoute', {
url: '/:path',
.....
});
$stateProvider.state('/contact', {
url: '/contact',
.....
});
But if I do that then other pages get misinterpreted as being part of this. for example /contact url thinks that "contact" is the param and not the page.
Is there a way around this or do I need to have a sub-page e.g /something/:path?
The issue is that currently due to the order of the states, your first state will capture all urls as it's expecting some parameter.
/contact satisfies the /:path criteria.
Either move the /:path as the last state. or create a /something/:path
Routing doesn't occur if I don't include $urlRouterProvider.otherwise('/'); in the config.
my go app engine setting with gorilla is
r := mux.NewRouter()
r.HandleFunc(/admin, handleAdmin)
and angularjs config is;
angular.module('admin')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/',
templateUrl: '/admin/index.html',
controller: 'AdminController as admin'
});
//$urlRouterProvider.otherwise('/');
})
when I don't call $urlRouterProvider.othwerwise line, and I open http://localhost:8080/admin I expect to see admin/index.html, but I don't. I see it only if I navigate to http://localhost:8080/admin#/ manually.
But if I add $urlRouterProvider.othwerwise option and go to http://localhost:8080/admin it redirects automatically to http://localhost:8080/admin#/
I don't think this is usual way to do it because I may want "otherwise" to route to a custom 404 page. What point do I miss?
By default, Angular adds the hashPrefix in front of urls. So when you navigate to http://localhost:8080/admin , You don't see index.html since you have not yet visited the url as defined in the angular's ui-router. You will have to navigate to http://localhost:8080/admin/#/ to actuall be in the / state of your application.
It is the same reason that your app doesn't work without the .otherwise(), since then it automatically redirects you to the / state later.
For a possible fix:
Inside your .config function:
// This is in your app module config.
$locationProvider.html5Mode(true);
And in your index.html:
// This is in your index.html head.
<base href="/" />
The problem is not with not having a declared otherwise.
The problem lays on your route. You're specifying the url to be '/', that means the state home is accessible only through http://localhost:8080/admin/ and NOT through http://localhost:8080/admin
What the otherwise does is. When you access the url http://localhost:8080/admin the router try to find a state that matches the url, but don't find it. So it redirects to http://localhost:8080/admin/ which matches with your home state.
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.