How to use multiple main.js files for RequireJs in Play Framework 2.1.1 Java?

I am creating a one-page application using AngularJs + RequireJs in Play Framework 2.1.1. I have two applications sitting inside the same Play server, admin control panel and regular website. This is why I have two main.js files for the admin panel and the regular site. The structure of the application looks like this. I got it frompublic/javascripts

We want to split two pages, why we have two main.js. However, the problem that I am currently facing is that in the root of main.js everything is fine. If I go to my application http://localhost:9000/, everything will be fine, and if I look at the Firebug network panel, I only see require.js and main.js, as I expected. However, when I go to the admin control panel, http://localhost:9000/admineach file is correctly counted. But when I look at the network, I see all the javascript files that this should have been wrong. I thought that every script should load dynamically from requireJs. Thus, this means that the browser makes several calls to get all the necessary files, instead of just requesting require.js and main.js to resolve the dependencies. Am I doing something wrong?

I got the structure from this project https://github.com/maxdow/angularjs-requirejs-seed

β”œβ”€β”€ admin
β”‚   β”œβ”€β”€ app.js
β”‚   β”œβ”€β”€ bootstrap.js
β”‚   β”œβ”€β”€ controllers
β”‚   β”‚   β”œβ”€β”€ AdminAppController.js
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ directives
β”‚   β”‚   β”œβ”€β”€ Directive.js
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ filters
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ impl.js
β”‚   β”œβ”€β”€ main.js
β”‚   └── routes.js
β”œβ”€β”€ app.js
β”œβ”€β”€ bootstrap.js
β”œβ”€β”€ controllers
β”‚   β”œβ”€β”€ Controller.js
β”‚   └── index.js
β”œβ”€β”€ directives
β”‚   β”œβ”€β”€ Directive.js
β”‚   └── index.js
β”œβ”€β”€ filters
β”‚   └── index.js
β”œβ”€β”€ impl.js
β”œβ”€β”€ lib
β”‚   └── angular
β”‚       β”œβ”€β”€ angular-cookies.min.js
β”‚       β”œβ”€β”€ angular-flash.min.js
β”‚       β”œβ”€β”€ angular-resource.min.js
β”‚       └── angular.min.js
β”œβ”€β”€ main.js
β”œβ”€β”€ routes.js
└── services
    β”œβ”€β”€ Service.js
    └── index.js

You will notice that inside admin / there is main.js, and also in the root, I have another main.js

The code looks something like this.

require.config({

    paths: {
        'angular': './lib/angular/angular.min',
        'angular-resource': './lib/angular/angular-resource.min',
        'angular-cookies': './lib/angular/angular-cookies.min'
    },

    /**
     * for libs that either do not support AMD out of the box, or
     * require some fine tuning to dependency mgt'
     */
    shim: {
        'angular': {
            exports: 'angular',
            deps: []
        },
        'angular-resource': {
            deps: ['angular']
        },
        'angular-cookies': {
            deps: ['angular']
        }
    }
});

require(['./bootstrap'], function () {
    //nothing to do here...see bootstrap.js
});

Here's what my template looks like for a regular site

@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url)

Here is my admin page template.

@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url,
                            module = routes.Assets.at("javascripts/admin/main").url)

And this is my build.scala

  val main = play.Project(appName, appVersion, appDependencies).settings(
    requireJs += "main.js",
    requireJsShim += "main.js"

  )

This is what my build looks like when I do play start

[info] Loading project definition from /Users/myuser/MyProject/project/main/project
[info] Set current project to project (in build file:/Users/myuser/MyProject/project/main/)
[info] RequireJS optimization has begun...
[info] app.build.js:
[info] ({appDir: "javascripts",
[info]           baseUrl: ".",
[info]           dir:"javascripts-min", mainConfigFile: "javascripts/main.js", modules: [{name: "main"}]})

Tracing dependencies for: main
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/app.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/bootstrap.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/controllers/AdminAppController.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/controllers/index.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/directives/Directive.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/directives/index.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/filters/index.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/impl.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/main.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/routes.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/app.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/bootstrap.js
min/controllers/Controller.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/directives/index.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/directives/Directive.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/filters/index.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/impl.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular-cookies.min.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular-flash.min.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular-resource.min.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular.min.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/main.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/routes.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/services/Service.js
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/services/index.js

main.js
----------------
lib/angular/angular.min.js
filters/index.js
lib/angular/angular-resource.min.js
lib/angular/angular-cookies.min.js
services/index.js
directives/index.js
controllers/index.js
app.js
routes.js
controllers/Controller.js
directives/Directive.js
services/Service.js
impl.js
bootstrap.js
main.js

I made some changes to Build.scala to be

requireJsShim += "main.js",
    requireJsShim += "admin/main.js",
    requireJs += "main.js",
    requireJs += "admin/main.js",

and I get this error instead

({appDir: "javascripts",
[info]           baseUrl: ".",
[info]           dir:"javascripts-min", mainConfigFile: "javascripts/main.jsadmin/main.js", modules: [{name: "main"},{name: "admin/main"}]})
Error: /Users/user/MyProject/project/main/target/scala-2.10/classes/public/javascripts/main.jsadmin/main.js does not exist.

You can see that it concatenates the two lines together in requireJsShim, and I need bootstrap to work for angularjs.

+5
source share
1 answer

In the build.scala file, add all your dynamic js files to requireJS, for example, for example:

val main = play.Project(appName, appVersion, appDependencies).settings(

    requireJsShim += "main-normal.js"
    requireJs += "main-normal.js",
    requireJs += "main-admin.js",

 )

, "play start", requireJS , :

{
  appDir: "javascripts",
  baseUrl: ".",
  dir:"javascripts-min",
  mainConfigFile: "main-normal.js",
  modules: [
             {name: "main-normal"},
             {name: "main-admin"}
           ]
}

js, firebug/chrome dev , , / . .

, r.js rhino, play framework, : https://raw.github.com/jrburke/r.js/master/dist/r.js

build.scala requireJsShim:

    requireNativePath := Some("r.js")

build.scala :

val main = play.Project(appName, appVersion, appDependencies).settings(

    requireNativePath := Some("r.js"),
    requireJsShim += "main-normal.js"
    requireJs += "main-normal.js",
    requireJs += "main-admin.js",

 )
+6

All Articles