A types-only port of HotTowel-Angular to TypeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
.gitattributes
.gitignore
README.md
packages.config

README.md

Hot Towel Angular SPA Template - with TypeScript

This is a port of John Papa's popular Hot Towel Angular SPA Template to TypeScript.

##What is this?

This is intentionally a "bare bones" port of the HotTowel-Angular JavaScript code across to TypeScript. It's essentially the same code as John's - just with added type annotations (and yes it is noImplicitAny compliant).

You could, if you wanted to, go much further. You could start using a whole host of TypeScripts functionality: modules / classes / arrow functions... the whole shebang. This is deliberately not that; I didn't want to scare your horses... I wanted you to see how easy it is to move from JS to TS. And I'm standing on the shoulders of that great giant John Papa for that purpose.

##Contents

This repo contains the contents of HotTowel-Angular's app folder, with each JavaScript file converted over to TypeScript. The compiled JavaScript files are also included so that you can compare just how similar the compiled JavaScript is to John's original code.

In fact there are only 2 differences in the end:

###1. sidebar.js's getNavRoutes ...had the filtering changed from this:

    return r.config.settings && r.config.settings.nav;

to this:

    return (r.config.settings && r.config.settings.nav) ? true : false;

This was necessary as TypeScript insists that the array filter predicate returns a boolean. John's original method returns a number (nav's value to be clear) which actually seems to work fine. My assumption is that JavaScript's filter method is happy with a truth-y / false-y test which John's implementation would satisfy.

###2. common.js's $broadcast ...had to be given a rest parameter to satisfy the TS compiler. John's original method exposed no parameters as it just forwards on whatever arguments are passed to it. This means that $broadcast has a bit of unused code in the head of the generated method:

    var args = [];
    for (var _i = 0; _i < (arguments.length - 0); _i++) {
        args[_i] = arguments[_i + 0];
    }

##If you want to use this Then simply follow the instructions for installing HotTowel-Angular and then drop this repo's app folder over the one just created when HotTowel-Angular was installed. If you're using Visual Studio then make sure that you include the new TS files into your project and give them the BuildAction of TypeScriptCompile.

You'll need the following NuGet packages for the relevant DefinitelyTyped Typings:

Install-Package angularjs.TypeScript.DefinitelyTyped
Install-Package angular-ui-bootstrap.TypeScript.DefinitelyTyped
Install-Package jquery.TypeScript.DefinitelyTyped
Install-Package spin.TypeScript.DefinitelyTyped
Install-Package toastr.TypeScript.DefinitelyTyped

And you're good to go. If you're not using Visual Studio then you may need to add in some <reference path="angular.d.ts" /> etc. statements to the TypeScript files as well.

If you're interested in the specific versions of the typings that I used then you can find them in the packages.config of this repo.

##Thanks To John Papa for creating HotTowel-Angular. Much love.

And my mum too... Just because.