I have set up my routing in Angular and all works fine:
$locationProvider.html5Mode(true);
$routeProvider.
when('/', { templateUrl: '/Home/Index' }).
when('/User', { templateUrl: '/User/Index' });
However I now have an anchor tag to work as a logout button which will just redirect the user to /User/Logout, and logout will then log the user out and redirect them to the login page. So what I want is for angular js to just ignore this specific route and allow it to do a normal http redirect. This seems like something that should be really easy but I haven't been able to find a solution to the problem.
I know I could do a click event and do a window.location change in the click event but that seems like a really hacky way to do it.
specify target="_self" in your anchors, so that angularjs does not rewrite URLs. See the discussion here: http://docs.angularjs.org/guide/$location
You could use a function with redirectTo also:
.when('/User/Logout', {
redirectTo: function(obj,path,search) {
window.location.href=path;
}
})
Related
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
I have a route defines as follows:
$routeProvider.
when('/projects/', {
controller: 'ProjectCtrl',
controllerAs: 'project_ctrl',
templateUrl: '/static/app/partials/project.html'
}).
After the login finishes I need the user to land on this link, hence in my controller I am using this:
vm.login = function(form) {
if (form.$valid) {
loginService.login(vm.loginFormData.username, vm.loginFormData.password);
loginService.setUpUser()
$location.url("/projects");
}
}
But unfortunately the controller associated with this view is not triggered, that is ProjectCtrl is not triggered. However when I click on the navigation link which uses in the dom, it works fine. Can someone please guide me here, may I am missing something conceptual.
Hence the larger question is how do I redirect a user in the controller using some APIs which also complies with ngRoute based controllers.
Try removing the last / in url so it matches $location.url("/projects");
$routeProvider.
when('/projects', {
If I set a link in an email to link back to say an /password/edit route, it resolves to the '/' route.
http://localhost:1337/#/password/edit?token=ZL6VusxDU
resolves to
http://localhost:1337/#/?token=ZL6VusxDU
and if I click back in the browser then it resolves properly to this route:
$routeProvider.when('/password/edit', {
templateUrl: 'templates/password-edit',
controller: 'PasswordEditCtrl'
});
I'm using ngRoute and have tried with and without base(href='/') and $locationProvider.html5Mode(true);. Any help much appreciated.
OK, so I am an Angular.js newbie and I am working on creating some rudimentary routing. I have the following definition for my routing:
JBenchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'JBenchCtrl'
}).
when('/calendar', {
templateUrl: 'partials/calendar.html',
controller: 'JBenchCtrl'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
When I load the page http://localhost:53465/default.html what I get is
http://localhost:53465/default.html#/dashboard
How can I make this show up as
http://localhost:53465/dashboard
The routes that you have defined are the text that appear after the hashbang in the URL - hashbang because you do not seemed to have set HTML5 mode to true.
Thus, when you load the page http://localhost:53465/default.html, AngularJS will attempt to load the route http://localhost:53465/default.html/#!/ where the route is / - the text that appears after the hashbang(#!).
Look at your routes. There is no route handler for /. Thus, the otherwise() function is executed which simply redirects to the route /dashboard. Thus, the final URL is http://localhost:53465/default.html/#!/dashboard
If you want to load the URL as http://localhost:53465/dashboard then simply provide the above URL as it is. You don't have to specify default.html as the route handler takes care of loading the relevant HTML file (based on the templateUrl property of the route handler object)
Rename default.html to index.html then you'll be able to navigate to http://localhost:53465/#/dashboard.
Hi friends i know how to go to an another page in jquery, I need the same in angular js.
$('#leaderboar').on('click',function(){
document.location.href='HomeScreen.html';
});
Can any one help me out in this.
Thanks
If you just want to redirect to a page(as in your jQuery code above) you can use :-
$location.path('/home');
You can also use $window as below :-
$window.location.href = 'HomeScreen.html'
From Angular documentation :-
$location does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.
$location.path('/other-page');
...
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/other-page', { templateUrl: 'other-page.html', controller: 'PageCtrl' })