Est-il possible d’inclure AngularJs dans un projet avec Gradle

Dans la discussion ci-dessous, il est apparu que le téléchargement angular via gradle n’a aucun sens, vous pouvez le faire à l’aide du code suivant:

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

J’ai l’application AngularJS 2 + Spring Boot avec Gradle . J’utilise typescript (fichier .ts) et npm ( gestionnaire de package noeud js). J’exécute donc npm install pour générer node_modules et npm exécute tsc pour la traduction du script au format javascript. J’utilise toujours certains webjars cependant, les dépendances sont essentiellement rassemblées par la tâche npm pendant la phase de construction et câblées par le fichier systemjs.config.js

Ci-dessous la structure de mon dossier

 /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 

Ceci est mon fichier build.gradle et ajoute deux tâches personnalisées (npmInstall et npmRunTsc) pour exécuter les tâches 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 { atsortingbutes '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.toSsortingng() } } task npmRunTsc(type:Exec) { workingDir 'src/main/resources' commandLine 'npm', 'run', 'tsc' standardOutput = new ByteArrayOutputStream() ext.output = { return standardOutput.toSsortingng() } } dependencies { // tag::jetty[] comstack("org.springframework.boot:spring-boot-starter-web") comstack("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") testComstack("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' } 

Lorsque je lance le processus de construction de Gradle, je lance comme ci-dessous

 $ gradle clean npmInstall npmRunTsc test bootRepackage 

Je peux utiliser le même fichier systemjs.config.js affiché dans le didacticiel AngularJS

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/comstackr', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package ensortinges 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); 

Et sur le fichier .jsp, j’inclus le fichier systemjs.config.js dans la section head

Pour finir, pour sortinger le chemin de contexte que je fais comme ci-dessous sur mon 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; } } 

Découvrez les sites Web , je le recommande vivement.

Je viens de l’utiliser dans le projet Maven et Gradle.
Fondamentalement, c’est exactement ce dont nous avions besoin, une vaste collection de projets et de frameworks frontaux emballés dans des bocaux.

• Ajoutez cette dépendance à votre script build.gradle :

  comstack 'org.webjars:angularjs:1.3.14'

• Allez à la section documentation pour un guide d’installation rapide pour Spring

• incluez angular.js ou un autre module du pot dans votre script comme une ressource locale

• Ou bien vous en require.js éventuellement besoin du script require.js

Il est peut-être tard, mais consultez https://github.com/gharia/spring-boot-angular . Ceci est un projet Spring Boot avec JS angular utilisant asset-pipeline.

MODIFIER:

En utilisant ce plugin Gradle , nous pouvons facilement gérer les dépendances côté client, que ce soit npm ou bower ou GIT. S’il vous plaît voir l’exemple buil.gradle ci-dessous, dans lequel j’ai inclus plusieurs dépendances d’Anguar dans clientDependencies .

 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 { comstack("org.springframework.boot:spring-boot-starter-web") providedRuntime("org.springframework.boot:spring-boot-starter-tomcat") comstack("org.springframework.boot:spring-boot-starter-actuator") comstack("org.springframework.boot:spring-boot-starter-data-jpa") comstack("org.codehaus.groovy:groovy") testComstack("org.springframework.boot:spring-boot-starter-test") testComstack("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 } 

Veuillez consulter le blog suivant pour plus de détails sur l’architecture de l’exemple de Spring Boot Project avec angular .:

https://ghariaonline.wordpress.com/2016/04/19/spring-boot-with-angular-using-gradle/