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

Tips for extracting URL parameter values in React applications

Are Bootstrap Input groups inconsistent?

Prevent unchecking a checked list item by clicking on it

What is the method for establishing bidirectional communication between separate directives without relying on $watch or $rootScope?

Creating a unique custom view in React Big Calendar with TypeScript

Having trouble with triggering a Material UI modal from a Material UI AppBar on a Next.js page

What is the best way to save Vue state in a cookie while transitioning between form steps in a Laravel application

Regular expressions: understanding greedy versus lazy quantifiers

Ensuring that files adhere to the required format, whether they be images

Resolve problems with implementing dynamic routes in Next.js

How can VueJS manipulate state with Mutation?

Inject the content loaded from the server into a div element, and insert that div at the

`To transfer the selected radio button value to a different form field using jquery, follow these steps.`

Is Selenium designed to work with standalone browsers (using webdrivers) or with browsers that are already installed on the operating system?

What is the best method for submitting a form via ajax that has already been loaded using ajax, all without needing to refresh the current

What is the most effective way to include JavaScript code in a PDF file?

Selecting DigitalOcean city based on user location in Node.js

Discovering the method to incorporate a data-icon attribute within select options using vue.js

React Component Div Containing a Hydration Error

Switch out multiline text with javascript