[New Version of PR #62] Correct order of files when concatenating custom Javascript files to custom.js in case custom Html templates are used.

[ghost]

Hi,

this is a polished version of the pull request #62. The problem it addresses remains (see description below).

---

Preliminary Remarks:

• regards the build logic without browserify support.
• might also regard accepted pull request Custom html templates #46 and pending pull request Support custom HTML templates from npm #61

Workflow of custom template creation

When custome Html templates are defined (either in external npm modules or as part of a template package, the custom-html-templates tasks creates the file customTemplates.js in the js folder of the template package. It has the following contents

This file has the following contents:

app.run(function($templateCache) {
  $templateCache.put('[ID of custom template]','[HTML of custom template]');
  ...
});

Subsequently, this file is concatenated by the custom-js task with all other Javascript files present in the js directory of the template package to a single Javascript file called custom.js which is then saved also in the already mentioned js.

The problem

(1) The customTemplates.js contains Javscript code that calls the run method on an custom angular module referenced by the variable app.

(2) In order for the Javascript code in the final concatenated custom.js file to work properly, the code contained in the customTemplates.js file needs to be placed after the code contained in the file that is responsible for instantiating the angular module and assigning it to the variable app. Otherwise an error will be thrown.

(3) Right now the code that instantiates the angular module and assigns it to the variable app is defined in a file called main.js (At least that is my assumption). Given the fact that the custom-js tasks concatenates files in alphabetical order, the Javascript code in the customTemplates.js file will be placed before the Javascript code in the main.js file, causing an error to be throwing that signals that the variable app is not defined.

The solutions

(1) Put the code that instantiates the custom angular module and binds it to the variable app in a file that in alphabetical order comes before the file customTemplates.js. It is quite easy to do, however not very intiutive, since the aforementioned behaviour is nowhere clearly documented.

(2) Provided, that the code which instantiates the custom angular module and binds it to the variable app is put in a file called main.js, change the order of the files before they are concatenated.

This pull request offers an implementation of solution 2 using gulp-order.

Best regards, Matthias

[gilax]

I'm trying to understand the order you asked for. Why does the custom.module.js file is after the main.js?

[gilax]

Hi Meinbrodt,

The concept of the custom.module.js file is like the naming convention provided by Angular, which means that this file contains the Angular's module and all the dependencies that the module using by inject them to the module. What we meant by binds it all together in this order is that the module file will define the app variable as the module and the main.js file will contain the main component or any other code that needed in the customization package.
From what I saw in this PR this is answering the main problem you are trying to answer, but if I'm wrong you are more than welcome to correct me.

Kindly yours,
Gilax

[ghost]

Hi Gilax,

thanks for your response.

The concept of the custom.module.js file is like the naming convention provided by Angular, which means that this file contains the Angular's module and all the dependencies that the module using by inject them to the module.

I think I get it now. Instead of using the main.js file for defining my custom view package/module logic I'll use the custom.module.js file now which should solves this issue. I let you know once I tried it.

Just one quick quesiton. What is the role of the main.js file exactly?

Cheers, Matthias

[gilax]

Hi Matthias,

You can think of the main.js as the main component/global functions that used in the package. You can use the main.js file as your main file, and just move the app variable to the custom.module.js file.

Thanks,
Gilax