Category: Angular2

I was writing a small app in Angular 2 in TypeScript with the on-the-fly transpiling by SystemJS. I needed to implement a router that would switch between the Home and ProductDetail views in a single page app.  The root component had two links and was supposed to render either Home or ProductDetail components depending on which link the user clicks. Angular 2 offers a pretty elegant syntax for this:

@Component({
    selector: 'basic-routing',
    directives: [ ROUTER_DIRECTIVES], 
    template: `<a [router-link]="['/Home']">Home</a>
              <a [router-link]="['/ProductDetail']">Product Details</a>
              <router-outlet></router-outlet>` 
})
@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'}, 
    {path: '/product/', component: ProductDetailComponent, as: 'ProductDetail'  } 
])
class RootComponent{}

Configure the router to map the component to a URL, use property binding in the form of [router-link], and specify the router outlet, where the content of one or the other component should be rendered. Nice and easy, isn’t it? Then I created a HomeComponent to render the text ‘Home Component’ , copy-pasted the code into ProductDetailComponent and started the app in the browser.

Running the app properly rendered the text Home Component, but when I clicked on the second link, nothing happened – the text Home Component remained in the browser window. Opened the code of the ProductDetailComponent. Oops… Forgot to change the text for rendering while copy-pasting – it still had ‘Home Component’. No biggies. Replaced it with ‘Product Detail Component’ and re-ran the app. Nothing changed. I still see Home Component no matter what link I click.

So what do we do with this nice syntax with Angular binding and TypeScript annotations? There is nothing to debug there. We need to debug the actual ES5 code that runs in the browser. Here’s the snapshot of my application window (on the left) after I clicked on the Product Detail link (Chrome Dev Tools panel is on the right):

Note that Angular router properly formed the URL for the product view. The template property in the file product.ts has the right content: ‘Product Detail Component’. Now let’s take a look at the content of the file product.ts!transpiiled, which was auto-generated by SystemJS:

This file was not regenerated and still has the ‘Home Component’ in the template property! Apparently, changing the string content is not a good enough reason for SystemJS to re-run the TypeScript transpiler and the browser used its cached version. Running the same example in FireFox worked as expected – its cache was clean so fresh ES5 files were generated by SystemJS.

Chrome Dev Tools has an option Disable Cache while Dev Tools open, and this would clear the cache on the page refresh. But if you want the browser cache to be refreshed even if the Dev Tools are not open, add the following lines between the head tags in your HTML file:

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">

Manning opened the MEAP program for our upcoming book “Angular 2 Development with TypeScript”, where JSPM, SystemJS and TypeScript development is covered in greater details.

New York City residents often say “It’s going to be a nice city when all the constructions will be finished”. The same applies to Angular 2 framework, which remains in Alpha (the latest build is 42 at the time of this writing). It has a potential to become a great framework in 2016, when the API will be stabilized and documented.

Writing code in Angular 2 is a lot simpler than in AngularJS, especially if you use TypeScript (see my blog on why writing in TypeScript here). But getting started with a new project is more complicated and requires a careful selection of tooling. in addition to a typical JavaScript project you need to take care of transpiling TypeScript and loading modules – neither of these steps can be done natively by the browsers. Hence you need introduce tooling into your develop-deploy process. For reasoning of using TypeScript read this blog.

Earlier this year I wrote a blog that included a scary list of tools that today’s JavaScript developers may use. In an effort of minimizing the number of required tool we settled on npm (for both installing packages and build scripts) and JSPM (a package manager that comes with the module loader SystemJS that comes with TypeScript transpiler). These are the steps that should be done before you start writing your Angular 2 app in TypeScript:

In the command window run the following npm command (install Node.js runtime if you don’t have npm):

1. Install JSPM globally on your computer (-g means global). It comes with SystemJS:

npm install jspm -g

2. Create a folder for your project, go there and ask jspm to generate all required configuration files:

jspm init

This command will ask you 8 question regarding the required configuration. Accept the defaults for the first 7 questions, but for the question about transpiler, enter typescript. After running this command in your folder you’ll find the new files config.js and package.json as well as the subfolder jspm_packages.

3. Install Angular 2 in your project folder and all required dependencies:

jspm install angular2 core-js css reflect-metadata

This command will download all of the above libraries inside the folder jspm_packages and will modify the content of the file config.js

4. Install an http server that will be serving your app to the browser:

npm install http-server -g

5. Create the file index.html with the following content:

<!DOCTYPE html>
<html>
 <head>
  <script src="//cdn.rawgit.com/systemjs/systemjs/0.19.4/dist/system.js"></script>
  <script src="//code.angularjs.org/2.0.0-alpha.40/angular2.js"></script>
  <script>
   System.config({
    transpiler: 'typescript',
    map: {typescript: '//cdn.rawgit.com/Microsoft/TypeScript/v1.6.2/lib/typescript.js'}
});

   System.import('main.ts');
  </script>
 </head>
 
 <body>
   <hello-world></hello-world>
 </body>
</html>

This code loads SystemJS and Angular (I used the build Alpha 40) and tells SystemJS to load the TypeScript 1.6.2 compiler from CDN, and load the file main.ts , which is shown next.

6. The Typescript file main.ts is your entry point to the application. It can import other files, but this would be a subject for a separate blog post. This is what you should enter in main.ts:

import {Component, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'hello-world',
  template: `<h1>Hello {{ name }}!</h1>`
})
class HelloWorldComponent {
  name: string;

  constructor() {
   this.name = 'Angular 2';
  }
}

bootstrap(HelloWorldComponent);

The @Component annotation is all you need to to turn a class into a component. The selector property defines a name of the tag that represents this component in the HTML file. The template property defines the HTML to render. In this example the value of the variable name will be evaluated and inserted in the greeting using Angular binding.

