是否可以将 AngularJs 包含到带有 Gradle 的项目中
Posted
技术标签:
【中文标题】是否可以将 AngularJs 包含到带有 Gradle 的项目中【英文标题】：Is it possible to include AngularJs to a project with Gradle 【发布时间】：2015-04-29 13:33:08 【问题描述】：我知道可以将 AngularJs 与 Maven 一起包含到 Spring 项目中，但如何将它包含在 Gradle 中？
查看 gradle 存储库，我发现没有 AngularJs 条目。也许可以使用 Gradle 从 Maven 存储库中获取它？但是如何做到这一点。
【问题讨论】：
我建议你通过this入门练习。 您建议的练习包括通过使用 html 脚本标记从 google 获取 angular。我希望 Gradle 自动将 angular 文件放入我的项目文件夹中。 除了从谷歌加载（和缓存）该文件的每个人都已经在他们的缓存中；使用您的方法，他们在缓存中有n 的副本（其中n 是他们访问的angularjs 站点的数量）。
此外，当 Google 修复错误时，您无需重新编译和重新部署您的网站即可获得好处。如果绝对要求您自己提供文件（例如业务否决您），那么我将开始研究 bower 和 npm。
在企业生产环境中，您不希望浏览器一直与 CDN 联系。您还想控制您正在使用的角度的确切版本。所以实际上有一个很好的理由使用 Gradle 来做这件事。
【参考方案1】：
尽管在下面的讨论中证明通过 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'
【讨论】：
【参考方案2】：查看webjars，我强烈推荐它。
我刚刚在 Maven 和 Gradle 项目中使用过它。 基本上它正是我们所需要的，大量的前端项目和框架打包在 jars 中。
将此依赖项添加到您的 build.gradle 脚本中：
compile 'org.webjars:angularjs:1.3.14'
转到文档部分以获取 Spring 的快速设置指南
在脚本中包含 angular.js 或 jar 中的其他模块，例如本地资源
<script src="where-you-exposed-webjars/angular/1.3.14/angular.js"></script>
require.js脚本中要求它
【讨论】：
【参考方案3】：可能会迟到，但请结帐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 项目架构的详细信息，请参阅以下博客。：
https://ghariaonline.wordpress.com/2016/04/19/spring-boot-with-angular-using-gradle/
【讨论】：
看起来很有趣。很快就会看看这个。【参考方案4】：我有 AngularJS 2 + Spring Boot 应用程序和 Gradle。我使用 typescript（.ts 文件）和 npm（node js 包管理器）。所以我正在运行 npm install 来生成 node_modules 和 npm run tsc 来将打字稿翻译成 javascript。不过，我仍然使用一些 webjar，基本上依赖项在构建时由 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 包含在 head 部分中
<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;
【讨论】：
一点也不差。我会试试看！以上是关于是否可以将 AngularJs 包含到带有 Gradle 的项目中的主要内容，如果未能解决你的问题，请参考以下文章
将带有HTML标签的输出从AngularJs传递到HTML [重复]
AngularJS - 带有 Rails 3.2.3 的 $http POST
带有 AngularJS 的某种俄罗斯娃娃容器的动态编辑表单