Prevent the routing on page reload in AngularJS

My route provider setup looks like this:

app.config(function ($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');

$routeProvider
.when('/', {
    templateUrl: 'login.html',
    controller: 'loginCtrl'
})
.when('/home', {
    resolve:{
        "check":function($location, $rootScope){
            if(!$rootScope.loggedIn){
                $location.path('/');
            }
        }
    },
    templateUrl:'home.html',
    controller: 'homeCtrl'
})
.otherwise({
    redirectTo: '/'
   });
});

The first page of my app is login.html.

However, after logging in, whenever I refresh a page it always goes back to the login.html page.

I'd like the other pages to remain active upon refresh and have login.html be the initial landing page.

Answer №1

Every time the page is reloaded, a new $rootScope is created. To avoid this, it's important to store login details in a storage solution such as localstorage.

Referencing this link can provide additional information on how to properly store and retrieve data after logging in, ensuring secure access when resolving urls.

Answer №2

scotchApp.config(function($stateProvider, $urlRouterProvider, $compileProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $compileProvider.debugInfoEnabled(false);
        // setting up routes

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // about page route
            .state('about', {
                url: '/about',
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // contact page route
            .state('contact', {
                url: '/contact',
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });

            $urlRouterProvider.otherwise('home');
    });

Consider implementing something similar to this structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

Need help restarting a timer I've built in Angular with just a click?

I am in the process of developing a compact application that will help me keep track of my activities within a specific time frame. Once I input an activity into a field and click "OK," it should be added to a list. My current challenge lies in resetting ...

Is the background image on my class website too large?

I am having an issue with the redbar.png image in my CSS. It is positioned too high (within #container) and overlapping with the horizontal nav bar when it shouldn't be. I'm uncertain how to fix this problem. Any suggestions would be greatly appr ...

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

The website is experiencing crashes in IE11 whenever the developer tools are closed

I'm experiencing an issue with my website where it crashes internet explorer if the developer tools are not opened. I have checked for console.log calls as a possible cause, but that doesn't seem to be the problem here. The error is not just di ...

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

drawing tool with JavaScript and HTML5

Can you help me figure out why my sketchpad isn't working in Processing.js? I've checked my code and there are no errors, but the canvas is not showing up. Any suggestions? Take a look at the code below: function createSketchPad(processing) { ...

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

I recently developed a custom Snackbar component in React with Material-ui and Typescript. While working on it, I encountered some confusion regarding the usage of spread operators and await functions. (Example available here: https://codesandbox.io/s/gift ...

Methods for enlarging a sub-element without any impact on its encompassing parent element

I need the child class to not affect the overflow of the parent when I hover over it. My initial thought was to remove the line position: relative; from the parent, but this solution does not work properly when dealing with multiple nested positions. .p ...

Is it possible for .php files that don't contain any PHP code to be sent to the interpreter?

Does the PHP interpreter process .php files on a standard LAMP stack even if they do not contain any PHP code? In essence, is there any performance or processing impact in having a .php file without any actual PHP code compared to simply making it an .htm ...

How to efficiently handle callbacks with Angular Services for asynchronous HttpRequests?

I'm struggling with understanding how to correctly implement callback methods for ajax calls in Angular. In my Angular app, I want to display the testUser object only after the ajax call has successfully completed. Here is an example of my ng control ...

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

Varying heights based on the screen size

Currently, I am in the process of designing my website and incorporating some wave elements to enhance the background. However, I've encountered some issues when resizing the screen. Specifically, the waves seem to shift with a space between them as t ...

Unable to generate new entries with HTML Form

I've been working on creating a simple form with the ability to add new seasons or entries that will be posted to a database, but I've hit a roadblock. Whenever I try to run it, the "Add more Episodes" buttons for new seasons don't seem to w ...

How can I access the ng-template in a component?

How can I reference <ng-template #modal_Template> in my component.ts file? Previously, I triggered a modal using a button on my HTML file and included this code: <button type="button" class="btn btn-primary" (click)="openModal(modal_Template)"> ...

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

I am currently working on a desktop application where I am trying to filter specific divs inside an iframe using AppJS. However, I am facing an issue with hiding some of the div elements. Here is the code snippet: <!DOCTYPE html> <html> <s ...

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

Guide on how to dynamically add AJAX JSON array response to an HTML table

Hey! I need some advice on how to dynamically append a JSON Array response to an HTML table after submitting a form using AJAX. Here's the scenario: This is my form : <form id="myForm" method="POST"> <input type=" ...

How to adjust the background picture opacity in HTML

Is it possible to adjust the transparency of a background image in HTML? I came across one solution that involved adding a box on top of the background picture and changing the opacity of the box, which in turn changed the opacity of the background pictur ...