it's probably a rookie mistake but I am having trouble changing my page using:
$state.go('login');
My routing looks as following:
$stateProvider
.state('login', {
url: "/login",
templateUrl: "./auth/login.html",
controller: 'loginCtrl'
})
I also added a
$rootScope.$on("$stateChangeStart", function (event, next) {...}
just to check if it gets there after I use $state.go() and yes; it gets there but it does not change my page or URL at all. Changing the page works fine with ui-sref="login" inside a view.html.
Other syntaxes I tried:
$state.go('login', null, {options: { location : true } } );
$state.go('login', {}, {location : true});
Btw, what I am trying to accomplish is redirecting to a login-page when the user is not authorized inside the $stageChangeStart-event.
Any ideas?
Visit Angular ui router - Redirection doesn't work at all . It gave me a more clear idea of what I was doing wrong.
The actual solution for me was found at the following page answered by frankwallis:
https://github.com/angular-ui/ui-router/issues/600
I replaced my default $urlRouterProvider.otherwise('/yourpage'); with
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("app.home");
});
Too bad I don't really understand the solution but atleast it works now!
Related
Hi guys am a beginner in mean stack development I have tried to refresh the page after logout.I have tried location.reload(); but it doesn't work tell me the possible code for page reload in this scenario
$rootScope.$on('$routeChangeStart', function (event) {
var storage = userService.isLoggedIn();
console.log(storage);
if (!storage) {
console.log('DENY');
$rootScope.adminlogin = "adminlogin";
console.log($rootScope.adminlogin);
$location.path('/login');
$route.reload();
// $state.go('/login', null, {reload: true});
}
else {
console.log('ALLOW');
$rootScope.admindashboard = "admindashboard";
var path = $location.path();
console.log(path);
console.log(storage);
if(path == '/login'){
$location.path('/');
}
}
});
You should use $window.location.reload() from the the $window service if you want to refresh the page. It does the same thing as the reload button in your browser.
The reason you should use the $window service instead of directly accessing the native window object as per the AngularJS documentation:
While window is globally available in JavaScript, it causes
testability problems, because it is a global variable. In AngularJS we
always refer to it through the $window service, so it may be
overridden, removed or mocked for testing.
On a side note as you stated you are using the $route service, just calling $route.reload() will only reload your controllers and not your entire application.
All you need to do is this little line of Vanilia JS:
document.location.href=document.location.href
EDIT: why is this getting downvoted?
if you are using routes, then on click of Logout just route it to your login page.
Snap shot from demo:
these are my routes:
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'modules/authentication/views/login.html',
hideMenus: true
})
.when('/', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
and when i click on 'Logout' on my page it should do somehting like:
<p>Logout</a></p>
it should redirect to login page as per routes.
I am having issue when i try to logout and perform a location.path('/') to homepage.
Below is my code,
angular.module('MyApp')
.controller('LogoutCtrl', function($location, $auth,$rootScope) {
if (!$auth.isAuthenticated()) { return; }
$auth.logout()
.then(function() {
$auth.logout();
$rootScope.user='';
$location.path('/');
});
});
my app.js for this calling is :
.state('login.logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
I found that it is not redirecting when I perform the logout action in the same state. Which is http://localhost:8000/#/
But it will work when I'm in different state. Any guidance pls?
1.your using state provider, so whenever you want to redirect page using url need to use like
$location.url('/');
if you want to use path then u need to pass state name as parameter for $location
$location.path('/page/login');
here '/page/login' is your login or whatever page you want to redirect that page state.
I highly recommend you use ui-router for your redirects as well.
Have a 'home' state point to the '/' url
.state('Home', {
url: '/',
....
})
and then just do something like
$auth.logout()
.then(function() {
// do your cleanup
return $state.go('Home');
})
Try:
window.location.href = "/";
I am building a simple HTML site using Angular JS ui-router.
I have built a custom 404 page ('www.mysite/#/error/404'), to which the user is redirected if the user types a url like 'www.mysite/#/invalidUrl'. This functionality was achieved by the following code snippet:
$urlRouterProvider
.when('', '/')
.when('/home', '/')
.otherwise('/error/404');
And the following state snippet:
$stateProvider.state('404', {
parent: 'app',
url: '^/error/404',
views: {
'errorContent#main': {
controller: 'error404Controller',
templateUrl: 'js/general/templates/error404.html'
}
}
});
I am trying to capture the invalid URL requested by the user to be displayed to the user like below.
The URL you requested cannot be found
Request: www.mysite.com/#/invalidUrl
I have tried listening to '$stateNotFound' event, which only seems to be firing when a specific invalid state is requested. I've also tried to listening to events '$stateChangeStart', '$locationChangeStart', and '$locationChangeSuccess' but couldn't find a way to achieve this functionality.
Is this possible? Please, share your thoughts - thank you
Awesome! Thank you Radim Köhler. I don't know how I didn't land on that thread when I searched but that helped me get the answer.
I changed the answer in that thread to fit my scenario which I am going to leave below for reference to any other users.
$stateProvider.state('404', {
parent: 'app',
url: '^/error/404',
views: {
'errorContent#main': {
controller: 'error404Controller',
templateUrl: 'js/general/templates/error404.html'
}
}
});
$urlRouterProvider
.when('', '/')
.when('/home', '/')
.otherwise(function ($injector, $location) {
var state = $injector.get('$state');
state.go('404', { url: $location.path() }, { location: true });
});
So the magic change was the function defined for 'otherwise' option. I didn't change the URL of the 'error' state. Instead, I used the 'state.go' to activate state '404' and passed the location path as the state parameter.
Setting location=true will take you to the URL of the state, and location=false will not. Whichever way you prefer the invalid URL can be accessed easily now.
i want create a route for angularJs which will be accessible only from application code and links. The main idea is to prevent the user to access the page after directly typing route url in browser's location bar.
For route configuration i use "ngRoute" module's $routeProvider.
I can't find an answer for this question. Is the thing i need possible?
Thanks in advance.
You can listen $locationChangeStart event. In your routes you can set a parameter (I've called it "restricted" but you could call it whatever you want) like this:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
template: 'Allowed from anywhere.<br>Go to main page',
restricted: false
})
.when('/main', {
controller: 'MainCtrl',
template: 'Allowed from anywhere.<br>Go to restricted page',
restricted: false
}).when('/restr', {
controller: 'RestrictedPageCtrl',
template: 'Allowed only from main',
restricted: '/main'
});
});
If it's false, that means there's no restriction, if it's set to a path, then the route is only accessible from that path. And you can check it with this:
app.run(function($rootScope, $location, $route) {
$rootScope.$on('$locationChangeStart', function(event, next, current) {
var nextRoute = $route.routes[$location.path()];
var currentPath = current.split('#')[1];
if (nextRoute.restricted && nextRoute.restricted !== currentPath) {
$location.path('/');
alert('You are trying to reach a restricted page!!!!');
}
});
});
You can change the behaviour and redirect user to another link or prevent location change with event.preventDefault();.
Note that if you are not using hashtag (#) in your links (html5Mode) you should change the way to get the current link.
Here's a plunker.
I'm using angular ui router / stateProvider. However I set up my url any parts after the second forward slash is ignored and it always sends to this state:
$stateProvider.state('board', {
url: "/:board",
views: {
'content': {
templateUrl: '/tmpl/board',
controller: function($scope, $stateParams, $location) {
console.log('wat')
console.log($location)
}
}
}
});
Which has only 1 forward slash. Even when I go to localhost/contacts/asdf The following state doesn't run.
$stateProvider.state('test', {
url: "/contacts/asdf",
views: {
'main': {
templateUrl: '/tmpl/contacts/asdf',
controller: function () {
console.log('this doesnt work here')
}
}
}
});
This is a console log of $location. As you can see $location only recognizes the last part of the url as the path. As far as I can tell that's wrong. It's missing the "contacts" right before it. Any url is interpreted as having only 1 part for the url and sends to the board state. How do I fix this. THanks.
Edit: found that this was caused by angular 1.1.5. Reverting back to 1.1.4 didn't have this.
This may be the cause: https://github.com/angular/angular.js/issues/2799 . Try adding a base href.
Looks like that fixed in AngularJS v1.0.7. Just tested it.