I hava a list page:
$routeProvider.when('/', {
redirectTo:'/1', // so default will be page 1
}).when('/:page',{
controller:'listCtrl',
templateUrl:'xxxxx'
})
In the controller will use $route.current.params.page to do the logic.
The question is:redirectTo will cause a browser 301 which I don't want.(bad performance) And I also don't want everytime one click the main nav button, it would cause a 301.
How can I archive the same goal without use redirectTo?
It's something like: if I use the route same as '/:page'（write the same controller / templateUrl）, how can I pass the page number(1) to the controller without route param?
EDIT:
Thanks to the accepted answer.
Changed the title to Flask related.
Found that the 301 was caused by Flask's defaults route:
#bp.route('/list', defaults={'page':1})
#bp.route('/list/<int:page>')
def lst(page):
when the request uri is /list/1, will be 301 to /list... don't know how to resolve yet, but this is another question.
redirectTo in $route doesn't actually do an HTTP redirect - it just redirects logically to the right ng-view. So, there isn't any performance hit.
But just for completeness-sake, you can pass a parameter in the resolve property:
.when('/:page?',{
controller:'listCtrl',
templateUrl:'xxxxx',
resolve: {
page: function($route) { return $route.current.params.page || 1; }
}
})
Related
I'm familiar with returning 404 as the HTTP status code when you visit pages that do not exist. When you build static web sites, it works well and it makes sense, but in Angular it's different.
Let's say I visit /blah and it's not in my list of routes - then I redirect to /not-found. But let's say I visit a valid URL like /stuff/123 but the object Stuff123 does not exist in my backend. Should I then manually make a redirect in my
StuffController with $location.path('/not-found')?
This is my config now:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/stuff/:id', {
templateUrl: '/views/stuff.html',
controller: 'StuffController'
})
.when('/not-found', {
templateUrl: '/views/not-found.html'
})
.otherwise({
redirectTo: '/not-found'
});
});
Also, does it make sense to return 404 in Angular? If so, then how do I do that?
Should I then manually make a redirect in my StuffController with $location.path('/not-found')?
I would not redirect to not-found route. If object Stuff123 does not exist it still doesn't mean route is not found. It is found, just no data for this specific parameters. You should just show proper corresponding message.
Or think of this way. Not found is 404 status code. It's error code. However, what you describe is not an error situation, it just the absence to the data for this id. Thus in classical application you should have been SUCCESS 200 with just empty response [] for data. So again it's not "not found".
I know this is kind of old, but I found it easily by looking for 404 and angular so....
I think what you wanted to do way back when was use the 'catch all' route. The catch all route is '**'. So put something like this in your app module...
},
{
path: 'admin/orders',
component: AdminOrdersComponent,
canActivate: [AuthGuard, AdminAuthGuard]
},
{ path: '**', component: CatchAllComponent }
This way in the template you can give your users useful information, no matter what stuff they put into the address bar, after making that mistake.
I'm new to Laravel. As I asked in title, is there any route declaration in Laravel like AngularJS(otherwise) ? For example, I'll define some routes and all other URI requests will redirect to a certain page/index page/ error page ?
Your question is a little unclear, but it sounds like you're looking for a catch all route.
According to the Laravel Snippets sites, if you add the following to the end of your app/routes.php, this should give you what you want.
Route::get('{slug?}', function(){
return 'Catch All';
})->where('slug', '.+');
You clearly didn't even try to Google this: laravel routes.
http://laravel.com/docs/4.2/routing
In your Laravel application, locate to app/routes.php
That's where your routes are kept. You can define them like so:
Route::get('/home', function() {
return View::make('pages.home');
});
Or to call a controller:
Route::get('/home', ['uses' => 'HomeController#index']);
You can call HTTP verbs as well, like so:
Route::post('/some/form', ['uses' => 'YourController#process']);
Please see here for more info: http://laravel.com/docs/4.2/routing
I'm looking for something to accomplish in Backbone. Here is the explanation.
I have backbone routes like
{
'': 'defaultRoute',
'test': 'test',
'testing': 'testing'
}
Assuming my root url is '/routes'
Now when I say 'router.navigate('test', {trigger: true});' url changes to /routes/test.
Similar way when I call 'router.navigate('testing', {trigger: true});' url changes to /routes/testing.
But when I call 'router.navigate('', {trigger: true});' url changes to /routes/.
You know i didn't expect that / at the end. I never passed that. It should have been back to root url i.e. '/routes'.
Adding / at the end makes lot of difference/meaning. Checkout 'http://googlewebmastercentral.blogspot.in/2010/04/to-slash-or-not-to-slash.html'
Any fix for that (i.e. not having / at the end for default route)?
Try to override Backbone.History.prototype.navigate.
Copy default function and change this line :
var url = this.root + fragment;
to :
if(this.root !== '/' && fragment === ''){
var url = this.root.replace(trailingSlash, '');
}else{
var url = this.root + fragment;
}
First things first:
If your application is not being served from the root url / of your
domain, be sure to tell History where the root really is, as an
option: Backbone.history.start({pushState: true, root:
"/public/search/"})
Backbone#History
In your case, it is most likely to be something like root: "/routes". Something you need to keep in mind is that your website is seen in the browser as either a resource or a remote folder, therefore the default route without a trailing slash may not fully work by just leaving it as "" because that means usually "the current folder". You could try to set your root url as root: "/" instead (just as it should be by default) and create a "routes" resource as your default route, something like the following:
{
'test': 'test',
'testing': 'testing',
'routes': 'defaultRoute',
'*': 'catchAll'
}
Another recommendation that I am doing to you (as you can see it above) is to set your a catch all URL at the end in case someone enters a non-existent one, and you can also use it to redirect your users to your default route.
// your code above ...
defaultRoute: function() {
// your default route code...
},
catchAll: function() {
this.navigate('routes', {trigger: true});
}
// your code below ...
Finally, by any reason mess up with Backbone URLs manually, you are highly risking yourself to break the whole thing AND if in the future the API changes it should be easier to update if you just follow the intended use.
Update:-
This has been already fixed in Backbone's latest version. I asked a question on there forum and found the answer. I'm adding it here as an answer if it helps anyone who is looking for the same thing.
https://github.com/jashkenas/backbone/issues/2871
I have multiple routers in my app, in general way it looks like this:
// Start backbone.js
if (!Backbone.History.started) {
Backbone.history.start({pushState: true, hashChange: false});
}
// Perform some RPC requests ...
// Depending on user role, received from the server should be created suitable router:
var router;
if (typeof app.user.role === 'manager') {
router = new routers.manager();
} else {
router = new routers.guest();
}
Problem is that after page is loaded and script is executed routers do not do. anything. They do not load route for current url automatically. So, i had to fix it this way (i am not sure that it is a right way):
routers.guest.initialize = routers.manager.initialize = function() {
var defaultRoute = 'default';
if (typeof this.routes[Backbone.history.fragment] !== 'undefined') {
this[this.routes[Backbone.history.fragment]]();
} else {
this.navigate(defaultRoute, true);
}
};
It is working fine, except one bug: when i use route with params, for example /reset-password-confirm/:code - it is unable to find in in routes property. I could write some more code to fix it, but i suppose that i am doing something wrong, if i have to write such things - as i understand router should handle routes just after it was created.
So, questions:
Why my router(s) does not handle routes for current url after it is being created? Perhaps i need to start backbone history later? (but this bug will happen again later then)
How it is possible to make routes with params like /user/:id work there?
Perhaps it is bad idea to re-create routers? Perhaps it is better to create all of them one time?
P.S. I've tried to create both routers and keep them, also i've trie to call backbone history start method after all routers were created.. but this didn't help :/
Assuming you route is declared as the following:
routes : {
'/user/:id' : 'user'
}
Your initialize code is not working because when you initialize your router with a url such as: /user/1234. Backbone.history.fragment will be /user/1234 (not /user/:id). Since the this.routes object doesn't have a key of /user/1234, your else clause calls the default route.
If you first instantiate your router then call Backbone.history.start(), you will be able to remove your router initialize code. When you navigate to a url as /user/1234 your router will match the /user/:id route and call the user function.
The following should work for you without adding your initialize code:
var router = (app.user.role === 'manager') ? new routers.manager()
: new routers.guest();
Backbone.history.start({pushState: true, hashChange: false});
Looking at the code, seems like you're starting the backbone history before initializing any routes. That's most likely not goning to work.
The correct way of doing this type of seperation is by creating all the routes based on the role received from the server and then start the backbone history. Here's an SO thread that talks about it with code samples as well : How to protect routes for different user groups
By enabling HTML5 mode in AngularJS, the $location service will rewrite URLs to remove the hashbang from them. This is a great feature that will help me with my application, but there is a problem with its fallback to hashbang mode. My service requires authentication, and I am forced to use an external authentication mechanism from my application. If a user attempts to go to a URL for my app with a hashbang in it, it will first redirect them to the authentication page (won't ever touch my service unless successfully authenticated), and then redirect them back to my application. Being that the hash tag is only seen from the client side, it will drop off whatever parts of the routes come after by the time they hit my server. Once they are authenticated, they may re-enter the URL and it will work, but its that one initial time that will cause a disruption to the user experience.
My question is then, is there any way to go from $location.html5Mode(true) to the fallback of full page reloads for un-supportive browsers, skipping the hashbang method of routing entirely in AngularJS?
The best comparison of available implementations of what I'm aiming for would be something such as browsing around folders on github.com. If the browser supports rewriting the URL without initiating a page refresh, the page will asynchronously load the necessary parts. If the browser does not support it, when a user clicks on a folder, a full-page refresh occurs. Can this be achieved with AngularJS in lieu of using the hashbang mode?
DON'T overwrite the core functionality.
Use Modernizr, do feature detection, and then proceed accordingly.
check for history API support
if (Modernizr.history) {
// history management works!
} else {
// no history support :(
// fall back to a scripted solution like History.js
}
Try to wrap $location and $routeProvider configuration in browser's HTML5 History API checking, like this:
if (isBrowserSupportsHistoryAPI()) {
$location.html5Mode(true)
$routeProvider.when(...);
}
Also may be you need to create a wrapper to $location if you use it to change path.
(Sorry for terrible english)
Why not handle the un-authenticated redirect on the client side for this situation? I'd need to know a bit more about exactly how your app works to give you a more specific solution but essentially something like:
User goes to a route handled by AngularJS, server serves up the AngularJS main template and javascript
User is not authenticated, AngularJS detects this and redirects to the authentication page
You could have something in the module's run block for when the AngularJS application starts:
module('app',[])
.configure(...yadda...yadda...yadda...)
.run(['$location', 'authenticationService', function($location, auth) {
if (!auth.isAuthenticated()) {
$location.url(authenticationUrl)
}
});
I've subbed in a service which would find out if you were authenticated somehow, up to you how, could be checking a session cookie, could be hitting your API to ask. Really depends on how you want to continue to check authentication as the client application runs.
You can try and override the functionality of the $location service. The general idea would be to rewrite the URL according to whether someone is already authenticated or not, or just use a single approach (without hashbangs) for all URLs, regardless to whether html5mode is on or not.
I'm not sure that I fully understand the use-case so I can't write the exact code that you need. Here is a sample implementation of how to overrides/implements and registers the $location service, just making sure that hashbang is always eliminated:
app.service('$location', [function() {
var DEFAULT_PORTS = {
ftp: 21,
http: 80,
https: 443
};
angular.extend(this, {
absUrl: function() {
return location.href;
},
hash: function(hash) {
return location.hash.substr(1);
},
host: function() {
return location.host;
},
path: function(path) {
if (!path) {
return location.pathname;
}
location.pathname = path;
return this;
},
port: function() {
return location.port ? Number(location.port) : DEFAULT_PORTS[this.protocol()] || null;
},
protocol: function() {
return location.protocol.substr(0, location.protocol.length - 1);
},
replace: function() {
return this;
},
search: function(search, paramValue) {
if (search || paramValue) {
return this;
}
var query = {};
location.search.substr(1).split("&").forEach(function(pair) {
pair = pair.split("="); query[pair[0]] = decodeURIComponent(pair[1]);
});
return query;
},
url: function(url, replace) {
return this.path();
}
});
}]);