Developers.nl | ratpack hello world with angularjs

BlogRatpack hello world with angularjs

12/05/2017
3 minuten leestijd

Ratpack: hello world with AngularJS

AngularJS is a really hot javascript framework, which we will combine with ratpack. This is really simple, but yet so powerfull

introduction

Why combine ratpack and angularjs? I want to have a lightweight server to run my AngularJS application, because AngularJS doesn't really need a server. It is a Javascript Framework, but we need to expose it on the network/internet. Otherwise it would not be very handy anyways.

create a simple java-maven project

mvn archetype:generate -DgroupId=nl.com.devnl -DartifactId=HelloWorld -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

Itegrate ratpack with our project open the pom.xml of our project and add ratpack properties

    <properties>
        <java-version>1.8</java-version>
        <ratpack.version>1.4.6</ratpack.version>
    </properties>

after that, we need to add the dependency.

        <!-- https://mvnrepository.com/artifact/io.ratpack/ratpack-core -->
        <dependency>
            <groupId>io.ratpack</groupId>
            <artifactId>ratpack-core</artifactId>
            <version>${ratpack.version}</version>
        </dependency>

add build plugin

    <build>
        <finalName>angularjs-ratpack</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>${java-version}</source>
                    <target>${java-version}</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

create the ratpack-server in our generated project, we have an App.java. Open this file and replace the main by

    public static void main(String[] args) throws Exception {
        RatpackServer.start(server -> server
                .serverConfig(ServerConfig.embedded().port(1000).baseDir(BaseDir.find()))
                .handlers(chain -> chain
                    .files(f -> f.dir("public").indexFiles("index.html"))
                  )
        );
    }

add sources navigate to C:\projects\HelloWorld\src\main and add a resources folder.

open dos-prompt and navigate to the resource older.

C:\>cd C:\projects\HelloWorld\src\main\resources

create .ratpack file(this file is used for reference) by

type nul > .ratpack

create a public folder where we add an index.html file with our AngularJS application.

<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS Ratpack</title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="app.js"></script>
    </head>

    <!-- apply our angular app to our site -->
    <body ng-app="helloApp">
        <div id="content" ng-controller="HelloController">
            {{message}}
        </div>
    </body>
</html>

create a app.js file with

var app = angular.module('helloApp', []);

app.controller('HelloController',
        function ($scope) {
            $scope.message = "Hello AngularJS from the Ratpack-server";
        }
);

now we run our application simple by executing App.java en open http://localhost:1000 in a browser.

check for extra information about ratpack or angularjs

Ratpack
Ratpack Github
Ratpack Twitter
AngularJS