Controller runs every time it changes route

Question

Controller runs every time it changes route

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

In index.html I have 2 views:

sidebar-left: where the menu loads after login.
content: where the page in question is loaded

I'm using angular-ui-router and after login, the user is redirected to the dashboard.

The dashboard loads the sidebar-left:

.state('dashboard', {
            url: "/dashboard",               
            views: {
                'content': {
                    templateUrl: 'view/dashboard.html',
                    resolve: {
                        auth : function ($q, Session) {
                            var userInfo = Session.getUserInfo();
                            if (userInfo) return $q.when(userInfo);
                            else return $q.reject({ authenticated: false });
                        }
                    },
                    controller: 'dashboard'
                },
                'sidebar-left' : { templateUrl: 'view/sidebar-left.html', controller: 'menu' }
            },
        })

It turns out that the sidebar-left is common on all pages, by switching from the dashboard to another area the sidebar disappears.

This I solved by adding the "sidebar-left" view on all routes.

It turns out that the "sidebar-left" view is associated with a controller that does a GET to the server and PHP reads the database and returns the menu.

Whenever I change the route, this controller is executed by making an unnecessary GET to the server.

The problem is the logic used, how do I make the menu load only once?

angularjs

asked by anonymous 18.11.2014 / 17:33

2 answers

Load all dependencies dynamically Multi-tenant application with asp.net webforms and routes

score 1 · Answer 1

Actually the way it was implemented each time the dashboard state is triggered the two controllers will be re-created.

If your idea is to leave the 'sidebar-left' always present, you can use the status hierarchy of the ui-router, see the following page: link

Specifically in your case, something like this:

state('root', {
   abstract: true,
   templateUrl: 'view/sidebar-left.html',
   controller: 'menu'
}).state('dashboard', {
   url: "/dashboard",
   parent: 'root',
   views: {
      'content': {
         templateUrl: 'view/dashboard.html',
         resolve: {
            auth: function ($q, Session) {
               var userInfo = Session.getUserInfo();
               if (userInfo) return $q.when(userInfo);
               else return $q.reject({ authenticated: false });
            }
         },
         controller: 'dashboard'
      }
   },
})

score 0 · Answer 2

I've used a different implementation, using ng-include and ng-view ,
I see a lot of it being used in these admin templates made in angularjs.

Example:

<body ng-app="app">
  <!-- #Aqui é o header-->
  <section ng-include=" 'views/header.html' "
           class="header-container "
           ng-controller="HeaderCtrl"></section>

  <div class="main-container">
      <!-- #Aqui é o menu-->
      <aside ng-include=" 'views/nav.html' " class="nav-container"></aside>

      <!-- #Aqui é o conteudo vindo das rotas do angularjs-->
      <div id="content" class="content-container">
          <section ng-view></section>
      </div>
  </div>
</body>