angularjs – 基于路由组动态加载控制器

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

我设法解决了由@calebboyd,http://ify.io/lazy-loading-in-angularjs/和 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
  };
});

然后我注册“按组控制器”路由.

$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>