In the previous post, I added AngularJS support to my base Spring Boot Application. In this post, I am going to integrate Bootstrap CSS and Javascript framework to make it pretty.
Configuring Bootstrap
- Make sure that
Bootstrap CSS
andJavascript
files are included in the application.
Note: Bootstrap package was already downloaded using Bower. See the previous post for more details.<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" >
and
<script src="bower_components/jquery/dist/jquery.js"></script > <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script >
- I am going to use the Sticky footer with fixed navbar example as my starting point. This needs a little bit of custom css to make the sticky footer work.
/* -------------------------------------------------- Sticky footer styles (http://getbootstrap.com/examples/sticky-footer-navbar/) -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } #footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ body > .container { padding: 60px 15px 0; } .container .text-muted { margin: 20px 0; } #footer > .container { padding-right: 15px; padding-left: 15px; } code { font-size: 80%; }
- Modify
index.html
to include nav bar and footer<html> <head> <title>AngularJS Starter App</title> <link rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css'> <!-- APP: css --> <!-- Custom styles for this template --> <link rel='stylesheet' href='app/css/main.css'> <!-- end APP --> </head> <body ng-app='StarterApp'> <div class='navbar navbar-default navbar-fixed-top' role='navigation'> <div class='container'> <div class='navbar-header'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </button> <a class='navbar-brand' href='/'>Angular Starter App</a> </div> <div class='collapse navbar-collapse'> <ul class='nav navbar-nav'> <li class='active'><a href='/'>Home</a></li> <li><a href='/about'>About</a></li> </ul> </div> <!--/.nav-collapse --> </div> </div> <!-- Add your site or application content here --> <div class='container'> <div ng-view></div> </div> <div id='footer'> <div class='container'> <p class='text-muted'>Starter App : Sticky Footer</p> </div> </div> <!-- LIBS: js --> <script src='bower_components/jquery/dist/jquery.js'></script> <script src='bower_components/bootstrap/dist/js/bootstrap.js'></script> <script src='bower_components/angular/angular.js'></script> <script src='bower_components/angular-route/angular-route.js'></script> <!-- end LIBS --> <!-- APP: js --> <script src='app/js/main.js'></script> <script src='app/js/controllers/homeCtrl.js'></script> <!-- end APP --> </body> </html>
- Add logic to handle the
About
link- Add a new route for
/about
inmain.js
.when("/about", { templateUrl: "app/views/about.html", controller: "AboutCtrl" })
- Add
About view
by adding<project folder>/src/main/resources/static/app/views/about.html
file<h3>About</h3>
- Implement
AboutCtrl
in
file/src/main/resources/static/app/js/controllers/aboutCtrl.js angular.module("starterApp.about", []) .controller("AboutCtrl", function() { });
Note:
AboutCtrl
resides in a separate module calledstarterapp.about
. - Ensure that the new javascript file is included in
index.html
file<script src="app/js/controllers/aboutCtrl.js"></script>
- Add dependency to the new
starterApp.about
inmain.js
var starterApp = angular.module("StarterApp", ["ngRoute", "starterApp.home", "starterApp.about"]);
- Add a new route for
Sum it up
I now have a starter application buile using AngularJS, Spring Boot and Maven. I have integrated Bootstrap CSS and Javascript framework to make it look pretty. The starter application doesn’t have any functionality built into it yet. In the next post, I plan to implement the Bird Log application using this starter application.
Discussion
No comments yet.