I'm trying to manage the bootstrap process of a large AngularJS/Grails application. Here's what I've come up with, but I'm not so sure it's as clean as it could be, or as efficient. Thoughts?
Load angular-loader in a one-line minified /script
Load jquery explicity in another /script
Load a third-party async loader ($script) and all of the remaining dependencies
When the dependencies have loaded, call angular.bootstrap(document, ['myApp]);
Load my minified, concatenated app-specific javascript in another /script
This seems clunky. What alternatives might there be? I did consider RequireJS, but I don't like how intrusive it is, and I like using a grunt task to concat+uglify my app into a single script.
The general approach that I use is to load the basic components upfront and only load the controller and associated services on demand using RequireJS. Obviously, this is only applicable if you are dealing with large application.
As AngularJS does not natively support on-demand loading and delegate such task to async loader such as RequireJS, I encapsulated the logic need in something I call angularAMD.
Here is a sample site I created to illustrate how angularAMD works:
http://marcoslin.github.io/angularAMD/
Related
I have a distributed AngularJs library module, that is been used in other AngularJs applications that I have no control over.
After researching I see that For an AngularJs application, you can load a json settings by ajax request and then synchronously bootstrap the app afterward.
For a module I provide for other to use, it is not that simple. Looking at AngularJs injector code, I don't see any asynchronous mechanism coming into play when loadModules act.
The json will be used to declare a constant provider for my sub module. It changes between different clients.
Has someone else found a trick or solution on how to load json settings for Angularjs module (not application) prior to the module availability to an Angularjs application?
For anyone that is interested, I have solved my problem by indirect solution. Another script loading tag above the sub module script tag. The other script include building an angular module that provides the constants for the other module which declare its dependency on it.
That way, synchronous order of first loading the configuration module and then the module is preserved. Not a direct solution but good enough for production usage.
I have a question regarding loading External JS files in Angular JS in terms of performance:
I have a small module which uses tinymce editor.
I have installed it via bower ('angular-ui-tinymce') and it works fine.
Since I'm using this library rarely, and it is being loaded on app start every time - is it better (in terms of performance) to load it in index.html async / defer like this? (to avoid being a blocking script?)
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.19/tinymce.min.js" defer></script>
Is it possible to load external js files only when the user enters a specific module?
Thanks.
When you say "performance" in this case, you mean your bundling size I assume?
What you have to consider is if this is going to come up again down the road.
A handful of dependencies are best served when bundled together instead of several individual requests.
Even though it is not this case, if by any chance you were including dependencies that had to be configured during bootstrap they could not be asynchronously loaded.
So IMHO you want the best of both, you can always bundle and place your app on a CDN, free performance right there.
I was taking a look in this nice Angular best practices repository and I can't find a proper way to apply this pattern of modularization.
The author suggest importing all the other modules in the main app module, that seems to be a great idea for me, but in my perception it also means loading all the js files of the system when loading the page for the first time "into" the main module.
I'm looking this wrong? I'm I right? If I'm right, is there a workaround to avoid loaind all the js files? Should I be worried with the loading time of the js files?
Angular application is SPA, the page is loaded only once, all relevant JS files should be loaded at the time when the app is bootstrapped.
Angular doesn't officially support lazy loading to load additional module files on demand, doing this by patching the framework may cause more troubles than it may solve.
Bundling all modules with bundling systems (Webpack, Browserify, etc) into a single JS improves loading time and results in better performance than loading JS files selectively.
relatively new to Angular so I'm not sure what the best practice is for this scenario. I have a fairly simple index.html that include an ng-view in the middle. Later on in the html I need to include page(view)-specific js scripts after some of the generic app-level scripts load. What is the best practice for doing so?
Pseudo-Code
[ng-view]
[generic stuff for all pages]
[view-specific scripts]
By default AngularJS needs all the script related to your ng-app module loaded at one go, which is called bootstrapping the app. What this means is that if the scripts are related to AngularJS such as controller, directives and service, routes have to be loaded together in the script block, they cannot be loaded on demand.
There are some plugin that allow lazy loading such as these
https://github.com/matys84pl/angularjs-requirejs-lazy-controllers
https://github.com/nikospara/angular-require-lazy
https://github.com/ocombe/ocLazyLoad
I am using Angular JS. I wish to put unrelated code (ie, which is not a factory, service, controler, etc) in additional, separate modules, in a similar way one would with AMD or CommonJS.
At the time of writing, a search for 'Angular.JS make new module' using Google does not return any documentation on making Angular.JS modules.
I have a found a post on the Angular.JS Google Group that seems to indicate that instead of loading dependencies dynamically like other module systems, in Angular.JS dependencies must be inserted as additional script tags.
Is there any documentation on making Angular modules (which is not limited to controllers, services, or other angular concepts)?
Is the statement about script tags true? Do I need to manually add script tags for every module I may use?
Looking further into the various Angular boilerplate apps, apps manually load every part of their apps via script tags. Unlike other systems, Angular 'modules' don't take care of actually loading dependencies, they just inject them once already loaded.