Czy możliwe jest dołączenie AngularJs do projektu z Gradle

Question

Wiem, że można na przykład dołączyć AngularJs z Maven do projektu Spring, ale w jaki sposób dołączyć go do Gradle?

Patrząc na repozytorium gradle, nie znajduję żadnych wpisów AngularJs. Może jest możliwe, aby pobrać go z repozytorium Maven z Gradle? Ale jak by to zrobić.

Answer 1

Chociaż okazało się w dyskusji poniżej mowa, że ​​nie ma sensu, aby pobrać kątowe poprzez Gradle można to zrobić za pomocą następującego fragment kodu:

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

Wyjazd webjars, bardzo polecam to.

Właśnie użyłem go w projekcie Maven and Gradle.
Zasadniczo jest to dokładnie to, czego potrzebowaliśmy, ogromna kolekcja front-endowych projektów i frameworków zapakowanych w słoiki.

• Dodaj tę zależność do skryptu build.gradle:

  compile 'org.webjars:angularjs:1.3.14'

• Przejdź do sekcji dokumentów o Podręczniku szybkiej obsługi na wiosnę

• obejmują angular.js lub jakiś inny moduł ze słoika w tobie skrypt przypomina lokalny zasób

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

• Albo optionaly wymagają od require.js skryptu

Answer 3

To może być późno, ale kasa https://github.com/gharia/spring-boot-angular. To jest projekt Spring Boot z kątowym JS przy użyciu potoku aktywów.

EDIT:

Korzystanie this gradle plugin, możemy łatwo zarządzać zależnościami stronie klienta albo NPM lub altany lub GIT. Proszę zobaczyć przykładowy plik buil.gradle poniżej, w którym zamieściłem kilka zależności Anguar w 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 
} 

Proszę patrz poniższy blog o szczegóły architektury próbki Wiosna Boot Projektu z kanciasty .:

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

Answer 4

mam angularjs 2 + Wiosna Boot aplikacji z Gradle . Używam maszynopisu (plik .ts) i npm (menedżer pakietów js węzła). Tak więc używam npm install do generowania node_modules i npm uruchom tsc do tłumaczenia maszynopisu na javascript. Nadal jednak używam niektórych webjar, w zasadzie zależności są zbierane przez zadanie npm w czasie kompilacji i podłączone przez systemjs.config.js plik

Poniżej jest moja struktura folderów

/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 

To jest mój plik build.gradle i dodać dwa zadania niestandardowe (npmInstall i npmRunTsc NPM), aby uruchomić zadania

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

Po uruchomieniu procesu gradowania uruchamiam poniżej:

$ gradle clean npmInstall npmRunTsc test bootRepackage 

mogę używać tych samych systemjs.config.js pokazane na tutorialu 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/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); 

oraz na .jsp pliku I obejmują systemjs.config.js w sekcja głowa

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

na końcu uporządkować ścieżki kontekstu zrobić jak poniżej na mojej wiosennej 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; 
    } 
}