I have angularjs route with the following definition:
moduleA.config(function($routeProvider){
$routeProvider.
when('/A',{templateUrl:'A.jsp'}).
when('/B',{templateUrl:'B.jsp'}).
when('/C',{templateUrl:'C.jsp'}).
otherwise({
redirectTo: '/',
templateUrl: 'A.jsp'
});
});
Now, let say I click on something and it is redirected to #/C/ view. After refreshing the page, it is redirecting to view C and not to the default view.
I have to show default page after every page refresh happens.
I thought of changing the url to base url while refreshing the page, so that it can be redirected to default page. I am looking for better alternative for this through Angularjs way.
Thanks in advance.
Try this:
In the app.run() block inject 'window' and $location dependency and add:
window.onbeforeunload = function () {
$location.path('/');
};
Like #maurycy commented, If you want user to go to default page anytime a user he's comming to your application, you don't need the event.
just:
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
in your app.run() function.
It should work
Related
I have this routing on my webpage:
app.config(function($routeProvider)
{
$routeProvider
.when("/",
{
//
})
.when("/DokumentRoute",
{
templateUrl : "static/routes/dokument.html",
controller : "dokumentController"
})
.when("/MarkningarRoute",
{
templateUrl : "static/routes/markning.html",
controller: "markningarController"
})
.otherwise(
{
templateUrl: "static/routes/pageNotFound.html",
controller : "pageNotFoundController"
});
});
When I refresh the page (F5) I want to cancel the routing, meaning I don't want to show anything within the ng-view tag
<div ng-view id="view"></div>
This is what happens now:
When I start the web page it shows no routing-page. I click on "dokument" and it routes to the dokument page, which shows in the ng-view tag.
When I hit F5 the page refreshes, but it STILL SHOWS the dokument route!
This is what I want:
I want the routing to cleared. I want the web site to look like when I first entered it. (nothing showing in the ng-view tag)
How can I fix this?
If anyone is interested, this is how I solved it:
app.run(function ($location, $rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
});
I have a state named state.home() that is used to redirect a user to the home pageand this is my state:
$stateProvider
.state('state.home', {
url: '/home',
templateUrl: modulePath + '/views/home/home.html',
controller: 'state:HomeController',
controllerAs: 'homeCtr'
})
In another page after doing some work , in my controller i need to redirect the user to a specific Div in the home page, so in my controller i added this line for the redirection but it doesn't seem to be the right way:
$state.go('state.home',{'#': 'anchor'});
I want to know if it could work with the same state or I have to make a new state.
Give the div an id, e.g <div id="anchor"></div>
in the controller, navigate to the intended state and use anchor scroll to go to the div. Dont forget to inject $anchorScroll
$state.go('state.home').then(function() {$anchorScroll('anchor');})
I have the following setup:
I have a header controller which controls the top navbar of the page. When entering a different route I want to change the nav layout. The problem I am having is that I can detect the route but only when the user refreshes the page.
Example:
<div data-ng-controller="HeaderController" >
...
<span>Product Name - {{layout}}</span>
...
</div>
My header controller:
angular.module('myApp.system').controller('HeaderController', ['$scope', 'Global', '$location', '$route', function ($scope, Global, $location, $route) {
...
$scope.layout = $location.path().includes('projectEditor');
...
}]);
When you select a button it opens a page with the route: projectEditor/1. But the span only updates when you refresh the page. My plan was to use a condition on the class but it only works when the user refreshes the page.
I'm using 1.5.5 version of angular.
How can I get that scope variable in my header controller to update on change of route anyone know ?
In order to know when the location change, you should use events :
https://docs.angularjs.org/api/ngRoute/service/$route#events
The solution Depends on the implementation you are using to route your application.
Here is an example with default angular router
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
$scope.layout = 'newRoute';
}
I hope it may helps
Ok I figured it out I needed to use $routeChangeStart and update a $routeScope variable and then attach to that.
Thanks all!
Here's what I wish to achieve:
User is on url example.com/2
User goes to url example.com/2d <- this is not valid url
User is fowarded to example.com/2d/404_error
User clicks browser "back" button and lands on example.com/2
Here's what I have a problem with
User clicks browser "back" button and lands on example.com/2d
User is again automatically forwarded to example.com/2d/404_error
I have created infinite back button loop :(
In my app.config I have
.when('/:gameId/404_error', {
templateUrl: 'views/page_not_found.html'
})
.when('/:gameId', {
controller: 'game',
templateUrl: 'views/gamePage.html'
})
It is called out by app.factory when data is not fetched
}, function(response) {
// something went wrong
$location.path("/" + id + "/404_error");
return $q.reject(response.data);
});
I have tried the "otherwise" method, but using routeparams renders it useless.
You can test it out here:
http://vivule.ee/2 <- working url
http://vivule.ee/2d <- not working url
window.history.go(-2)
This method is pure javascipt you can try to use $window.history.go(-2) in angularjs
Good works!
Fixed it with ng-switch and ng-include
In the controller, when data is not loaded I added:
$scope.page_not_found = true;
And to the template I added:
<div ng-switch on="page_not_found">
<div ng-if="page_not_found" ng-include="'views/page_not_found.html'"></div>
</div>
Everything happens in one .html template. I hide the main content and import the 404 page with ng-include, this solution seems to be faster as well.
My application has several 'modal' windows, For now there is no specific route to reach an open modal directly. I mean, written the url directly in the browser.
There are a Jquery solution, but how implement some similar solution for angular? where placed? when should run?
You can perform this sort of task within the routing config of your app.
For example, this one is using ui-router, for the routes, and ui-bootstrap for the modals.
In the route config add an onEnter which will fire when the route is first entered.
.state('login', {
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
keyboard: false, // prevents escape-key closing modal
backdrop: 'static', // prevents closing modal outside of the modal
templateUrl: '/views/login', // view to load
controller: 'LoginCtrl' // controller to handle
})
}
})
Now, when navigating to the, in this example, login page the route will open the modal for me.