How can I include JavaScript libraries on a controller basis using Angular?
For example, I'm using morris.js and ckeditor in this project which require nearly 1MB (dev versions) of resources even though they are only used on two pages.
It's obviously a waste to include these within the entire single page application by referencing them in the index.html file.
Is there a way to use Angular Dependency Injection to include these in a controller? I'm guessing using a service or a directive but I'm not sure how those components would look in this case.
You are better off using require.js to load these modules in your SPA based on when you need them.
Related
I have a backend rendered page (django in case it matters) which I want to soup up a little using some components from PrimeVue and a markdown editor packaged as a vue component. Right now, we have a few small animations using jquery for which we include jquery from a CDN directly into our pages. A few months ago, we needed to spice up a page using some more client side interactivity and we included vue.js via a CDN onto that page (dropping jquery) and then wrote some javascript in an index.js that we also loaded up from a CDN and got our work done. This is the current state of affairs. The page currently looks like this
<html>
....
<script src="https://cdn/vue.js"></script>
<script src="/static/index.js"></script>
The div #mainvue is where vue runs and does what it needs to.
This is where we are now.
Using plain vue is okay. Now, I'd like to throw in a few components from primevue as well as a 3rd party markdown editor that's wrapped as vue component. I want to bundle all of these as wel as plain vue itself into a single javascript bundle that I can throw onto a CDN and include into all my pages. Then my devs can do their day to day work in the index.js.
Is this a reasonable approach and if so, how do I do it? I'm not familiar with the javascript ecosystem. If not, what's the right way to solve this problem. I don't want to go all the way SPA and REST API. I just want to use a few 3rd party components and vue on a simple otherwise backend rendered page.
Since you mention you don't want to "go all the way SPA," a reasonable hybrid to is to use Vue in MPA (multi-page app) mode. This will require using a vue-cli/webpack configuration to compile your Vue components into bundles, but once you have this build pipeline, these bundles can used in individual Django templates via django-webpack-loader. Information can be passed from Django via template variables directly as Vue component properties.
Re bundling, yes you can bundle all these resources into a single JS using this method, but it's nearly as easy (and far more performant) to create one or more common bundles that represent shared logic (third party libs, invidual components, even Vue itself) and then pick and choose from among these bundles as needed on individual Django templates.
The steps to implement are a bit too involved to post directly here, but I've written a series of articles Django + Vue -- Best of Both Frontends that explains. There's also a cookiecutter for boostrapping new projects using this method. I realize you already have a site, but you can perhaps adapt the implementation there.
Good hacking!
I started using AngularJS not long ago and am practice to keep the Controller slim. My understanding of AngularJS' dependency injection is that it makes external JS code available in the controller.
I am also new to RequireJS, for I want to reduce loading time. I have done some reading but I am still confused. My impression is that AngularJS' dependency injection works similarly to RequireJS - loading functions on the fly when I need them.
Am I on the right track or am I completely wrong?
No, they are quite different. Angular DI involves components. Examples of Angular components are factories, directives, and filters. Angular provides several ways to inject a component into something else, but is not concerned about how to load these components or where they are stored. They could be all stored in a single .js file, in multiple files, or inline in the HTML document. The general assumption is that each component is loaded at page load, but that might not be the case.
RequireJS is a file and module loader. Each individual module is in it's own file. RequireJS uses ajax methods to load modules on demand as required.
Where Angular is more concerned with the IOC portion of the DI picture, RequireJS is more focused on file loading, data transfer, and memory conservation portions.
It is possible, and common, to use RequireJS to enhance the DI functionality of Angular, but unless it's a large scale app with hundreds of script files, it's normally not necessary.
Im developing a ember.js based app.
On some "sites" (templates) I want to load a specific js-game, so I have to include extra tags like <script src="game.js"></script>. But since handlebar-templates are defined by <script>-Tags itself, its not possible to simply put my dependencies within a template directly.
How can I include js-files on some individual sites only?
Including files in an Ember.js application is a bit more complex than in a regular website.
If you do not use ember-cli, then you could either include your all your JavaScript files directly in your index.html (one by one) or (and this is better) you could also bundle all your game JavaScript files into a single file (called games.js for instance) and include that single file in your index.html. You can bundle JavaScript files using tools such as grunt or brunch or broccoli.
Now if you do use ember-cli (which I recommend), then you could simply list your files in your Brocfile.js (see documentation here). Learning ember-cli might take a little bit of extra time but it will really help you in the future :)
Good luck!
Ok I found an possibility to solve that problem:
Like described in the handlebars.js-FAQ here (5.), I have to use some kind of a "Hack" to avoid parsing errors. Just need to add an empty command {{!}} into the word "script" like <scr{{!}}ipt src=...>...</scr{{!}}ipt.
That works for me.
Also, as kpdecker says here, it is better to use precompiled templates than defining them inline.
You can try to insert the necessary scripts from didInsertElement hook of the corresponding view. And, if so, in order to avoid duplicates, remove that scripts in willDestroyElement hook of the same view.
Handlebars templates in ember.js applications are within "script" tags. Third party widgets, ads, and whatnot often is another "script" which document.writes something in the place it's inserted.
Script withing a script tag will not work, so is there a way to handle then within ember applications?
For the purposes of writing maintainable, DRY code, an Ember app of any real size or significance should be built using a build tool like ember-cli or brunch. These build tools will compile the application files (including templates and vendor files) from multiple directories. I'll cover those, then I'll cover a couple of ways in which you can include widgets/scripts without a build tool.
1) Whilst the Ember Guides show you how to define your templates using script tags, that's not an efficient or effective way to manage your application's templates (unless you're building an app for learning purposes or a JSbin demo, etc, when you need to put everything inside a single file). Build tools like those mentioned above use resolvers to watch your file directories and compile the templates to the Ember.TEMPLATES object, which is where your application would access them anyway.
These build tools usually have separate directories in which to place your vendor files (e.g. third-part widgets), which will usually be watched for changes and compiled into a vendor.js file that is included in your index.html page. You can also use dependency management tools like NPM and Bower to streamline this process. In both situations, the plugin methods will be accessible throughout your application.
2) If you really don't want to use a build tool then just include the script tags on your index.html page just before the closing body tag and any methods will be accessible on the window object inside your application. This is obviously not effective if you're trying to place a widget like a social sharing button in a specific place on the page.
3) Another approach when you're not using a build tool would be to run the $.getScript() method (see here) inside a view or component on the didInsertElement event. This is probably the best way to include widget-like scripts at particular places in your template. Inside the view you can use this.$().find('.some-selector') to target specific elements inside the template or this.$() to target the view's element itself.
More info:
Templates in Ember CLI
As a ASP.NET MVC developer, I am trying to wrap my head around JavaScript AMD modules and libraries like RequireJS.
What is the relationship between ASP.NET MVC ScriptBundles and RequireJS?
In a large site with lots of JavaScript, should I be using both? Or one of them?
Should I integrate RequireJS with Bundles using IBundleTransform?
I wouldn't see using the two of these together. With Bundles you would have all your JavaScript loaded, ideally into just one or two bundles, on your layout controller. In production it would be optimized (combining into one file, minimised, cached and compressed etc).
RequireJS the way I see some of it is if you are being more granular about what JS is loaded and then you can use it's terse syntax to ensure a certain file is loaded before invoking some of that file's JavaScript.
I would recommend using Bundles since you are working with asp.net-mvc. They are pretty to use and work very well. I had used a similar pre mvc4 framework called Combres which was similar and this approach works very well for apps I think. It may be different for read only web sites.