AngularJS动态加载数据的最佳方式

时间:2016-08-05 14:26:40

标签: angularjs

在我的AngularJS应用程序中,我有一个标准的CRUD组件来管理大多数系统实体。该组件(它是一个指令)基本上是一个表,它接收其列元数据(JSON)并装饰表。我的系统中有几个屏幕使用此指令作为模板,因此它们之间的唯一区别是基于实体名称传递给它的列元数据数组。举个例子,上面有这个屏幕的路线。请注意,一个控制器处理所有" basic"实体及其获得的所有信息都是实体名称。

module.config(function($routeProvider) {
    $routeProvider
        ...
        .when('/basic/:entity', {
            controller: 'BasicCrudController',
            controllerAs: 'ctrl',
            templateUrl: 'app/crud/basic/basic-crud.html'
        })
        ...;
});

我的问题是关于实际上将根据实体名称检索列元数据数组到BasicCrudController的服务(此名称就像它的唯一标识符)。由于有多个实体使用此模板,我不希望将所有这些列的信息保存在一个带有巨大switch语句的单个文件中(如上所示)。我想懒洋洋地为某些实体加载这些信息,以加快系统启动。

switch(entity.name) {
    case 'FOO':
        return [column1JSON, column2JSON, ...];
    case 'FOO2':
        return [column2JSON, column3JSON, ...];
    ...
}

尽管如此,一些列定义是在实体之间共享的,所以我可以提供一个解决方案,以便我可以扩展"以某种方式返回的列或重用一组列。最后,最好的解决方案是这样的:

function MostBasicService() {
    this.getColumns = function(entityName) {
        return [column1JSON, column2JSON, ...];
    }
}

/* Specific for Foo entity. Should be loaded only when (and if) needed. */
function FooService() {
    this.getColumns = function(entityName) {
        return MostBasicService.getColumns(entityName)
                .concat(columnFoo1, columnFoo2, ...);
    }
}

/* Specific for Foo2 entity. Should be loaded only when (and if) needed. */
function Foo2Service() {
    this.getColumns = ...
}

总之,我想知道实现这些服务的最佳方式(使用AngularJS),即使它们应该是服务。感谢。

0 个答案:

没有答案