Is it possible to tell angular to load an external javascript when displaying a view and unload it when the view is left?
I have potentially 2 incompatibles javascript libraries: highcharts and highstocks. Highstocks provides highcharts but without some feature (no 3D,...). Using Highcharts-ng only works when highstocks.js is loaded.
But for some other views, I would like to use highcharts.js on some specific graph.
So, at worst, I would like to have some angular views that displays highcharts (loading highcharts.js), some other that displays highstocks. But since these external javascripts needs to be loaded in the index.html, this cannot work.
Is it possible to load highcharts.js in a view, unload it when leaving this view, load highstocks.js when switching to another view?
Thanks
I'd recommnd you to use Angularjs together with Requirejs(http://requirejs.org)
Although Angularjs does not come with any built in AMD functionality, there are some third party modules available on github to help you do that. I use angularAMD (https://github.com/marcoslin/angularAMD), but there are other options like ocLazyLoad (https://github.com/ocombe/ocLazyLoad), and others.
Related
we are working on a one page website project which wad already build in jquery and javascript at client side and cake php at service side but one for grid we want to use DGRID of dojo framework and for that when we try to integrate dgrid with our project we are getting this error
defineAlreadyDefined
In case we try to open another module because the content coming from AJAX and updated in same page.
We had included dojo.js in main page which loads only once and module included with require in each individual file.
Any help will be appreciated.
Well, this happens when we use two or more different libraries which expose same define method to create new widgets.
solution:
in our project we modified the name of exposed value like instead of define we replaced the customDefine in other widget so if we need define of first library we use define (as it was earlier) and if we need define of second library basically we used customDefine.
Note:- Before making above changed just verify that you are not adding same or similar libraries more than once in your project. In our project we were using dojo and d3 libraries.
This is how we resolved in our project.
Problem with almost similar solution - Trouble adding search widget to ArcGIS Shortlist Story App
hoping this will help you:)
I'm pretty new with angularJs. Currently I'm developing a one-page website with laravel framework.
Currently I have only one ngView, where i put my home page codes, but the issues is that all components like sliders, gallery is not working when i put them in a view file. After some searches I found out a module called ocLazyLoad. Modules are loading but sometimes other scripts are loading before jQuery and website again doesn't display the components.
Is there any way to force Loader or Angular to load scripts first and then display view ?
.run(function($rootScope, $state, $ocLazyLoad) {
$ocLazyLoad.load({
name: 'authApp',
files: ['style/js/jquery.min.js',
'style/js/bootstrap.min.js',
'style/js/googlemap.js',
'style/js/twitter-bootstrap-hover-dropdown.min.js',
'style/js/jquery.themepunch.plugins.min.js',
'style/js/jquery.themepunch.revolution.min.js',
'style/js/jquery.easytabs.min.js',
'style/js/owl.carousel.min.js',
'style/js/jquery.isotope.min.js',
'style/js/jquery.fitvids.js',
'style/js/jquery.fancybox.pack.js',
'style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2',
'style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0',
'style/js/jquery.slickforms.js',
'style/js/instafeed.min.js',
'style/js/retina.js',
'style/js/google-code-prettify/prettify.js',
'style/js/scripts.js']
});
I'm loading everything in module.run() function.
I would recommend to use RequireJs instead of ocLazyLoader for this kind of problems.
RequireJs allows you to choose which library has to be loaded first according to its own dependency.
For example if you are using a jQuery plugin you know that it will needs jQuery to work properly, so you will load this plugin with jQuery as a dependency and RequireJs will load everything in the right order.
Our application is written using dojo 1.10. Within our application we have a need to display a 'form' loaded from an external domain source. To accomplish this we intend to use 'dojox/layout/ContentPane'.
The external form itself is actually also an HTML5 application using RequireJS/AngularJS. We don't have much scope to make changes to this application so any issues regarding its loading into a div in our application would need to be handled by a shim and/or dynamically modifying its scripts, to for example, ensure that angular modules were loaded from the cross domain source.
I found some mention on Stack Overflow and other sites regarding issues loading Dojo widgets within a RequireJS/Angular application but no clue as to how to handle our scenario. We are able to get HTML and scripts to load with small modifications to dojox ContentPane to enable the requireConfig.js file to load. However since our application is using dojo "require" and "define" already requirejs won't start because of the following check:
if (typeof define !== 'undefined') {
//If a define is already in play via another AMD loader,
//do not overwrite.
return;
}
Is there a way of overcoming this issue so that the RequireJS AMD loader can be used without modification? Unfortunately changing the forms implementation to work with (for instance dojos AMD loader) may not be an option.
So my question is mainly about the use case of RequireJS.
I read a lot about pure javascript driven web pages. Currently I extend single rendered views (e.g. provided by a PHP Framework) with AngularJS which adds a lot of value.
Sadly the dependency management gets harder and harder with every <script> tag on other 'single pages'. Even more when there is a main.js file which provides common libraries (e.g. jQuery and AngularJS itself).
I thought this doesn't fit into RequireJS philosophy to have one main file which requires all dependencies.
A good example would be an administration panel which uses some modules (defined by AngularJS's dependencies).
Example:
scripts/
adminpanel/
panel.app.js
panel.filters.js
panel.directives.js
antoherModule/
andAntoherModule/
require.js
tl;dr
When you use AngularJS to extend single pages, instead of building a completely javascript driven web application, is it good practice to use RequireJS for AMD loading modules which will be used on the single page ? And how is the best way to do it so ?
SPA usually means that the page doesn't refresh and all extra content is loaded on the fly. In essence the entire app is a single page. It doesn't mean that all of the content is loaded on the initial load (though if it is small enough, this could be the case). Using RequireJS / AMD architecture is really good for this kind of thing.
As the user navigates throughout the site, different partials / templates are retrieved as well as any supporting JavaScript.
The best way to do this is with define. Defining all of the requirements your script needs in order to work. All of the scripts needed will be loaded before the function is run, ensuring that you have everything you need. Furthermore, the items that you define as requirements can have their own define to specify the scripts they need... and so on.
I would like to use yui3 with a grails 2 web application but the new way that grails 2 handles resources is starting to annoy me.
yui3 seems to have the path right when is loads the js files, i.e. ../static/js/yui3/node-menunav/node-menunav-min.js but all I get is 404 errors when it tries to load dependencies.
How do I bypass the resources plugin for js or should I turn of the resources plugin altogether, as it seems a lot of work for not much gain.
And yes I know there is a plugin but it's just JavaScript and doesn't need a plugin and I'm trying to keep the plugin usage to a minimum.
Either comment the line above in your BuildConfig.groovy:
runtime ":resources:1.1.5"
Or include your js in your ApplicationResources.groovy.