Ist es möglich, auch AngularJs an einem Projekt mit Gradle

Habe ich AngularJS 2 + Spring Boot Anwendung mit Gradle. Ich benutze Typoskript (.ts-Datei) und npm (node-js-package-manager). Also ich bin mit npm installieren für generieren node_modules und npm führen tsc für die übersetzung von typescript zu javascript. Ich benutze immer noch einige webjars obwohl, im Grunde Abhängigkeiten sind gesammelt von npm Aufgabe während der Bauzeit und WLAN durch systemjs.config.js Datei

Unten ist meine Ordner-Struktur

/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

Dies ist mein build.gradle-Datei und fügen Sie zwei benutzerdefinierte Aufgaben (npmInstall und npmRunTsc) zum ausführen von npm Aufgaben

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

Wenn ich das gradle-build-Prozess I ausgeführt, wie unten

$ gradle clean npmInstall npmRunTsc test bootRepackage

Kann ich Sie verwenden systemjs.config.js gezeigt 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 habe ich auch die systemjs.config.js im head-Bereich

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

Last, zu Sortieren, Rahmen Weg, den ich tun, wie unten auf meine Feder 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;
    }
}

Kann es zu spät sein, aber Kasse https://github.com/gharia/spring-boot-angular.
Dies ist Spring Boot Projekt mit angular JS unter Verwendung von asset-pipeline.

EDIT:

Mit das gradle-plugin, können wir leicht zu verwalten der client-Seite Abhängigkeiten, entweder von npm oder bower oder GIT. Bitte siehe Beispiel-build.gradle unten, in die ich aufgenommen haben, die verschiedene Abhängigkeiten von Winkel in 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 {
    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
}

Finden Sie in der folgenden blog für die details der Architektur der Probe Spring-Boot-Projekt mit angular.:

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