Create an Angular App in Seconds with Hot Towel | John Papa

John Papa

Evangelist on the loose

Create an Angular App in Seconds with Hot Towel


Looking for an easy way to kick-start your Angular app development in under a minute? Now you can with HotTowel.Angular, a free NuGet package (and soon to become a Bower package too). What do you get? Let’s take a look …


What’s Inside?

There are a few libraries out of the box that come with HotTowel.Angular. Of course Angular is in here, but there are a few others I bundled into this package as they work very well together and I find myself wanting them in most apps. They help add a bit of style, theming, and helpers.

  • Angular core library
  • Angular’s routing module
  • Angular’s animation module
  • Twitter Bootstrap for layout
  • FontAwesome icons

Code Kick-Start

Adding some libraries is a convenience, but one of the first things that helps me get going with an app is to get the basic structure laid out. So I included what I have found to be most helpful in kick-starting my apps. I think you’ll find that this code will help you get out of the gate quickly and you can customize it any way you like. Here is a glimpse of just some of what you will find. You can learn more about the structure of the app by reading this post.

  • Responsive Design with Custom CSS
  • Dashboard Structure
  • Multiple Views and Menu Structure
  • Spinner
  • Logging
  • Splash Page
  • Alerts via Toastr
  • Structured Code

Easy Peasy

It’s super simple to install HotTowel.Angular. Use the NuGet Package Manager Console and go!

Install-Package HotTowel.Angular

I hope you all enjoy HotTowel.Angular!

If you want to learn more about creating apps with Angular, please check out my course Build Apps with Angular and Breeze at Pluralsight.
10-26-2013 6-49-25 PM

