代码拉取完成，页面将自动刷新
---
layout: default
layout_grid: true
home: true
angularjs: true
title: JHipster - Generate your Spring Boot + Angular apps!
sitemap:
priority: 1.0
lastmod: 2016-05-25T00:00:00-00:00
---
<div ng-app="jhipster.home" ng-controller="HomeController" class="home-container">
<!-- Header -->
<header class="home-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="logo-big"><img class="img-responsive" src="images/logo/logo-jhipster-drink-coffee.png" alt=""></div>
<div class="intro-text">
<span class="brand">Greetings, Java Hipster!</span>
<hr class="star-light">
<div class="row stats">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="https://www.npmjs.com/package/generator-jhipster" target="_blank">
<div class="card dark summary-inline">
<div class="card-body">
<i class="icon fa fa-download fa-3x"></i>
<div class="content" ng-cloak>
<div class="title">{(npmDownloads)}</div>
<div class="sub-title">Downloads in last 30 days</div>
</div>
<div class="clear-both"></div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="https://github.com/jhipster/generator-jhipster" target="_blank">
<div class="card dark summary-inline">
<div class="card-body">
<i class="icon fa fa-github fa-3x"></i>
<div class="content" ng-cloak>
<div class="title">{(gitConfig.stargazers_count)}</div>
<div class="sub-title">Stars</div>
</div>
<div class="clear-both"></div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="https://github.com/jhipster/generator-jhipster/contributors" target="_blank">
<div class="card dark summary-inline">
<div class="card-body">
<i class="icon fa fa-users fa-3x"></i>
<div class="content" ng-cloak>
<div class="title">{(gitConftributors)}</div>
<div class="sub-title">Contributors</div>
</div>
<div class="clear-both"></div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- about and news section -->
<section id="about" class="home-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">Learn JHipster in 12 minutes with Matt Raible</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<a href="https://twitter.com/mraible"><i>Matt Raible</i></a> has published a new video on using JHipster 4 to develop a Spring Boot + Angular application.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-12 text-center">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/XRREt1KB4Y8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">JHipster news and events</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-md-12">
<b>To get the latest JHipster news, please follow us on Twitter:
<a href="https://twitter.com/java_hipster" target="_blank"><i class="fa fa-twitter"></i> @java_hipster</a></b>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<h3>News</h3>
<ul>
<li><i class="fa fa-trophy" aria-hidden="true"></i> JHipster won the bronze <a href="https://jaxenter.com/winners-jax-innovation-awards-2017-137993.html" target="_blank">JAX Innovation award</a> for most innovative contribution to the Java ecosystem at JAX London conference 2017.</li>
<li><i class="fa fa-trophy" aria-hidden="true"></i> JHipster won the <a href="https://blogs.oracle.com/java/announcing-2017-dukes-choice-award-nominations" target="_blank">Duke's Choice Award</a> for extreme innovation using Java technology at JavaOne 2017.</li>
<li>📘 The JHipster Mini-Book v4.0 by Matt Raible is available! <a href="https://www.infoq.com/minibooks/jhipster-4-mini-book" target="_blank">Download your free copy from InfoQ</a>.</li>
<li>📘 Want to get started with JHipster using new Spring Boot 2 features? Get <b>Beginning Spring Boot 2</b> book by K. Siva Prasad Reddy on <a href="https://www.amazon.com/Beginning-Spring-Boot-Applications-Microservices/dp/1484229304/" target="_blank">Amazon</a> or <a href="http://www.apress.com/in/book/9781484229309" target="_blank">Apress</a>.</li>
<li><b>JHipster Online is available!</b> <a href="https://start.jhipster.tech/" target="_blank">JHipster Online</a>, created by the JHipster team, allows you to generate a JHipster application without installing JHipster in the first place</li>
<li><b>Looking for a meetup near you?</b> <a href="{{ site.url }}/meetups/">Go to our new Meetup list</a> and join one of our local groups!</li>
</ul>
<h3>Events</h3>
<ul>
<li><b>October 11th, 2017 in Dublin, Ireland:</b> <a href="https://www.meetup.com/preview/JHipsterDublin/events/243330263" target="_blank">Dublin's First JHipster Meetup!</a></li>
<li><b>October 18th, 2017 in Sofia, Bulgaria:</b> at <a href="https://2017.java2days.com/speaker/matt-raible/">Java2Days</a>, Matt Raible will present "Develop Hip APIs and Apps with Spring Boot and Angular"</li>
<li><b>November 6th–10th, 2017 in Antwerp, Belgium:</b> at <a href="https://devoxx.be/" target="_blank">Devoxx Belgium</a>, Julien Dubois, Deepu K Sasidharan, Matt Raible and Sendil Kumar N will present several JHipster conferences, and organize a BOF (Birds Of a Feather) one evening</li>
<li><b>November 15th, 2017 in Casablanca, Morocco:</b> at <a href="https://devoxx.ma/" target="_blank">Devoxx Morocco</a>, Matt Raible will present "Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster"</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">What is JHipster?</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<span class="title text-center">
<div class="head-icons">
<a href="http://projects.spring.io/spring-boot/" target="_blank"><img src="images/logo/logo-spring-boot.png" class="project-icon img-responsive"></a> <i class="fa fa-4x">+</i> <a href="https://angularjs.org/" target="_blank"><img src="images/logo/logo-angularjs.png" class="project-icon img-responsive"></a><br class="visible-xs"> <i class="fa fa-4x">=</i> <a href="/"><img src="images/logo/logo-jhipster-small2x.png" class="project-icon img-responsive"></a>
</div>
<p class="lead">
JHipster is a development platform to generate, develop and deploy
<a class="dark" href="http://projects.spring.io/spring-boot/" target="_blank">Spring Boot</a> + <a class="dark" href="https://angularjs.org/" target="_blank">Angular</a>
Web applications and Spring microservices. <br>
</p>
</span>
</div>
<div class="row">
<div class="col-md-6">
<h2 class="hipster-font heading">Goal</h2>
<p>
Our goal is to generate for you a complete and modern Web app or microservice architecture, unifying:
</p>
<ul>
<li>A high-performance and robust Java stack on the server side with Spring Boot</li>
<li>A sleek, modern, mobile-first front-end with Angular and Bootstrap</li>
<li>A robust microservice architecture with JHipster Registry, Netflix OSS, ELK stack and Docker</li>
<li>A powerful workflow to build your application with Yeoman, Webpack/Gulp and Maven/Gradle</li>
</ul>
</div>
<div class="col-md-6">
<h2 class="hipster-font heading">Sample & Sources</h2>
<p>
You can checkout a sample generated AngularJS 1 application
<a href="https://github.com/jhipster/jhipster-sample-app" target="_blank">here</a>.
</p>
<p>
You can checkout a sample generated Angular 4 application
<a href="https://github.com/jhipster/jhipster-sample-app-ng2" target="_blank">here</a>.
</p>
<p>
JHipster is Open Source, and all development is done on
<a href="https://github.com/jhipster/generator-jhipster" target="_blank">GitHub</a>
</p>
<ul>
<li> If you want to code with us, feel free to join!</li>
<li> If you like the project, please give us a star on GitHub</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">Who uses JHipster?</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-md-12" ng-controller="UsersCtrl">
<div>
<p>
Lots of great companies use JHipster, all over the world! <a href="{{ site.url }}/companies-using-jhipster/">Find the full list here</a>, and don't forget to add your company once you have started using JHipster <i class="fa fa-smile-o"></i>
</p>
</div>
<div id="carousel-customers" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item container {($index == 0 ? 'active': '')}" ng-if="$index % 6 == 0"
ng-repeat="user in users | filter:{logo:'!!'} | orderBy:'name' as filteredUsers">
<img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive"
ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index].logo)}" alt="{(filteredUsers[$index].name)}" title="{(filteredUsers[$index].name)}">
<img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 1)"
ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 1].logo)}" alt="{(filteredUsers[$index + 1].name)}" title="{(filteredUsers[$index + 1].name)}">
<img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 2)"
ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 2].logo)}" alt="{(filteredUsers[$index + 2].name)}" title="{(filteredUsers[$index + 2].name)}">
<img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 3)"
ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 3].logo)}" alt="{(filteredUsers[$index + 3].name)}" title="{(filteredUsers[$index + 3].name)}">
<img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 4)"
ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 4].logo)}" alt="{(filteredUsers[$index + 4].name)}" title="{(filteredUsers[$index + 4].name)}">
<img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 5)"
ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 5].logo)}" alt="{(filteredUsers[$index + 5].name)}" title="{(filteredUsers[$index + 5].name)}">
</div>
</div>
<div align="center" style="margin-top:20px;">
<!-- Controls -->
<a class="left" href="#carousel-customers" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right" href="#carousel-customers" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stack Section -->
<section class="success home-section" id="opts">
<div class="row no-margin">
<div class="col-lg-12 text-center">
<h2 class="heading">Client side options</h2>
<hr class="star-light">
</div>
</div>
<div class="row stack-container no-margin">
<ul class="text-center stacks">
<li class="clip img-circle">
<img src="images/logo/svg/html-5.svg" />
<span class="title_sub_tech">HTML5</span>
</li>
<li class="clip img-circle">
<img src="images/logo/svg/css-3.svg" />
<span class="title_sub_tech">CSS3</span>
</li>
<li class="clip img-circle">
<img src="images/logo/svg/bootstrap.svg" />
<span class="title_sub_tech">Bootstrap</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/angular.svg" />
<span class="title_sub_tech">AngularJS</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/angular.svg" />
<span class="title_sub_tech">Angular</span>
</li>
<li class="clip img-circle">
<img src="images/logo/svg/jquery.svg" class="width invert-hover"/>
<span class="title_sub_tech">JQuery</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/websocket.png" class="invert"/>
<span class="title_sub_tech">Websockets</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/yarn.svg"/>
<span class="title_sub_tech">Yarn</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/webpack.svg"/>
<span class="title_sub_tech">Webpack</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/bower.svg"/>
<span class="title_sub_tech">Bower</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/gulp.svg" class="height" />
<span class="title_sub_tech">Gulp</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/sass.svg" class="height" />
<span class="title_sub_tech">Sass</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/browsersync.svg" />
<span class="title_sub_tech">Browsersync</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/karma.svg" />
<span class="title_sub_tech">Karma</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/protarctor.png" />
<span class="title_sub_tech">Protractor</span>
</li>
<li class="clear"></li>
</ul>
</div>
<div class="row no-margin">
<div class="col-lg-12 text-center">
<h2 class="heading">Server side options</h2>
<hr class="star-light">
</div>
</div>
<div class="row stack-container no-margin">
<ul class="text-center stacks">
<li class="clip img-circle">
<img src="images/logo/icons/spring-boot.png" />
<span class="title_sub_tech">Spring Boot</span>
</li>
<li class="clip img-circle">
<img src="images/logo/icons/spring.png"/>
<span class="title_sub_tech">Spring Security</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/netflix.png"/>
<span class="title_sub_tech">Netflix OSS</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/consul.svg"/>
<span class="title_sub_tech">Consul</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/gradle-new.png" class="invert-hover-white"/>
<span class="title_sub_tech">Gradle</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/maven.png" class="invert-hover-white width" />
<span class="title_sub_tech">Maven</span>
</li>
<li class="clip img-circle">
<img src="images/logo/svg/hibernate.svg" />
<span class="title_sub_tech">Hibernate</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/liquibase.gif" class="width" />
<span class="title_sub_tech">Liquibase</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/mysql.svg" />
<span class="title_sub_tech">MySQL</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/mariadb.svg" />
<span class="title_sub_tech">MariaDB</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/postgresql.svg" class="height" />
<span class="title_sub_tech">PostgreSQL</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/oracle.svg" class="width" />
<span class="title_sub_tech">Oracle</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/mssql.png"/>
<span class="title_sub_tech">MS SQL</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/mongo.png" />
<span class="title_sub_tech">MongoDB</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg//cassandra.svg" class="invert-hover-white" />
<span class="title_sub_tech">Cassandra</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/ehcache.png" />
<span class="title_sub_tech">EhCache</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/Hazelcast.png" class="invert-hover-white"/>
<span class="title_sub_tech">Hazelcast</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/infinispan.png" />
<span class="title_sub_tech">Infinispan</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/elasticsearch.svg"/>
<span class="title_sub_tech">ElasticSearch</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/kafka.svg" class="invert-hover-white"/>
<span class="title_sub_tech">Kafka</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/swagger.png"/>
<span class="title_sub_tech">Swagger</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/elk-stack.png" class="invert-hover-white"/>
<span class="title_sub_tech">ELK Stack</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/prometheus.svg"/>
<span class="title_sub_tech">Prometheus</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/thymeleaf.png"/>
<span class="title_sub_tech">Thymeleaf</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/gatling.png"/>
<span class="title_sub_tech">Gatling</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/cucumber.svg"/>
<span class="title_sub_tech">Cucumber</span>
</li>
<li class="clear"></li>
</ul>
</div>
<div class="row no-margin">
<div class="col-lg-12 text-center">
<h2 class="heading">Deployment options</h2>
<hr class="star-light">
</div>
</div>
<div class="row stack-container no-margin">
<ul class="text-center stacks">
<li class="clip img-circle new">
<img src="images/logo/svg/docker.svg"/>
<span class="title_sub_tech">Docker</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/kubernets.svg"/>
<span class="title_sub_tech">Kubernetes</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/heroku.svg"/>
<span class="title_sub_tech">Heroku</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/icons/cf.png" class="invert-hover-white"/>
<span class="title_sub_tech">CloudFoundry</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/aws.svg" class="width"/>
<span class="title_sub_tech">AWS</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/boxfuse.svg"/>
<span class="title_sub_tech">Boxfuse</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/rancher.svg" class="width"/>
<span class="title_sub_tech">Rancher</span>
</li>
<li class="clip img-circle new">
<img src="images/logo/svg/openshift.svg"/>
<span class="title_sub_tech">OpenShift</span>
</li>
<li class="clear"></li>
</ul>
</div>
</section>
<!-- quick start Section -->
<section class="home-section" id="quick">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">JHipster Quick Start</h2>
<hr class="star-primary">
</div>
</div>
<div class="row text-center">
<div class="col-lg-12">
<p>Install JHipster <code>yarn global add generator-jhipster</code></p>
<p>Create a new directory and go into it <code>mkdir myApp && cd myApp</code></p>
<p>Run JHipster and follow instructions on screen <code>jhipster</code></p>
<p>Model your entities with <a href="{{ site.url }}/jdl-studio/" target="_blank">JDL Studio</a> and download the resulting <code>jhipster-jdl.jh</code> file</p>
<p>Generate your entities with <code>jhipster import-jdl jhipster-jdl.jh</code></p>
</div>
<div class="col-lg-12">
<p>
<small>
* Assuming you have already installed
<a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java</a>,
<a href="http://git-scm.com/" target="_blank">Git</a>,
<a href="http://nodejs.org/" target="_blank">Node.js</a>,
<a href="https://yarnpkg.com/en/docs/install" target="_blank">Yarn</a> and
<a href="http://yeoman.io/learning/index.html" target="_blank">Yeoman</a>.
For AngularJS 1, you will also need
<a href="http://bower.io/#install-bower" target="_blank">Bower</a> and
<a href="https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md" target="_blank">Gulp</a>
</small>
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="success home-section" id="modules" ng-controller="ModuleListCtrl">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">Modules</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="text" ng-model="searchText" class="form-control search-text" placeholder="Search" id="name" required data-validation-required-message="Please enter a module to search">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
</div>
<div class="text-center">
<p>Top trending modules</p>
<br>
</div>
<div class="row">
<div ng-cloak ng-repeat="module in modules | filter: searchText | orderBy: '-downloads' | limitTo:16">
<div class="clearfix" ng-if="$index % 4 == 0"></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<a ng-href="{{ site.url }}/modules/marketplace/#/details/{(module.package.name)}"
title="{(module.package.description)}">
<div class="card dark module summary-inline">
<div class="card-body">
<i class="icon fa fa-cube fa-3x"></i>
<div class="content">
<div class="title fontSmall">{(module.package.name | jhiModuleFilter)}</div>
<div class="sub-title"><span class="fa fa-user"></span> {(module.package.author.name)} | <span class="fa fa-download"></span> {(module.downloads)}</div>
</div>
<div class="clear-both"></div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.jhipster.tech",
"logo": "http://www.jhipster.tech/images/logo-jhipster.png",
"name" : "JHipster",
"sameAs" : [ "https://twitter.com/java_hipster",
"https://github.com/jhipster/generator-jhipster"]
}
</script>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。