├── .gitignore ├── .travis.yml ├── LICENSE.md ├── Procfile ├── README.md ├── build.gradle ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── gulpfile.ts ├── package.json ├── src └── main │ ├── java │ └── com │ │ └── starter │ │ └── SpringBootAngular2StarterApplication.java │ ├── javascript │ ├── app │ │ ├── 404.component │ │ │ ├── 404.component.html │ │ │ ├── 404.component.scss │ │ │ └── 404.component.ts │ │ ├── app.component │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ └── app.component.ts │ │ ├── app.module.ts │ │ ├── dashboard.component │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.scss │ │ │ └── dashboard.component.ts │ │ ├── main.ts │ │ ├── server.component │ │ │ ├── server.component.html │ │ │ ├── server.component.scss │ │ │ └── server.component.ts │ │ └── service │ │ │ └── server.service.ts │ ├── index.html │ └── main.scss │ └── resources │ └── application.properties ├── tsconfig.json └── typings.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### NetBeans template 3 | nbproject/private/ 4 | build/ 5 | nbbuild/ 6 | dist/ 7 | nbdist/ 8 | nbactions.xml 9 | nb-configuration.xml 10 | .nb-gradle/ 11 | ### Gradle template 12 | .gradle 13 | 14 | # Ignore Gradle GUI config 15 | gradle-app.setting 16 | 17 | # Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored) 18 | !gradle-wrapper.jar 19 | ### JetBrains template 20 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio 21 | 22 | *.iml 23 | 24 | ## Directory-based project format: 25 | .idea/ 26 | # if you remove the above rule, at least ignore the following: 27 | 28 | # User-specific stuff: 29 | # .idea/workspace.xml 30 | # .idea/tasks.xml 31 | # .idea/dictionaries 32 | 33 | # Sensitive or high-churn files: 34 | # .idea/dataSources.ids 35 | # .idea/dataSources.xml 36 | # .idea/sqlDataSources.xml 37 | # .idea/dynamic.xml 38 | # .idea/uiDesigner.xml 39 | 40 | # Gradle: 41 | # .idea/gradle.xml 42 | # .idea/libraries 43 | 44 | # Mongo Explorer plugin: 45 | # .idea/mongoSettings.xml 46 | 47 | ## File-based project format: 48 | *.ipr 49 | *.iws 50 | 51 | ## Plugin-specific files: 52 | 53 | # IntelliJ 54 | /out/ 55 | 56 | # mpeltonen/sbt-idea plugin 57 | .idea_modules/ 58 | 59 | # JIRA plugin 60 | atlassian-ide-plugin.xml 61 | 62 | # Crashlytics plugin (for Android Studio and IntelliJ) 63 | com_crashlytics_export_strings.xml 64 | crashlytics.properties 65 | crashlytics-build.properties 66 | ### Yeoman template 67 | node_modules/ 68 | bower_components/ 69 | *.log 70 | 71 | ### Typings 72 | typings 73 | 74 | ### Static 75 | static -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: java 2 | jdk: 3 | - oraclejdk8 4 | 5 | before_install: 6 | - chmod +x gradlew 7 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Dmitry 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: java -Dserver.port=$PORT $JAVA_OPTS -jar build/libs/spring-boot-angular2-starter-1.0.jar 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spring Boot Angular2 Starter Application 2 | [![Build Status](https://travis-ci.org/Nandtel/spring-boot-angular2-starter.svg?branch=master)](https://travis-ci.org/Nandtel/spring-boot-angular2-starter) 3 | 4 | The simple starter application on Spring Boot with AngularJS 2. This is my personal base application for Spring Boot + AngularJS 2 projects. I prefer to use gradle as a primary build system and gulp as a build system for front-end. All the interaction with compiling typescript, prefixing css and installing typings are handled by gulp. All the tasks for installing node, npm and gulp were implemented in the gradle for more convient introduction. 5 | 6 | ## Motivation 7 | 8 | My goal is basic, simple and configurated project for easy start with Spring Boor and AngularJS 2. 9 | 10 | ## Demo 11 | Demo at Heroku: https://springbootangular2.herokuapp.com
12 | Wait a few seconds until the Heroku initializes app. 13 | 14 | ## Installation 15 | 16 | Necessary to install gulp and typings globally, if you don't have them: 17 | 18 | ``` 19 | npm install -g gulp 20 | npm install -g typing 21 | ``` 22 | 23 | At first, install npm package for the project. I suppose, you have installed node globally, then just enter follow: 24 | 25 | ``` 26 | npm install 27 | ``` 28 | 29 | But if not – use this command for installing node and npm locally in project directory: 30 | 31 | ``` 32 | ./gradlew npm_install 33 | ``` 34 | 35 | At first build will be downloaded typing, compiled typescript to javascript, concatenated lib.js from all javascript sources, prefixed css and replaced html files. More clearly this tasks you can see in [gulpfile.js](gulpfile.js). 36 | 37 | And run the server: 38 | 39 | ``` 40 | ./gradlew bootRun 41 | ``` 42 | 43 | Now you can see the result at [localhost](http://localhost:8080/). 44 | 45 | ## Development mode 46 | 47 | For front-end good practice is using gulp watch: when on change typescript, html or css files in webapp directory starts gulp handling task. For this just run: 48 | 49 | ``` 50 | gulp watch 51 | ``` 52 | 53 | Or you can each time start handling by yourself, using default gulp command: 54 | 55 | ``` 56 | gulp 57 | ``` 58 | 59 | In this way, all changes in [webapp directory](/src/main/webapp/) will be syncronized with [static directory](/src/main/resources/static/) of Spring Boot. 60 | 61 | Then install [livereload extension](http://livereload.com/extensions/) for your browser and start the app with command: 62 | 63 | ``` 64 | ./gradlew bootRun 65 | ``` 66 | 67 | Click to the extension and make sure that LiveReload is running on your page. 68 | 69 | Now you can work in reactive style with LiveReload for static content and fast reloading for application. 70 | 71 | ## Technologies 72 | 73 | - Spring Boot v.1.5.1 74 | - Gradle v.2.9 75 | - AngularJS v.2.4.0 76 | - Gulp v.3.9.1 77 | - [package.json](package.json) 78 | 79 | ## License 80 | The MIT License (MIT) 81 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | springBootVersion = '1.5.2.RELEASE' 4 | } 5 | repositories { 6 | mavenCentral() 7 | } 8 | dependencies { 9 | classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") 10 | } 11 | } 12 | 13 | plugins { 14 | id "com.moowork.node" version "0.12" 15 | id "com.moowork.gulp" version "0.12" 16 | } 17 | 18 | apply plugin: 'java' 19 | apply plugin: 'eclipse' 20 | apply plugin: 'spring-boot' 21 | 22 | jar { 23 | baseName = 'spring-boot-angular2-starter' 24 | version = '1.0' 25 | } 26 | sourceCompatibility = 1.8 27 | targetCompatibility = 1.8 28 | 29 | repositories { 30 | mavenCentral() 31 | } 32 | 33 | 34 | dependencies { 35 | compile("org.springframework.boot:spring-boot-devtools") 36 | compile('org.springframework.boot:spring-boot-starter-web') 37 | testCompile('org.springframework.boot:spring-boot-starter-test') 38 | } 39 | 40 | eclipse { 41 | classpath { 42 | containers.remove('org.eclipse.jdt.launching.JRE_CONTAINER') 43 | containers 'org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8' 44 | } 45 | } 46 | 47 | // If you haven't installed node globally 48 | node { 49 | version = '5.9.1' 50 | npmVersion = '3.8.2' 51 | download = true 52 | workDir = file("${project.projectDir}/") 53 | nodeModulesDir = file("${project.projectDir}/") 54 | } 55 | 56 | gulp { 57 | workDir = file("${project.projectDir}") 58 | colors = true 59 | bufferOutput = false 60 | } 61 | 62 | task wrapper(type: Wrapper) { 63 | gradleVersion = '2.9' 64 | } 65 | 66 | bootRun { 67 | addResources = true 68 | } 69 | 70 | task stage { 71 | dependsOn build 72 | } -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nandtel/spring-boot-angular2-starter/a747ed9be1f99f787d628dff23a3fcb60f5c9251/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Mon Mar 28 12:01:25 MSK 2016 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.9-all.zip 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >&- 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >&- 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /gulpfile.ts: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const gulp = require('gulp'); 4 | const del = require('del'); 5 | const ts = require('gulp-typescript'); 6 | const newer = require('gulp-newer'); 7 | const autoprefixer = require('gulp-autoprefixer'); 8 | const sass = require('gulp-sass'); 9 | const sourcemaps = require('gulp-sourcemaps'); 10 | const htmlmin = require('gulp-htmlmin'); 11 | const uglify = require('gulp-uglify'); 12 | 13 | const staticDir = 'src/main/resources/static/'; 14 | const webAppDir = 'src/main/javascript/'; 15 | 16 | const lib = [ 17 | 'core-js/client/shim.min.js', 18 | 'systemjs/dist/system-polyfills.js', 19 | 'systemjs/dist/system.src.js', 20 | 'reflect-metadata/Reflect.js', 21 | 'rxjs/**/*.js', 22 | 'zone.js/dist/**', 23 | '@angular/**/bundles/**' 24 | ]; 25 | 26 | gulp.task('library', () => { 27 | return gulp.src(lib, {cwd: "node_modules/**"}) 28 | .pipe(newer(staticDir + 'lib/')) 29 | .pipe(gulp.dest(staticDir + 'lib/')) 30 | }); 31 | 32 | gulp.task('typescript-compile', () => { 33 | let tsProject = ts.createProject('tsconfig.json'); 34 | return gulp.src(['typings/index.d.ts', webAppDir + '**/*.ts']) 35 | .pipe(newer({dest: staticDir, ext: '.js'})) 36 | .pipe(sourcemaps.init()) 37 | .pipe(tsProject()) 38 | .pipe(uglify()) 39 | .pipe(sourcemaps.write('/')) 40 | .pipe(gulp.dest(staticDir)) 41 | }); 42 | 43 | gulp.task('html-replace', () => { 44 | return gulp.src(webAppDir + '**/*.html') 45 | .pipe(newer(staticDir)) 46 | .pipe(sourcemaps.init()) 47 | .pipe(htmlmin({collapseWhitespace: true, caseSensitive: true})) 48 | .pipe(sourcemaps.write('/')) 49 | .pipe(gulp.dest(staticDir)) 50 | }); 51 | 52 | gulp.task('css-replace', () => { 53 | return gulp.src(webAppDir + '**/*.scss') 54 | .pipe(newer({dest: staticDir, ext: '.css'})) 55 | .pipe(sourcemaps.init()) 56 | .pipe(sass({outputStyle: 'compressed'})) 57 | .pipe(autoprefixer({ 58 | browsers: ['last 2 versions'], 59 | cascade: false 60 | })) 61 | .pipe(sourcemaps.write('/')) 62 | .pipe(gulp.dest(staticDir)) 63 | }); 64 | 65 | gulp.task('build', ['typescript-compile', 'library', 'html-replace', 'css-replace']); 66 | gulp.task('default', ['typescript-compile', 'html-replace', 'css-replace']); 67 | 68 | gulp.task('watch', function() { 69 | gulp.watch(webAppDir + '**/*.ts', ['typescript-compile']); 70 | gulp.watch(webAppDir + '**/*.html', ['html-replace']); 71 | gulp.watch(webAppDir + '**/*.scss', ['css-replace']); 72 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spring-boot-angular2-starter", 3 | "description": "Just a simple Spring Boot and Angular2 app", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "scripts": { 7 | "postinstall": "typings install && gulp build" 8 | }, 9 | "dependencies": { 10 | "@angular/common": "~2.4.0", 11 | "@angular/compiler": "~2.4.0", 12 | "@angular/core": "~2.4.0", 13 | "@angular/forms": "~2.4.0", 14 | "@angular/http": "~2.4.0", 15 | "@angular/platform-browser": "~2.4.0", 16 | "@angular/platform-browser-dynamic": "~2.4.0", 17 | "@angular/router": "~3.4.0", 18 | "@angular/upgrade": "~2.4.0", 19 | "core-js": "^2.4.1", 20 | "reflect-metadata": "^0.1.3", 21 | "rxjs": "5.2.0", 22 | "systemjs": "0.19.46", 23 | "zone.js": "^0.7.2", 24 | 25 | "gulp": "^3.9.1", 26 | "gulp-autoprefixer": "3.1.1", 27 | "gulp-cli": "^1.2.1", 28 | "gulp-concat": "^2.6.0", 29 | "gulp-htmlmin": "^3.0.0", 30 | "gulp-newer": "^1.1.0", 31 | "gulp-sass": "^3.1.0", 32 | "gulp-uglify": "^2.0.1", 33 | "concurrently": "^3.1.0", 34 | "del": "^2.2.0", 35 | "gulp-sourcemaps": "^2.4.1", 36 | "gulp-tslint": "^7.0.1", 37 | "gulp-typescript": "^3.1.3", 38 | "lite-server": "^2.2.2", 39 | "tslint": "^4.0.2", 40 | "typescript": "^2.1.4", 41 | "typings": "^2.0.0", 42 | "ts-node": "^2.1.0" 43 | }, 44 | "devDependencies": {} 45 | } 46 | -------------------------------------------------------------------------------- /src/main/java/com/starter/SpringBootAngular2StarterApplication.java: -------------------------------------------------------------------------------- 1 | package com.starter; 2 | 3 | import org.springframework.boot.SpringApplication; 4 | import org.springframework.boot.autoconfigure.SpringBootApplication; 5 | import org.springframework.web.bind.annotation.RequestMapping; 6 | import org.springframework.web.bind.annotation.RestController; 7 | import org.springframework.web.servlet.ModelAndView; 8 | 9 | @SpringBootApplication 10 | @RestController 11 | public class SpringBootAngular2StarterApplication { 12 | 13 | // Match everything without a suffix (so not a static resource) 14 | @RequestMapping(value = "/{[path:[^\\.]*}") 15 | public ModelAndView redirect() { 16 | // Forward to home page so that route is preserved. 17 | return new ModelAndView("forward:/"); 18 | } 19 | 20 | @RequestMapping(value = "/get-random-number") 21 | public Integer getRandomNumber() { 22 | return (int) (Math.random() * 10); 23 | } 24 | 25 | public static void main(String[] args) { 26 | SpringApplication.run(SpringBootAngular2StarterApplication.class, args); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/main/javascript/app/404.component/404.component.html: -------------------------------------------------------------------------------- 1 |

