负载控制器基于动态路线组 [英] Load controller dynamically based on route group

问题描述

是否有可能加载一个控制器，它的js文件和模板，动态的基础上的路由组？伪code不工作：

Is it possible to load a controller, it's js file, and a template dynamically based on a route group? Psuedo code which doesn't work:

$routeProvider.when('/:plugin', function(plugin) {
  templateUrl: 'plugins/' + plugin + '/index.html',
  controller: plugin + 'Ctrl',
  resolve: { /* Load the JS file, from 'plugins/' + plugin + '/controller.js' */ }
});

我见过很多像基于路由组加载js文件/控制器，这一个，但没有问题。

I've seen a lot of questions like this one but none that loads the js file/controller based on a route group.

推荐答案

我设法解决它通过@calebboyd，启发http://ify.io/lazy-loading-in-angularjs/ 和<一个href=\"http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx\">http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

I managed to solve it inspired by @calebboyd, http://ify.io/lazy-loading-in-angularjs/ and http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

使用 http://dustindiaz.com/scriptjs

app.js

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service
  };
});

然后我注册路线按组负载控制器。

Then i register the "load controller by group" route.

$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {
    return 'plugin/' + rd.plugin + '/index.html';
  },

  resolve: {
    load: function($q, $route, $rootScope) {

      var deferred = $q.defer();

      var dependencies = [
        'plugin/' + $route.current.params.plugin + '/controller.js'
      ];

      $script(dependencies, function () {
        $rootScope.$apply(function() {
          deferred.resolve();
        });
      });

      return deferred.promise;
    }
  }
});

controller.js

app.register.controller('MyPluginCtrl', function ($scope) {
  ...
});

的index.html

<div ng-controller="MyPluginCtrl">
  ...
</div>

这篇关于负载控制器基于动态路线组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！