A 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/
After reducing displayed size, navbar’s menu toggle from a bar to a button.
A click on ‘Page 1’ button…
…route to page 1.
The URI is also consistant with the route and the view (here #/page1 for page1.html)
It’s possible to go further in depth with a third level (here ‘home/page2/subpage’).
The URI is consistant ot (here #/page2/subpage for page2subpage.html)
All breadcrumb items are clickable (here ‘home’).
Source
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
[…] JavaEE AngularJS Bootstrap: How to Breadcrumb and NavBar […]