X

Geertjan's Blog

  • January 18, 2016

Hello World with TypeScript and Angular 2

Geertjan Wielenga
Product Manager

I wanted to take the next step and move my sample in Hello World with TypeScript and Angular 1.4 to Angular 2. I asked Yakov Fain for help, who is working on a big thick book to be named Angular 2 Development with TypeScript and to be published by Manning.

He sent me the following Angular 2 translations of my Angular 1.4 code. He tells me, as well: "The architecture of Angular 2 is completely different - it's component based and there are no controllers or scopes. The entire app code is loaded with a SystemJS loader. A component is a class annotated with @Component, which includes the HTML fragment (template)." Firstly, here is "app/two_way_binding_greeting.ts", from Yakov:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template:`<input type='text' placeholder= "Enter first name " [(ngModel)] = "firstName">
<br><input type='text' placeholder= "Enter last name " [(ngModel)] = "lastName">
<br>Hello {{firstName}} {{lastName}}`
})
class GreetingComponent {
firstName: string;
lastName: string;
}
bootstrap(GreetingComponent);

And here is the "index.html" file that Yakov sent me:

<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
</head>
<body>
<app>Loading...</app>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {app: {defaultExtension: 'ts'}}
});
System.import('app/two_way_binding_greeting');
</script>
</body>
</html>

OK, so I took the above and pasted them into the application I had already, i.e., "HelloAngularTS".

Then I looked at all those JavaScript references and asked Yakov whether Angular 2 is available via Bower. He told me that I had to use NPM instead of Bower. Not a problem at all. I added the following dependencies to my "package.json" file:

"dependencies": {
"angular2": "2.0.0-beta.1",
"typescript": "^1.5",
"systemjs": "0.19.16"
}

The above dependencies worked for me when I was on NPM version 1.4.23. Now that I am on version 3.5.3, peer dependencies must be included explicitly:

"dependencies": {
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.13",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"angular2": "2.0.0-beta.1",
"systemjs": "0.19.7",
"typescript": "^1.5",
"zone.js": "0.5.10"
}

Then I saw a small yellow warning triangle on the project, telling me that dependencies I had specified had not been resolved yet, i.e., the "npm install" had to be run to install the dependencies I had declared. So I right-clicked the project and used "Resolve Project Problems" to download the dependencies:

The above results in the below in the Output window:

├── angular2@2.0.0-beta.1 
├── es6-promise@3.0.2
├── es6-shim@0.33.13
├── reflect-metadata@0.1.2
├── rxjs@5.0.0-beta.0
├─┬ systemjs@0.19.7
│ ├── es6-module-loader@0.17.10
│ └── when@3.7.7
├── typescript@1.7.5  
└── zone.js@0.5.10 

Remember, I had already installed the Everlaw TypeScript plugin, which means that my "two_way_binding_greeting.js" is created for me automatically when I saved the TypeScript file. See the earlier blog entry on this point.

However, I'm not sure I'd like to work with my HTML directly within my TypeScript file. Would be cool if I could refer to an HTML file, instead of having the HTML directly within the TypeScript file. So I used code completion on the @Component annotation and there I saw that in addition to "template", there's also a "templateUrl" property that can be used:

As a result, my TypeScript file now looks as follows, so that the HTML content is in a separate HTML file:

Here's the HTML shown earlier, within the TypeScript file, this time within a separate HTML template file:

That's some weird syntax right there, i.e., that's Angular 2. Let's make the HTML error highlighting less obtrusive, so we can work with our file. For example, like this it's more workable:

To make that change, use the Options window, as shown below, for HTML errors:

Also, notice the helpful error messages that show up whenever I make a typo in the path of my import statements within my TypeScript file:

The Everlaw TypeScript plugin looks for a "tsconfig.json" file, throughout your application. If you don't have an appropriate "tsconfig.json" file, you'll encounter errors like this in your TypeScript file:

So, I created a "tsconfig.json" file directly in the folder where I created my TypeScript file. It has this content and now everything resolves correctly:

{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": true,
"module": "commonjs",
"rootDir": ".",
"sourceRoot": ".",
"target": "es5",
"outDir": ".",
"moduleResolution": "node"
}
}

Finally, after taking all the steps above and following the bits of advice throughout this blog entry, you'll have a project structure that looks like this.

Notice that there is still a yellow warning triangle on the project, which is because I ended up putting the Node modules into a different location than NetBeans IDE expects it to be found in. Somewhere I can change that setting, will look into that soon.

Small tip: take a look at the handy Angular 2 documentation when you call up code completion:

When the application opens in the browser, you see this simple form, i.e., the entered first name and last name are mirrored in the greeting message:

In conclusion, as I think I have convincingly shown above, the Everlaw TypeScript plugin for NetBeans IDE is really helpful when you're working with Angular 2 and TypeScript. It looks to me like NetBeans IDE 8.1, by means of the Everlaw TypeScript plugin, has support for Angular 2 and TypeScript.

Join the discussion

Comments ( 9 )
  • Scott Orsburn Monday, January 18, 2016

    Please pardon the nature of this question, but I'm curious. What theme are you using. It looks like you're using Windows, and NetBeans looks great!


  • Geertjan Tuesday, January 19, 2016
  • Scott Orsburn Tuesday, January 19, 2016

    This is great! I missed your posts about this new look, so thank you. I also apologize for taking attention away from the point of your article.


  • carloliwanag Thursday, January 28, 2016

    Hi Geertjan,

    Thanks for providing this step-by-step instruction for setting angular2 in netbeans 8.1. But, I was not able to get rid of the errors in the import statements.

    The difference between the folder structure you have created from mine is that mine has no node_modules folder under the Site Root. I can't seem to find it where I can create that folder. In the creation of the project folder, I did not uncheck any in the "Tools" section. Please let me know if there are other details that I may need to provide you to help me. (apologies for being a bit demanding)

    Thanks,


  • Sheldon Barnes Monday, February 1, 2016

    Nice post. Please consider utilizing templateUrl instead of template.

    You would end up with:

    @Component({

    selector: 'app',

    templateUrl:`index.html`

    })

    You can then put the contents of your index.html separate from your code:

    <input type='text' placeholder= "Enter first name " [(ngModel)] = "firstName"><br>

    <input type='text' placeholder= "Enter last name " [(ngModel)] = "lastName"><br>

    Hello {{firstName}} {{lastName}}

    https://github.com/sheldonbarnes/Angular2Learning/blob/master/app/app.component.ts

    https://github.com/sheldonbarnes/Angular2Learning/blob/master/template1.html


  • Vojislav Sunday, February 7, 2016

    hi Geertjan,

    I had a problem with setting up an environment or it is maybe better to say project. I had some problem during npm install. Can you write me a prerequisites for Angular2. I installed node and tools for TypScript but like it needs Python and in some point of time even VisualStudio.

    I've been using NetBeans for a long time for Java Development and now I want to use it for Angular 2 development but I am having problems with it.

    I know that this probably isn't related to NetBeans but maybe you know the answer!


  • Maarten van Leunen Saturday, February 20, 2016

    Is there a simple way of including this in a Maven build? I haven gotten used to Jenkins running a "mvn package" that basically does everything.


  • Maarten van Leunen Saturday, February 20, 2016

    Basically, I want to deploy a War containing basically only html js and css files. So I wished to combine the war-maven-part with the node.js-angular2-typescript part.


  • James Tuesday, March 14, 2017

    If you are working on Angular 2 localization projects, my suggestion is to have a look at this online localization tool https://poeditor.com that supports .xmb and .xtb formats.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.