angularjs – 如何根据在$routeProvider注册的路由中的参数动态加载模板?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何根据在$routeProvider注册的路由中的参数动态加载模板?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现你可以使用模板或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请求来获取整个模板

所以,我看到你是一个.NET MVC开发人员…

我们来看看在.NET MVC中做了什么操作:它们返回ActionResults …它们真正体现出应该从架构运行和返回的视图和模型. MVC中的“控制器”是这样的动作的集合,并且可以在私有方法或该类的共享依赖性形式的这些动作之间包含一些共享逻辑.

现在让我们看看Angular的作用:Angular正在调用控制器函数一次,作为一个构造函数,通常要设置一个$scope对象,它将作为你的“model”来执行(排序). (一般来说)每个控制器都与一个设置$范围**的一种方式相关联.一旦该控制器被处理,$digest将被调用在$scope上,然后将其应用于绑定到范围的视图…这是由您的ng控制器的元素封装的html(或ng-view)属性.

所以..的问题,你可以根据路由参数动态加载模板吗?是.你绝对可以最简单的方法是将您的请求路由到单个模板,只包含一个包含ng-include的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语句等…所以你可能不想这样做.

最后,你将不得不摆脱ASP.Net MVC的“控制器和操作”与Angular的心态.这是一个MVC架构,但MVC!=“控制器和操作”.

** Angular还创建并保存控件的一个实例作为一个对象,但是这个功能很少在Angular开发中使用,而且我不是在说这个.

原文链接:https://www.f2er.com/angularjs/140509.html

猜你在找的Angularjs相关文章