Integrating Angulr into a JHipster Project

In response to my article last week about progress indicators with AngularJS and JHipster, Jean-François Morneau asked:

Hi, I'd like to know the most efficient way to integrate a template such as Angulr in JHipster? Would be great to just type "bower install angulr-template". Could you help? Thanks!

I've used Angulr extensively this past year. I started using it on a client's project in April and integrated it into this JHipster-powered blog app in early June. Here's how I did it:

1. Purchase Angulr. A regular license is now $22 USD, $1100 if you want to include it in a product that users pay for.
2. Add Font Awesome to bower.json:

   "font-awesome": "4.4.0"

3. Copy src/fonts/sourcesanspro to src/main/webapp/assets/fonts/sourcesanspro. NOTE: I have had issues with these fonts being corrupted by Git. See this issue for more information.
4. Copy src/css/app.css and src/css/font.css to src/main/webapp/assets/styles.
5. In src/main/webapp/assets/styles/main.css, remove the rule for body. Also, change the .development class to have z-index: 1200.
6. In src/main/webapp/index.html:
   • Add font-awesome.css after bootstrap.css (or allow wiredep to add it for you).
   • Add font.css and app.css after main.css.
   • Change <div class="container"> to <div class="app app-header-fixed"> and move the browser upgrade warning, development ribbon and navbar elements inside it.
   • Change the ui-view="navbar" element to have class="app-header navbar box-shadow bg-white-only".
   • Change the ui-view="content" element to use class="fade-in-up" instead of class="well".
   • Change <div class="footer"> to <div class="footer wrapper b-t bg-light m-t-lg">.

   After making all these code changes, the body in your index.html should resemble the following:

   <div class="app app-header-fixed">
       <!--[if lt IE 9]>
           <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->
       <div ng-show="{{ENV === 'dev'}}" class="development" ng-cloak=""></div>
       <div ui-view="navbar" ng-cloak="" class="app-header navbar box-shadow bg-white-only"></div>
       <div class="fade-in-up" ui-view="content"></div>
   
       <div class="footer wrapper b-t bg-light m-t-lg">
           <p translate="footer"></p>
       </div>
   </div>
   

7. Change any HTML templates with <div class="col-md-8 col-md-offset-2"> to be <div class="col-md-4 col-md-offset-4">. I had to do this in activate.html, password.html, register.html, reset.request.html and settings.html.
8. Change any HTML templates that start with <div> to start with <div class="container">. I had to do this in audits.html, configuration.html, health.html, logs.html, metrics.html, tracker.html and main.html. I also had to modify templates generated by yo jhipster:entity.
9. Change navbar.html to remove <nav> and <div class="container"> as top-level elements. After this change, .navbar-header and .navbar-collapse should be the top-level elements. There may be a few other changes in this file, so I created a navbar.html gist that shows my navbar.html after I first integrated Angulr.

I hope this how-to helps you integrate a theme like Angulr into your project. If you have any questions, please let me know.