如何从angularjs中的路由构造控制器名称

时间:2014-11-04 12:26:36

标签: javascript angularjs ngroute angularjs-ng-route

我正在尝试定义一个处理大部分请求的通用路由。为每个功能添加添加路由是我觉得不好和不可维护的。

所以我的目标是编写一个通用路由并动态地解决这些问题,其中包括解析所有依赖控制器&服务文件,解析templateUrl和解析控制器名称。 我可以解析/构建除控制器名称之外的所有内容。请帮我解决一下

我使用自定义解析器的路线:

$routeProvider
 .when('/:module/:controller/:action?', routeResolver.resolve())

在我的自定义解析器中:

function routeResolverProvider(){

this.$get= function(){
  return this;
}

this.resolve = function (options) {
 var route = {};

 route.templateUrl = function (params) {
     var path = String.format('/app/components/{0}/{1}.view.html', params.module, params.controller);
     return path;
 };

 //================================================================================
 route.controller='THIS IS WHAT I WANT TO CONSTRUCT FROM ROUTE as templateUrl'  
 //================================================================================

 route.resolve = {
   loadDependencies: ['$q', '$rootScope', '$route', function ($q, $rootScope, $route) {
      // MY RESOLVE LOGIC HERE
      // I construct dependent file path from route values
      // String.format('/app/components/{0}/{1}.controller.js', params.module, params.controller);
   }]
 };

 return route;
 }}

app.provider('routeResolver', routeResolverProvider)

一些好文章: https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c

2 个答案:

答案 0 :(得分:1)

如果我正确理解您的问题,那么您希望能够按名称实例化控制器。

这可以在AngularJS中进行,如Testing Controllers中所述。

您必须使用$controller这样的服务:

$scope = $rootScope.$new();
$controller('NamedController', {$scope: $scope});

这是一个工作的掠夺者:http://plnkr.co/edit/AVCEdLS9zhIzCyZgcXZF?p=preview

答案 1 :(得分:0)

非常感谢Dan,我也很期待这种。所以我修改我的解析器,最后修改它的宾果游戏。

this.$get = ['$rootScope', '$scope', '$route', '$controller', function () {
    return this;
}];

route.controller = function ($rootScope, $scope, $route, $controller) {
    var params = $route.current.params;
    $controller(params.controller.toLowerCase() + 'Controller', {$scope: $scope});
}

最后我解决了我的问题,但想讨论这种方法的可能缺点。