我知道可以将AngularJs与Maven一起包含到Spring项目中,但是如何将它包含在Gradle中呢?
查看gradle存储库我找不到AngularJs条目。也许可以使用Gradle从Maven存储库中获取它?但是如何做到这一点。
答案 0 :(得分:12)
我有 Gradle 的 AngularJS 2 + Spring Boot 应用程序。我使用 typescript (。ts文件)和 npm (node js包管理器)。所以我正在运行 npm install 来生成node_modules和 npm run tsc 来将typescript转换为javascript。我仍然使用一些webjars,基本上是在构建时由npm任务收集依赖关系并由systemjs.config.js文件连接
以下是我的文件夹结构
/src/main/java
/src/main/resources
/app - .ts files and .js translated from .ts
/css
/js - systemjs.config.js
/node_modules - generated by npm install
/typings - generated by npm install
package.json
tsconfig.json
typings.json
/src/main/webapp/WEB-INF/jsp - .jsp files
这是我的build.gradle文件并添加两个自定义任务(npmInstall和npmRunTsc)来运行npm任务
build.gradle
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:1.3.5.RELEASE")
classpath("org.flywaydb:flyway-gradle-plugin:3.2.1")
}
}
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'idea'
apply plugin: 'spring-boot'
apply plugin: 'war'
war {
baseName = 'my-angular-app'
version = '1.0'
manifest {
attributes 'Main-Class': 'com.my.Application'
}
}
sourceCompatibility = 1.8
targetCompatibility = 1.8
repositories {
mavenLocal()
mavenCentral()
}
task npmInstall(type:Exec) {
workingDir 'src/main/resources'
commandLine 'npm', 'install'
standardOutput = new ByteArrayOutputStream()
ext.output = {
return standardOutput.toString()
}
}
task npmRunTsc(type:Exec) {
workingDir 'src/main/resources'
commandLine 'npm', 'run', 'tsc'
standardOutput = new ByteArrayOutputStream()
ext.output = {
return standardOutput.toString()
}
}
dependencies {
// tag::jetty[]
compile("org.springframework.boot:spring-boot-starter-web")
compile("org.springframework.boot:spring-boot-starter-tomcat",
"org.springframework.boot:spring-boot-starter-data-jpa",
"org.springframework.boot:spring-boot-starter-actuator",
"org.springframework.boot:spring-boot-starter-security",
"org.springframework.boot:spring-boot-starter-batch",
"org.springframework.cloud:spring-cloud-starter-config:1.0.3.RELEASE",
"org.springframework.cloud:spring-cloud-config-client:1.0.3.RELEASE",
"com.google.code.gson:gson",
"commons-lang:commons-lang:2.6",
"commons-collections:commons-collections",
"commons-codec:commons-codec:1.10",
"commons-io:commons-io:2.4",
"com.h2database:h2",
"org.hibernate:hibernate-core",
"org.hibernate:hibernate-entitymanager",
"org.webjars:datatables:1.10.5",
"org.webjars:datatables-plugins:ca6ec50",
"javax.servlet:jstl",
"org.apache.tomcat.embed:tomcat-embed-jasper",
"org.quartz-scheduler:quartz:2.2.1",
"org.jolokia:jolokia-core",
"org.aspectj:aspectjweaver",
"org.perf4j:perf4j:0.9.16",
"commons-jexl:commons-jexl:1.1",
"cglib:cglib:3.2.1",
"org.flywaydb:flyway-core",
)
providedRuntime("org.springframework.boot:spring-boot-starter-tomcat")
testCompile("junit:junit",
"org.springframework:spring-test",
"org.springframework.boot:spring-boot-starter-test",
"org.powermock:powermock-api-mockito:1.6.2",
"org.powermock:powermock-module-junit4:1.6.2",
)
}
task wrapper(type: Wrapper) {
gradleVersion = '1.11'
}
当我运行gradle构建过程时,我运行如下
$ gradle clean npmInstall npmRunTsc test bootRepackage
我可以使用AngularJS教程中显示的相同systemjs.config.js
<强> systemjs.config.js 强>
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
在.jsp文件中,我在头部
中包含了systemjs.config.js<script type="text/javascript" src="node_modules/zone.js/dist/zone.js"></script>
<script type="text/javascript" src="node_modules/reflect-metadata/Reflect.js"></script>
<script type="text/javascript" src="node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="js/systemjs.config.js"></script>
最后,在我的Spring WebMvcConfigurerAdapter
中找出我喜欢的上下文路径@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.my.controller")
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
if (!registry.hasMappingForPattern("/webjars/**")) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
if (!registry.hasMappingForPattern("/images/**")) {
registry.addResourceHandler("/images/**").addResourceLocations("classpath:/images/");
}
if (!registry.hasMappingForPattern("/css/**")) {
registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/");
}
if (!registry.hasMappingForPattern("/js/**")) {
registry.addResourceHandler("/js/**").addResourceLocations("classpath:/js/");
}
if (!registry.hasMappingForPattern("/app/**")) {
registry.addResourceHandler("/app/**").addResourceLocations("classpath:/app/");
}
if (!registry.hasMappingForPattern("/node_modules/**")) {
registry.addResourceHandler("/node_modules/**").addResourceLocations("classpath:/node_modules/");
}
}
@Bean
public InternalResourceViewResolver internalViewResolver() {
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setPrefix("/WEB-INF/jsp/");
viewResolver.setSuffix(".jsp");
viewResolver.setOrder(1);
return viewResolver;
}
}
答案 1 :(得分:7)
查看webjars,我强烈推荐它。
我刚刚在Maven和Gradle项目中使用过它 基本上它正是我们所需要的,大量的前端项目和框架包装在罐子里。
将此依赖项添加到build.gradle
脚本:
compile 'org.webjars:angularjs:1.3.14'
有关Spring
在您的脚本中包含angular.js
或其他模块,如本地资源
<script src="where-you-exposed-webjars/angular/1.3.14/angular.js"></script>
require.js
脚本答案 2 :(得分:5)
虽然在下面的讨论中证明了通过gradle下载角度没有意义的问题,但可以使用以下代码完成:
repositories {
ivy {
name = 'AngularJS'
url = 'https://code.angularjs.org/'
layout 'pattern', {
artifact '[revision]/[module](.[classifier]).[ext]'
}
}
}
configurations {
angular
}
dependencies {
angular group: 'angular', name: 'angular', version: '1.3.9', classifier: 'min', ext: 'js'
}
task fetch(type: Copy) {
from configurations.angular
into 'src/main/webapp/js'
rename {
'angular.js'
}
}
答案 3 :(得分:2)
可能会迟到,但结帐https://github.com/gharia/spring-boot-angular。 这是使用资源管道的角度JS的Spring Boot项目。
编辑:
使用this gradle plugin,我们可以轻松管理客户端依赖关系,无论是npm还是bower还是GIT。请参阅下面的示例build.gradle,其中我在clientDependencies
中包含了Angular的几个依赖项。
buildscript {
repositories {
mavenCentral()
mavenLocal()
maven { url "https://repo.grails.org/grails/core" }
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:1.3.3.RELEASE")
classpath("org.codehaus.groovy:groovy:2.4.6")
classpath("gradle.plugin.com.boxfuse.client:flyway-release:4.0")
}
}
plugins {
id 'com.craigburke.client-dependencies' version '1.0.0-RC2'
}
apply plugin: 'groovy'
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'idea'
apply plugin: 'spring-boot'
apply plugin: 'war'
jar {
baseName = 'boot-demo'
version = '0.1.0'
}
repositories {
mavenCentral()
mavenLocal()
maven { url "https://repo.grails.org/grails/core" }
jcenter()
maven { url "http://repo.spring.io/libs-snapshot" }
}
sourceCompatibility = 1.8
targetCompatibility = 1.8
configurations {
providedRuntime
}
dependencies {
compile("org.springframework.boot:spring-boot-starter-web")
providedRuntime("org.springframework.boot:spring-boot-starter-tomcat")
compile("org.springframework.boot:spring-boot-starter-actuator")
compile("org.springframework.boot:spring-boot-starter-data-jpa")
compile("org.codehaus.groovy:groovy")
testCompile("org.springframework.boot:spring-boot-starter-test")
testCompile("junit:junit")
}
task wrapper(type: Wrapper) {
gradleVersion = '2.3'
}
clientDependencies {
npm {
'angular'('1.5.x', into: 'angular') {
include 'angular.js'
include 'angular.min.js'
}
'angular-resource'('1.5.x', into: 'angular') {
include 'angular-resource.js'
include 'angular-resource.min.js'
}
'angular-mocks'('1.5.x', into: 'angular') {
include 'angular-mocks.js'
include 'angular-mocks.min.js'
}
'angular-route'('1.5.x', into: 'angular'){
include 'angular-route.js'
include 'angular-route.min.js'
}
'angular-animate'('1.5.x', into: 'angular') {
include 'angular-animate.js'
include 'angular-animate.min.js'
}
}
}
assets {
minifyJs = true
minifyCss = true
}
有关带角度的示例Spring Boot Project的体系结构的详细信息,请参阅以下博客:
https://ghariaonline.wordpress.com/2016/04/19/spring-boot-with-angular-using-gradle/