0

I am trying to construct a web application using a REST API and an Angular Frontend. Apart from importing all the Angular JS framework files and extensions I also have to add script tags for every single javascript file I wrote on my own (which will be a lot for all the controllers). I have heard about different solutions trying to solve this issue but found nothing so far that is up to date / would work without refactoring. I do not use Node.js but rather a Python / Werkzeug based server which is delivering the content and npm / bower to manage javascript packages.

Therefore how can I import lots of javascript files automatically / is there any tool that can assist me in the process? Assuming this would be a larger application I wouldn't want to load all x javascript files on a single request.

Edit: I am specifically searching for a way how to handle those imports with Angular / without adding a new dependency. RequireJS e.g. needs something like JQuery. Maybe I am missing the point but right now I don't know any trivial solution under the given requirements.

matt3o
  • 615
  • 1
  • 5
  • 17
  • Possible duplicate of [How to include a JavaScript file in another JavaScript file?](http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file) – roberrrt-s Aug 23 '16 at 14:00
  • 1
    Possibly [webpack](https://webpack.github.io/) or [browserify](http://browserify.org/)? – Scott Aug 23 '16 at 14:00
  • webpack appears to be for single page apps only - I want more than one page (no pure Angular page). browserify comes pretty close has kind of the same restrictions - before being able to the javascript files I would kind of have to compile a bunch a bunch of them into a single pack. Probably this is better than tens of requests for different files but not exactely what I was searching for. Basically I am searching a way to include Angular javascript files dynamically when they are needed e.g. because a certain controller should be loaded. – matt3o Aug 23 '16 at 14:13
  • @Roberrrt The thread does kind of answer what I am searching for (have seen it a few days ago too) but there are no Angular specific answers. I would have to import jQuery to use e.g. requireJS. While this is of course possible it adds another dependency. If possible I would prefer a solution directly using Angular. – matt3o Aug 23 '16 at 14:22
  • Ah yes, I see, unfortunately, I do not have that much experience with Angular, good luck though! – roberrrt-s Aug 23 '16 at 14:31

1 Answers1

1

You can use webpack to compile a bunch of files together - it doesn't have to be a single page application. This will also solve the reference order issue.

This page explains very well different methodologies: https://webpack.github.io/docs/motivation.html

I personally prefer commonjs because it lets you use modules from npm

Good luck

Max Leizerovich
  • 1,536
  • 1
  • 10
  • 7
  • Yeah probably but how do you handle large Angular applications? I specifically mean separated modules where do only need a few modules for a single page rather than everything in a single huge package. Sorry if that's kind of a dumb question but I don't have any experience with this. And does commonjs only works with Nodejs? Or can I load it in the browser too? – matt3o Aug 23 '16 at 15:05
  • common js is only used to build the compiled file - it is not used by the browser. performance wise you don't want the browser to do this work with an http request for each file. If you take a look at webpack - it supports something called split points specially for your question : https://webpack.github.io/docs/code-splitting.html – Max Leizerovich Aug 23 '16 at 15:33
  • Thanks for the reply, i will definitely look into it and try it. Something like that is surely what everyone uses or I would have gotten other replies too. – matt3o Aug 23 '16 at 19:36