根据路由组动态加载控制器

12 浏览
0 Comments

根据路由组动态加载控制器

是否可以根据路由组动态加载控制器、js文件和模板?以下是无法正常工作的伪代码示例:

$routeProvider.when('/:plugin', function(plugin) {
  templateUrl: 'plugins/' + plugin + '/index.html',
  controller: plugin + 'Ctrl',
  resolve: { /* 加载js文件,路径为 'plugins/' + plugin + '/controller.js' */ }
});

我看到过很多类似的问题,但没有一个是基于路由组来加载js文件/控制器的。

0
0 Comments

动态加载控制器是一种根据路由组动态加载控制器的方法。下面是一个解决该问题的解决方案。

我们可以为所有控制器创建一个父函数,并根据路由配置在该函数中调用所有控制器(在路由配置的loadFrom键中定义)。

具体代码如下:

$routeProvider.when('/:plugin', function(plugin) {
  templateUrl: 'plugins/' + plugin + '/index.html',
  controller: fun,
  loadFrom:"assets/controller/myJsController" // 这是我们传递给控制器的自定义参数,用于标识远程控制器文件。
});

在父函数fun中,我们使用$timeout来延迟加载远程控制器文件,然后使用$http从服务器获取该文件,并使用eval函数将其解析为可执行的代码。

具体代码如下:

function fun($scope, $http, $location, $timeout, $route) {
        $timeout(function () {
        var path = $route.current.loadForm;
        $http.get("${pageContext.servletContext.contextPath}/resource/controller/" + path + ".js")
                .then(function (rsp) {
                eval(rsp.data);
                });
        });
};

在assets/controller/myJsController.js文件中,我们将编写具体的控制器代码。

具体代码如下:

(function($scope){
//控制器的所有代码将放在这里。
   $scope.message="working."
 })($scope)

需要注意的是,在父函数中,我们需要使用所有依赖项。

0
0 Comments

问题的出现原因是在加载控制器时,出现了"$script is not defined"错误。作者在代码中使用了requirejs,但还是出现了这个错误。作者认为很难相信Angular团队没有考虑到在Angular内部解决这个问题,而是必须使用第三方库如script.js和require.js。作者想知道是否有什么遗漏或者Angular 2是否已经解决了这个问题。

解决方法是使用script.js库来解决"$script is not defined"错误。作者在app.js文件中添加了一个config函数,并在其中注册了controller、directive、filter、factory和service。然后,在$routeProvider.when方法中,通过使用$script函数来加载依赖项,并在加载完成后解析promise。最后,在controller.js文件中,通过app.register.controller方法来注册控制器。

作者认为虽然他晚了两年才解决这个问题,但是仍然没有找到比这个更好的解决方法。他认为Angular团队应该在Angular内部解决这个问题,而不是依赖第三方库。作者不确定是否遗漏了什么,也不确定Angular 2是否已经解决了这个问题。

0
0 Comments

动态加载控制器是一种常见的需求,特别是在使用AngularJS等前端框架开发时。在某些情况下,我们希望根据路由组动态加载控制器。然而,ngRoute的when()方法不允许我们将函数作为第二个参数传递,这使得我们无法在控制器属性或解析属性中访问路由参数。

幸运的是,我们可以使用RequireJS来解决这个问题。下面是一个示例代码:

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

templateUrl: 'plugins/' + plugin + '/index.html',

controller: plugin + 'Ctrl',

resolve: {myCtrl: function($q){

var deferred = $q.defer();

require('myCtrlFile',function(){

deferred.resolve();

});

return deferred.promise;

}}

});

这段代码中,我们首先通过$routeProvider.when()方法定义了一个路由,路由参数为':/plugin'。在控制器属性中,我们使用了一个变量'plugin'来动态设置控制器的名称。然后,在resolve属性中,我们使用$q.defer()创建了一个延迟对象,并通过require()方法异步加载了控制器文件。当控制器文件加载完成后,我们使用deferred.resolve()方法来解析延迟对象。最后,我们返回了这个延迟对象的promise。

为了使控制器能够被动态加载,我们还需要在应用的配置中注册控制器。我们可以通过暴露提供者(providers)来实现这一点。以下是一个示例代码:

app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){

app.register =

{

controller: $controllerProvider.register,

directive: $compileProvider.directive,

filter: $filterProvider.register,

factory: $provide.factory,

service: $provide.service

};

});

在这段代码中,我们通过app.config()方法注册了一个配置函数,并注入了$controllerProvider、$compileProvider、$filterProvider和$provide等提供者。然后,我们将这些提供者保存在app.register对象中,以便后续动态注册控制器。

最后,我们需要在控制器文件中进行注册。以下是一个示例代码:

define(['app'],function(app){

app.register.controller('myCtrl',MyCtrlFunction);

});

在这段代码中,我们首先通过define()方法定义了一个模块,模块依赖于'app'。然后,我们通过app.register.controller()方法将控制器注册到应用中。控制器的名称为'myCtrl',控制器函数为MyCtrlFunction。

这就是解决动态加载控制器的一般思路。通过这种方式,我们可以根据路由组动态加载控制器,并实现更灵活的控制器管理。请注意,本文示例中使用的是RequireJS和ngRoute,而不是ui-router。但是,这种实现思路在ui-router中同样适用。

0