That is a lot of work, and IMO unnecessary. The amount of network overhead saved on getting time to first page render down by lazy-loading stuff is pretty minimal. You usually can make easier gains by better-optimizing images.
That said, if it's a huge page and you really want to minimize time to first page render, well, that's something to do. Plunker seems to be down now, but my original issue with your code stands. 1) ContactusCtrl is declared in the module homeless.contactus 2) The ui-router state declaration that uses ContactusCtrl is declared in the module homeless.quickmenu 3) Therefore, ContactusCtrl is not available to the state declaration. Either define ContactusCtrl in homeless.quickmenu or define the route in homeless.contactus. It's better to move the route than move the controller. e On Wed Dec 10 2014 at 7:37:31 AM woodson <[email protected]> wrote: > Trying to implement dynamically load based on this > http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs > > > On Wednesday, December 10, 2014 9:05:36 AM UTC+5:30, woodson wrote: >> >> Thanks Eric.. >> >> I followed the same folder structure in my app. But i am not able to >> create the folder in Plunker. Now i fixed all my issue in Plunker and i am >> able to reproduce the issue . >> >> most the Contact files declaration only . because i want execute the page >> successfully after that i can include whatever i required. Can you pls try >> now to identify the issue and if have any sample application pls post the >> URL. thanks >> >> >> URL:http://plnkr.co/edit/imbxIBiNLXwNEM6NrXNS?p=preview >> >> -woodson >> >> On Wednesday, December 10, 2014 1:35:28 AM UTC+5:30, Eric Eslinger wrote: >>> >>> The plunker is also missing some other stuff that may prevent it from >>> properly working. When I view it, I get that homeless.controllers.login is >>> not defined, so it crashes the initialize process. >>> >>> That said, you're defining the controller named 'ContactusCtrl' in the >>> homeless.contactus module, and the actual routing is being done in >>> indexroutes.js, and declared in the context of the homeless.quickmenu >>> module. In that context, the ContactusCtrl controller isn't available. >>> >>> What I suggest instead is: >>> >>> Each "route", that is, URL-related page display on your application >>> (especially if the application is large) has its own module. That module >>> should define a route for ui-router and a controller, and anything else >>> specific to that route. Do that instead of defining the route's controllers >>> in one module and the ui-router routing stuff in another module. >>> >>> That way all the controllers you're declaring will be available, and >>> it'll be a lot clearer where to find stuff when you come back to this >>> project after time away (for example, indexroutes.js contains your app-wide >>> routing defined in the quickmenu module, the quickmenu.js file doesn't, and >>> the routes.js file only contains a comment indicating you'd put routes >>> there, but there's no routes). >>> >>> Personally, I break it even further down. My own practice is to put each >>> route in a subdirectory, so something like: >>> >>> /contactus >>> module.js (by convention this includes the declaration of the module >>> and is included first, and contains routing declarations) >>> contactus.controller.js (my controller code, and if there's several >>> controllers, then they go in several files) >>> contactus.html (template, and usually theres a couple of these, for >>> different layouts) >>> _contactus.scss (any route-specfic style definitions here) >>> >>> I do similar things in a /components directory where I put shared >>> services and stuff. >>> >>> e >>> >>> On Tue Dec 09 2014 at 11:51:17 AM woodson <[email protected]> wrote: >>> >>>> missed the URL. http://plnkr.co/edit/xmcWrJfe6QMdaQrMjpjq?p=preview >>>> >>>> >>>> On Wednesday, December 10, 2014 1:19:59 AM UTC+5:30, woodson wrote: >>>>> >>>>> Thanks Eric, >>>>> >>>>> i created the sample application. But it's not working properly.But u >>>>> can understand my issue i hope :). >>>>> >>>>> 1) on clicking the Contact us like we have to load the contactus.html >>>>> page with controller route,module. >>>>> >>>>> please let me know if required more details. >>>>> >>>>> -woodson >>>>> >>>>> >>>>> On Wednesday, December 10, 2014 12:33:52 AM UTC+5:30, Eric Eslinger >>>>> wrote: >>>>>> >>>>>> It would be pretty good if you provided a plunker >>>>>> <http://www.google.com/url?q=http%3A%2F%2Fplnkr.co%2F&sa=D&sntz=1&usg=AFQjCNE0-NbnrUuIl5HxKn1d1rYMLeJJ0g> >>>>>> example of your failing code. Based on what you've shared, that's >>>>>> more-or-less stuff that should work (to my eyes at least). >>>>>> >>>>>> Are the different files being loaded in the proper order (either via >>>>>> concatenation or their direct declaration order in index.html)? >>>>>> >>>>>> Are there any odd capitalization errors caused by Contactus being >>>>>> sometimes spelled ContactUs happening elsewhere? >>>>>> >>>>>> Are you declaring states in one module and controllers elsewhere? >>>>>> Doesn't look like it in your example code, but that causes problems for >>>>>> me >>>>>> at times. >>>>>> >>>>>> I'd look at the file inclusion order first. >>>>>> >>>>>> Eric >>>>>> >>>>>> >>>>>> On Tue Dec 09 2014 at 10:53:38 AM woodson <[email protected]> wrote: >>>>>> >>>>>>> Hi All, >>>>>>> >>>>>>> we are planning to develop new large application using Angular js. >>>>>>> For that we are preparing the POC for angular js. we build basic landing >>>>>>> page . It;s working fine >>>>>>> >>>>>>> When clicking the contact us link need to dynamically load the >>>>>>> contact us page. HTML page is loading properly and controller register >>>>>>> we >>>>>>> are getting error. >>>>>>> >>>>>>> >>>>>>> Error: [ng:areq] Argument 'ContactusCtrl' is not a function, got >>>>>>> undefined >>>>>>> http://errors.angularjs.org/1.3.5/ng/areq?p0=ContactusCtrl&p >>>>>>> 1=not%20a%20function%2C%20got%20undefined >>>>>>> at assertArg (http://localhost:53856/Scripts/vendors/angular.js: >>>>>>> 1560:5) >>>>>>> at assertArgFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:1570:3) >>>>>>> at Anonymous function (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:8353:9) >>>>>>> at Anonymous function (http://localhost:53856/Script >>>>>>> s/vendors/angular-ui-router/angular-ui-router.js:2797:11) >>>>>>> at invokeLinkFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:8141:9) >>>>>>> at nodeLinkFn (http://localhost:53856/Scripts/vendors/angular.js: >>>>>>> 7653:11) >>>>>>> at compositeLinkFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:7009:13) >>>>>>> at publicLinkFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:6888:30) >>>>>>> at updateView (http://localhost:53856/Scripts/vendors/angular-ui- >>>>>>> router/angular-ui-router.js:2733:11) >>>>>>> at Anonymous function (http://localhost:53856/Script >>>>>>> s/vendors/angular-ui-r >>>>>>> >>>>>>> >>>>>>> Can any one help us to reslove the issue ? >>>>>>> >>>>>>> Model.js: >>>>>>> >>>>>>> angular.module('homeless.contactus', []); >>>>>>> >>>>>>> contactusctrl.js: >>>>>>> >>>>>>> ngular.module('homeless.contactus').controller('ContactusCtrl', >>>>>>> ['$scope', '$stateParams', '$location', 'Global', >>>>>>> function ($scope, $stateParams, $location, Global) { >>>>>>> debugger; >>>>>>> $scope.global = Global; >>>>>>> >>>>>>> }]); >>>>>>> routes.js: >>>>>>> >>>>>>> angular.module('homeless.contactus').config(['$stateProvider', >>>>>>> function ($stateProvider) { >>>>>>> debugger; >>>>>>> // states for my app >>>>>>> >>>>>>> }]); >>>>>>> Thanks & Regards, >>>>>>> woodson >>>>>>> >>>>>>> -- >>>>>>> You received this message because you are subscribed to the Google >>>>>>> Groups "AngularJS" group. >>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>> send an email to [email protected]. >>>>>>> To post to this group, send email to [email protected]. >>>>>>> Visit this group at http://groups.google.com/group/angular. >>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>> >>>>>> >>>>> On Wednesday, December 10, 2014 12:33:52 AM UTC+5:30, Eric Eslinger >>>>> wrote: >>>>>> >>>>>> It would be pretty good if you provided a plunker <http://plnkr.co/> >>>>>> example of your failing code. Based on what you've shared, that's >>>>>> more-or-less stuff that should work (to my eyes at least). >>>>>> >>>>>> Are the different files being loaded in the proper order (either via >>>>>> concatenation or their direct declaration order in index.html)? >>>>>> >>>>>> Are there any odd capitalization errors caused by Contactus being >>>>>> sometimes spelled ContactUs happening elsewhere? >>>>>> >>>>>> Are you declaring states in one module and controllers elsewhere? >>>>>> Doesn't look like it in your example code, but that causes problems for >>>>>> me >>>>>> at times. >>>>>> >>>>>> I'd look at the file inclusion order first. >>>>>> >>>>>> Eric >>>>>> >>>>>> >>>>>> On Tue Dec 09 2014 at 10:53:38 AM woodson <[email protected]> wrote: >>>>>> >>>>>>> Hi All, >>>>>>> >>>>>>> we are planning to develop new large application using Angular js. >>>>>>> For that we are preparing the POC for angular js. we build basic landing >>>>>>> page . It;s working fine >>>>>>> >>>>>>> When clicking the contact us link need to dynamically load the >>>>>>> contact us page. HTML page is loading properly and controller register >>>>>>> we >>>>>>> are getting error. >>>>>>> >>>>>>> >>>>>>> Error: [ng:areq] Argument 'ContactusCtrl' is not a function, got >>>>>>> undefined >>>>>>> http://errors.angularjs.org/1.3.5/ng/areq?p0=ContactusCtrl&p >>>>>>> 1=not%20a%20function%2C%20got%20undefined >>>>>>> at assertArg (http://localhost:53856/Scripts/vendors/angular.js: >>>>>>> 1560:5) >>>>>>> at assertArgFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:1570:3) >>>>>>> at Anonymous function (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:8353:9) >>>>>>> at Anonymous function (http://localhost:53856/Script >>>>>>> s/vendors/angular-ui-router/angular-ui-router.js:2797:11) >>>>>>> at invokeLinkFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:8141:9) >>>>>>> at nodeLinkFn (http://localhost:53856/Scripts/vendors/angular.js: >>>>>>> 7653:11) >>>>>>> at compositeLinkFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:7009:13) >>>>>>> at publicLinkFn (http://localhost:53856/Script >>>>>>> s/vendors/angular.js:6888:30) >>>>>>> at updateView (http://localhost:53856/Scripts/vendors/angular-ui- >>>>>>> router/angular-ui-router.js:2733:11) >>>>>>> at Anonymous function (http://localhost:53856/Script >>>>>>> s/vendors/angular-ui-r >>>>>>> >>>>>>> >>>>>>> Can any one help us to reslove the issue ? >>>>>>> >>>>>>> Model.js: >>>>>>> >>>>>>> angular.module('homeless.contactus', []); >>>>>>> >>>>>>> contactusctrl.js: >>>>>>> >>>>>>> ngular.module('homeless.contactus').controller('ContactusCtrl', >>>>>>> ['$scope', '$stateParams', '$location', 'Global', >>>>>>> function ($scope, $stateParams, $location, Global) { >>>>>>> debugger; >>>>>>> $scope.global = Global; >>>>>>> >>>>>>> }]); >>>>>>> routes.js: >>>>>>> >>>>>>> angular.module('homeless.contactus').config(['$stateProvider', >>>>>>> function ($stateProvider) { >>>>>>> debugger; >>>>>>> // states for my app >>>>>>> >>>>>>> }]); >>>>>>> Thanks & Regards, >>>>>>> woodson >>>>>>> >>>>>>> -- >>>>>>> You received this message because you are subscribed to the Google >>>>>>> Groups "AngularJS" group. >>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>> send an email to [email protected]. >>>>>>> To post to this group, send email to [email protected]. >>>>>>> Visit this group at http://groups.google.com/group/angular. >>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>> >>>>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "AngularJS" group. >>>> To unsubscribe from this group and stop receiving emails from it, send >>>> an email to [email protected]. >>>> To post to this group, send email to [email protected]. >>>> Visit this group at http://groups.google.com/group/angular. >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> -- > You received this message because you are subscribed to the Google Groups > "AngularJS" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
