Angular JS - reload entire Page

Question

I have an angular application and I want to load the entire page template after the user logs in

Here is my login code

        $scope.login = function (event) {
        event.preventDefault();
        Auth.login({
            username: $scope.username,
            password: $scope.password,
            rememberMe: $scope.rememberMe
        }).then(function () {
            $scope.authenticationError = false;
            if ($rootScope.previousStateName === 'register') {
                $state.go('home');
            } else {
                 $location.path("dashboard");
                }
        }).catch(function () {
            $scope.authenticationError = true;

        });
    };

When I navigate to the dashboard - I had hoped that all my controllers would load again but they dont Specifically I want to reload my header controller so the users name and image appears on screen - it is only reloaded when I press F5

Is there anyway to force a reload of controllers when a user is successful in the login?

Cheers Damien

index.html code with javascript imports

<!doctype html>
<!--[if lt IE 8]>         <html class="no-js lt-ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Page</title>
        <meta name="description" content="Responsive Admin Web App">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300,700' rel='stylesheet' type='text/css'>
        <!-- Needs images, font... therefore can not be part of main.css -->
        <link rel="stylesheet" href="fonts/themify-icons/themify-icons.min.css">
        <link rel="stylesheet" href="jsLibs/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="jsLibs/weather-icons/css/weather-icons.min.css">
        <!-- end Needs images -->


            <!-- build:css({.tmp,client}) styles/main.css -->
            <link rel="stylesheet" href="styles/bootstrap.css">
            <link rel="stylesheet" href="styles/ui.css">
            <link rel="stylesheet" href="styles/main.css">
            <!-- endbuild -->

    </head>
    <body data-ng-app="app"
          id="app"
          class="app"
          data-custom-page 
          data-off-canvas-nav
          data-ng-controller="AppCtrl"
          data-ng-class=" {'layout-boxed': admin.layout === 'boxed'} "
          >
        <!--[if lt IE 9]>
            <div class="lt-ie9-bg">
                <p class="browsehappy">You are using an <strong>outdated</strong> browser.</p>
                <p>Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            </div>
        <![endif]-->

        <section data-ng-include=" 'views/header.html' "
                 id="header"
                 class="header-container "
                 data-ng-class="{ 'header-fixed': admin.fixedHeader,
                                  'bg-white': ['11','12','13','14','15','16','21'].indexOf(admin.skin) >= 0,
                                  'bg-dark': admin.skin === '31',
                                  'bg-primary': ['22','32'].indexOf(admin.skin) >= 0,
                                  'bg-success': ['23','33'].indexOf(admin.skin) >= 0,
                                  'bg-info-alt': ['24','34'].indexOf(admin.skin) >= 0,
                                  'bg-warning': ['25','35'].indexOf(admin.skin) >= 0,
                                  'bg-danger': ['26','36'].indexOf(admin.skin) >= 0
                 }"></section>

        <div class="main-container">
            <aside data-ng-include=" 'views/sidebar.html' "
                   id="nav-container"
                   class="nav-container"
                   data-ng-class="{ 'nav-fixed': admin.fixedSidebar,
                                    'nav-horizontal': admin.menu === 'horizontal',
                                    'nav-vertical': admin.menu === 'vertical',
                                    'bg-white': ['31','32','33','34','35','36'].indexOf(admin.skin) >= 0,
                                    'bg-dark': ['31','32','33','34','35','36'].indexOf(admin.skin) < 0
                   }">
            </aside>

            <div id="content" class="content-container">
                <section data-ng-view
                         class="view-container {{admin.pageTransition.class}}"></section>
            </div>
        </div>




        <!-- endbuild -->
    </body>
</html>

    enter code here

The point of angular is that the whole page doesn't reload, you want header, body and footer templates and have each reload as needed. The main page, running the angular app IMO, should always remain loaded. — Drazisil
– Drazisil, Commented Nov 19, 2015 at 21:31
thats the problem for me. I have a main page. The login screen shows full screen and all other controllers are loaded. But the header controller needs to access a protected endpoint to get user details. This can only be done after the successful login. Hope that makes sense — Damien
– Damien, Commented Nov 19, 2015 at 21:33
Assuming you are using templetes, can you edit your question to include what your main page code is? It would be helpful. — Drazisil
– Drazisil, Commented Nov 19, 2015 at 21:36
Ah, and see what I was saying is I think you want to use ng-view. docs.angularjs.org/api/ngRoute/directive/ngView — Drazisil
– Drazisil, Commented Nov 19, 2015 at 21:43
Instead of using strings in your ng-includes use Angular expressions. Then you change them from your controller to kick the ng-include to reload. ng-view would work also. — georgeawg
– georgeawg, Commented Nov 19, 2015 at 21:48

scniro · Accepted Answer · 2015-11-19 21:43:15Z

3

You can do this with reload: true. This will execute your controller logic again.

reload v0.2.5 Boolean (default false), If true will force transition even if the state or params have not changed, aka a reload of the same state. It differs from reloadOnSearch because you'd use this when you want to force a reload when everything is the same, including search params.

$state.go('home', toParams, { reload: true });

Check out the quick ref docs for more information

answered Nov 19, 2015 at 21:43

scniro

17k8 gold badges67 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Damien Over a year ago

I was just looking at my template and its code - it doesnt use states at the minute. Would it be hard to integrate in states to existing angular code?

scniro Over a year ago

hm, I only assumed your application was wired for ui-router once I saw you were calling $state.go() in your code. That's an up in the air question and I could't answer it for you - it depends greatly on your current app architecture, how far along you are, manpower etc. As myself speaking, I'd go ui-router, no doubt - but that'll be for you to decide. If you do make the leap forward, this answer would be a way to reload a state and accomplish what you are trying.

Damien Over a year ago

thanks scniro - yea that shouldnt have been in there sorry - just realise that. I think I may try to integrate in the ui-router - would I be correct in saying then that I wouldnt need to maintain a file full of routes and I can have independent roles for each route?

scniro Over a year ago

no worries - if you're early on with this, I'd advise to make the investment in learning ui-router - you'll thank yourself later (I went through the exact same)

scniro Over a year ago

absolutely, check out this pluralsight tutorial. If you don't have an account, there's a free trial option!

|

sjokkogutten · Accepted Answer · 2015-11-19 21:47:13Z

1

Although I agree with Drazisil, you could use angular-ui/ui-router $state.reload(). Inject $scope in your controller and then create a method to reload.

$scope.reload = function() {
    $state.reload();
};

edited Nov 19, 2015 at 21:47

answered Nov 19, 2015 at 21:41

sjokkogutten

2,1052 gold badges22 silver badges26 bronze badges

Comments

Damien · Accepted Answer · 2015-11-19 22:40:10Z

0

Thanks guys for all your suggestions - some really good points

I was fit to get around it by using $scope.$watch on a variable that I set on successful login

answered Nov 19, 2015 at 22:40

Damien

4,13914 gold badges79 silver badges136 bronze badges

Collectives™ on Stack Overflow

Angular JS - reload entire Page

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related