Ist es möglich, AngularJs in ein Projekt mit Gradle

Question

einzubinden? Ich weiß, dass es möglich ist, AngularJs mit Maven in ein Spring-Projekt zu integrieren, aber wie wäre es mit Gradle?

Wenn ich in das große Repository suche, finde ich keine AngularJs Einträge. Vielleicht ist es möglich, es mit Gradle aus dem Maven-Repository zu holen? Aber wie sollte man das machen?

Answer 1

Obwohl es stellte sich in der Diskussion unter der Frage heraus, dass es nicht sinnvoll, über gradle Winkel zum Download macht kann es mit dem folgenden Code erfolgen:

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

Check out webjars, i hoch empfiehl es.

Ich habe es gerade in Maven und Gradle Projekt verwendet.
Im Grunde ist es genau das, was wir brauchten, eine riesige Sammlung von Front-End-Projekten und Frameworks, verpackt in Gläsern.

• diese Abhängigkeit zu Ihrem build.gradle Skript hinzufügen:

  compile 'org.webjars:angularjs:1.3.14'

• für Frühling für eine Kurzanleitung zur Dokumentation Abschnitt Go

• umfassen angular.js oder ein anderes Modul aus dem Glas in Ihnen Skript wie eine lokale Ressource

  <script src="where-you-exposed-webjars/angular/1.3.14/angular.js"></script>

• Oder optionaly erfordern es von require.js Skript

Answer 3

Es spät sein kann, aber Kasse https://github.com/gharia/spring-boot-angular. Dies ist Spring Boot-Projekt mit eckigen JS mit Asset-Pipeline.

EDIT:

Mit this gradle plugin, können wir leicht die Client-Seite Abhängigkeiten, entweder von NPM oder Bower oder GIT verwalten. Bitte beachten Sie die untenstehende Beispielstruktur, in der ich mehrere Abhängigkeiten von Anguar in clientDependencies aufgenommen habe.

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 
} 

Bitte beachten Sie die folgenden Blog für Details der Architektur der Probe Frühjahr Boot-Projekt mit Winkel .:

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

Answer 4

Ich habe AngularJS 2 + Frühling Stiefel Anwendung mit Gradle . Ich benutze typescript (.ts Datei) und npm (Knoten js Paketmanager). So laufe ich npm installieren für generieren node_modules und npm run tsc für das Übersetzen von Typoskript in Javascript. Ich benutze immer noch einige Webjars, im Grunde werden Abhängigkeiten von npm task während der Bauzeit gesammelt und von systemjs.config verdrahtet.js Datei

Unten ist meine Ordnerstruktur

/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 

Das ist meine build.gradle Datei ist und zwei benutzerdefinierte Aufgaben (npmInstall und npmRunTsc) hinzufügen npm Aufgaben

build.gradle

laufen

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

Wenn ich den Gradle-Build-Prozess ausführen, laufe ich wie folgt:

$ gradle clean npmInstall npmRunTsc test bootRepackage 

kann ich gleiche systemjs.config.js auf AngularJS Tutorial

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); 

Und auf .jsp Datei in die systemjs.config.js I umfassen gezeigt verwenden Sektionsleiter

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

Für Last, aussortieren Kontextpfad ich wie unten auf meinem Frühling WebMvcConfigurerAdapt er

@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; 
    } 
}