What's the best way to direct a user to the home page if they happen to refresh from any other route (or state if you're using ui-router, as I am).
For example - I want them to begin on the inventory page. If they want to make edits, they travel to the edits page, but if they refresh that page, they go straight to the inventory route again.
I havn't used the ui-router but in ng-route we can do it like this
create a controller on top of your ng-view div
<body ng-controller="topController">
<div ng-view></div>
</body>
Define your routes normally but in topController just write this line
$location.path("/")
assuming that "/" is your main page where you want to redirect after refresh, don't forget to define $location
window.onbeforeunload = function()
{
window.setTimeout(function () { window.location = 'homeURL'; }, 0);
window.onbeforeunload = null;
}
Assume that #/inventory is your route, use otherwise
$urlRouterProvider.otherwise("/inventory");
See URL Routing - $urlRouterProvider
Related
in my dynamic web app i am using angularjs to have master page so,
in index.html have ng-view so that i can inject my other pages into ng-view. so that my menu ,header and foot will be constant.
index.html
<body ng-app="mainApp" >
//header
//menu
<ng-view></ng-view>
//footer
</body>`
main.js
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
})
.when('/business', {
templateUrl: 'franchiseMainContainer.html',
})
.when('/individual', {
templateUrl: 'individualLeadMainContainer.html',
})
.when('/newIndividaul', {
templateUrl: 'newIndividualLead.html',
})
});
till here its fine , the problem is i want to have a login page before loading index.html
where in my login.html i wont have menu,header and footer.
i want to have login page in the same single page(index.html) , when logging in i don't want menu footer and header . how can I achieve this.
please can any one help me.
redirect the base page to login page whenever user visit your web then check the user status, logged in or not if logged in redirect to home if not stay in the same page. as for navigation, menu item etc, a simple way you may create it in separate html document and include it in the page you wanted to show except login page, other alternative you may use angular ng-show/hide. i have sample workaround based on your code above https://embed.plnkr.co/hs09Tj5p3KNhb8KIqm4i/
I try to redirect a page by using window.location in js.
The page gets not redirected instead of showing Cannot GET /reportCaseupload like that in a blank page
can somebody say what can i do?
Here my code is:
temp[8] = "<span class='glyphicon glyphicon-file' title=\"Upload Report\" onclick=\"reportCaseupload(\'" + datum._id + "\')\"></span>";
function reportCaseupload(id) {
debugger;
window.location.href ='/reportCaseupload';
}
This means when i click a button,the reportCaseupload function will call and it simply wants to redirect my reportcaseUpload.html page thats it.
you have to inject $location in your controller
app.controller('rootController', function($scope, $location)
{
$location.url('http://google.com'); // to redirect specified url
$location.path('/app/login'); // to redirect relative path .
}
Your issue is that you do not need the / in your window.location.href statement. You should also likely be ending the href with the .html extension if "reportCaseUpload" is a html file.
It should look like this:
window.location.href = "reportCaseUpload.html"; //or just "reportCaseUpload"
I don't know why (sure?) ng-view doesn't reload datas changed from controller. The code is like this:
$scope.reloadUserInfo = function() {
APIs.tot_of(null).then(function(result) {
$scope.tot_of = result;
APIs.info_of(null).then(function(result) {
$scope.info_of = result;
});
});
};
$scope.info_of is reloaded in all view but not in ng-view like this.
<div id="page-content">
info_of or other params are reloaded
<div ng-view>Here, using routes, info_of or other params aren't reloaded.</div>
</div>
I created a function that reload info at every refresh or change route, so if I change route the ng-view data reload but if I use ng-click, data doesn't reload in ng-view. Who know why? Thanks.
Update with plnkr:
http://plnkr.co/edit/R5fCJykwbm2q18Px4BrZ?p=preview
This happens because your ng-view directive creates a child scope. If you remove the controller in your route, or in your view display {{$parent.name}} then it will work.
Background of how I am initializing my AngularJS app is here :
SCRIPT5022: 10 $digest() iterations reached. Aborting! and redirecting to index.html
Summery Problem
When I do a window.location = $scope.myReturnUrl and if the return URL contains a "#", instead of reloading the page, AngularJS captures the url change and it goes to .otherwise part of rout provider setting, and Angular App is loaded again. But, I am expecting it to redirect to specified URL.
Brief of how I am doing this:
I am loading my AngularJS app inside a Bootstrap Modal, this is how I initialize
var markup = '<div id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);
jQuery('#works-modal').modal('show');
in my app.js, html5mode is set to false for all modules :
$locationProvider.html5Mode(false)
So, when my app is initialized, the url look something like :
http://my-site.uk/user/dashboard.html#/mywork/find/id/9780273651
Now, there is a cancel button on Modal dialog, click on which I am trapping through ng-click, and when clicked, it simply do a redirection something like
window.location = $rootScope.returnToUrl;
now, in my case, return url contains id of the link that was clicked, so that browser can scroll to particular section, the return url is :
http://my-site.uk/user/dashboard.html#my-work1
my rout provider config
$routeProvider.
when('/mywork/find/:id', {
templateUrl: '/mywork/partials/find/find.html',
controller: WorkCtrl
}).
when('/mywork/find/review/submit/:id', {
templateUrl: '/mywork/partials/review.html',
controller: ReviewCtrl
}).
otherwise({
redirectTo: '/mywork/find/id/'+id
});
Problem
Now, when I am trying to redirect to : http://my-site.uk/user/dashboard.html#my-work1
instead of reloading page and scrolling to designated #ID, AngularJS is capturing the URL change and reloading the app instead. this happens because, AngularJS captures the url change and it goes to .otherwise part of rout provider setting, and Angular App is loaded again. But, I am expecting it to redirect to specified URL.
I am use html5mode(true) due to historic reason (mentioned in this thread : SCRIPT5022: 10 $digest() iterations reached. Aborting! and redirecting to index.html)
I don't want to remove the # from my return url because it will break the workflow. Any suggestion how to overcome this?
Thanks,
Ravish
So it sounds like you want http://my-site.uk/user/dashboard.html#my-work1 to redirect you to dashboard.html and scroll to the element with id="my-work1".
You might want to take a look at the $anchorScroll(http://docs.angularjs.org/api/ng.$anchorScroll) service. I'm not sure how it works exactly as I've never needed to use it, but I know it solves problems such as yours.
in your URL (http://my-site.uk/user/dashboard.html#my-work1) try pass 'my-work1'as a parameter in routeProvider like http://my-site.uk/user/dashboard.html/my-work1.
example:
when('/my/route/:param', {
templateUrl: '/mywork/partials/param.html',
controller: WorkCtrl
})
in your controller, get this parameter with $routeParams.
var myParam = $routeParams.param
$location.hash(myParam)//set anchor
$anchorScroll()//do scroll
I hope this solve your problem
Hello here is my scenario.
I have these routes
routes: {
"": "show_group_list",
"!/group/:_id/": "show_group",
},
and here is my navigate function:
App.app.navigate('!/group/'+group.get('_id')+'/', { trigger: true });
when the function is triggered, on the address bar it shows localhost/group/1 instead of localhost/#!/group/1. The problem is that when I refresh the page I don't get the initial page anymore (mine is a single page app)
How can I hack navigate() so that it keeps the hashtag?
Ok, This was easy, I had pushState enabled. Disable pushState and you'll have back the hash