//
you're reading...

AngularJS

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

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


*

Categories