diff --git a/oclazyload/oclazyload-tests.ts b/oclazyload/oclazyload-tests.ts index 3879a564b..d3d3d6b11 100644 --- a/oclazyload/oclazyload-tests.ts +++ b/oclazyload/oclazyload-tests.ts @@ -1,23 +1,95 @@ /// -var lazyloader:Function = ()=>{}; +angular.module('app', ['oc.lazyLoad']).config(['$ocLazyLoadProvider', function ($ocLazyLoadProvider: oc.ILazyLoadProvider) { + $ocLazyLoadProvider.config({ + debug: true, + events: true, + modules: [{ + name: 'TestModule', + files: ['js/TestModule.js'] + }] + }) +}]); -var config1: oc.ILazyLoadConfig = { - asyncLoader: lazyloader -}; +angular.module('app').controller(['$ocLazyLoadProvider', function ($ocLazyLoad: oc.ILazyLoad) { + $ocLazyLoad.load('testModule.js'); -var config2:oc.ILazyLoadConfig = { - asyncLoader: lazyloader, - loadedModules: ['module1', 'module2'] -}; + $ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']); -var moduleConfig:oc.ILazyLoadModuleConfig = { - name:'testmodule', - files:['testmodule'] -} + $ocLazyLoad.load([ + 'testModule.js', + { + type: 'css', + path: 'testModuleCtrl' + }, + { + type: 'html', + path: 'testModuleCtrl.html' + }, + { + type: 'js', + path: 'testModuleCtrl' + }, + 'js!testModuleService', + 'less!testModuleLessFile' + ]); -var config2:oc.ILazyLoadConfig = { - asyncLoader: lazyloader, - loadedModules: ['module1', 'module2'], - modules: [moduleConfig] -}; + $ocLazyLoad.load([ + { + files: [ + 'testModule.js', + 'bower_components/bootstrap/dist/js/bootstrap.js' + ], + cache: false, + kjdf: false + }, + { + files: ['anotherModule.js'], + cache: true + } + ]); + + $ocLazyLoad.load( + [ + 'testModule.js', + 'bower_components/bootstrap/dist/js/bootstrap.js', + 'anotherModule.js' + ], + { + cache: false + }); + + $ocLazyLoad.load( + [ + 'partials/template1.html', + 'partials/template2.html' + ], + { + cache: false, + reconfig: true, + rerun: true, + serie: true, + insertBefore: '#load_css_before', + timeout: 5000 + }); + + $ocLazyLoad.setModuleConfig({ + files: [ + 'testModule.js' + ], + cache: true + }); + + var getConfig: oc.IModuleConfig = $ocLazyLoad.getModuleConfig('testModule'); + + var getModules: string[] = $ocLazyLoad.getModules(); + + var isLoaded: boolean = $ocLazyLoad.isLoaded([ + 'testModule1.js', + 'testModule2.js' + ]); + + $ocLazyLoad.inject('testModule'); + + $ocLazyLoad.toggleWatch(true); +}]); \ No newline at end of file diff --git a/oclazyload/oclazyload.d.ts b/oclazyload/oclazyload.d.ts index 22ac45f9d..1acf7e781 100644 --- a/oclazyload/oclazyload.d.ts +++ b/oclazyload/oclazyload.d.ts @@ -7,28 +7,143 @@ declare module oc { - interface ILazyLoadConfig { - asyncLoader:any; - loadedModules?:string[]; - modules?:ILazyLoadModuleConfig[]; - } - - interface ILazyLoadModuleConfig { - name:string; - files:string[]; - } - interface ILazyLoad { - load(module:any):ng.IPromise; - loadTemplateFile(url:string, config:ILazyLoadModuleConfig):ng.IPromise; - loadTemplateFile(urls:string[], config:ILazyLoadModuleConfig):ng.IPromise; - getModuleName(moduleName:string):string; - getModules():string[]; - getModuleConfig(name:string):ILazyLoadModuleConfig; - setModuleConfig(config:ILazyLoadModuleConfig):void; + /** + * Loads a module or a list of modules into Angular. + * + * @param module The name of a predefined module config object, or a module config object, or an array of either + * @param config Options to be used when loading the modules + */ + load(module: string|ITypedModuleConfig|IModuleConfig|(string|ITypedModuleConfig|IModuleConfig)[], config?: IOptionsConfig): ng.IPromise; + + /** + * Defines a module config object. + * @param config The module config object + * @returns The module config object that was passed in + */ + setModuleConfig(config: IModuleConfig): IModuleConfig; + + /** + * Gets the specified module config object. + * @param name The name of the module config object to get + */ + getModuleConfig(name: string): IModuleConfig; + + /** + * Gets the list of loaded module names. + */ + getModules(): string[]; + + /** + * Checks if a module name, or list of modules names, has been previously loaded into Angular. + */ + isLoaded(moduleName: string|string[]): boolean; + + /** + * Injects a module with the associated name into Angular. Useful for manual injection when loading through RequireJS, SystemJS, etc. Useful in + * conjunction with the toggleWatch() method. + */ + inject(moduleName: string|string[]): boolean; + + /** + * Enables or disables watching Angular for new modules. Useful in conjunction with the inject() method. Make sure to not keep the watch enabled + * indefinitely, or unexpected results may occur. + */ + toggleWatch(watch: boolean): void; + } + + interface ITypedModuleConfig extends IOptionsConfig { + /** + * The file extension, without the period. For example, 'html'. + */ + type: string; + + /** + * The file path, including file name. + */ + path: string; + } + + interface IModuleConfig extends IOptionsConfig { + /** + * The name of the module for easy retrieval later. + */ + name?: string; + + /** + * The list of files to be loaded for this module. + */ + files: string[]; + } + + interface IOptionsConfig extends ng.IRequestShortcutConfig { + /** + * If true, bypasses browser cache by appending a timestamp to URLs. Defaults to true. + */ + cache?: boolean; + + /** + * If true, a module config will be invoked each time the module is reloaded. Use with caution, as re-invoking configs can lead to unexpected results. + * Defaults to false. + */ + reconfig?: boolean; + + /** + * If true, a module run block will be invoked each time the module is reloaded. Use with caution, as re-invoking run blocks can lead to unexpected results. + * Defaults to false. + */ + rerun?: boolean; + + /** + * If true, will load files in a series, instead of in parallel. Defaults to false. + */ + serie?: boolean; + + /** + * If set, will insert files immediately before the provided CSS selector, instead of the default behavior of inserting files immediately before the + * last child of the element. Defaults to undefined. + */ + insertBefore?: string; } interface ILazyLoadProvider { - config(config:ILazyLoadConfig):void; + /** + * Configures the main service provider. + * @param config The configuration settings to use + */ + config(config: IProviderConfig): void; + } + + interface IProviderConfig { + /** + * If true, all errors will be logged to the console, in addition to rejecting a promise. Defaults to false. + */ + debug?: boolean; + + /** + * If true, an event will be broadcast whenever a module, component or file is loaded. Events that can be broadcast are: ocLazyLoad.moduleLoaded, + * ocLazyLoad.moduleReloaded, ocLazyLoad.componentLoaded, ocLazyLoad.fileLoaded. Defaults to false. + */ + events?: boolean; + + /** + * Predefines a set of module configurations for later use. A name must be provided for each module so that it can be retrieved later. + */ + modules?: IModuleConfig[]; + } +} + +declare module angular { + interface IAngularStatic { + /** + * The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism. + * + * When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved. + * + * @param name The name of the module to create or retrieve. + * @param requires The names of modules this module depends on, and/or ocLazyLoad module configurations. If specified then new module is being created. If unspecified then the module is being retrieved for further configuration. + * @param configFn Optional configuration function for the module. + */ + module(name: string, requires?: (string|oc.IModuleConfig)[], configFn?: Function): IModule; } } \ No newline at end of file