7. Start your http server by entering http-server in the command line from your project directory and enter http://localhost:8080 in your Web browser you should see a Web page that reads Hello Angular 2! Here’s how it’s rendered in my Chrome browser with Developer Tools panel open:

As you see the TypeScript compiler was downloaded as a part of your application and the transpiling of the code was done on the fly.

In this simple example I didn’t install any TypeScript related tool to keep this example IDE-agnostic. But we do use IDEs and additional install of the tsd (type definition manager) and DefinitelyTyped library would be required as well so the context-sensitive help for your code and all third-party JavaScript libraries would be available.

I like the fact that JSPM and SystemJS are written by the same developer (Guy Bedford). With these tools the configuration process is automated, modules of different formats are seemlesly loaded, TypeScript is automatically transpiled, duplicate dependencies are not being loaded, and we can can get dependencies from multiple repositories. All this comes at a price of a couple of seconds delay before you see your page loaded in a browser.

JavaScript developers are spoiled by seeing their latest code changes deployed and rendered instantaneously. Coming out of a Java project that required minutes to see my code changes in action, I can live with these extra couple seconds. But opening the configuration files auto-generated by JSPM still gives me light goose bumps. There is too much stuff in there. Again, that Java project had Maven build scripts with thousands lines of code, so I can live (for now) with 300 lines in config.js in a Hello World project, but the search of the configuration holly grail continues…

Manning opened the MEAP program for our upcoming book “Angular 2 Development with TypeScript”, where JSPM, SystemJS and TypeScript are covered in greater details.

JavaScript is the language of the Web. There is no other language that can run literally on any old or new device connected to the Internet. On the other hand, there are dozens of languages that compile (a.k.a. transpile) to JavaScript. Why not just writing JavaScript applications in JavaScript? Let me start with analogy with Assembly.

Programs written in a particular flavor of Assembly language run on any device that have a CPU that understand it. See the shortcoming comparing to JavaScript? An Assembly program can’t run on any device, but on any device with a specific CPU architecture. Still, why not writing all the code for a specific platform in Assembly? Why use Java, C#, Python or C++?

We want to be productive. Vast majority of the programmers want to be as far as possible from the bare bone metal. Let compilers and virtual machines convert our programs to the machine code.

We want to be productive in writing JavaScript as well.

Compilers convert the source code into a byte code or a machine code. Transpilers convert a source code of a program in one language into a source code in another one.

You can think of any programming language (other than a machine code) as a syntactic sugar added on top of a another language. While compilers just dissolve all this sugar, transpilers dissolve only a part of it.

Last year I was experimenting with the Dart language. It has a nice syntax (easy for Java and C# developers), which transpiles to to JavaScript. I like Dart, but it requires a special browser with a VM during development. The other negatives are that Dart code transpiles into a difficult to read JavaScript and doesn’t offer easy interoperability with JavaScript frameworks that coexist with the Dart code in most of the applications.

TypeScript was designed by Anders Hejlsberg who also created C#, Delphi, and Turbo C++. TypeScript is a superset of JavaScript, which means that simply renaming existing .js into a .ts file will make it a valid JavaScript code. This is almost always the case except the cases described in this blog.

The TypeScript compiler tsc is actually a transpiler that generates easy to read JavaScript. TypeScript can be compiled into the ES#, ES5, or ES6 flavor of JavaScript, which is a simple option on the command line. You can run tsc in a so called watch mode, so it watches your files for changes and automatically compiles them as soon as you save the file.

Currently I use TypeScript for writing code that uses two frameworks by Google: Angular 2 (it’s written in TypeScript as well) and Polymer.

These are some reasons for writing JavaScript code in TypeScript:

* TypeScript supports types. This allows the TypeScript compiler help developers in finding and fixing lots of errors during development before even running the app.

* Creators of TypeScript follow the ECMAScript 6 standard,and TypeScript 1.6 already supports more than a half of the ES6 syntax. Also TypeScript enriches ES6 by adding types, interfaces, decorators, class member variables (fields), generics, and the keywords, public and private (well, private is not what some might think). See the roadmap of TypeScript.

* TypeScript interfaces allow to declare custom types that will be used in your application. Interfaces help in preventing errors caused by using the objects of wrong types in your application. This feature will be dear to the hearts of Java and C# developers although TypeScript interfaces can be use not only with the implements keyword, but used for presenting object types in a special way.

* The ability to have great IDE support is one of the main advantages that TypeScript has to offer. IDEs as well as some text editors offer great context-sensitive help. The code refactoring of TypeScript is done by IDEs whereas with JavaScript it has to be done manually.

* There is a library DefinitelyTyped that includes hundreds of type definitions files for TypeScript and allows IDEs to perform type checking and offer context-sensitive help while using APIs of literally all JavaScript frameworks.

* The generated JavaScript code is easy to read and looks as a hand-written code. Even though you can generate so called source maps that allow you to debug the TypeScript code inside the browser, you can easily read generated JavaScript and find the corresponding lines in your TypeScript program.

* TypeScript comes with a separate static code analyzer, and several IDEs or text editors already use it (e.g. WebStorm, Atom, Sublime Text, Visual Studio Code, Visual Studio 2015 et al.)

Anyway, today TypeScript is my language of choice for writing the source code for Web browsers. I’m planning to write a couple of more blogs introducing TypeScript syntax. If you want to play with TypeScript, visit http://www.typescriptlang.org.

If you’re a Java developer who kept postponing learning JavaScript till better times, the time is now. You can ease into the JavaScript world via the door marked “TypeScript”.

If you’re planning to work with Angular 2 and want to see how to use TypeScript with this framework, our upcoming “Angular 2 Development with TypeScript” book may come handy.