是否可以将AngularJs包含到使用Gradle的项目中

我知道可以将AngularJs与Maven包含在一个Spring项目中，但是如何将它包含在Gradle中？

查看gradle存储库我找不到AngularJs条目。 也许可以使用Gradle从Maven存储库中获取它？ 但是如何做到这一点呢。

Answer 1

虽然在下面的讨论中certificate了通过gradle下载angular没有意义的问题，但可以使用以下代码完成：

 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' } } 

Answer 2

我有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文件中，我在head部分包含了systemjs.config.js

最后，在我的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; } } 

Answer 3

看看webjars ，我强烈推荐它。

我刚刚在Maven和Gradle项目中使用它。
基本上它正是我们所需要的，大量的前端项目和框架包装在jar子里。

• 将此依赖项添加到build.gradle脚本：

  compile 'org.webjars:angularjs:1.3.14'

• 有关Spring的快速安装指南，请转到文档部分

• 包括angular.js或您脚本中jar的其他模块，如本地资源

• 或者可选地从require.js脚本中获取它

Answer 4

可能会迟到，但结帐时https://github.com/gharia/spring-boot-angular 。 这是使用资源管道的角度JS的Spring Boot项目。

编辑：

使用这个gradle插件 ，我们可以轻松管理客户端依赖关系，无论是npm还是bower还是GIT。 请参阅下面的示例buil.gradle，其中我在clientDependencies包含了几个Anguar的依赖项。

 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/