OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

ui route - hierarchy prevent unnecessary calls to web service

  • Thread starter Thread starter BizTuk
  • Start date Start date
B

BizTuk

Guest
I'm trying to accomplish the following structure in AngularJs ui route:

  • page/operationgroup
  • page/operationgroup/:id
  • page/operationgroup/operation
  • page/operationgroup/operation/:id
  • page/operationgroup/operation/route
  • page/operationgroup/operation/route/:id

To do this I configured the state like this (reduced for brevity, there is a "seguimiento" root state that I'm not showing):

Code:
    .state('seguimiento.operationgroup', {
            url: "/operationgroup",
            data: { pageTitle: 'Operation Group' },
            resolve: {
              operationgroup: function($stateParams, OperationGroupService) {
                return OperationGroupService.getOperations();
              }
            },
            views: {
              'body@seguimiento': {
                  templateUrl: "views/seguimiento/common/main.html?d=" + (new Date()).getTime(),
                  controller: "operationgroupController1"
                  controllerAs: 'ctrl'
                },
              'header@seguimiento': {
                  templateUrl: "views/seguimiento/common/headergeneric.html"
                },
              'log@seguimiento': {
                  templateUrl: "views/seguimiento/common/logbar.html",
                  controller: "operationgroupLogController1"
                  controllerAs: 'ctrl'
                }
            }
        })

        .state('seguimiento.operationgroup.operation', {
            url: "/operation",
            templateUrl: "views/seguimiento/common/main.html?d=" + (new Date()).getTime(),
            data: { pageTitle: 'Operaciones' },
            resolve: {
              operation: function($stateParams, OperationService) {
                return OperationService.getOperations();
              }
            },
            views: {
              'body@seguimiento': {
                  templateUrl: "views/seguimiento/common/main.html?d=" + (new Date()).getTime(),
                  controller: "operationController1"
                  controllerAs: 'ctrl'
                },
              'header@seguimiento': {
                  templateUrl: "views/seguimiento/common/headergeneric.html"

              },
              'log@seguimiento': {
                  templateUrl: "views/seguimiento/common/logbar.html",
                  controller: "operationLogController1",
                  controllerAs: 'ctrl'
                }
            }
        })

In which OperationService and OperationGroupService both call a web service to fill up the Controller of the views.

The problem I'm experiencing with this is that if I go to the URL

Code:
page/operationgroup/operation

The "resolve" part of the operationgroup state (parent) also gets called. Which introduces a massive call for data that I do not need here, because the views only need to use the subset "operation" from OperationService (not the data referred in "operationgroup" from OperationGroupService). Same thing happens if I define a controller at the state level (gets called when child URL gets hit).

This doesn't happen for the controller views though. Only the child's state controller being navigated gets hit (ex: body@seguimiento controller). So I tough I could just call the service from each view controller, but the following problem arises:
All three views (body@,log@ and @header) need information from the same http.get call to the web service (each view uses a specific part from the info gotten). So I can't define a call per view because that would cause three calls to the web service instead of only 1.

So my question is: What's the best approach to build this route hierarchy considering I don't want expensive unnecessary calls?

Should I separate all my routes and build something like:

Code:
.state('seguimiento.operationgroup', {
            url: "/operationgroup", ...

.state('seguimiento.operation', {
            url: "/operationgroup/operation", ...

I would like to add that I found the following example on the web of a similar question: http://angular-ui.github.io/ui-router/sample/#/about but this doesn't address the problem(loads ALL the info of EVERY contact and sub item when you navigate to http://angular-ui.github.io/ui-router/sample/#/contacts/1/item/a).

<p>I'm trying to accomplish the following structure in AngularJs ui route:</p>
<ul>
<li>page/operationgroup</li>
<li>page/operationgroup/:id</li>
<li>page/operationgroup/operation</li>
<li>page/operationgroup/operation/:id</li>
<li>page/operationgroup/operation/route</li>
<li>page/operationgroup/operation/route/:id</li>
</ul>
<p>To do this I configured the state like this (reduced for brevity, there is a "seguimiento" root state that I'm not showing):</p>
<pre><code> .state('seguimiento.operationgroup', {
url: "/operationgroup",
data: { pageTitle: 'Operation Group' },
resolve: {
operationgroup: function($stateParams, OperationGroupService) {
return OperationGroupService.getOperations();
}
},
views: {
'body@seguimiento': {
templateUrl: "views/seguimiento/common/main.html?d=" + (new Date()).getTime(),
controller: "operationgroupController1"
controllerAs: 'ctrl'
},
'header@seguimiento': {
templateUrl: "views/seguimiento/common/headergeneric.html"
},
'log@seguimiento': {
templateUrl: "views/seguimiento/common/logbar.html",
controller: "operationgroupLogController1"
controllerAs: 'ctrl'
}
}
})

.state('seguimiento.operationgroup.operation', {
url: "/operation",
templateUrl: "views/seguimiento/common/main.html?d=" + (new Date()).getTime(),
data: { pageTitle: 'Operaciones' },
resolve: {
operation: function($stateParams, OperationService) {
return OperationService.getOperations();
}
},
views: {
'body@seguimiento': {
templateUrl: "views/seguimiento/common/main.html?d=" + (new Date()).getTime(),
controller: "operationController1"
controllerAs: 'ctrl'
},
'header@seguimiento': {
templateUrl: "views/seguimiento/common/headergeneric.html"

},
'log@seguimiento': {
templateUrl: "views/seguimiento/common/logbar.html",
controller: "operationLogController1",
controllerAs: 'ctrl'
}
}
})
</code></pre>
<p>In which OperationService and OperationGroupService both call a web service to fill up the Controller of the views.</p>
<p>The problem I'm experiencing with this is that if I go to the URL</p>
<pre><code>page/operationgroup/operation
</code></pre>
<p>The "resolve" part of the operationgroup state (parent) also gets called. Which introduces a massive call for data that I do not need here, because the views only need to use the subset "operation" from OperationService (not the data referred in "operationgroup" from OperationGroupService).
Same thing happens if I define a controller at the state level (gets called when child URL gets hit).</p>
<p>This doesn't happen for the controller views though. Only the child's state controller being navigated gets hit (ex: body@seguimiento controller).
So I tough I could just call the service from each view controller, but the following problem arises:<br />
All three views (body@,log@ and @header) need information from the same http.get call to the web service (each view uses a specific part from the info gotten).
So I can't define a call per view because that would cause three calls to the web service instead of only 1.</p>
<p>So my question is: What's the best approach to build this route hierarchy considering I don't want expensive unnecessary calls?</p>
<p>Should I separate all my routes and build something like:</p>
<pre><code>.state('seguimiento.operationgroup', {
url: "/operationgroup", ...

.state('seguimiento.operation', {
url: "/operationgroup/operation", ...
</code></pre>
<p>I would like to add that I found the following example on the web of a similar question: <a href="http://angular-ui.github.io/ui-router/sample/#/contacts/1/item/a" rel="nofollow noreferrer">http://angular-ui.github.io/ui-router/sample/#/about</a> but this doesn't address the problem(loads ALL the info of EVERY contact and sub item when you navigate to <a href="http://angular-ui.github.io/ui-router/sample/#/contacts/1/item/a" rel="nofollow noreferrer">http://angular-ui.github.io/ui-router/sample/#/contacts/1/item/a</a>).</p>
 
Top