NOT FOUND

-------------------------------------------------------------------------------- /src/main/javascript/app/404.component/404.component.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /src/main/javascript/app/404.component/404.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'not-found', 5 | templateUrl: 'app/404.component/404.component.html', 6 | styleUrls: ['app/404.component/404.component.css'], 7 | }) 8 | export class NotFoundComponent {} -------------------------------------------------------------------------------- /src/main/javascript/app/app.component/app.component.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/main/javascript/app/app.component/app.component.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | text-align: center; 3 | } 4 | 5 | a { 6 | margin: 0 1rem; 7 | 8 | :first-child { 9 | margin-right: 1rem; 10 | } 11 | 12 | :last-child { 13 | margin-left: 1rem; 14 | } 15 | } -------------------------------------------------------------------------------- /src/main/javascript/app/app.component/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app', 5 | templateUrl: 'app/app.component/app.component.html', 6 | styleUrls: ['app/app.component/app.component.css'] 7 | }) 8 | export class AppComponent {} -------------------------------------------------------------------------------- /src/main/javascript/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {BrowserModule} from '@angular/platform-browser'; 3 | 4 | import {AppComponent} from "./app.component/app.component"; 5 | import {NotFoundComponent} from "./404.component/404.component"; 6 | import {ServerComponent} from "./server.component/server.component"; 7 | import {DashboardComponent} from "./dashboard.component/dashboard.component"; 8 | 9 | 10 | import {FormsModule} from "@angular/forms"; 11 | import {RouterModule, Routes} from "@angular/router"; 12 | import {JsonpModule, HttpModule} from "@angular/http"; 13 | 14 | const appRoutes: Routes = [ 15 | {path: '', redirectTo: '/dashboard', pathMatch: 'full'}, 16 | {path: 'server', component: ServerComponent, data: {title: 'Server'}}, 17 | {path: '404', component: NotFoundComponent, data: {title: 'Not Found'}}, 18 | {path: 'dashboard', component: DashboardComponent, data: {title: 'Dash'}}, 19 | {path: '**', redirectTo: '/404'} 20 | ]; 21 | 22 | @NgModule({ 23 | imports: [ 24 | BrowserModule, 25 | FormsModule, 26 | HttpModule, 27 | JsonpModule, 28 | RouterModule.forRoot(appRoutes) 29 | ], 30 | declarations: [ 31 | AppComponent, 32 | NotFoundComponent, 33 | DashboardComponent, 34 | ServerComponent 35 | ], 36 | bootstrap: [AppComponent] 37 | }) 38 | export class AppModule { 39 | } -------------------------------------------------------------------------------- /src/main/javascript/app/dashboard.component/dashboard.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Hello, {{name}}!

