In the AngularJS application, the ui-router is used to manage two types of pages:
- Pages with routes explicitly specified in routes.js
- Pages with routes dynamically derived on demand
Upon loading the page, the application sends a request for data (type, variables). The challenge is how to load the template and controller of the page based on its type?
/**
Although there is an option available with this routing, it may impact the explicitly specified routes.
*/
/* routes.js */
// Definition of the "page" state
/* PageController.js */
// Obtain the type of page
$scope.type = res.data.type;
/* page.jade */
div(ng-if=«page.type == ‘index’»)
div(ng-controller=‘IndexController’)
div(ng-if=«page.type == ‘catalog’»)
div(ng-controller=‘IndexController’)
The process of loading templates is not clearly defined, raising concerns about the performance of this solution. Is there a more efficient approach available?