Gradle을 사용하여 프로젝트에 AngularJs를 포함 할 수 있습니까?

예를 들어 AngularJs를 Maven에 Spring 프로젝트에 포함시키는 것이 가능하다는 것을 알고 있지만 Gradle에는 어떻게 포함시킬 수 있을까요?

gradle 저장소를 살펴보면 AngularJs 항목을 찾을 수 없습니다. Gradle을 사용하여 Maven 저장소에서 가져올 수 있습니까? 그러나 어떻게 그렇게 할 수 있을까요?

해결법

==============================

1.아래의 토론에서 그라데이션을 통해 각도를 다운로드하는 것이 이치에 맞지 않는다는 결론을 얻었지만 다음 코드를 사용하여 수행 할 수 있습니다.

아래의 토론에서 그라데이션을 통해 각도를 다운로드하는 것이 이치에 맞지 않는다는 결론을 얻었지만 다음 코드를 사용하여 수행 할 수 있습니다.

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.나는 AngularJS 2 + Spring Boot 응용 프로그램을 Gradle과 함께 사용합니다. typescript (.ts 파일)와 npm (노드 js 패키지 관리자)을 사용합니다. 그래서 npm은 node_modules 생성을 위해 설치하고 npm은 타이 스크립트를 자바 스크립트로 변환하기 위해 tsc를 실행합니다. 나는 여전히 웹 jars를 사용하고 있지만 기본적으로 의존성은 빌드하는 동안 npm 태스크에 의해 수집되고 systemjs.config.js 파일에 의해 유선 화된다.

나는 AngularJS 2 + Spring Boot 응용 프로그램을 Gradle과 함께 사용합니다. typescript (.ts 파일)와 npm (노드 js 패키지 관리자)을 사용합니다. 그래서 npm은 node_modules 생성을 위해 설치하고 npm은 타이 스크립트를 자바 스크립트로 변환하기 위해 tsc를 실행합니다. 나는 여전히 웹 jars를 사용하고 있지만 기본적으로 의존성은 빌드하는 동안 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 파일이며 npm 태스크를 실행하기 위해 두 개의 사용자 정의 태스크 (npmInstall 및 npmRunTsc)를 추가합니다.

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

gradble 빌드 프로세스를 실행할 때 아래와 같이 실행됩니다.

$ 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 파일에서 headjs에 systemjs.config.js를 포함합니다.

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

==============================
3.체크 아웃 webjars, 나는 그것을 매우 좋습니다.

체크 아웃 webjars, 나는 그것을 매우 좋습니다.

방금 Maven 및 Gradle 프로젝트에서 사용했습니다. 기본적으로 그것은 우리가 필요로하는 것, 단지에 패키징 된 프론트 엔드 프로젝트 및 프레임 워크의 방대한 컬렉션입니다.

==============================

4.늦어 질 수도 있지만 https://github.com/gharia/spring-boot-angular를 확인하십시오. 이것은 자산 파이프 라인을 사용하는 앵귤러 JS가있는 Spring Boot 프로젝트입니다.

늦어 질 수도 있지만 https://github.com/gharia/spring-boot-angular를 확인하십시오. 이것은 자산 파이프 라인을 사용하는 앵귤러 JS가있는 Spring Boot 프로젝트입니다.

편집하다:

이 gradle 플러그인을 사용하여 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
}

각도가있는 봄 부팅 프로젝트의 아키텍처에 대한 자세한 내용은 다음 블로그를 참조하십시오.

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

from https://stackoverflow.com/questions/28754898/is-it-possible-to-include-angularjs-to-a-project-with-gradle by cc-by-sa and MIT license

'SPRING' 카테고리의 다른 글

[SPRING] 같은 클래스의 두 가지 다른 콩을 autowiring (0)	2019.03.15
[SPRING] 포트 80에서 Spring Boot 애플리케이션을 실행하려면 어떻게해야합니까? (0)	2019.03.15
[SPRING] 사양 및 Pageable을 함께 사용하는 경우 카운트를 비활성화하는 방법은 무엇입니까? (0)	2019.03.15
[SPRING] 최대 절전 모드, 스프링 및 SLF4J 바인딩 (0)	2019.03.15
[SPRING] 왜 우리는 Data Jpa에서 질의를 위해 @Modifying 어노테이션을 사용해야 만 하는가? (0)	2019.03.15

복붙노트

[SPRING] Gradle을 사용하여 프로젝트에 AngularJs를 포함 할 수 있습니까?

Gradle을 사용하여 프로젝트에 AngularJs를 포함 할 수 있습니까?

해결법

1.아래의 토론에서 그라데이션을 통해 각도를 다운로드하는 것이 이치에 맞지 않는다는 결론을 얻었지만 다음 코드를 사용하여 수행 할 수 있습니다.

3.체크 아웃 webjars, 나는 그것을 매우 좋습니다.

4.늦어 질 수도 있지만 https://github.com/gharia/spring-boot-angular를 확인하십시오. 이것은 자산 파이프 라인을 사용하는 앵귤러 JS가있는 Spring Boot 프로젝트입니다.

'SPRING' 카테고리의 다른 글

티스토리툴바