Show 404 page not found - angularjs

Using ui-router in Angularjs users can accesses resources from my DB with a unique code in the URL like this:
http://example.com/abc123
with the state:
.state('show', {
url: '/:resourceID',
templateUrl: '/views/resource.html',
controller: 'ResourceController'
})
However, I'm not sure how to render the 404.html when a resource isn't found in the DB. At the moment I am returning a 404 error from Expressjs and I have an interceptor that then redirects using:
//detect 404 and redirect url
$window.location.href = "/error/404";
but this isn't ideal - you have to wait for the redirect and the URL changes.
How can I show a static 404.html and not affect the URL in the browser?

Related

How to use $urlRouterProvider.when to change Stamplay facebook redirect URI into correct route

So I am using Stamplay facebook login. But it looks like I can not change the redirect URI. So after successfully login on facebook end, it redirect to this URI:
https://actorreels.stamplayapp.com/?jwt=[token]#/_=_
This will trigger my main route instead of the admin route - where I want user to land after login. Here is my stateProvider setting:
$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'
})
As you see, the return URI will trigger people route with nameUrl = "=". I want user to go to admin route instead with jwt as JSON token. How can I do that?
I understand there is $urlRouterProvider.when() I can use to make "/?jwt=" into my admin route. But I do not know how to do that (either in Regex or function...). Could someone help me to figure this out? Greatly appreciated!
You can change the redirect URI for Stamplay inside the editor.
First go to the editor inside the USERS > AUTHENTICATION.
Here you will see icons for all the social logins.
On the far right, you can select the cog icon to manage setting for your login flow. Here you can changed the redirect URI for login, and logout.
Note that for your angular application, include the route beginning with the #. For example. https://mystamplayapp.stamplayapp.com/ is the base url, so your need to enter #/route inside the editor to go to the "route" route.

AngularJs Page Refresh Issue

Getting 404 error when I do refresh on angular page. HTTP Status 404 - /product/P12345
Below is the my route configuration
MyApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/product', {
templateUrl: 'components/product/product.html',
controller: 'ProductCtrl'
});
First time i'm hitting url as http://localhost:8080/index.html#/product/P12345 In the browser url get converted into http://localhost:8080/product/P12345
when i click on refresh button getting 404 error.
Not sure what causing the issue, any help is greatly appreciated.

angular redirect to route + cache

I have a login form at my homepage. When an user submit form angular send post request to auth/login (laravel's default auth system -> it doesn't matter). It logs the user but then I want to refresh homepage view. I tried this:
$http({
data: {},
method: 'POST',
..
}).success(function(data) {
..
$templateCache.remove('/');
$location.path('/');
});
But it's not working. In console I see new request at homepage, but it doesn't change any data(when the user logs in he can see his nick instead of login form).
Where can be problem? (maybe problem can be that I'm changing location to the current? when I set $location.path('/something-else') it works).
I thought it's possible to remove 1 certain template from cache, but it's. You can only remove all templates with $templateCache.removeAll();

AngularJS Redirect removing #

I have in my a .cshtml file a view that has a button that "updates"
The update button works but I want to redirect to home directory.
In my .js file i first had
success(function (data) {
//Showing Success message
alert("Incident Added");
$location.path("\Home");
})
The link went from /Home/Create to /Home/Create#/Home and just stays there. I would like it to go back to my home directory. Essentially going back to the home view after Create.
I also tried this
success(function (data) {
//Showing Success message
alert("Incident Added");
$scope.$apply(function () {
$location.path("/Home");
});
})
And the url didn't add the #/Home afterwards but it stayed the same of /Home/Create and didnt' go to /Home. I would like to know what do I need to do to get it go back home. Or rather learn how to do redirects properly.
Assuming your $routProvider has this set for home
$routeProvider
.when('/', { templateUrl:'home.html',controller:'CtrlHome'})
you should be able to just use
$location.path("/");
$location service designed for single page application it works with $route service and easily be misunderstood
if you want a basic HTTP Redirect to MVC route (eg. your.app.com/Home) use $window.location
$window.location.href = "/Home";

AngularJS pass request directly to backend

I think I've missed something but I have problem with implementing for example users activation process with use of links sent to users' e-mails.
I have page for signing up. After filling form request is sent to backend where some logic is done and also mail is sent to user's mailbox. In this mail there is activation link.
And here my problem starts - I want user to click that link and be moved to my page but I want to pass this token directly to backend to check its validity, activate account and at the end redirect user to login page.
How to implement that correctly?
That's my current routing configuration for AngularJS app:
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'appController'
}).when('/login', {
templateUrl: 'views/login.html',
controller: 'userController'
}).when('/signup', {
templateUrl: 'views/signup.html',
controller: 'userController'
}).when('/activate/:activationToken', {
templateUrl: 'views/activate.html',
controller: 'userController'
}).otherwise({
redirectTo: '/'
});
That's my current backend routing configuration for node.js:
router.post('/users/login', userHelper.shouldNotBeLoggedIn, authentication.login);
router.post('/users/signup', userHelper.shouldNotBeLoggedIn, authentication.signup);
router.get('/users/logout', userHelper.shouldBeLoggedIn, authentication.logout);
router.get('/users/activate/:token', userHelper.shouldNotBeLoggedIn, authentication.activate);
Here is how I return data from backend to frontend:
if (err) {
logger.error(util.inspect(err));
res.status(403).json({message: err.code});
} else {
res.status(200).json({message: 'accountActivated'});
}
One way is to use a pure back-end URL + view that handles the account activation if the token is correct, then 302 redirect to a regular URL where the Angular app lives. If the token is incorrect, redirect to a URL that displays an error message.
Update:
In userController, when the URL matches the URL sent in the activation email (this may already exist at /activate/:activationToken), sent the token to your back-end like this:
// Make sure to inject $http and $routeParams in your controller.
$http.post('/users/activate/' + $routeParams.activationToken, {}).success(function(response) {
console.log('Yay');
}).error(function(response) {
console.error(response.data.message)
});

Resources