3 |

Type anything in input field and press Enter for saving.

4 | 5 | 6 | 9 |
-------------------------------------------------------------------------------- /src/main/javascript/app/dashboard.component/dashboard.component.scss: -------------------------------------------------------------------------------- 1 | h2, h3 { 2 | color: #444; 3 | font-weight: lighter; 4 | } 5 | 6 | input[text], button { 7 | color: #888; 8 | } 9 | 10 | div { 11 | text-align: center; 12 | } 13 | 14 | ul { 15 | text-align: left; 16 | } -------------------------------------------------------------------------------- /src/main/javascript/app/dashboard.component/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'dashboard', 5 | templateUrl: 'app/dashboard.component/dashboard.component.html', 6 | styleUrls: ['app/dashboard.component/dashboard.component.css'], 7 | }) 8 | export class DashboardComponent { 9 | name: string = 'World'; 10 | names: Array = []; 11 | 12 | onKeyUp(value: string): void { 13 | if(value.length === 0) 14 | this.name = 'World'; 15 | else 16 | this.name = value; 17 | } 18 | 19 | onKyUpEnter(value: string): void { 20 | if(value.length !== 0) 21 | this.names.push(value); 22 | } 23 | } -------------------------------------------------------------------------------- /src/main/javascript/app/main.ts: -------------------------------------------------------------------------------- 1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 2 | import {AppModule} from "./app.module"; 3 | 4 | platformBrowserDynamic().bootstrapModule(AppModule); -------------------------------------------------------------------------------- /src/main/javascript/app/server.component/server.component.html: -------------------------------------------------------------------------------- 1 |

SERVER

2 | 3 |

Request for random number from server: {{number}}

4 |

ERROR: {{errorMessage}}

-------------------------------------------------------------------------------- /src/main/javascript/app/server.component/server.component.scss: -------------------------------------------------------------------------------- 1 | h1, p { 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /src/main/javascript/app/server.component/server.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit} from '@angular/core'; 2 | import {HttpModule} from '@angular/http'; 3 | import {ServerService} from "../service/server.service"; 4 | 5 | @Component({ 6 | selector: 'server', 7 | templateUrl: 'app/server.component/server.component.html', 8 | styleUrls: ['app/server.component/server.component.css'], 9 | providers: [ServerService, HttpModule] 10 | }) 11 | export class ServerComponent implements OnInit { 12 | constructor(private serverService: ServerService) {} 13 | 14 | private number: number; 15 | private errorMessage: string; 16 | 17 | ngOnInit() { 18 | return this.serverService.getRandomNumber() 19 | .subscribe(number => this.number = number, error => this.errorMessage = error); 20 | } 21 | 22 | } -------------------------------------------------------------------------------- /src/main/javascript/app/service/server.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {Http} from '@angular/http'; 3 | import {Observable} from 'rxjs/Observable'; 4 | import 'rxjs/Rx'; 5 | 6 | @Injectable() 7 | export class ServerService { 8 | constructor(private http: Http) {} 9 | 10 | private Server = { 11 | GETRandomNumber: '/get-random-number' 12 | }; 13 | 14 | getRandomNumber(): Observable { 15 | return this.http.get(this.Server.GETRandomNumber) 16 | .map(res => res.json()) 17 | .catch(error => Observable.throw(error.json().error || 'Server error')) 18 | } 19 | 20 | } -------------------------------------------------------------------------------- /src/main/javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Application 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 42 | 43 | 44 | Loading... 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/main/javascript/main.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: Cambria, Georgia, serif; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | margin: 2em; 9 | text-align: center; 10 | } 11 | 12 | app { 13 | width: 30rem; 14 | } 15 | 16 | h1 { 17 | color: #369; 18 | font-size: 350%; 19 | } -------------------------------------------------------------------------------- /src/main/resources/application.properties: -------------------------------------------------------------------------------- 1 | spring.output.ansi.enabled = always -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "system", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | }, 12 | "exclude": [ 13 | "gulpfile.ts", 14 | "node_modules" 15 | ] 16 | } -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759", 4 | "node": "registry:dt/node#6.0.0+20160909174046", 5 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255" 6 | } 7 | } --------------------------------------------------------------------------------