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