Javascript Angular JS-有没有办法动态选择模板

我对angularjs路由器功能有问题：

如何为我的应用动态选择模板

我有一个应用程序，它完全由“它的api”驱动。api包含“模板信息以及它们”

例如api：

 [{
"rootName" : "home1",
"pageTitle"   : "Home1",
"templateName" : "template_home_1"
    },
   {
"rootName" : "home2",
"pageTitle"   : "Home2",
"templateName" : "template_home_2"
   },
    {
"rootName" : "home3",
"pageTitle"   : "Home3",
"templateName" : "template_home_2"
  }]

这样做的原因是可重用性和choice UI的灵活性

我怎么能用Angular做到这一点。是否有任何方法可以动态选择模板

我的路由器是这样的：

demoApp.config(function($routeProvider){
                  $routeProvider
                   .when('/mainpage/:pageid',
                    {   
                       controller:'mainpageController',
                          template : function (pageid) {
                          //this information is avilable at my api
                       }
                     })
                   .otherwise({redirectTo:'/mainpage/home'});  

                   });

---

您可以使用templateurl，并使服务器为模板服务

.when('/mainpage/:pageid',{templateUrl:'/tpl/:pageid'})

---

您可以在服务器端修改模板。服务器将选择路由并决定显示哪些模板。

如何使用开关和自定义指令解决此问题

<div ng-switch on="data.templateName">
 <div ng-switch-when="template_1">
    <template_1></template_1>
 </div>
 <div ng-switch-when="template_2">
    <template_2></template_2>
 </div>
 <div ng-switch-default>{{data}}</div>
</div>

不知道是否有更好的方法。

---

将期待有更好的替代解决方案。。谢谢

到底是什么问题？是否尝试在模板函数中执行异步调用？是@ivarni。。需要动态选择模板。。。我是Angular js的新手。上的文档没有提到任何关于模板函数异步支持的内容，所以我不确定这有多可能。如果路由是合理的静态，我可能会考虑提前获取它们。在我从服务器获取数据后，是否可以初始化路由器。那时我可以编写一些自定义函数来获取模板信息。这就是问题所在，在生命周期的配置步骤中，您无法访问$http服务。将一些逻辑移到服务器上，让模板函数返回像/templates/page/home1、/templates/page/home2这样的内容，然后在服务器端查找正确的模板并返回它，怎么样？或者等待比我更聪明的人出现：我不完全确定如何在客户端实现动态模板，但在服务器端，我可以使用像JADE这样的动态模板引擎来提供基于角色/参数的模板。在我从服务器获取数据后是否可以初始化路由器。。那时我可以编写一些自定义函数来获取模板信息。你可以使用类似when'/mainpage/：pageid'，{controller:'mainpageController'，templateurl:'tpl/：id'}之类的东西，让服务器决定抛出哪个模板。我目前在node mongo和angularjs中使用这种架构。我认为您可以编写一些自定义指令来在代码中加载异步内容，我在angular googlemaps中看到了这一点，但不确定它是如何实现的。如果我选择switch case并选择模板viva src？？？-

 demoApp.directive('template1', function() {
    return {
        restrict: 'E',
        templateUrl: 'app/partials/template1.html'
    };
});