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 …

HotTowel-NG-Preview

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…

    • Steve Brown

      That is exactly the situation we are in, deciding whether to go with Durandal or Angular. In some respects we prefer Durandal from a development perspective, but Angular is backed by Google which is a big plus. We developed a proof of concept wit Durandal and Knockout and were pleased with the results. John, it would be great if you can provide any direction on this.

  • 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 | JohnPapa.net, 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 | JohnPapa.net, 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 http://cc-ng-z.azurewebsites.net ?

  • ATIF SHAHZAD

    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?

    Thanks!

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

  • http://sampathloku.blogspot.com/ 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 http://semantic-ui.com/? 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?

  • 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

    IF YOU ARE GETTING THIS ERROR:

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

    Put

    below

    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?

    Thanks
    Matt

  • Olexandr Kravets

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

%d bloggers like this: