这是我所做的:-
- 安装 Nodejs v6.9+
- Run npm install @angular/cli –g对于 Angular CLI
- 安装 Apache Maven 或使用任何 Maven 友好的 IDE
- 使用您所需的 Maven 配置,我使用简单的 webapp (WAR)。
目录结构(除了ngapp其余文件夹是标准 Maven 结构。)
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
角部
Open ngapp终端中的文件夹并输入ng init命令初始化节点和 npm 配置,结果将是一个简单的 Angular2 示例应用程序,ngapp 文件夹内将具有以下目录结构:-
├── angular-cli.json
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── README.md
├── tslint.json
├── src
├── app
├── assets
├── environments
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── tsconfig.json
该结构相当于 Maven 项目结构的 Angular 结构并且src目录是 Angular 应用程序的源代码,就像行家构建命令生成其输出target文件夹,ng build命令生成其输出dist folder.
为了将生成的 Angular 应用程序打包在 Maven 生成的 WAR 中,请修改构建配置以更改输出文件夹dist to webapp, open 角度-cli.json文件并修改其 outDir 如下:-
"outDir": "../webapp/ng"
在此刻ng build命令将在内部生成构建的 Angular 应用程序ngngfirst/src/main/ 目录webapp folder.
Maven部分
打开 pom.xml 并配置以下三个 Maven 插件:-
-
编译器插件: /src/main/ 中没有要编译的 Java 内容ngapp文件夹,排除它。
-
战争插件:/src/主/ngapp是 Angular 项目文件夹,不应将其打包在 WAR 中,将其排除。
-
执行插件:执行NPM Install和Angular-CLI Build命令在webapp文件夹中生成Angular应用程序以进行最终打包。注意 --base-href 参数,需要从 webapp 的上下文路径加载 Angular 资源。
它应该是这样的:-
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-ng-build</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--base-href=/ngfirst/ng/</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
构建 Maven 项目(还有 Angular 应用程序)
在项目根文件夹中打开终端ngfirst并运行MVN包命令,这将生成一个 WAR 文件(ngfirst.war)target folder.
Deploy ngfirst.war放入容器中,打开http://localhost:8080/ngfirst/ng/index.html http://localhost:8080/ngfirst/ng/index.html在浏览器中。 (如果需要,调整您的主机名和端口)
如果一切顺利,你应该看到应用程序有效!在浏览器中,这就是 Angular 应用程序在工作!
JSP预处理
我们可以通过 Angular 应用程序利用 JSP 技术的动态配置和页面渲染功能,Angular SPA 由 Java 容器作为常规 HTML 页面提供服务,索引.html在这种情况下,如果我们也配置 JSP 引擎来预处理 html 文件,那么所有 JSP 魔法都可以包含在 Angular SPA 页面中,只需在其中包含以下内容web.xml
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
保存,重建 Maven 项目,部署 WAR,瞧!