{"_id":"552e899d06a32a0d009c2f91","user":"5519ab08eaa2ed2f002135a0","category":{"_id":"552e895434565d0d007b4a8d","__v":5,"version":"552d17dea86ee20d00780b8c","pages":["552e897534565d0d007b4a8e","552e8996a702770d00d96e4e","552e899d06a32a0d009c2f91","552f8abc4329c20d00fa9cb9","553018a888a30d1900851e11"],"project":"552d17dea86ee20d00780b89","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-15T15:52:52.715Z","from_sync":false,"order":2,"slug":"advanced-usage","title":"Advanced usage"},"githubsync":"","__v":10,"project":"552d17dea86ee20d00780b89","version":{"_id":"552d17dea86ee20d00780b8c","project":"552d17dea86ee20d00780b89","__v":7,"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":["553789e43faac70d00ff6d4d","5596926cfbd4d50d00f11e06","58b738a4eeacc63b00493834"],"next":{"pages":[],"description":""},"createdAt":"2015-04-15T15:54:05.769Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":4,"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.","excerpt":"_This documentation is still in progress and will probably be improved soon_","slug":"systemjs","type":"basic","title":"SystemJS"}

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.