tags: angular bower hottowel nuget pluralsight
  • Greg

    Are you going to be putting you slides from Angle Brackets online? Interested in the spa talk – we have built an app in Durandal and before we standardize on it we’re investigating AngularJS as well…

  • Markus Zywitza

    Is the nuget package now compatible with VS2013? Or do we still need the workaround of installing WebAPI v1 before?

    • John

      Markus – This package is pure client side code, so it is compatible with any server. The extension package HotTowel.Angular.Breeze is the one that is having compat issues (between Breeze, WebAPI v2, and EF6). I have a fix for that one and I am testing it. Once ready, I will post.

    • johnpapa7

      Markus – This NuGet package is just client libraries and has always worked. The hottowel.angular.breeze package is being tested today with webapi 2. stay tuned

      • Markus Zywitza

        Thanks a lot for the good work and the prompt answer.

  • Vladimir

    John, How did you show the splash-page, the element has an attribute data-ng-show=”false” from the start.

    • johnpapa7

      Vladimir – that directive doesnt kick in until Angular is ready. So the splash page appears right away, and once Angular is ready, it turns itself off

      • Vladimir

        Thank You, A simple and clever solution

  • Eric Malamisura

    When will it support BootStrap 3.0?

    • johnpapa7

      Bootstrap 3 and UI-Bootstrap still have some incompatibilities. Once thy are resolved, I have a plan to convert and test it.

      The bootstrap changes I have already tested. But the directives are not quite ready yet,

      John Papa | @john_papa |, LLC

      • Eric Malamisura

        Also another quick question, why does it require jQuery?

        • johnpapa7

          Toastr uses jQuery, Durandal and Breeze use it, and the app has some jQuery code wrapped inside of some custom directives. the fact that you dont see it being used however, is because I purposefully decided to try to make it easier to remove once these other libraries no longer need jQuery (if that happens)

          John Papa | @john_papa |, LLC

  • Pingback: Create an Angular App in Seconds with Hot Towel...()

  • Allen Newton

    Going to kick the tires, give it a spin, and learn some cool new tricks today. Looks like a great little set of frameworks. :)

  • Idrees Khan

    Love it :). just tried it today :) i.e Me late but its great :)

  • Vladimir

    How do you add authentication to the Angular Site. ie a login page.
    or/and login using google or facebook Auth

    • iArouse

      i think it’s a must for a admin panel

    • freaking_genius

      If you want the simplest way, you should set the controllers (MVC and/or WebAPI) feeding the Angular SPA with the Authorize attribute.

      Unauthenticated users should be redirected to a separate page on the MVC site which allows them to authenticate, which on success dumps them back in the SPA.

    • J. Derrick

      I have just got finished with a Hot Towel SPA project with a team of devs. The one working with the ASP.NET Web API on the backend provided all the routing, etc…Then, I created a login page that ran off the Index.html page, created a serviceHelperFactory that had the literal strings for routing to api in it. Since we were using tokens, there was a “reserved” namespace to get Authenticated in the AspNet Identity Framework and get your token. Then you have the service helper set the authorization header and get your bearer token back with a time span on it. Also, using same idea, we created a way to apply for temp password code and reset your password.

  • Vincent Apa

    John, I am following the Pluralsight course. On initial render I get the following console log error. It does not make sense to me because the site renders despite the error.

    Uncaught Error: [$injector:nomod] Module ‘app’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

    Any insight? Thanks for all your great work!!!

    • John

      Vincent- That means you either forgot to define the module named ‘app’, you defined it but dd not link to it in your scripts in the index.html, you linked to it, but did not run it first before other custom scripts that use it, or something similar.

    • Marshall

      I am getting this same error. Did you figure this out?

    • Last_American_Standing

      See my solution above.

  • Rusty

    John, when is part 2 coming out? Would you be able to provide the sourcecode for the site ?


    hi John amazing well we have apps in Silverlight and Flex we want to ship into other plugin less technology, So john what you suggest can we build LOB apps inside SPA .

  • Steve Jackson

    Hi John,

    As you probably know, AngularJS 1.2.0 has been released. Can we drop the “-pre” now? Have you updated your package?


  • Pingback: Create an Angular App in Seconds with Hot Towel...()

  • Sampath Lokuge

    Please remove the ‘-pre’,Hence Angular has released the ver. 1.2.0.

    • John

      Sampath – It has been removed.

  • Rusty

    Hey John. I enjoyed your talks down at VSLive in Orlando. Question for you. I’m trying to use the HotTowel: ASP.NET MVC SPA Template on NuGet and it’s throwing an error at the end of the install stating that it tried to update Entity Framework 6.0.0 to Entity Frameowork 5.0.0. It says it’s unable to find a version of EF that is compatible with EF 5.0.0. I’m on VS 2013. Any thoughts on how I can get it to use 6.0.0 to get the template installed? Thanks.

    • Rusty

      Just to let you know. I created an empty project vs. an MVC project and the package installed fine.

  • miguel delgado

    Hello John:
    There may be a bug in HotTowel… in the default dashboard, afterclicking the admin tab, it leaves the splash screen on top and doesn’t allow any more clicks. It doesn’t happen when debugging because the isBusy function has time to clear the logic true to false…

    I just read below about bootstrap 3 incompatibiities, it may be the case because I updated the packs to B 3…

    Thanks and keep the GREAT work. Hot Towel has been a major revelation for my skills.

  • dave

    Hi John,

    Any update on the compatibility with Bootstrap 3? About to start your course and wanted to check first…

    • johnpapa7

      Nothing good yet. It can be refactored, I have done it, But i am not happy with the UI-Bootstrap directives yet for it.

      • thara56

        Great work Jhon! HotTowel Rocks!

        Could you let us know what’s holding you from upgrading to bootstrap 3.0 and ui-bootstrap .9 ? As far as I know, ui-bootstrap has officially moved to bootstrap 3.0 :)

  • Shaul Naim

    hi john… can i use hottowel from bower allready ? and how exactly ? thanks.

    • johnpapa7

      Not yet … I have not had time to tinker with it there

  • John Collins

    love hot towel

    features request:
    1) Affixed Sidebar
    2) Bootstrap 3

    3) Font Awesome 4

    Even if it is buggy, might as well post it up if you have it.

  • gdw

    Any chance of using I would like to write cleaner markup and really dislike the sacrifices you have to make in order to use twitter bootstrap.

  • achinth

    I would like to invoke the spinner service when making Ajax calls. I tried calling spinner.spinnerShow and spinner.spinnerHide but it doesn’t seem to work. What is the right way to show and hide spinner?

    • Srini

      There is minor change needed, update shell.js method signature

      $rootScope.$on(events.spinnerToggle, function (data))
      $rootScope.$on(events.spinnerToggle, function (event, data))

      • rasikaya sam

        @Srini thanks a lot, this worked. @achinth thanks for asking the question.

  • FiontanOComain

    Proof of concept for large corporate client. All impressed until we ran it using IE8 and it is riddled with bugs.

    • freaking_genius

      Yes, IE8 is riddled with bugs.

  • Last_American_Standing


    Uncaught Error: [$injector:nomod] Module ‘app’ is not available!



    in your index page

    • irtechie

      Didnt fix it for me ;/ Same error

  • Matt kruczek

    John, in your common.js module I don’t understand this line

    function $broadcast() {
    return $rootScope.$broadcast.apply($rootScope, arguments);

    obviously your overloading the $broadcast function and passing the arguments from your activateController function into the broadcast function. But isn’t the way you call broadcast like this “$broadcast(name,args)”? How is the $rootScope a name? And what does the apply do?


  • Olexandr Kravets

    John, do you have any guideline how to minify and bundle HotTowel based app?

  • Warren LaFrance

    John, I tried changing the web.config file to point to my instance of SQL Server 2012, but it is not hitting that database… I must be missing a setting or something.. Any pointers? This should be stupid simple…

  • nigel dewar

    Hi John, I’ve been through your course on pluralsight, along with ward bell, jesse liberty, brian noyles and several others. I cannot seem to get the breeze query stuff to work. It looks like things have progressed quite a bit since you created this course, and now the code simply does not work.

    Its really doing my head in, I’ve spend like 4-5 days on this already. Can you please supply an up to date, working example of code that uses breeze to query against sessions, speakers or whatever, because the code provided in your course just does not work.

    I’ve been through the whole swapping out things as to$q is obsolete thing, and using ‘then’ in place but its just not working.

    I’m really going insane, and really really need your help please!!!

  • Ayesha Ikram

    Hi John,
    I am following the way you have set up your layouts but using some other admin bootstrap template. Now this bootstrap template has some widgets like a div with some Id and some java-script injects a calendar in it. but when i hide every thing in separate html files and include them using ng-include these widgets never gets triggered.

    other than that the shell seems to be setting some height of its own and toastr notifications are coming underneath it.

    everything is fine i i don’t use ng-include and don’t wrap the individual modules in ng-controller.

  • Pikuna

    Hi, John I am using your Hot Towel Angular Template with empty web project. I want Bundling and Minification of all js files including app and script folder. Can i use it ? How do i do ? is it possible ?


    Nice John love it. Any plan of TypeScript version of this template.

  • Hank

    After updating jQuery from 2.1.1 to 2.1.3, I get a {{VM.BUSYMESSAGE}}, also discussed here on Stack Overflow,

    Also, if I update Angular from 1.2.22 to 1.3.8, I get the folling error: [HT Error] cannot read property ‘then’

    Anyone else have or resolve these issues?

  • Grumpy Guy

    Thanks for the template John, good stuff, I had some fun converting it to work with ui.router instead of ng-route. No problems so far with that.

    I tried to update my project to fontawesome 4.3.0 and HotTowel 2.3.3 seems to be preventing me from doing that as nuget says HT’s dependency limits FA to 4.2.0.

    No amount of switches on the nuget update-package seem to work.

    Am I missing something or was that limitation by design?

  • Russel Rillema

    I am struggling to find the best way to create nested dynamic routes. Based on the user who logs in we get a tree type structure with available things that user can do (most would route to a reporting view with a different report id). By the lack of information I am getting when searching I suspect I am going about this the wrong way, as I am sure this is a very common need. Any advice would be awesome.

%d bloggers like this: