Controller runs every time I change route

Asked

Viewed 325 times

3

In index.html I have 2 views:

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

I am using angular-ui-router and after login, the user is redirected to Dashboard.

On the Dashboard is done the sidebar-left loading:

.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 the sidebar-left is common on all pages, when switching from Dashboard to another area the sidebar disappears.

This I decided to add on all routes the view "sidebar-left".

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.

Every time I change the route, this controller runs an unnecessary GET to the server.

The problem is the logic used, as I do for the menu to be loaded only once?

angularjs

2 answers

1

Really the way it was implemented each time the 'Dashboard' state is triggered the two controllers will be created again.

If your idea is to leave the 'sidebar-left' always present, you can use the state hierarchy content of the ui-router, see the following page: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

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'
      }
   },
})

0

I have used a different implementation, using the ng-include and the 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>

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.