Tôi đang xây dựng một ứng dụng một trang bằng AngularJs + RequireJs trong Play Framework 2.1.1. Tôi có hai ứng dụng ngồi bên trong cùng một máy chủ Play, bảng điều khiển quản trị và trang web thông thường. Đó là lý do tại sao tôi có hai tệp main.js cho Trang tổng quan quản trị và trang web thông thường. Cấu trúc ứng dụng trông như thế này. Tôi nhận được điều này từ public/javascriptsLàm thế nào để sử dụng nhiều tệp main.js cho RequireJs trong Play Framework 2.1.1 Java?
Chúng tôi muốn tách hai trang đó là lý do tại sao chúng tôi có hai tệp main.js. Tuy nhiên, vấn đề tôi đang phải đối mặt ngay bây giờ là trong main.js gốc mọi thứ đều ổn. Nếu tôi đi đến ứng dụng của tôi http://localhost:9000/ mọi thứ đều ổn và nếu tôi nhìn vào bảng điều khiển mạng trên Firebug, tôi chỉ thấy require.js và main.js, đó là những gì tôi mong đợi. Tuy nhiên, khi tôi đi đến bảng điều khiển quản trị http://localhost:9000/admin Mọi tệp đều được rút gọn một cách chính xác. Nhưng khi tôi nhìn vào mạng tôi thấy tất cả các tập tin javascript mà nó không nên được đó. Tôi nghĩ rằng mỗi kịch bản nên được nạp tự động từ requireJs. Vì vậy, nó có nghĩa là trình duyệt thực hiện nhiều cuộc gọi để có được tất cả các tệp cần thiết thay vì chỉ nhận được require.js và main.js để giải quyết các phụ thuộc. Tôi có làm gì sai không?
tôi có cấu trúc từ dự án này 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
Bạn sẽ nhận thấy rằng quản trị bên trong/có main.js và cũng trong thư mục gốc Tôi có một main.js
Mã này trông khá nhiều như thế này.
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
});
Đây là những gì mẫu của tôi trông giống như cho các trang web bình thường
@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url)
Đây là những gì mẫu của tôi cho trang admin trông giống như
@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url,
module = routes.Assets.at("javascripts/admin/main").url)
Và đây là Build.scala tôi
val main = play.Project(appName, appVersion, appDependencies).settings(
requireJs += "main.js",
requireJsShim += "main.js"
)
Điều này là những gì tôi xây dựng trông giống như khi tôi làm 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
Tôi đã thực hiện một số thay đổi trong Build.scala là
requireJsShim += "main.js",
requireJsShim += "admin/main.js",
requireJs += "main.js",
requireJs += "admin/main.js",
và tôi nhận được lỗi này thay vì
({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.
Bạn có thể thấy rằng nó nối hai chuỗi lại với nhau trong requireJsShim và tôi cần nó cho bootstrap để làm việc cho các angularj.
vui lòng xem câu hỏi đã chỉnh sửa của tôi. Tôi không thể đặt mã trong nhận xét. – toy
@toy, nếu cả main.js và admin/main.js của bạn có cùng tệp js theo yêu cầu đường dẫn cấu hình, thì sẽ đủ nếu bạn chỉ bao gồm một ví dụ, một trong các tệp đó trong thuộc tính requireJsShim, hãy thử thêm chỉ một trong số chúng yêu cầuJsShim, chúng sẽ được biên dịch và có sẵn cho mô đun main.js khác. Khác nếu cả hai tệp main.js này có các phụ thuộc khác nhau, hãy thử thêm tất cả các phụ thuộc đó vào một trong các tệp trong require.config.paths và chỉ bao gồm nó cho thuộc tính requireJsShim, chúng sẽ được biên dịch và có sẵn cho tất cả các mô-đun. – somedev
Ngoài ra, tôi quên đề cập đến, nếu bạn muốn sử dụng tệp r.js, tôi nghĩ bạn phải cài đặt nút và requirejs, requirejs có thể được cài đặt thông qua npm cho nút và r.js có trong node_modules. – somedev