我正在使用AngularJs + RequireJs在Play Framework 2.1.1中构建单页应用程序。我有两个应用程序位于同一Play服务器内,管理面板和普通网站。这就是为什么我有两个主要的.js文件分别为Admin Dashboard和Normal website。应用程序结构如下所示。我从public/javascripts中获取了这些信息。
我们想要分离这两个页面,所以我们有两个main.js文件。然而,我现在面临的问题是,在根main.js中一切都很好。如果我进入我的应用程序http://localhost:9000/,一切都很正常,如果我查看Firebug上的网络面板,我只看到require.js和main.js,这正是我期望的。然而,当我进入管理面板http://localhost:9000/admin时,每个文件都被正确地缩小了。但是当我查看网络时,我看到所有的JavaScript文件,它本不应该是这样的。我认为每个脚本都应该是从requireJs动态加载的。这意味着浏览器会多次调用以获取所有必要的文件,而不仅仅是获取require.js和main.js来解决依赖关系。我做错了什么吗?
你会注意到在admin/文件夹中有一个main.js,在根目录中也有另一个main.js。
代码看起来就像这样。
这是我的常规网站模板的外观。
这是我的管理页面模板的外观。
这是我执行
你可以看到它在requireJsShim中将两个字符串连接起来,我需要这样做才能让bootstrap与angularjs一起工作。
我们想要分离这两个页面,所以我们有两个main.js文件。然而,我现在面临的问题是,在根main.js中一切都很好。如果我进入我的应用程序http://localhost:9000/,一切都很正常,如果我查看Firebug上的网络面板,我只看到require.js和main.js,这正是我期望的。然而,当我进入管理面板http://localhost:9000/admin时,每个文件都被正确地缩小了。但是当我查看网络时,我看到所有的JavaScript文件,它本不应该是这样的。我认为每个脚本都应该是从requireJs动态加载的。这意味着浏览器会多次调用以获取所有必要的文件,而不仅仅是获取require.js和main.js来解决依赖关系。我做错了什么吗?
我从这个项目中得到了结构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
你会注意到在admin/文件夹中有一个main.js,在根目录中也有另一个main.js。
代码看起来就像这样。
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
});
这是我的常规网站模板的外观。
@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url)
这是我的管理页面模板的外观。
@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url,
module = routes.Assets.at("javascripts/admin/main").url)
这是我的 Build.scala 文件
val main = play.Project(appName, appVersion, appDependencies).settings(
requireJs += "main.js",
requireJsShim += "main.js"
)
这是我执行
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
我在Build.scala中进行了一些更改
requireJsShim += "main.js",
requireJsShim += "admin/main.js",
requireJs += "main.js",
requireJs += "admin/main.js",
但我却收到了这个错误
({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.
你可以看到它在requireJsShim中将两个字符串连接起来,我需要这样做才能让bootstrap与angularjs一起工作。