How can AngularJS handle multiple routes using unique templates while sharing the same controller?

Question

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

I am currently researching whether I can achieve the functionality described in the title. Here are my initial thoughts:

Let's consider the following routes I have set up:

  .when('/', {
        templateUrl : 'partials/homepage.html',
  })

  .when('/test', {
        templateUrl : 'partials/test.html',
  })

  .when('/page/:pageID', {
        templateUrl : 'partials/page.html',
  })

  .when('/page/single/:pageID', {
        templateUrl : 'partials/page-single.html',
  })

Previously, I was able to include both the templateUrl and controller details in each route, which worked perfectly fine.

However, the application has been updated so that there is now only one controller containing all necessary information, and this single controller must be retained. The new routes will look something like this:

  .when('/:templateName/:pageID', {
       controller: 'myCtrl'
  })

Is it possible for me to dynamically set the template ID from the controller by extracting the templateName parameter? Additionally, how can I handle cases such as /page/single/:pageID where there is a secondary option in the route?

While I can retrieve the templateName parameter and track changes using the $routeChangeSuccess method, I have not found a way to dynamically set the template on the fly.

Any suggestions or ideas to address this challenge would be greatly appreciated.

javascript angularjs routes angular-routing

Answer 1

Answer №1

A possible solution is as follows:

angular.module('myapp', []).
            config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/:templateName/:pageId', {
                templateUrl: function(urlattr){
                    return '/pages/' + urlattr.templateName + '.html';
                },
                controller: 'YourCtrl'
            });
        }
    ]);

As stated in the AngularJs 1.3 Documentation:

templateUrl – {string|function()} – path or function that returns a path to an html template used by ngView.

If templateUrl is a function, it will receive these parameters: Array.<Object> - route parameters derived from the current $location.path() based on the current route

Answer 2

A possible solution is as follows:

angular.module('myapp', []).
            config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/:templateName/:pageId', {
                templateUrl: function(urlattr){
                    return '/pages/' + urlattr.templateName + '.html';
                },
                controller: 'YourCtrl'
            });
        }
    ]);

As stated in the AngularJs 1.3 Documentation:

templateUrl – {string|function()} – path or function that returns a path to an html template used by ngView.

If templateUrl is a function, it will receive these parameters: Array.<Object> - route parameters derived from the current $location.path() based on the current route

Answer 3

Answer №2

To improve the structure of your code, consider moving your logic for creating a singleton from your controller to a service. Below is an example that demonstrates how this could be implemented:

app.config(function($routeProvider) {
  
  $routeProvider
    .when('/', {
      templateUrl: 'partials/homepage.html',
      controller: 'SingleController'
    })
    .when('/test', {
      templateUrl: 'partials/test.html',
      controller: 'SingleController'
    })
    .when('/page/:pageId', {
      templateUrl: 'partials/page.html',
      controller: 'SingleController'
    });
  
});

app.provider('appState', function() {
  
  this.$get = [function() {
    return {
      data: {}
    };
  }];

});

app.controller('SingleController', function ($scope, appState) {
  
  $scope.data = appState.data;
  
});

If you still need it to be a singleton controller, you can utilize the ng-controller directive before the ng-view directive to create a $rootScope-like scope for all views. Then, simply include empty function wrappers in your $routeProvider for the controllers.

Answer 4

To improve the structure of your code, consider moving your logic for creating a singleton from your controller to a service. Below is an example that demonstrates how this could be implemented:

app.config(function($routeProvider) {
  
  $routeProvider
    .when('/', {
      templateUrl: 'partials/homepage.html',
      controller: 'SingleController'
    })
    .when('/test', {
      templateUrl: 'partials/test.html',
      controller: 'SingleController'
    })
    .when('/page/:pageId', {
      templateUrl: 'partials/page.html',
      controller: 'SingleController'
    });
  
});

app.provider('appState', function() {
  
  this.$get = [function() {
    return {
      data: {}
    };
  }];

});

app.controller('SingleController', function ($scope, appState) {
  
  $scope.data = appState.data;
  
});

If you still need it to be a singleton controller, you can utilize the ng-controller directive before the ng-view directive to create a $rootScope-like scope for all views. Then, simply include empty function wrappers in your $routeProvider for the controllers.

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

Answer №1

Answer №2

Similar questions

Trouble with HTML Contact Page Email Delivery

I want to save the information for "KEY" and "textValue" in JSON format and then return it as a response when I make a request to app.get("/api"). How can I achieve this?

Utilizing relative URIs in Node.js request library

Immediately Invoked Function Expression in Javascript

Halt hovering effect after a set duration using CSS or Vanilla JavaScript

The primeVue menubar's active/focused item highlighting feature is not functioning correctly

Obtaining JSON data in a separate JavaScript file using PHP

How can you decode JSON using JavaScript?

Django view receives all data in QueryDict format when using Angular to send data

Is there a way to retrieve the title, description, and image URL of a URL through Ajax, similar to how Facebook shares a link?

Create eye-catching banners, images, iframes, and more!

How can I display a timer icon in front of text on a Material-UI CardHeader subtitle?

Error: Authorization requires both data and salt arguments

Creating various functions for Joomla's AJAX component development

Exploring the differences between Yeoman bower installation, npm installation, and grunt

Simple method for securing and unsecuring uploaded files in a directory with the use of AngularJS and a PHP framework

Is there a way to organize a list of arrays within a loop based on a specific index within each array in JavaScript?

What is the method for adding the total to the title of a highchart?

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

Show me a list of either only development or production dependencies in npm