A simple way to handle loading screen before javascript kick-in, rely on ng-if.
Demo
Source
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.damienfremont.blog</groupId> <artifactId>20160118-javaee-angularjs-loading_screen</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <java.version>7</java.version> <angularjs.version>1.4.7</angularjs.version> </properties> <dependencies> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-servlet-2.x</artifactId> <version>1.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>angularjs</artifactId> <version>${angularjs.version}</version> </dependency> </dependencies> <build> <resources> <resource> <directory>src/main/webapp</directory> <filtering>true</filtering> <targetPath>${project.basedir}/target/m2e-wtp/web-resources</targetPath> <includes> <include>index.html</include> </includes> </resource> </resources> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <configuration> <webResources> <resource> <directory>src/main/webapp</directory> <filtering>true</filtering> <includes> <include>app.js</include> <include>index.html</include> </includes> </resource> </webResources> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.${java.version}</source> <target>1.${java.version}</target> </configuration> </plugin> </plugins> </build> </project>
app.js
'use strict'; angular.module('app', []); angular.module('app') .controller('ExampleCtrl', function($scope) { $scope.message = 'Loaded!'; });
index.html
<!DOCTYPE html> <html ng-app="app"> <body> <!-- LOADING SCREEN--> <div class="m-app-loading" ng-if="false"> <!-- HACKY CODE WARNING: I'm putting Style block inside directive so that it will be removed from the DOM when we remove the directive container. --> <style type="text/css"> .m-app-loading .spinner { width: 30%; max-width: 100px; height: 30%; max-height: 100px; } div.m-app-loading { position: fixed ; } div.m-app-loading div.animated-container { background-color: #FFFFFF ; bottom: 0px ; left: 0px ; opacity: 1.0 ; position: fixed ; right: 0px ; top: 0px ; z-index: 999999 ; } div.m-app-loading div.messaging { color: #2089B6; left: 0px ; margin-top: -37px ; position: absolute ; right: 0px ; text-align: center ; top: 40% ; } div.m-app-loading h1 { font-size: 26px ; line-height: 35px ; margin: 0px 0px 20px 0px ; } </style> <!-- BEGIN: Actual animated container. --> <div class="animated-container" ng-class="ng-leave"> <div class="messaging"> <h1> MY APP </h1> <img class="spinner" src="img/loading-blue.gif"> </div> </div> <!-- END: Actual animated container. --> </div> <!-- VIEW/PAGE --> <div ng-controller="ExampleCtrl"> Loading...{{message}} </div> <!-- YOUR JS 2nd --> <script src="webjars/angularjs/${angularjs.version}/angular.js"></script> <script src="app.js?version=${project.version}"></script> </body> </html>
web.xml
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>WEBJARS</servlet-name> <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class> <init-param> <param-name>disableCache</param-name> <param-value>true</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>WEBJARS</servlet-name> <url-pattern>/webjars/*</url-pattern> </servlet-mapping> </web-app>
Project
https://github.com/DamienFremont/blog/tree/master/20160118-javaee-angularjs-loading_screen
References
http://www.bennadel.com/blog/2758-creating-a-pre-bootstrap-loading-screen-in-angularjs.htm
https://damienfremont.com/2016/01/18/javaee-angularjs-loading-screen/
[…] JavaEE AngularJS : Loading Screen […]