{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]}},"next":{"description":"","pages":[]},"title":"SystemJS","type":"basic","slug":"systemjs","excerpt":"_This documentation is still in progress and will probably be improved soon_","body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Short example\"\n}\n[/block]\nThe simplest way you can use SystemJS and ocLazyLoad together is with the `System.import` API:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import {coreStates} from 'js/core/states/app'\\n\\n// Optionally, return to wherever this promise chain might be useful\\nSystem.import('js/core/states/app').then(function(m) {\\n  return $ocLazyLoad.load(m.coreStates);\\n}).then(function() {\\n  return Startup.awake();\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nWhere coreStates might look something like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"export var coreStates = angular.module( 'core.states');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Long example\"\n}\n[/block]\nThe lazy module that we would like to load on demand could look something like this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var secondModule = angular.module('secondModule', []);\\n\\nsecondModule.run(function () {\\n  console.log('secondModule::run');\\n});\\n\\nexport default secondModule;\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn this case we are exporting **default**, which will come into play once we attempt to lazily load the module. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var thirdModule = angular.module('thirdModule', []);\\n\\nthirdModule.run(function () {\\n  console.log('thirdModule::run');\\n});\\n\\nexport { thirdModule };\",\n      \"language\": \"javascript\",\n      \"name\": \"thirdModule.js\"\n    }\n  ]\n}\n[/block]\nHere we're defining another module without the default export, which will yet again - come into play once we attempt to lazy load.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"function lazySystem ($ocLazyLoad) {\\n  function load (src, key) {\\n    return System.import(src).then(function (loadedFile) {\\n      return $ocLazyLoad.load(loadedFile[key || 'default']);\\n    });\\n  }\\n  \\n  this.load = load;\\n}\\n\\nvar loaderModule = angular\\n\\t.module('loaderModule', ['oc.lazyLoad'])\\n  .service('lazySystem', lazySystem);\\n\\nexport { loaderModule };\",\n      \"language\": \"javascript\",\n      \"name\": \"loaderModule.js\"\n    },\n    {\n      \"code\": \"\",\n      \"language\": \"text\"\n    },\n    {\n      \"code\": \"\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nContainer module for the lazySystem service hosting our .load method. Runs `System.import` with the passed in source file and passes its response to `$ocLazyLoad.load()`\n\nBy passing a key to the `.load()` method we can target a specific export of the loaded source file, and if no key was passed we will target the default export.\n\n$ocLazyLoad will then return a promise with the loaded module. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { loaderModule } from './loaderModule'; \\n\\nvar app = angular.module('app', [ loaderModule.name ]);\\n\\napp.run(function (lazySystem) {\\n  lazySystem.load('./secondModule').then(function (loadedModule) {\\n    console.log(loadedModule);\\n  });\\n\\n  lazySystem.load('./thirdModule', 'thirdModule').then(function (loadedModule) {\\n    console.log(loadedModule);\\n  });\\n});\",\n      \"language\": \"javascript\",\n      \"name\": \"example.js\"\n    }\n  ]\n}\n[/block]\nOur main file, containing our base application, imports the loaderModule and during the run phase we lazily load the secondModule and thirdModule - logging out their respective results.","updates":["553789e43faac70d00ff6d4d","5596926cfbd4d50d00f11e06","58b738a4eeacc63b00493834"],"order":4,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"552e899d06a32a0d009c2f91","user":"5519ab08eaa2ed2f002135a0","category":{"sync":{"isSync":false,"url":""},"pages":["552e897534565d0d007b4a8e","552e8996a702770d00d96e4e","552e899d06a32a0d009c2f91","552f8abc4329c20d00fa9cb9","553018a888a30d1900851e11"],"title":"Advanced usage","slug":"advanced-usage","order":2,"from_sync":false,"reference":false,"_id":"552e895434565d0d007b4a8d","__v":5,"version":"552d17dea86ee20d00780b8c","createdAt":"2015-04-15T15:52:52.715Z","project":"552d17dea86ee20d00780b89"},"createdAt":"2015-04-15T15:54:05.769Z","githubsync":"","__v":10,"project":"552d17dea86ee20d00780b89","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["552d17dfa86ee20d00780b8d","552e7d7406a32a0d009c2f7b","552e88cf5d4baa0d007836b1","552e8936a702770d00d96e4d","552e895434565d0d007b4a8d","552e89f82594f70d001b2d0e","552f8a9d8f136c0d005031e9"],"_id":"552d17dea86ee20d00780b8c","project":"552d17dea86ee20d00780b89","releaseDate":"2015-04-14T13:36:30.892Z","__v":7,"createdAt":"2015-04-14T13:36:30.892Z"}}

Documentation

API

Advanced usage

Other

SystemJS

_This documentation is still in progress and will probably be improved soon_
[block:api-header] { "type": "basic", "title": "Short example" } [/block] The simplest way you can use SystemJS and ocLazyLoad together is with the `System.import` API: [block:code] { "codes": [ { "code": "import {coreStates} from 'js/core/states/app'\n\n// Optionally, return to wherever this promise chain might be useful\nSystem.import('js/core/states/app').then(function(m) {\n return $ocLazyLoad.load(m.coreStates);\n}).then(function() {\n return Startup.awake();\n})", "language": "javascript" } ] } [/block] Where coreStates might look something like this: [block:code] { "codes": [ { "code": "export var coreStates = angular.module( 'core.states');", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Long example" } [/block] The lazy module that we would like to load on demand could look something like this. [block:code] { "codes": [ { "code": "var secondModule = angular.module('secondModule', []);\n\nsecondModule.run(function () {\n console.log('secondModule::run');\n});\n\nexport default secondModule;", "language": "javascript" } ] } [/block] In this case we are exporting **default**, which will come into play once we attempt to lazily load the module. [block:code] { "codes": [ { "code": "var thirdModule = angular.module('thirdModule', []);\n\nthirdModule.run(function () {\n console.log('thirdModule::run');\n});\n\nexport { thirdModule };", "language": "javascript", "name": "thirdModule.js" } ] } [/block] Here we're defining another module without the default export, which will yet again - come into play once we attempt to lazy load. [block:code] { "codes": [ { "code": "function lazySystem ($ocLazyLoad) {\n function load (src, key) {\n return System.import(src).then(function (loadedFile) {\n return $ocLazyLoad.load(loadedFile[key || 'default']);\n });\n }\n \n this.load = load;\n}\n\nvar loaderModule = angular\n\t.module('loaderModule', ['oc.lazyLoad'])\n .service('lazySystem', lazySystem);\n\nexport { loaderModule };", "language": "javascript", "name": "loaderModule.js" }, { "code": "", "language": "text" }, { "code": "", "language": "text" } ] } [/block] Container module for the lazySystem service hosting our .load method. Runs `System.import` with the passed in source file and passes its response to `$ocLazyLoad.load()` By passing a key to the `.load()` method we can target a specific export of the loaded source file, and if no key was passed we will target the default export. $ocLazyLoad will then return a promise with the loaded module. [block:code] { "codes": [ { "code": "import { loaderModule } from './loaderModule'; \n\nvar app = angular.module('app', [ loaderModule.name ]);\n\napp.run(function (lazySystem) {\n lazySystem.load('./secondModule').then(function (loadedModule) {\n console.log(loadedModule);\n });\n\n lazySystem.load('./thirdModule', 'thirdModule').then(function (loadedModule) {\n console.log(loadedModule);\n });\n});", "language": "javascript", "name": "example.js" } ] } [/block] Our main file, containing our base application, imports the loaderModule and during the run phase we lazily load the secondModule and thirdModule - logging out their respective results.