AngularJS，多条路由模板不同但控制器相同如何？

Question

我正在调查我是否可以拥有标题所说的内容。这是我的想法。

假设我有这条路线：

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

直到现在，我还有机会在路线中添加 templateUrl 以及控制器详细信息，并且一切正常。

现在应用程序已更改，只有一个控制器包含所有需要的信息，并且必须保留一个控制器。路线将是这样的：

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

我可以通过获取 templateName 参数从控制器设置模板 ID 吗？如果是的话，最后一个路由示例 /page/single/:pageID 怎么样？我怎么知道路由中有第二个选项？

我可以使用 templateName 参数并查看它随 $routeChangeSuccess 方法的变化，但我找不到任何方法来动态设置模板。

有什么想法吗？

Answer 1

一种解决方案可能是以下一种：

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

来自 AngularJs 1.3 文档：

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

If templateUrl is a function, it will be called with the following parameters: Array.<Object> - route parameters extracted from the current $location.path() by applying the current route

Answer 2

我会将您的 singleton 逻辑从控制器移至服务。由于您没有提供太多代码，下面是一个示例，让您了解它是如何工作的。

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;
  
});

但是如果它必须是一个单例控制器，你实际上可以在你的 ng-view 指令之前使用 ng-controller 指令，这样它就变成了一个 $rootScope 类似范围的所有视图。之后，只需在控制器的 $routeProvider 中添加空函数包装器即可。

AngularJS，多条路由模板不同但控制器相同如何？

AngularJS, How about multiple routes with different templates but the same controller?

javascript

routes

angularjs

angular-routing