//
you're reading...

AngularJS

Part 3 : Web application development using AngularJS, Spring Boot and Maven – Beautify using Bootstrap

By ⋅ March 12, 2014 ⋅ Email This Post Email This Post ⋅ Print This Post Print This Post ⋅ Post a comment
Filed Under  , , , , , , , ,

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 and Javascript 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 &gt; .container {
      padding: 60px 15px 0;
    }
    .container .text-muted {
      margin: 20px 0;
    }
    #footer &gt; .container {
      padding-right: 15px;
      padding-left: 15px;
    }
    code {
      font-size: 80%;
    }
  • Modify index.html to include nav bar and footer 
        &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;AngularJS Starter App&lt;/title&gt;
            &lt;link rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css'&gt;
            &lt;!-- APP: css --&gt;
            &lt;!-- Custom styles for this template --&gt;
            &lt;link rel='stylesheet' href='app/css/main.css'&gt;
            &lt;!-- end APP --&gt;
        &lt;/head&gt;

        &lt;body ng-app='StarterApp'&gt;
            &lt;div class='navbar navbar-default navbar-fixed-top' role='navigation'&gt;
                &lt;div class='container'&gt;
                    &lt;div class='navbar-header'&gt;
                        &lt;button type='button' class='navbar-toggle' data-toggle='collapse'
                            data-target='.navbar-collapse'&gt;
                            &lt;span class='sr-only'&gt;Toggle navigation&lt;/span&gt; 
                            &lt;span class='icon-bar'&gt;&lt;/span&gt; 
                            &lt;span class='icon-bar'&gt;&lt;/span&gt; 
                            &lt;span class='icon-bar'&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;a class='navbar-brand' href='/'&gt;Angular Starter App&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class='collapse navbar-collapse'&gt;
                        &lt;ul class='nav navbar-nav'&gt;
                            &lt;li class='active'&gt;&lt;a href='/'&gt;Home&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href='/about'&gt;About&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;  &lt;!--/.nav-collapse --&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Add your site or application content here --&gt;
            &lt;div class='container'&gt; 
                &lt;div ng-view&gt;&lt;/div&gt;
            &lt;/div&gt;      
            &lt;div id='footer'&gt;
                &lt;div class='container'&gt;
                    &lt;p class='text-muted'&gt;Starter App : Sticky Footer&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- LIBS: js --&gt;
            &lt;script src='bower_components/jquery/dist/jquery.js'&gt;&lt;/script&gt;
            &lt;script src='bower_components/bootstrap/dist/js/bootstrap.js'&gt;&lt;/script&gt;
            &lt;script src='bower_components/angular/angular.js'&gt;&lt;/script&gt;
            &lt;script src='bower_components/angular-route/angular-route.js'&gt;&lt;/script&gt;
            &lt;!-- end LIBS --&gt;

            &lt;!-- APP: js --&gt;
            &lt;script src='app/js/main.js'&gt;&lt;/script&gt;
            &lt;script src='app/js/controllers/homeCtrl.js'&gt;&lt;/script&gt;
            &lt;!-- end APP --&gt;
        &lt;/body&gt;
    &lt;/html&gt;
  • Add logic to handle the About link
    • Add a new route for /about in main.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 /src/main/resources/static/app/js/controllers/aboutCtrl.js file 
      angular.module("starterApp.about", [])
    .controller("AboutCtrl", function() {       
    });

      Note: AboutCtrl resides in a separate module called starterapp.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 in main.js 
      var starterApp = angular.module("StarterApp", ["ngRoute", "starterApp.home", "starterApp.about"]);

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.

Post a Comment

CAPTCHA Image

*

Categories