{"_id":"553018a888a30d1900851e11","user":"5519ab08eaa2ed2f002135a0","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"},"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"},"project":"552d17dea86ee20d00780b89","__v":2,"updates":["588cc518a5794f39002e50f9"],"next":{"pages":[],"description":""},"createdAt":"2015-04-16T20:16:40.364Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"`$ocLazyLoad` works well with routers and especially [ui-router](https://github.com/angular-ui/ui-router). Since it returns a promise, use the [resolve property](https://github.com/angular-ui/ui-router/wiki#resolve) to make sure that your components are loaded before the view is resolved:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$stateProvider.state('index', {\\n\\turl: \\\"/\\\", // root route\\n\\tviews: {\\n\\t\\t\\\"lazyLoadView\\\": {\\n\\t\\t\\tcontroller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve\\n\\t\\t\\ttemplateUrl: 'partials/main.html'\\n\\t\\t}\\n\\t},\\n\\tresolve: { // Any property in resolve should return a promise and is executed before the view is loaded\\n\\t\\tloadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {\\n\\t\\t\\t// you can lazy load files for an existing module\\n             return $ocLazyLoad.load('js/AppCtrl.js');\\n\\t\\t}]\\n\\t}\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you have nested views, make sure to include the resolve from the parent to load your components in the right order:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$stateProvider.state('parent', {\\n\\turl: \\\"/\\\",\\n\\tresolve: {\\n\\t\\tloadMyService: ['$ocLazyLoad', function($ocLazyLoad) {\\n             return $ocLazyLoad.load('js/ServiceTest.js');\\n\\t\\t}]\\n\\t}\\n})\\n.state('parent.child', {\\n    resolve: {\\n        test: ['loadMyService', '$ServiceTest', function(loadMyService, $ServiceTest) {\\n            // you can use your service\\n            $ServiceTest.doSomething();\\n        }]\\n    }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIt also works for sibling resolves:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$stateProvider.state('index', {\\n\\turl: \\\"/\\\",\\n\\tresolve: {\\n\\t\\tloadMyService: ['$ocLazyLoad', function($ocLazyLoad) {\\n             return $ocLazyLoad.load('js/ServiceTest.js');\\n\\t\\t}],\\n        test: ['loadMyService', '$serviceTest', function(loadMyService, $serviceTest) {\\n            // you can use your service\\n            $serviceTest.doSomething();\\n        }]\\n    }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nOf course, if you want to use the loaded files immediately, you don't need to define two resolves, you can also use the injector (it works anywhere, not just in the router):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$stateProvider.state('index', {\\n  url: \\\"/\\\",\\n  resolve: {\\n    loadMyService: ['$ocLazyLoad', '$injector', function($ocLazyLoad, $injector) {\\n      return $ocLazyLoad.load('js/ServiceTest.js').then(function() {\\n        var $serviceTest = $injector.get(\\\"$serviceTest\\\");\\n        $serviceTest.doSomething();\\n      });\\n    }]\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"with-your-router","type":"basic","title":"With your router"}
`$ocLazyLoad` works well with routers and especially [ui-router](https://github.com/angular-ui/ui-router). Since it returns a promise, use the [resolve property](https://github.com/angular-ui/ui-router/wiki#resolve) to make sure that your components are loaded before the view is resolved: [block:code] { "codes": [ { "code": "$stateProvider.state('index', {\n\turl: \"/\", // root route\n\tviews: {\n\t\t\"lazyLoadView\": {\n\t\t\tcontroller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve\n\t\t\ttemplateUrl: 'partials/main.html'\n\t\t}\n\t},\n\tresolve: { // Any property in resolve should return a promise and is executed before the view is loaded\n\t\tloadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {\n\t\t\t// you can lazy load files for an existing module\n return $ocLazyLoad.load('js/AppCtrl.js');\n\t\t}]\n\t}\n});", "language": "javascript" } ] } [/block] If you have nested views, make sure to include the resolve from the parent to load your components in the right order: [block:code] { "codes": [ { "code": "$stateProvider.state('parent', {\n\turl: \"/\",\n\tresolve: {\n\t\tloadMyService: ['$ocLazyLoad', function($ocLazyLoad) {\n return $ocLazyLoad.load('js/ServiceTest.js');\n\t\t}]\n\t}\n})\n.state('parent.child', {\n resolve: {\n test: ['loadMyService', '$ServiceTest', function(loadMyService, $ServiceTest) {\n // you can use your service\n $ServiceTest.doSomething();\n }]\n }\n});", "language": "javascript" } ] } [/block] It also works for sibling resolves: [block:code] { "codes": [ { "code": "$stateProvider.state('index', {\n\turl: \"/\",\n\tresolve: {\n\t\tloadMyService: ['$ocLazyLoad', function($ocLazyLoad) {\n return $ocLazyLoad.load('js/ServiceTest.js');\n\t\t}],\n test: ['loadMyService', '$serviceTest', function(loadMyService, $serviceTest) {\n // you can use your service\n $serviceTest.doSomething();\n }]\n }\n});", "language": "javascript" } ] } [/block] Of course, if you want to use the loaded files immediately, you don't need to define two resolves, you can also use the injector (it works anywhere, not just in the router): [block:code] { "codes": [ { "code": "$stateProvider.state('index', {\n url: \"/\",\n resolve: {\n loadMyService: ['$ocLazyLoad', '$injector', function($ocLazyLoad, $injector) {\n return $ocLazyLoad.load('js/ServiceTest.js').then(function() {\n var $serviceTest = $injector.get(\"$serviceTest\");\n $serviceTest.doSomething();\n });\n }]\n }\n});", "language": "javascript" } ] } [/block]