JavaEE AngularJS Bootstrap: How to Breadcrumb and NavBar

logo angularjsA navigation feature: simple responsive navbar, with breadcrumb and home view. Using vanilla AngularJS (because angular-breadcrumb is too complicated: it’s also using ui-router …two frameworks for one feature?).

Demo

http://localhost:8080/20151105-javaee-angularjs-bootstrap-breadcrumb/

ScreenShot001

After reducing displayed size, navbar’s menu toggle from a bar to a button.

ScreenShot002

A click on ‘Page 1’ button…

ScreenShot003

…route to page 1.

ScreenShot004

The URI is also consistant with the route and the view (here #/page1 for page1.html)

ScreenShot005

It’s possible to go further in depth with a third level (here ‘home/page2/subpage’).

ScreenShot006

The URI is consistant ot (here #/page2/subpage for page2subpage.html)

ScreenShot007

All breadcrumb items are clickable (here ‘home’).

ScreenShot008

ScreenShot009

Source

ScreenShot010

index.jsp

<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- LIBS CSS -->
<link rel="stylesheet" href="webjars/bootstrap/${bootstrap.version}/css/bootstrap.css">
<!-- LIBS JS -->
<script src="webjars/jquery/${jquery.version}/jquery.js"></script>
<script src="webjars/bootstrap/${bootstrap.version}/js/bootstrap.js"></script>
<script src="webjars/angularjs/${angularjs.version}/angular.js"></script>
<script src="webjars/angularjs/${angularjs.version}/angular-route.js"></script>
<!-- YOUR JS -->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

<!-- MENU -->
<nav class="navbar navbar-default">
<div class="container-fluid">

<!-- HEADER AND MOBILE BUTTON -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- LOGO -->
<a class="navbar-brand" href="#">
Breadcrumb</a>
</div>

<!-- MENU ITEMS -->
<div class="navbar-collapse collapse"
id="bs-example-navbar-collapse-1"
aria-expanded="true">
<ul class="nav navbar-nav">

<!-- PAGE 1 -->
<li class="active">
<a href="#/page1">
Page 1 <span class="sr-only">
(current)</span></a></li>

<!-- PAGE 2 -->
<li class="dropdown">
<a href="#/page2" class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Page 2 <span class="caret"></span></a>

<!-- PAGE 2 SUBMENU -->
<ul class="dropdown-menu">
<li><a href="#/page2/subpage">SubPage</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<div class="container">

<!-- BREADCRUMB -->
<div ng-controller="BreadcrumbsController">
<ol class="breadcrumb"
ng-show="route.current.breadcrumbs">
<li
ng-class="{active: $last}"
ng-repeat="breadcrumb in route.current.breadcrumbs">
<a href="{{breadcrumb.href}}">
{{breadcrumb.label}}
</a>
</li>
</ol>
</div>

<!-- VIEW/PAGE -->
<div ng-view></div>

</div>
</body>
</html>

app.js

'use strict';

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

app.config(function($routeProvider) {
$routeProvider //
.when('/page1', {
controller : 'MainCtrl',
templateUrl : 'views/page1.html',
breadcrumbs : [ home, page1 ]
}).when('/page2', {
controller : 'MainCtrl',
templateUrl : 'views/page2.html',
breadcrumbs : [ home, page2 ]
}).when('/page2/subpage', {
controller : 'MainCtrl',
templateUrl : 'views/page2subpage.html',
breadcrumbs : [ home, page2, page2subpage ]
}).otherwise({
templateUrl : 'views/home.html',
breadcrumbs : [ home ]
});
});

const home = { href : '#/', label : 'Home' };
const page1 = { href : '#/page1', label : 'Page 1' };
const page2 = { href : '#/page2', label : 'Page 2' };
const page2subpage = { href : '#/page2/subpage', label : 'SubPage' };

app.controller('BreadcrumbsController', function($scope, $route) {
$scope.route = $route;
});

app.controller('MainCtrl', function($scope) {

});

views/home.html

<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>

views/page1.html

<h2>Page 1</h2>
<p>Lorem Ipsum is simply dummy text
of the printing and typesetting industry.
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s</p>

views/page2.html

<h2>Page 2</h2>
<p>It is a long established fact that a
reader will be distracted by the readable
content of a page when looking at its layout. </p>

views/page2subpage.html

<h2>SubPage of Page 2</h2>
<p>Contrary to popular belief, Lorem Ipsum is
not simply random text. It has roots in a piece
of classical Latin literature from 45 BC, making
it over 2000 years old.</p>

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>20151105-javaee-angularjs-bootstrap-breadcrumb</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- JAVAEE -->
<java.version>7</java.version>
<javaee.version>7.0</javaee.version>
<jersey.version>2.22.1</jersey.version>
<!-- WEB -->
<bootstrap.version>3.3.5</bootstrap.version>
<angularjs.version>1.4.7</angularjs.version>
<angular-ui-bootstrap.version>0.14.0</angular-ui-bootstrap.version>
<jquery.version>2.1.4</jquery.version>
</properties>

<dependencies>

<!-- JAVA -->

<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>${javaee.version}</version>
<scope>provided</scope>
</dependency>

<dependency>
<groupId>org.glassfish.jersey.containers</groupId>
<artifactId>jersey-container-servlet</artifactId>
<version>${jersey.version}</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.media</groupId>
<artifactId>jersey-media-json-jackson</artifactId>
<version>${jersey.version}</version>
</dependency>

<!-- WEB -->

<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-servlet-2.x</artifactId>
<version>1.1</version>
</dependency>

<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>${bootstrap.version}</version>
</dependency>

<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>${angularjs.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angular-ui-bootstrap</artifactId>
<version>${angular-ui-bootstrap.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.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>*.jsp</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
<configuration>
<webResources>
<resource>
<directory>src/main/webapp</directory>
<filtering>true</filtering>
<includes>
<include>*.jsp</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>

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/20151105-javaee-angularjs-bootstrap-breadcrumb

References

http://getbootstrap.com/components/#breadcrumbs

One thought on “JavaEE AngularJS Bootstrap: How to Breadcrumb and NavBar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s