GitXplorerGitXplorer
j

HotTowel-Angular-TypeScript

public
9 stars
4 forks
0 issues

Commits

List of commits on branch master.
Unverified
f70d5131eec1491270862a21fc3c82cf6a462608

Corrected class declaration on window

jjohnnyreilly committed 10 years ago
Unverified
f8a022eb4ec5732884fd7576f9541050bbde8a29

admin has adminVm

jjohnnyreilly committed 10 years ago
Unverified
00cff79e783b098c828cb2ce2b0bd79329fd0bfa

dashboard now has dashboardVm

jjohnnyreilly committed 10 years ago
Unverified
2268090f1f9727c8da444e78331bcd76ddbf2052

dashboard now has dashboardVm

jjohnnyreilly committed 10 years ago
Unverified
0abe9ffd1d5d5ad5ec66b384420a94ea7cab0f06

sidebar now has sidebarVm

jjohnnyreilly committed 10 years ago
Unverified
619e53f09e36876c11990d8719e221108184b8cd

shell now has shellVm interface

jjohnnyreilly committed 10 years ago

README

The README file for this repository.

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.