8

I have some code I would like to ask questions about on stackoverflow. The code is written in AngularJS with Typescript, and does manipulation and watching of the $location.hash. I now have the code on github at https://github.com/svdoever/AngularJS-bookviewer. Is it possible to have this code, preferably without the compiled Typescript files, up at http://plnkr.co?

I read at https://twitter.com/filearts/status/290961349092208642 that Typescript should be suported on http://plunkr.co.

Edit:

Solution by Bassarat to add a gh-pages branch to the git repository did the job. See comments on his answer.

thomaux
  • 19,133
  • 10
  • 76
  • 103
Serge van den Oever
  • 4,340
  • 8
  • 45
  • 66

5 Answers5

7

You can use TypeScript Compile to transform your TypeScript files into JavaScript.

Reference your TS files like this:

<script type="text/typescript" src="app.ts"></script>

And add these two JS files at the end of the HTML body:

<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>

Kos Prov created a working TypeScript Plunker here.

Update

You can use SystemJS to load TypeScript files, although you'll need to manually bootstrap Angular.

http://plnkr.co/edit/kFsJ7q?p=preview

Community
  • 1
  • 1
Blake Bowen
  • 1,049
  • 1
  • 12
  • 36
  • TypeScript Compile has not been updated in a long time – Homer Sep 11 '15 at 18:51
  • Your update was just what I was looking for.. forked it to setup a base TS + Angular + Kendo Plunker: http://plnkr.co/edit/ixYVzt?p=preview. Thanks! – madannes Oct 07 '16 at 17:40
6

It isn't supported by plunker. But I tend to use http://typescript.io/ when I need third party lib support (e.g. angularjs). Otherwise I just stick with TypeScript Playground http://www.typescriptlang.org/Playground/

Update

You can use TypeScript anywhere you like using https://github.com/basarat/typescript-script (plunker sample : https://github.com/basarat/typescript-script#plunker)

That said many playgrounds now support TypeScript natively including plunkr : https://github.com/ggoodman/plunker-run-plugin/blob/master/README.md (just put "use typescript"; at the top of your file and add a tsconfig.json file

basarat
  • 261,912
  • 58
  • 460
  • 511
  • 1
    Hi Basarat, problem is that I need multiple files. Both mentioned solutions don't support that feature. The case I have is https://github.com/svdoever/AngularJS-bookviewer. There are so many questions I have about this code, but I don't know how to put it in a single Typescript/Html/Css file. Is a github repository and a live running site on Azure the best way to ask questions about it, or would you suggest another approach? – Serge van den Oever Feb 05 '14 at 10:23
  • @SergevandenOever checkout github pages: http://pages.github.com/ all you need to do is create a branch gh-pages and your index.html will automatically be accessible at https://svdoever.github.io/AngularJS-bookviewer – basarat Feb 06 '14 at 10:25
1

Use https://stackblitz.com/ instead, all live examples on angular.io use stackblitz now.

Adamy
  • 2,789
  • 3
  • 27
  • 25
0

You could use Cloud 9 or Codio

https://c9.io

https://codio.com/

You can clone projects from github.

It is like an IDE and you will get a terminal. It has node installed.

I tested in cloud 9, but codio is similar you can use it too

You can run this command to install typescript

npm install -g typescript

then you can compile your .ts file from the terminal.

lets say that you have a file

hello.ts

you compile it using the following command

tsc hello.ts

If you are facing issues with compiling, please check the directory where your file is at.

adib.mosharrof
  • 1,624
  • 1
  • 12
  • 16
  • This has nothing to do with creating a quick, on-the-web prototype in the way that you can with Plunker and JavaScript. – Andrew Gray Nov 04 '15 at 16:40
0

http://plnkr.co/edit/NqELPE?p=preview

Here's a simple Hello World app that my colleague wrote that uses Typescript and Angular2

Simply use the Plunker tool for including packages and it works fine:

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> <script src="https://jspm.io/system@0.16.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.25/angular2.dev.js"></script>

Kyle Pennell
  • 5,747
  • 4
  • 52
  • 75
  • 1
    No, this doesn't compile TypeScript into JavaScript. It has pre-compiled files that were simply copied and pasted into plnkr. If you modify the .ts file in the plnkr, the .js file is not updated. – Vern Jensen Sep 03 '15 at 21:52
  • Not an answer to the question – Liero Mar 07 '16 at 08:29