如何根据使用$ routeProvider注册的路径中的参数动态加载模板？

Question

我发现你可以使用template或templateUrl作为这样的函数

.when('/:controller/:action',{
   templateUrl:function(params){
     return: '/'+params.controller+'/'+params.action
  }
})

然后我想知道是否可能延迟加载模板,但我无法做到这一点

.when('/:ctrl/:action',{
   template:function(params){
      injector = angular.injector(['ng']);
      $q = injector.get('$q');
      var dfrd = $q.defer();

      // fetch template from server
      // dfrd.resolve()

      return dfrd.promise;      
   }
});

请告诉我,有一种方法 - 我想通过向服务器发出ajax请求来获取整个模板

Answer 1

所以,我看到你是一个.NET MVC开发者......

让我们看一下动作在.NET MVC中的作用:它们返回ActionResults ...它们实际上是应该从架构中运行和返回的视图和模型的清单.MVC中的"控制器"是这些操作的集合,并且可以包含私有方法形式的那些操作之间的一些共享逻辑或该类的共享依赖性.

现在让我们看看Angular正在做什么:Angular一次调用控制器函数,作为构造函数,通常设置一个$ scope对象,它将作为你的"模型".Angular中的每个控制器(通常都是)与一种且只有一种方式建立$ scope**相关联.处理完该控制器后,会在其更改的$ scope上调用$ digest,然后将其应用于绑定到范围的视图...这是由ng控制器元素封装的html(或ng-view)属性.

那么..问题,你能根据路由参数动态加载模板吗？是.你绝对可以.最简单的方法是将您的请求路由到一个模板,该模板只包含一个包含ng-includeon 的div ,您更改了该模板.

在你的路线:

$routeProvider.when('/:controller/:action', { 
    controller: 'DynamicCtrl', 
    template: '<div ng-include="include"></div>' 
});

然后你的动态控制器声明:

app.controller('DynamicCtrl', function($scope, $routeParams) {
    $scope.include = $routeParams.controller + '/' + $routeParams.action;
});

MyController/MyAction(我假设您可能使用Razor生成)应返回如下内容:

<div ng-controller="MyActionCtrl">
   do stuff!
</div>

...从那里你将自己定义你的MyActionCtrl控制器.

你可以弯曲架构使其成为"ASP.Net MVC-esque",因为"一个控制器"中有一大堆"动作"功能,它决定了你视图的整个行为？是的......但是,如果没有使用switch语句之类的应用程序真的很愚蠢......那么你可能不希望这样做.

最后,你将不得不放弃使用Angular的ASP.Net MVC的"控制器和动作"的思维模式.这是一个MVC架构,但MVC!="控制器&&动作".

**Angular也创建并保存控制器的实例作为对象,但是在Angular开发中很少使用该功能,而且我不是在说这里.