angular2 如何与java_如何集成Angular 2 Java Maven Web应用程序
我创建了一个Angular 2前端Application.and创建了一个连接到DB的Java Rest WS后端应用程序.
Angular 2 App的My Folder结构如下 –
Angular2App
confg
dist
e2e
node_modules
public
src
app
favicon.ico
index.html
main.ts
system-config.ts
tsconfig.json
typings.d.ts
tmp
typings
.editorconfig
.gitignore
angular-cli.json
angular-cli-build.js
package.json
README.md
tslint.json
typings.json
我的Java Maven Web应用程序结构如下 –
JerseyWebApp
src
main
java
Custom Package
java classes
resources
webapp
WEB-INF
web.xml
index.html
pom.xml
我想知道如何将这两个应用程序集成到一个只生成一个war文件的应用程序中.
解决方法:
这是我做的： –
>安装Nodejs v6.9
>为Angular CLI运行npm install @ angular / cli -g
>安装Apache Maven或使用任何Maven友好的IDE
>使用您所需的Maven配置,我使用简单的webapp(WAR).
目录结构(ngapp文件夹休息除外是标准的Maven结构.)
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
角部
在终端打开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
这个结构是Angular等效的Maven项目结构,而src目录是Angular Application的源代码,就像maven build命令在目标文件夹中生成它的输出一样,ng build命令在dist文件夹中生成它的输出.
为了在Maven生成的WAR中打包生成的Angular应用程序,修改构建配置以将输出文件夹从dist更改为webapp,打开angular-cli.json文件并修改其outDir,如下所示： –
"outDir": "../webapp/ng"
此时,ng build命令将在ngfirst / src / main / webapp文件夹的ng目录中生成内置的Angular Application.
Maven部分
打开pom.xml并配置以下三个maven插件： –
> compiler-plugin：在/ src / main / ngapp文件夹中编译没有Java东西,排除它.
> war-plugin：/ src / main / ngapp是Angular项目文件夹,它不应该打包在WAR中,排除它.
> exec-plugin：执行NPM Install和Angular-CLI Build命令,在webapp文件夹中生成Angular Application以进行最终打包.注意–base-href参数,需要从webapp的上下文路径加载Angular资源.
这是它应该是这样的： –
org.apache.maven.plugins
maven-compiler-plugin
3.3
ngapp/**
org.apache.maven.plugins
maven-war-plugin
3.0.0
ngapp/**
org.codehaus.mojo
exec-maven-plugin
1.5.0
exec-npm-install
generate-sources
${project.basedir}/src/main/ngapp
npm
install
exec
exec-npm-ng-build
generate-sources
${project.basedir}/src/main/ngapp
ng
build
--base-href=/ngfirst/ng/
exec
构建Maven项目(以及Angular App)
在项目根文件夹ngfirst中打开终端并运行mvn package命令,这将在目标文件夹中生成WAR文件(ngfirst.war).
如果一切顺利,你应该看到app工作！在浏览器中,这是Angular Application在工作!!
JSP预处理
我们可以利用Angular应用程序利用JSP技术的动态配置和页面呈现功能,Angular SPA作为常规HTML页面由Java容器提供服务,在这种情况下是index.html,如果我们配置JSP引擎来预处理html文件,那么所有JSP魔术都可以包含在Angular SPA页面中,只需在web.xml中包含以下内容即可
jsp
*.html
保存,重建maven项目,部署WAR和瞧！
标签：java,angular,typescript,maven-plugin,web-applications
来源： https://codeday.me/bug/20190926/1820782.html