{"__v":20,"_id":"552e88ef06a32a0d009c2f8f","category":{"__v":4,"_id":"552e88cf5d4baa0d007836b1","pages":["552e88e32594f70d001b2d0a","552e88ef06a32a0d009c2f8f","552e89055d4baa0d007836b2","552e8a47a702770d00d96e50"],"project":"552d17dea86ee20d00780b89","version":"552d17dea86ee20d00780b8c","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-15T15:50:39.173Z","from_sync":false,"order":1,"slug":"api","title":"API"},"project":"552d17dea86ee20d00780b89","user":"5519ab08eaa2ed2f002135a0","version":{"__v":7,"_id":"552d17dea86ee20d00780b8c","project":"552d17dea86ee20d00780b89","createdAt":"2015-04-14T13:36:30.892Z","releaseDate":"2015-04-14T13:36:30.892Z","categories":["552d17dfa86ee20d00780b8d","552e7d7406a32a0d009c2f7b","552e88cf5d4baa0d007836b1","552e8936a702770d00d96e4d","552e895434565d0d007b4a8d","552e89f82594f70d001b2d0e","552f8a9d8f136c0d005031e9"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":["565271fdd1712c1700401273"],"next":{"pages":[],"description":""},"createdAt":"2015-04-15T15:51:11.440Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"## Table of contents:\n- [Load method](#load-method-)\n- [Use config options](#use-config-options-)\n- [List of parameters](#list-of-parameters-)\n- [Additional methods](#additional-methods-)\n\n## Load method:\nYou can include `$ocLazyLoad` and use the function `load` which returns a promise. It supports a single dependency or multiple dependencies (array).\n\nLoad one or more modules & components with one file:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load('testModule.js');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLoad one or more modules & components with multiple files:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLoad one or more modules with multiple files and specify a type where necessary:\nNote: When using the requireJS style formatting (with `js!` at the beginning for example), do not specify a file extension. Use one or the other.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load([\\n   'testModule.js',\\n   {type: 'css', path: 'testModuleCtrl'},\\n   {type: 'html', path: 'testModuleCtrl.html'},\\n   {type: 'js', path: 'testModuleCtrl'},\\n   'js!testModuleService',\\n   'less!testModuleLessFile'\\n]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou can load external libs (not angular):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load(['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js']);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou can also load css and template files:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load([\\n\\t'bower_components/bootstrap/dist/js/bootstrap.js',\\n\\t'bower_components/bootstrap/dist/css/bootstrap.css',\\n\\t'partials/template1.html'\\n]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you want to load templates, the template file should be an html file with regular [script templates](https://docs.angularjs.org/api/ng/directive/script). It looks like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/ng-template\\\" id=\\\"partials/template1.html\\\">\\n  Content of the template.\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou can put more than one template script in your template file, just make sure that you use different ids:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/ng-template\\\" id=\\\"partials/template1.html\\\">\\n  Content of the first template.\\n</script>\\n\\n<script type=\\\"text/ng-template\\\" id=\\\"partials/template2.html\\\">\\n  Content of the second template.\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## Use config options:\n\nThere are two ways to define config options for the load function. You can use a second optional parameter that will define configs for all the modules that you will load, or you can define optional parameters to each module.\nFor example, these are equivalent (except that the first two files won't be cached in the first example):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load([{\\n  files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],\\n  cache: false\\n},{\\n  files: ['anotherModule.js'],\\n  cache: true\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAnd\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load(\\n  ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],\\n  {cache: false}\\n);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you load a template with the native template loader, you can use any parameter from the `$http` service (check: https://docs.angularjs.org/api/ng/service/$http#usage).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load(\\n\\t['partials/template1.html', 'partials/template2.html'],\\n\\t{cache: false, timeout: 5000}\\n);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## List of parameters:\n\nThe existing parameters that you can use are:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default value\",\n    \"0-0\": \"`cache`\",\n    \"0-1\": \"Boolean\",\n    \"0-2\": \"true\",\n    \"1-0\": \"`reconfig`\",\n    \"1-1\": \"Boolean\",\n    \"1-2\": \"false\",\n    \"2-0\": \"`rerun`\",\n    \"2-1\": \"Boolean\",\n    \"2-2\": \"false\",\n    \"3-0\": \"`serie`\",\n    \"3-1\": \"Boolean\",\n    \"3-2\": \"false\",\n    \"4-0\": \"`insertBefore`\",\n    \"4-1\": \"Boolean\",\n    \"4-2\": \"*undefined*\"\n  },\n  \"cols\": 3,\n  \"rows\": 5\n}\n[/block]\nThe parameter `cache: false` works for all native loaders (**all requests are cached by default by the browser**). If you use it, the loaders will append a timestamp to the url in order to bypass the browser cache:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load({\\n\\tcache: false,\\n\\tfiles: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nBy default, if you reload a module, the config block won't be invoked again (because often it would lead to unexpected results). But if you really need to execute the config function again, use the parameter `reconfig: true`:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load({\\n\\treconfig: true,\\n\\tfiles: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe same problem might happen with run blocks, use `rerun: true` to rerun the run blocks:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load({\\n\\trerun: true,\\n\\tfiles: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nBy default the native loaders will load your files in parallel. If you need to load your files in serie, you can use `serie: true`:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load({\\n\\tserie: true,\\n\\tfiles: [\\n\\t\\t'bower_components/angular-strap/dist/angular-strap.js',\\n\\t\\t'bower_components/angular-strap/dist/angular-strap.tpl.js'\\n\\t]\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe files, by default, will be inserted before the last child of the `head` element. You can override this by using `insertBefore: 'cssSelector'` (it uses jQuery if available, or document.querySelector otherwise):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ocLazyLoad.load({\\n\\tinsertBefore: '#load_css_before',\\n\\tfiles: ['bower_components/bootstrap/dist/css/bootstrap.css']\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n----\n## Additional methods:\n\n`$ocLazyLoad` provides a few other methods that might help you in a few specific cases:\n\n- `setModuleConfig(moduleConfig)`: Lets you define a module config object\n\n- `getModuleConfig(moduleName)`: Lets you get a module config object\n\n- `getModules()`: Returns the list of loaded modules\n\n- `isLoaded('moduleName' or [modulesNames])`: Lets you check if a module (or a list of modules) has been loaded into Angular or not\n\n- `inject('moduleName' or [modulesNames])`: if you load your files on your own (with RequireJS, SystemJS or else), you can call inject manually but you will have to provide the names of the modules that you are loading (unless you used `toggleWatch` before and after loading the files)\n\n- `toggleWatch(boolean)`: let ocLazyLoad know that it should monitor angular.module for new modules. Probably only useful if you use `inject` on your own. Don't forget to toggle it off after or it might lead to unexpected results","excerpt":"","slug":"oclazyload-service","type":"basic","title":"Service"}
## Table of contents: - [Load method](#load-method-) - [Use config options](#use-config-options-) - [List of parameters](#list-of-parameters-) - [Additional methods](#additional-methods-) ## Load method: You can include `$ocLazyLoad` and use the function `load` which returns a promise. It supports a single dependency or multiple dependencies (array). Load one or more modules & components with one file: [block:code] { "codes": [ { "code": "$ocLazyLoad.load('testModule.js');", "language": "javascript" } ] } [/block] Load one or more modules & components with multiple files: [block:code] { "codes": [ { "code": "$ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);", "language": "javascript" } ] } [/block] Load one or more modules with multiple files and specify a type where necessary: Note: When using the requireJS style formatting (with `js!` at the beginning for example), do not specify a file extension. Use one or the other. [block:code] { "codes": [ { "code": "$ocLazyLoad.load([\n 'testModule.js',\n {type: 'css', path: 'testModuleCtrl'},\n {type: 'html', path: 'testModuleCtrl.html'},\n {type: 'js', path: 'testModuleCtrl'},\n 'js!testModuleService',\n 'less!testModuleLessFile'\n]);", "language": "javascript" } ] } [/block] You can load external libs (not angular): [block:code] { "codes": [ { "code": "$ocLazyLoad.load(['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js']);", "language": "javascript" } ] } [/block] You can also load css and template files: [block:code] { "codes": [ { "code": "$ocLazyLoad.load([\n\t'bower_components/bootstrap/dist/js/bootstrap.js',\n\t'bower_components/bootstrap/dist/css/bootstrap.css',\n\t'partials/template1.html'\n]);", "language": "javascript" } ] } [/block] If you want to load templates, the template file should be an html file with regular [script templates](https://docs.angularjs.org/api/ng/directive/script). It looks like this: [block:code] { "codes": [ { "code": "<script type=\"text/ng-template\" id=\"partials/template1.html\">\n Content of the template.\n</script>", "language": "html" } ] } [/block] You can put more than one template script in your template file, just make sure that you use different ids: [block:code] { "codes": [ { "code": "<script type=\"text/ng-template\" id=\"partials/template1.html\">\n Content of the first template.\n</script>\n\n<script type=\"text/ng-template\" id=\"partials/template2.html\">\n Content of the second template.\n</script>", "language": "html" } ] } [/block] ## Use config options: There are two ways to define config options for the load function. You can use a second optional parameter that will define configs for all the modules that you will load, or you can define optional parameters to each module. For example, these are equivalent (except that the first two files won't be cached in the first example): [block:code] { "codes": [ { "code": "$ocLazyLoad.load([{\n files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],\n cache: false\n},{\n files: ['anotherModule.js'],\n cache: true\n}]);", "language": "javascript" } ] } [/block] And [block:code] { "codes": [ { "code": "$ocLazyLoad.load(\n ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],\n {cache: false}\n);", "language": "javascript" } ] } [/block] If you load a template with the native template loader, you can use any parameter from the `$http` service (check: https://docs.angularjs.org/api/ng/service/$http#usage). [block:code] { "codes": [ { "code": "$ocLazyLoad.load(\n\t['partials/template1.html', 'partials/template2.html'],\n\t{cache: false, timeout: 5000}\n);", "language": "javascript" } ] } [/block] ## List of parameters: The existing parameters that you can use are: [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Type", "h-2": "Default value", "0-0": "`cache`", "0-1": "Boolean", "0-2": "true", "1-0": "`reconfig`", "1-1": "Boolean", "1-2": "false", "2-0": "`rerun`", "2-1": "Boolean", "2-2": "false", "3-0": "`serie`", "3-1": "Boolean", "3-2": "false", "4-0": "`insertBefore`", "4-1": "Boolean", "4-2": "*undefined*" }, "cols": 3, "rows": 5 } [/block] The parameter `cache: false` works for all native loaders (**all requests are cached by default by the browser**). If you use it, the loaders will append a timestamp to the url in order to bypass the browser cache: [block:code] { "codes": [ { "code": "$ocLazyLoad.load({\n\tcache: false,\n\tfiles: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']\n});", "language": "javascript" } ] } [/block] By default, if you reload a module, the config block won't be invoked again (because often it would lead to unexpected results). But if you really need to execute the config function again, use the parameter `reconfig: true`: [block:code] { "codes": [ { "code": "$ocLazyLoad.load({\n\treconfig: true,\n\tfiles: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']\n});", "language": "javascript" } ] } [/block] The same problem might happen with run blocks, use `rerun: true` to rerun the run blocks: [block:code] { "codes": [ { "code": "$ocLazyLoad.load({\n\trerun: true,\n\tfiles: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']\n});", "language": "javascript" } ] } [/block] By default the native loaders will load your files in parallel. If you need to load your files in serie, you can use `serie: true`: [block:code] { "codes": [ { "code": "$ocLazyLoad.load({\n\tserie: true,\n\tfiles: [\n\t\t'bower_components/angular-strap/dist/angular-strap.js',\n\t\t'bower_components/angular-strap/dist/angular-strap.tpl.js'\n\t]\n});", "language": "javascript" } ] } [/block] The files, by default, will be inserted before the last child of the `head` element. You can override this by using `insertBefore: 'cssSelector'` (it uses jQuery if available, or document.querySelector otherwise): [block:code] { "codes": [ { "code": "$ocLazyLoad.load({\n\tinsertBefore: '#load_css_before',\n\tfiles: ['bower_components/bootstrap/dist/css/bootstrap.css']\n});", "language": "javascript" } ] } [/block] ---- ## Additional methods: `$ocLazyLoad` provides a few other methods that might help you in a few specific cases: - `setModuleConfig(moduleConfig)`: Lets you define a module config object - `getModuleConfig(moduleName)`: Lets you get a module config object - `getModules()`: Returns the list of loaded modules - `isLoaded('moduleName' or [modulesNames])`: Lets you check if a module (or a list of modules) has been loaded into Angular or not - `inject('moduleName' or [modulesNames])`: if you load your files on your own (with RequireJS, SystemJS or else), you can call inject manually but you will have to provide the names of the modules that you are loading (unless you used `toggleWatch` before and after loading the files) - `toggleWatch(boolean)`: let ocLazyLoad know that it should monitor angular.module for new modules. Probably only useful if you use `inject` on your own. Don't forget to toggle it off after or it might lead to unexpected results