Angular UI Router Otherwise fails to redirect - angularjs

I'm trying to setup and 404 page on my website by using
$urlRouterProvider.otherwise("/404");
but this only works for URLs that do not have multiple slashes/parameters. The following is all of my URLs and states in the same order as in my code:
Home – /
404 – /404
About – /about-us
Privacy – /privacy-policy
Terms – /terms-conditions
Subscribe – /subscribe
Author – /author/:author
Topic – /:category/page/:pageNumber
Post – /:category/:title
If there is a url with two slashes (Ex: /qwkhdjqkwnd/q1weuih), my app thinks it's a Post and tries to fetch information but this obviously fails – it does not know that this is not a valid URL, and thus does not redirect to my 404 page.
What's the best practice for this? Should I allow the app to try and fetch data using the invalid URL and, redirect the state when it fails?

Checking for an undefined object and redirecting to /404 worked for my purposes.

Related

How to route to two pages on certain conditions with $urlRouterProvider.otherwise(" ") in angularjs

I have a strange requirement. Since I have a 404 page on my angularjs app, I don't want to leave it unnoticed because it has a random joke API added to it.
Now my angular js application uses UI route provider for routing. I have a
$urlRouterProvider.otherwise("/home")
code in my angularjs configuration. I want the page to redirect to home if there isn't any path specified. E.g. https://mypage.com should route to https://mypage.com/#!/home but if someone types a wrong state name manually, it should redirect it to the 404 page.
My only question is since this requires two routings in otherwise statement, is it even possible? And if it is possible, then how?

React Router Url Giving Bad Request

I am facing a issue in routing.
the issue is when i hit the url - http://localhost:3000/extInsurance/16/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySUQiOiIzIiwiUm9sZUlEIjoiOCIsIlVzZXJOYW1lIjoiYWxpY2lhaGludG9uQHlvcG1haWwuY29tIiwiQ2xpbmljSUQiOiIxMjg5IiwiVXNlclR5cGUiOiJTVEFGRiIsIlN0YWZmSUQiOiIyIiwiUm9sZU5hbWUiOiJET0NUT1IiLCJCdXNpbmVzc1Rva2VuIjoiYmxvb2QwMDEiLCJPcmdJRCI6IjEzNTYiLCJCYXNlUm9sZUlEIjoiOCIsIkJhc2VVc2VyVHlwZSI6IlNUQUZ
this url get hits properly and i get the response. meaning i get redirect to correct page.
but when i push this on testing server then i am getting bad request with same url
also when i reduce the path then again it get hit properly on my testing server.
It's bad idea to use token as a part of URL path.
It's recommended to pass token as a optional URL parameter. Something like this,
http://localhost:3000/some-path?token=eyJhb...

AngularJS hash causes redirect to fail

I have build an AngularJS application and want to use paymill.com to offer different payment methods. I am currently struggling with PayPal.
This api-call allows me to specify a redirect url where the customer gets redirected to after the payment:
https://developers.paymill.com/API/index#create-new-payment-checksum
I get a response with this URL as 'return_url':
http%3A%2F%2Ftest.test.com%2F%23%2Fteatimes%2Fbuy%2Fp82uHoLI6z%2F1
which seems to be the correct encoding for:
http://test.test.com/#/teatimes/buy/p82uHoLI6z/1
Sadly the redirect after the payment does not work and simply redirects me to:http://test.test.com/?paypal_parameters/#/.
So it seems like that everything after the hashtag gets ommited...Is there a way to fix this on my end? I would rather not use html5 mode.
EDIT: If i use the above url without the '#' i get correctly redirect, but angularjs is unable to resolve this of course.
Why don´t you wanna use the html5 mode? you wouldn´t have any issue with the hashtag.
What angular method do you use for redirecting to the URL.

angularjs technique for login then redirecting to dashboard page

I'am doing my first AngularJS project with ASP.NET Web API backend. What I am trying to do is, whenever a user visits www.mydomain.com, a login page (index.html) will displayed. After successfull login, he will be redirected to the dashboard.html (this is the shell page, partial views go here). My project structure is shown below-
I am confused about some issues:
Is this the best/common practices what i am trying to do in above?
As because dashboard.html is the main page, should i place app.js on dashboard.html?
If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)?
How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part?
This question may be silly. I googled, but did not find any example/article addressing such issue.
Would you please help?
Thank you in advance.
I am not sure how ASP.NET deals with it, but to my knowledge ASP.NET is just a server side framework whereas AngularJS is client side framework.
These two framework solve different problem, but has some overlapping features.
If you start using angularjs, then most of the time you will deal with the term "Single Page Application (SPA)".
There are different approaches in how you can handle the url redirection after login. I will just show you two example. There are many more how you can handle the user authentication and session.
First Approach:
In SPA, most of the time browser will change the url route and state directly in the page itself without making the entire page request from the server.
With that said, your dashboard.html will most likely be come a static template file which will be loaded from the browser directly. (i.e. the server does not dynamically parse the dashboard.html but only serve as a static file). Upon the user login, the angularjs will fire a asynchronous HTTP request into the ASP.NET authentication end point. A successful login may return a token to the browser, and the client will use it to manage the user session. At the same time, the Angular will have to change the route to /dashboard/. Notice that that the entire flow happens transparent to the user, it does not fire a full page HTTP request.
Second Approach:
Alternatively, if you choose to redirect from the server, you will have to send a HTTP Redirect 302. and since HTTP redirect will eventually call make a full HTTP request to /dashboard/, and it will then have to reload and bootstrap the angular app.js from the browser again. In this case, the user will have to wait for the dashboard page to be processed by the server upon login
Issues:
Is this the best/common practices what i am trying to do in above? there are many approaches, I think it is best to find the one that works for you. If you have a RESTful API, then you might want to have a look at the SPA approach in more detail.
As because dashboard.html is the main page, should i place app.js on dashboard.html? in SPA, you don't need to load app.js twice. but if you use the second approach, you have to reload the app.js again.
If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)? depends on your approach as stated above
How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part? Authentication Strategy, UNIX style authorization
There are more official guide that can help AngularJS Developer Guide.
Hope this helps you to integrate with the ASP.NET authentication mechanism.
you should have multiple shell pages. this link can help you...
refer to Multiple Shell Pages part.

Best way to set up 404 pages in a angular SPA?

I have an application running on angular and I already have an http intercept setup. My issue is that my api returns some 404 errors that I would want to redirect to a 404 page and some that I wouldn't. For example when navigating to a new page, if the content of that page returns a 404 I want to direct to a 404 page instead of loading an empty template. However on a page where a user is checking out (paying for a purchased item) I check to see if they have a credit card token stored on file. If they do we can offer them the choice to use it. If they don't have one on file the api returns a 404 and we ask them to enter one.
My issue is that because of these two cases, it's not as simple at calling $state.go('404') anytime a 404 is thrown. I'm weighing a few options. One, have the api return a special message if it should redirect to a 404. This seems less than ideal, not really the responsibility of the api and we have multiple clients on a shared api. I could try to detect the current state/page in the http intercept and create a list of states that should redirect. I could $rootScope.$broadcast('no-template-data') or something similar from each controller that needs this and redirect from an global app.run function.
Has anyone else faced this challenge with single page applications?

Resources