initial
License: Other
This project illustrates how WebJars can be used along with requirejs in relation to the popular angular-seed project.
The project is available as a Typesafe Activator Template.
I am trying to figure out how to use the RequireJs optimizer that seems to be built into Play with Webjars. Does it work? I notice that if I run this sample app in production mode, it is still making individual requests for each file. Could you make the changes needed to optimize the js loading, so I can hopefully see what I am doing wrong in my project?
Thanks!
if you try to remove the require.js dependency from build.sbt, /lib/require.js returns a 404. Same for a new project even though in the tutorial it says:
"The webjars-playlibrary does have a transitive dependencies on RequireJS and WebJars Locator, so there's no need to declare them explicitly."
Any non-trivial project will make use of the other AngularJS modules (cookies, i18n, ...). Could you please provide examples what's the recommended way of loading them using WebJars and making sure that AngularJS is loaded before its submodules?
Currently I'm using a manual config along the lines of:
requirejs.config({
shim: {
'angular' : {'exports' : 'angular'},
"angular-cookies" : { deps: ["angular"] }
},
priority: [
"angular"
]
});
Thanks.
It would be helpful if the example showed how to pull and wire webjars that you need to inject into Angular. For example, the angular-ui router, or angular-ui bootstrap.
I just retrofitted an older version of the seed project (2.2) to 2.3 and want to get the dependencies to wire up their webjars-requirejs.js files automatically. The recent seed project does not demonstrate this, and it doesn't have a dependency on webjars-play anymore so I cannot figure out what I am doing wrong.
Specifically I do not want to do this as it defeats the purpose of webjars and sbt integration :
requirejs.config({
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-ui-router' : ['../lib/angular-ui-router/angular-ui-router'],
'angular-resource' : ['../lib/angularjs/angular-resource'],
'ui-bootstrap-tpls' : ['../lib/angular-ui-bootstrap/ui-bootstrap-tpls']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-ui-router' : {
deps : ['angular']
},
'angular-resource' : {
deps : ['angular']
},
'ui-bootstrap-tpls' : {
deps :['angular']
}
}
});
My config :
routes :
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Enable webjar based resources to be returned
GET /contentselectors controllers.Assets.at(path="/public",file="/json/ContentSelectors.json")
# Home page
GET / controllers.Application.index()
GET /webjars/*file controllers.WebJarAssets.at(file)
# Map the JS resource paths
GET /*file controllers.Assets.versioned(path="/public", file: Asset)
build.sbt :
name := "angular-seed-play"
version := "1.0-SNAPSHOT"
scalaVersion := "2.10.4"
resolvers += "ReactiveCouchbase repository" at "https://raw.github.com/ReactiveCouchbase/repository/master/snapshots"
libraryDependencies ++= Seq(
"org.webjars" %% "webjars-play" % "2.3-M1",
"org.webjars" % "requirejs" % "2.1.11-1",
"org.webjars" % "angularjs" % "1.2.13",
"org.webjars" % "bootstrap" % "3.1.1-1",
"org.webjars" % "angular-ui-router" % "0.2.10-1",
"org.webjars" % "angular-ui-bootstrap" % "0.11.0-2",
"org.reactivecouchbase" %% "reactivecouchbase-play" % "0.3-SNAPSHOT"
)
lazy val root = (project in file(".")).enablePlugins(PlayScala)
pipelineStages := Seq(rjs, digest, gzip)
plugins :
// Comment to get more information during initialization
logLevel := Level.Warn
// The Typesafe repository
resolvers += "Typesafe repository" at "http://repo.typesafe.com/typesafe/releases/"
// Use the Play sbt plugin for Play projects
addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.3.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-rjs" % "1.0.1")
addSbtPlugin("com.typesafe.sbt" % "sbt-digest" % "1.0.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-gzip" % "1.0.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-coffeescript" % "1.0.0")
template :
<head>
<meta charset="utf-8">
@*<meta name="viewport" content="width=device-width, initial-scale=1">*@
<title>My AngularJS App</title>
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="@routes.Assets.versioned("css/app.css")">
<script data-main="@routes.Assets.versioned("js/main.js")" src="@routes.Assets.versioned("lib/requirejs/require.js")"></script>
@*<link rel="stylesheet" href="@routes.Assets.at("css/app.css")">*@
@Html(org.webjars.play.RequireJS.setup("index"))
</head>
error :
play.api.Application$$anon$1: Execution exception[[NoSuchMethodException: controllers.ReverseAssets.at(java.lang.String)]]
at play.api.Application$class.handleError(Application.scala:296) ~[play_2.10-2.3.0.jar:2.3.0]
at play.api.DefaultApplication.handleError(Application.scala:402) [play_2.10-2.3.0.jar:2.3.0]
at play.core.server.netty.PlayDefaultUpstreamHandler$$anonfun$14$$anonfun$apply$1.applyOrElse(PlayDefaultUpstreamHandler.scala:205) [play_2.10-2.3.0.jar:2.3.0]
at play.core.server.netty.PlayDefaultUpstreamHandler$$anonfun$14$$anonfun$apply$1.applyOrElse(PlayDefaultUpstreamHandler.scala:202) [play_2.10-2.3.0.jar:2.3.0]
at scala.runtime.AbstractPartialFunction.apply(AbstractPartialFunction.scala:33) [scala-library.jar:na]
Caused by: java.lang.NoSuchMethodException: controllers.ReverseAssets.at(java.lang.String)
at com.zeroturnaround.javarebel.uz.getMethod(JRebel:713) ~[na:201311271505]
at java.lang.Class.getMethod(Class.java) ~[na:1.7.0_45]
at org.webjars.play.RequireJS$.nastyReflectedRoute$1(RequireJS.scala:13) ~[webjars-play_2.10-2.3-M1.jar:2.3-M1]
at org.webjars.play.RequireJS$.nastyReflectedAssetsRoute$1(RequireJS.scala:18) ~[webjars-play_2.10-2.3-M1.jar:2.3-M1]
at org.webjars.play.RequireJS$.setup(RequireJS.scala:22) ~[webjars-play_2.10-2.3-M1.jar:2.3-M1]
The main problem (not sure if you faced) is trailing # in the url.
http://example.com/#/myProfile
The way to remove it to add adding $locationProvider.html5Mode(true) to route provider
in the route provider. But this is breaking the routing when user try to refresh a browser. Play complains that the routes file is missing that route which is actually defined in route Provider not Server side routes file.
:)
Hi,
how should we approach serving minimised or non minimised files, dependent on dev/prod mode?
Rudolf
This is a good app for showing how to use angular with play, however, it's missing how to actually test using requirejs and mocha.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.