Lazyload external JS/CSS files based on controller namespace convention?

[ItsLeeOwen]

Does angularJS have anything in place to lazyload external JS/CSS files based on ng-controller namespaces? So that the following would append com.myApp.SomeClass.js and com.myApp.SomeClass.css to the document head?

<div ng-controller="com.myApp.SomeClass"></div>

[l...@leefernandes.com]

Perhaps using directives such as ns-lazyJS, ns-lazyCSS?

<div ng-controller="com.myApp.SomeClass" ns-lazyJS ns-lazyCSS></div>

[Charlie]

That would be a nice feature.

[l...@leefernandes.com]

I meant "ng-lazyjs" and "ng-lazycss"

[Eric Jain]

On Apr 5, 10:35 am, ItsLeeOwen <iamthatiamandthatist...@gmail.com>
wrote:

This only makes sense if the div with the ng-controller is also lazy-
loaded, right?

I thought it would be possible to do that with ng-switch, though it
doesn't quite work in this example:

http://jsfiddle.net/G2vhx/

[Misko Hevery]

Yes that would be a nice feature, and we are thinking about it, but it is a lot more complicated than ng-lazy directive. :-)

Loading JS lazily is easy, but linking it into your running app is tricky. What we are looking for is a way to lazy load a module into an injector. That way you could create a new injector per ng-view which would meant that you could load JS lazily. But this is a big change, so we will probably attack it past 1.0

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ItsLeeOwen]

Please excuse me, I'm new to angularJS, and frequently neglect strict MVC standards, probably to the detriment of my free-time, so am unfamiliar with the practices for injection & modules.  

My immediate aim is to tie in angular data-binding, and controller <-> dom initialization.  I absolutely love the simplicity of <div ng-controller="com.app.Class"><input type="text" ng-model="likeABoss"><p>{{likeABoss}}</p></div>

This alone is exciting!  From there I wanted com.app.Class dynamically appended to the class attribute, and for directives to instruct autoloading of com.app.Class.js & com.app.Class.css.  And because I'm a demon, to get a reference to the controller's target element, so I could spill jQuery event listeners/handlers in my controller  }: )

To do that I wrote a base Controller class that all of my ng-controller's inherit from.  Additionally you can optionally autoload external HTML as content of the controller, so the ng-controller div can be written into a page as a sliver without all of it's content, and be auto-populated from the external partial.  The controller's markup becomes just:  <div ng-controller="com.app.Class" />

It works very nicely.  A potential problem is that if you have a few controllers working together, when an action of one depends on the other being available, it may not be.  It's only a problem if you're unaware of this, otherwise you can add spaghetti code to check for the existence of the dependency before executing the handler.  I don't a automagic solution for that at this time, you just have to be aware of it and then it's not a problem.  I was thinking of using an intermediary method between controllers that checks for availability, and defers requests to be executed when it becomes available.

I really appreciate that you've put together, and shared angularJS.  I hope to familiarize myself with the recommended angular / strict MVC ways overtime.  It's hard to balance learning a new framework, and getting things done sometimes.  I wish I'd have come across angular a few months ago!  Thank you

[Misko Hevery]

thanks for sharing. I am glad that you found a solution, we will keep it in mind when we are going to implement the feature.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/1FEgL6iLqE8J.

[Charlie]

I put together a dependency loading mechanism for AngularJS using
yepnope, the signature is not finalized.


https://github.com/cmelion/angular-yepnope

The index page is under app/modules/se-tool/index.html