{"id":12671,"date":"2014-06-05T19:58:00","date_gmt":"2014-06-05T18:58:00","guid":{"rendered":"https:\/\/touk.pl\/blog\/?guid=47da997dacba2441832daa9a677fdfc1"},"modified":"2022-07-27T10:42:46","modified_gmt":"2022-07-27T08:42:46","slug":"spring-boot-and-angularjs-quick-start","status":"publish","type":"post","link":"https:\/\/touk.pl\/blog\/2014\/06\/05\/spring-boot-and-angularjs-quick-start\/","title":{"rendered":"Spring Boot and AngularJS quick start"},"content":{"rendered":"<div style=\"text-align: justify\">\n  In this post I am going to show very simple and quick example of web application using <b>Spring<\/b> <b>Boot<\/b> with <b>AngularJS<\/b>. This app contains simple functionality of sending and storing imaginary messages. I&#8217;ve also used <b>gradle<\/b> for build management. All code is public and it is available on my github: <a href=\"https:\/\/github.com\/rafalnowak\/spring-boot-fun\">https:\/\/github.com\/rafalnowak\/spring-boot-fun<\/a>\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<h4 id=\"introduction-to-spring-boot\" style=\"text-align: justify\">\n  Introduction to Spring Boot<br \/>\n<\/h4>\n<div style=\"text-align: justify\">\n  Spring Boot is quite new project created under Spring Source umbrella. It was very few months ago when it reached version 1.0 and status of general availability.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Most important and prominent goals of this projects are:\n<\/div>\n<ul style=\"text-align: justify\">\n<li>\n    providing ability to create simple web apps very quickly\n  <\/li>\n<li>\n    minimizing amount of XML codebloat which is usually necessary to configure every Spring application\n  <\/li>\n<li>\n    most of app configuration is automatical\n  <\/li>\n<li>\n    simplify running and deployment process by using embedded Tomcat or Jetty servers that can run our applications without special effort and deploy process\n  <\/li>\n<li>\n    there are lot of so called <b>spring boot starters<\/b> which are packages containing default configuration for various fields of Spring like database access by JPA, aspect oriented programming or security\n  <\/li>\n<\/ul>\n<div style=\"text-align: justify\">\n  As we can see, it looks promising. In this post I&#8217;ll show few basic steps necessary to create and <i>boot<\/i> simple Spring Boot web application.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<h4 id=\"first-steps\" style=\"text-align: justify\">\n  First steps<br \/>\n<\/h4>\n<div style=\"text-align: justify\">\n  Although Spring Boot can be used with special command line interface tools, I&#8217;ve decided to use it with very popular gradle build system.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Spring Boot comes with plugins to integrate with maven or gradle. They allow us to easily run application in embedded server. Necessary instructions to include these plugin are shown on snippet below:\n<\/div>\n<div style=\"text-align: justify\">\n<pre><code class=\"groovy\">buildscript {\n    repositories {\n        mavenCentral()\n    }\n\n    dependencies {\n        classpath(\"org.springframework.boot:spring-boot-gradle-plugin:1.0.1.RELEASE\")\n    }\n}\n<\/code><\/pre>\n<\/div>\n<div style=\"text-align: justify\">\n  With this basic config we can proceed to next steps. In my sample project I&#8217;ve divided application into two modules: one contains persistence layer with domain object and JPA repositories and another contains presentation layer with controllers. Of course this completely optional and in such simple project it does not add any benefits. But it can show how to create multi module project in gradle. Next code fragment contains common configuration for all modules in our gradle build:\n<\/div>\n<div style=\"text-align: justify\">\n<pre><code class=\"groovy\">allprojects {\n    apply plugin: \"java\"\n\n    version = '1.0-SNAPSHOT'\n    group = \"info.rnowak.springBootFun\"\n\n    repositories {\n        mavenLocal()\n        mavenCentral()\n    }\n\n    dependencies {\n        compile \"org.springframework.boot:spring-boot-starter-test:1.0.1.RELEASE\"\n        compile \"com.google.guava:guava:16.0.1\"\n        compile \"com.h2database:h2:1.3.175\"\n\n        testCompile \"junit:junit:4.11\"\n        testCompile \"org.mockito:mockito-all:1.9.5\"\n        testCompile \"org.assertj:assertj-core:1.5.0\"\n    }\n}\n<\/code><\/pre>\n<p> Now when we have common configuration, we can declare basic modules of application:\n<\/p><\/div>\n<div style=\"text-align: justify\">\n<pre><code class=\"groovy\">project(\":persistence\") {\n    dependencies {\n        compile \"org.springframework.boot:spring-boot-starter-data-jpa:1.0.1.RELEASE\"\n\n        testCompile project(\":webapp\")\n    }\n}\n\nproject(\":webapp\") {\n    apply plugin: \"spring-boot\"\n\n    dependencies {\n        compile project(\":persistence\")\n        compile \"org.springframework.boot:spring-boot-starter-web:1.0.1.RELEASE\"\n    }\n}\n<\/code><\/pre>\n<\/div>\n<div style=\"text-align: justify\">\n  Most important parts are including special Spring Boot Starter packages and declaring usage of spring-boot plugin in one of subprojects.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Every starter packet contains dependencies for all necessary libraries used on given feature. For example, JPA starter has Hibernate dependencies and AOP starter contains spring-aop and AspectJ libraries. What is more, with this libraries Spring Boot provides also default configuration.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  It is simple quick start configuration but it is enough for some starter applications.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<h4 id=\"lets-start-fun-with-spring\" style=\"text-align: justify\">\n  Let&#8217;s start fun with Spring!<br \/>\n<\/h4>\n<div style=\"text-align: justify\">\n  Our next step should be creating of starting point of application. With Spring Boot it can be done by writing <i>regular<\/i> main method in some class. Now you only need to annotate this class with special Spring Boot auto configuration annotations and application is ready to run! Example of start class is shown below:\n<\/div>\n<div style=\"text-align: justify\">\n<pre><code class=\"java\">package info.rnowak.springFun;\n\nimport org.springframework.boot.SpringApplication;\nimport org.springframework.boot.autoconfigure.EnableAutoConfiguration;\nimport org.springframework.context.annotation.ComponentScan;\n\n@ComponentScan\n@EnableAutoConfiguration\npublic class SpringFun {\n    public static void main(String[] args) {\n        SpringApplication app = new SpringApplication(SpringFun.class);\n        app.setShowBanner(false);\n        app.run(args);\n    }\n}\n<\/code><\/pre>\n<\/div>\n<div style=\"text-align: justify\">\n  Well, this step look simple but it has few interesting implications for all application.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Firstly, this class enables component scan for Spring managed beans with root package <i>info.rnowak.springFun<\/i> because it is placed in this package.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Another thing is that this main method allows to run application using command <b>gradle run<\/b>. By default it uses embedded Tomcat running on port 8080. Of course this behaviour can be changed and it is very well described in project documentation. It is also possible to create runnable jar from our application.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  With main class defined we can create all other classes in our application like controllers, repositories, domain classes or services. But I won&#8217;t show exact examples of such classes because they do not differ in any way from the same classes in old classic Spring. If you are interesed in my example, please take a look at the repository <a href=\"https:\/\/github.com\/rafalnowak\/spring-boot-fun\">Spring Boot Fun repo<\/a>.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<h4 id=\"add-some-angularjs\" style=\"text-align: justify\">\n  Add some AngularJS<br \/>\n<\/h4>\n<div style=\"text-align: justify\">\n  One of another &#8220;side effect&#8221; of Spring Boot main configuration class is that we get few default view resolvers. View resolver, in short version, is Spring feature, which maps names of view to specific view files.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Spring Boot with its default configuration sets lookup path for <i>index.html<\/i> file which will be served by default controller. Framework looks for this file in public\/, webapp\/ or resources\/ directory on classpath. So you can just put index.html file in one of these locations and Spring Boot will create controller serving this view. And this is the way we can use AngularJS in our project. Of course it&#8217;s not <i>the only way<\/i> but it is the simplest method for using AngularJS with Spring Boot application.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  In our example application <i>index.html<\/i> file was placed in <b>webapp\/<\/b> directory and it looks like this:\n<\/div>\n<div style=\"text-align: justify\">\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\n\n&lt;html ng-app=\"springFun\"&gt;\n\n&lt;head&gt;\n    &lt;link rel=\"stylesheet\" href=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/css\/bootstrap.min.css\"&gt;\n\n    &lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.0\/jquery.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.0-beta.4\/angular.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.0-beta.4\/angular-route.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"js\/application.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"js\/controllers.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n    &lt;nav class=\"navbar navbar-default\" role=\"navigation\"&gt;\n        &lt;div class=\"container-fluid\"&gt;\n            &lt;div class=\"navbar-header\"&gt;\n                &lt;a class=\"navbar-brand\" href=\"#\/index\"&gt;Spring Boot Fun&lt;\/a&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"collapse navbar-collapse\"&gt;\n                &lt;ul class=\"nav navbar-nav\"&gt;\n                    &lt;li&gt;&lt;a href=\"#\/list\"&gt;Messages list&lt;\/a&gt;&lt;\/li&gt;\n                    &lt;li&gt;&lt;a href=\"#\/about\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\n                &lt;\/ul&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/nav&gt;\n\n    &lt;div ng-view&gt;&lt;\/div&gt;\n\n    &lt;footer class=\"text-center\"&gt;\n        Spring Boot Fun\n    &lt;\/footer&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n<\/code><\/pre>\n<\/div>\n<div style=\"text-align: justify\">\n  This file includes all angular libraries used in project, controllers definition and main application module with routing defined.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  The rest of files is available in repository mentioned earlier in post so I will not provide all listings here as it would be just waste of virtual space in post :)\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<h4 id=\"summary\" style=\"text-align: justify\">\n  Summary<br \/>\n<\/h4>\n<div style=\"text-align: justify\">\n  As we can see, Spring Boot greatly decreases time needed to write and run simple Java web application. It reduces amount of XML configuration and provieds a lot of default values and conventions. But if we want to precisely set some settings, Spring Boot does not forbid it and programmer can manually set all the settings.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Also deploy of application is simplified because Spring Boot with gradle or maven plugin allows to run application in place with these tools. We can also create runnable jar that contains embedded Tomcat or Jetty. And if it is not desired by us, we can always use war plugin and create regular, traditional war and deploy it in classical way.\n<\/div>\n<div style=\"text-align: justify\">\n<\/div>\n<div style=\"text-align: justify\">\n  Spring Boot has also great documentation and I strongly encourage to read it by everybody interested in this tool: <a href=\"http:\/\/docs.spring.io\/spring-boot\/docs\/current-SNAPSHOT\/reference\/htmlsingle\/\">Spring Boot Docs<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"In this post I am going to show very simple and quick example of web application using Spring Boot with AngularJS. This app contains simple functionality of sending and storing imaginary messages. I&#8217;ve also used gradle for build management. All code is&#8230;\n","protected":false},"author":48,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[529,71,68,176,42],"class_list":{"0":"post-12671","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-development-design","7":"tag-angular","8":"tag-frontend","9":"tag-java","10":"tag-javascript","11":"tag-spring-framework"},"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/12671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=12671"}],"version-history":[{"count":4,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/12671\/revisions"}],"predecessor-version":[{"id":14527,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/12671\/revisions\/14527"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=12671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=12671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=12671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}