maven Angular js 설정

Angular js 시작

hello world using json

  1. /pom.xml webjar 를 통한 angularjs 실행 설정
    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.dangun</groupId>
        <artifactId>boot</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    
        <packaging>war</packaging>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>1.3.5.RELEASE</version>
        </parent>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>com.fasterxml.jackson.dataformat</groupId>
                <artifactId>jackson-dataformat-xml</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter</artifactId>
                <exclusions>
                    <exclusion>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-starter-logging</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-log4j</artifactId>
            </dependency>
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>angularjs</artifactId>
                <version>1.3.8</version>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jasmine</artifactId>
                <version>2.0.0</version>
                <scope>test</scope>
            </dependency>
        </dependencies>
    
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <wro4j.version>1.7.9</wro4j.version>
            <java.version>1.8</java.version>
        </properties>
    
        <!-- Additional lines to be added here... -->
        <build>
            <resources>
                <resource>
                    <directory>${project.basedir}/src/main/resources</directory>
                </resource>
                <resource>
                    <directory>${project.build.directory}/generated-resources</directory>
                </resource>
            </resources>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <configuration>
                        <fork>true</fork>
                    </configuration>
                </plugin>
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <executions>
                        <execution>
                            <!-- Serves *only* to filter the wro.xml so it can get an absolute
                                path for the project -->
                            <id>copy-resources</id>
                            <phase>validate</phase>
                            <goals>
                                <goal>copy-resources</goal>
                            </goals>
                            <configuration>
                                <outputDirectory>${basedir}/target/wro</outputDirectory>
                                <resources>
                                    <resource>
                                        <directory>src/main/wro</directory>
                                        <filtering>true</filtering>
                                    </resource>
                                </resources>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <groupId>ro.isdc.wro4j</groupId>
                    <artifactId>wro4j-maven-plugin</artifactId>
                    <version>${wro4j.version}</version>
                    <executions>
                        <execution>
                            <phase>generate-resources</phase>
                            <goals>
                                <goal>run</goal>
                            </goals>
                        </execution>
                    </executions>
                    <configuration>
                        <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
                        <cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
                        <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
                        <wroFile>${project.build.directory}/wro/wro.xml</wroFile>
                        <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
                        <contextFolder>${basedir}/src/main/wro</contextFolder>
                    </configuration>
                    <dependencies>
                        <dependency>
                            <groupId>org.webjars</groupId>
                            <artifactId>jquery</artifactId>
                            <version>2.1.1</version>
                        </dependency>
                        <dependency>
                            <groupId>org.webjars</groupId>
                            <artifactId>angularjs</artifactId>
                            <version>1.3.8</version>
                        </dependency>
                        <dependency>
                            <groupId>org.webjars</groupId>
                            <artifactId>bootstrap</artifactId>
                            <version>3.2.0</version>
                        </dependency>
                    </dependencies>
                </plugin>
                <plugin>
                    <groupId>com.github.searls</groupId>
                    <artifactId>jasmine-maven-plugin</artifactId>
                    <version>2.0</version>
                    <executions>
                        <execution>
                            <goals>
                                <goal>test</goal>
                            </goals>
                        </execution>
                    </executions>
                    <configuration>
                        <additionalContexts>
                            <context>
                                <contextRoot>/lib</contextRoot>
                                <directory>${project.build.directory}/generated-resources/static/js</directory>
                            </context>
                        </additionalContexts>
                        <preloadSources>
                            <source>/lib/angular-bootstrap.js</source>
                            <source>/webjars/angularjs/1.3.8/angular-mocks.js</source>
                        </preloadSources>
                        <jsSrcDir>${project.basedir}/src/main/resources/static/js</jsSrcDir>
                        <jsTestSrcDir>${project.basedir}/src/test/resources/static/js</jsTestSrcDir>
                        <webDriverClassName>org.openqa.selenium.phantomjs.PhantomJSDriver</webDriverClassName>
                    </configuration>
                    <dependencies>
                        <dependency>
                            <groupId>org.webjars</groupId>
                            <artifactId>angularjs</artifactId>
                            <version>1.3.8</version>
                        </dependency>
                    </dependencies>
                </plugin>
            </plugins>
        </build>
    
    </project>
  2. src/main/resources/static/index.html 생성
    
    <!doctype html>
    <html>
    <head>
    <title>Hello AngularJS</title>
    <link href="css/angular-bootstrap.css" rel="stylesheet">
    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak {
      display: none !important;
    }
    </style>
    </head>
    
    <body ng-app="hello">
      <div class="container">
        <h1>Greeting</h1>
        <div ng-controller="home" ng-cloak class="ng-cloak">
          <p>The ID is {{greeting.id}}</p>
          <p>The content is {{greeting.content}}</p>
        </div>
      </div>
      <script src="js/angular-bootstrap.js" type="text/javascript"></script>
      <script src="js/hello.js"></script>
    </body>
    </html>
       
       
  3. /src/main/resources/static/js/hello.js
    angular.module('hello', []).controller('home', function($http) {
     var self = this;
     $http.get('resource/').then(function(response) {
      self.greeting = response.data;
     })
    });
    
  4. mvn spring-boot:run
    mvn spring-boot:run
  5. 브라우저 확인 : http://localhost:8080

댓글