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.
Related
I have used lots of js using the Angular framework. I have a big project and in index page I load all required files with bundle concept of MVC. Everything works fine, but Index page takes a long time to get loaded.
I know the concept of dynamic loading AngularJs controller, but this seems impossible to go with that idea as we have a massive project running live. We can't change whole architecture now.
So is there any other way or workaround to get it resolved?
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.
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.
I have an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
I have an application with multiple Backbone models / views. I'm running into an issue where the application tries to load all of the scripts on every page, however I only need them to load on specific pages.
What is the correct way to address this? Should I use a router?
First you have to organize your application code into small modules (require.js). Here is a brief introduction Organize your backbone application using modules. Load only modules that are required in current page. For details about requirejs requirejs.
You can use routers in combination to decide which modules of your application to load.