Plunker with AngularJS and Typescript possible? - javascript

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.

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 🌹

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

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

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.

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>

Related

Which babel file is React including in that CDN script src?

In the demo html page downloaded from the 'Trying Out React' page, they use the following CDN to bring in babel.js:
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Seems like React knows to automatically use this library.
But if I've installed babel using npm install babel-cli Where can I find this 'babel.js' file?
<script src="node_modules/babel-cli/[babel.js?]"></script>
Am I thinking about this wrong?
It sounds like you now need to compile the script(s) you're using which require Babel, as described in the Usage guide: https://babeljs.io/docs/usage/cli/
You may need to use the "--out-file" to reference later in your HTML file.

Angular - TodoMVC example

I am working to understand Angular. As part of this, I began reviewing the TodoMVC example found here. I notice that the app has both .js and .ts files. My question is, do developers have to write both of these? I was under the impression that a developer writes the TypeScript (.ts) and it compiles to JavaScript (.js). If this is true, why would someone include the JavaScript files in the repo? Or, am I misunderstanding something?
When you write Angular2 application you write typescript files (TS).
When you run npm start or ng serve with angular-cli the ts file convert to js.
developer should only commit ts files to source control.
in this todomvc project the developer mistakenly put the js files.

Using jQuery with Angular 2

The tutorial I was following, used jQuery inside typings folder used
/// <reference path="../typings/tsd.d.ts" />
inside app.component but did not work.
Tried import the library in side index.html through CDN, then use
declare var $:any; still not working
Installed jQuery through NPM and it to path inside system.config.ts like the following
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'jquery:': 'node_modules/jquery/dist/jquery.slim.min.js'
},
still no clue
Update:
Now I installed angular via angular-cli. I do not 404 error, but the app still not working. It is supposed to output the keyup in the console
https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview
You mentioned you were just using a tutorial, so, not attached to the SystemJS config itself.
If you are using the Angular CLI instead (my personal recommendation), you can do it as follows:
Install jQuery, the actual library
npm install jquery --save
Install jQuery TypeScript autocomplete
npm install #types/jquery --save-dev
Then go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, add this inside it:
"../node_modules/jquery/dist/jquery.min.js"
(or use the slim version if that's your cup of tea, keep the rest of the path as-is)
After that, jQuery will be available for you as a global variable. You can log jQuery.fn.jquery (which brings jQuery's version) to ensure it's working brilliantly.
P.S.
If you want to use Webpack directly, or gulp, we need to see a sample of your config file, or which project seed did you used to create the project (applicable to Webpack and Gulp projects).
Jquery is awesome when you want to just do a simple DOM manipulation, i feel its one of the major drawbacks for Angular, simple DOM accessing in one line would be great. Here ya go. Load Jquery in your index.html file. Also you need to include the definitions file to get the Jquery functions to work inside typescript functions.
<script type="text/javascript" src="/assets/jquery-3.1.1.min.js" async></script>

Visual Studio Code not performing error checking in Javascript

I've tried following these instructions:
https://code.visualstudio.com/Docs/runtimes/nodejs
I am not getting the green/red swiggly lines at all. Is there something I'm missing?
You can also see the same thing in this video:
https://youtu.be/sE8_bTEBlFg?t=1m37s
As far as I know, they're running the default editor. I've tried installing typings and typescript using npm. I've Followed that tutorial to get Javascript intellisense for node.js, but I fail to get either error/warning checking or any type information for node.js modules.
Is there a location the type files should be installed to in order to make them global to every JS project you create in VS Code?
OK, so I managed get get some code suggestions working after reading up online. Without using the whole Typings tools, I acquired node.d.ts (found it on my computer inside C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions) and placed that in my project's directory structure inside the ".vscode" folder. At the top of my .js file I added the following line:
/// <reference path=".vscode/node.d.ts" />
The code seems to be recognized now.
I read up on this tip here: How to Import Intellisense files into vsCode (Visual Studio Code)
If you are using ESLint and you have an .eslint.js file in the project root you also need the eslint dependency installed in the project. Otherwise, if there is a .eslint.js file but the ESLint dependency is not installed Visual Studio Code will report nothing in the editor.
Maybe you didn't use the -g flag to install them globally? Alternately, perhaps it's a missing jsconfig.json file?

VS 2015- typescript does not generate javascript files

I just installed VS 2015 Community.
After building no js files are created inside the solution or the explorer.
TypeScript is part of Community. The produced .js files aren't part of the project, so you won't see them unless you turn on 'show all files' from the solution explorer. Here is the button you need to press:
Then the .js files will appear after you build:
If you're not seeing these, then check to make sure you're using this project template:
I want to thanks all who tryied to help But the solution in cordova typescript project - The compiled .ts files are inside the www\scripts\appBundle.js.
*you may need to use #Micheal Braude solution to see the appBundle.js file.
thanks agian.
I`m not sure that VS 2015 Enterprise works like Community version, but I tried to explain you, how to create Simple TypeScript project, and configure it for using step by step.
Steps
Create new HTML Application, developed for TypeScript.
When you have done it, you would get something like on image below:
It is a simple structure of application, here we have file app.ts, html view, and css style-sheet.
Configure compilation - What you should to know about this step:
ES target version
Compile single merged file or separate files.
Enter project configurations -->> Open TypeScripts Compilation tab -->>
Choose required ES version in ComboBox -->> Write path to compiled file and it name, if needed (located slightly below).
Add your first file to solution and write some code in it
Create your file.
4.1. If you prefer separate compilation then you should add dependency for your js file into html view. Usually, the *.js file compiled in the same location folder of *.ts file, that`s why targeting on you ts file when write dependency to js file
4.2. If you prefer merged compilation, first that you need - it is configure order of file, it is very simple challenge:
Add into the main file (in my case usually it is app.ts) and write in it list of your dependencies
///<reference path="path/to/file1.ts"/>
///<reference path="path/to/file2.ts"/>
Than, you should replace in html view this default script path:
with path to your final js file
Test your application:
try to add some code that would help you to be ensure that your code works perfectly
run you application and ensure that it works as you expected.
Good Luck! I hope that this post helps you in your beginnings!!
P.S. Here working project.

Categories