Come utilizzare più file main.js per RequireJs in Play Framework 2.1.1 Java?

Question

Sto costruendo un'applicazione a pagina singola utilizzando, AngularJs + RequireJs in Play Framework 2.1.1. Ho due applicazioni che si trovano nello stesso server Play, nella dashboard dell'amministratore e nel normale sito web. Ecco perché ho due file main.js per Admin Dashboard e il sito web Normale. La struttura dell'applicazione è simile a questa. L'ho ottenuto da public/javascripts

Vogliamo separare le due pagine, ecco perché abbiamo due file main.js. Tuttavia, il problema che sto affrontando ora è che nella root main.js tutto va bene. Se vado alla mia applicazione http://localhost:9000/ tutto è ok e se guardo il pannello di rete su Firebug vedo solo require.js e main.js che è quello che mi aspettavo. Tuttavia, quando vado alla dashboard dell'amministratore, http://localhost:9000/admin, ogni file viene corretto in modo corretto. Ma quando guardo la rete vedo tutti i file javascript che non avrebbe dovuto essere quello. Ho pensato che ogni script dovrebbe essere caricato dinamicamente da requireJs. Quindi, significa che il browser effettua più chiamate per ottenere tutti i file necessari invece di ottenere require.js e main.js per risolvere le dipendenze. Sto facendo qualcosa di sbagliato?

ho avuto la struttura di questo progetto 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 

Si noterà che amministratore dentro/c'è main.js e anche nella root ho un'altra main.js

Il codice sembra piuttosto molto simile a questo.

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 
}); 

Questo è ciò che il mio modello appare come per il sito normale

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

Questo è ciò che il mio modello per la pagina di amministrazione appare come

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

E questo è il mio Build.scala

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

) 

Questo è ciò che la mia generazione si presenta come quando faccio 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 

Ho fatto alcuni cambiamenti nella Build.scala essere

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

e ottengo questo errore invece

({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. 

Puoi vedere che concatena le due stringhe insieme in requireJsShim e ho bisogno che il bootstrap funzioni per angularjs.

Answer 1

Nella tua costruzione.file di scala, aggiungere tutti i file js dinamici per requireJS, come ad esempio:

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

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

) 

Poi, quando si inizia a giocare usando 'inizio del gioco', requireJS tratteranno questi singoli file come moduli, che si può vedere nella console uscita come:

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

sarà poi iniziare a risolvere le dipendenze per quei file JS, e nel vostro sito, ispezionare utilizzando strumenti firebug/cromo dev e nella scheda di rete, si rifletterà le modifiche, fare una ricarica fresco/elimina la cache nel tuo browser per vedere le modifiche.

Inoltre, per il miglioramento delle prestazioni, vi suggerisco di utilizzare il file invece di compilatore di default rinoceronte le r.js come suggerito nella documentazione quadro di gioco, è possibile scaricarlo qui: https://raw.github.com/jrburke/r.js/master/dist/r.js

copiare il file nella tua cartella di progetto e aggiungere la seguente riga al di sopra della linea build.scala requireJsShim:

requireNativePath := Some("r.js") 

così, in effetti il ​​file build.scala dovrebbe essere:

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

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

)