Angular 2 Slidedeck

angular-slidedeck is neat little repo that allows you to quickly create an angular based slideshow. The content for each slide is a directive and these are loaded by and displayed by the containing slidedeck directive.

This post explores how to convert angular-slidedeck to Angular 2. Additionally I have decided to give TypeScript a go and use Microsoft's new lightweight editor VSCode. I've also used JSPM package manager on the recommendation of a colleague.

Note: I'm a complete newbie when it comes to Angular 2 so the contents of this post may well not be best practice or follow the latest conventions.

Note: developed using Angular 2.0.0 beta 3

This post assumes you have at least read through the Angular 2 Quick Start Guide. I won't be explaining every line of Angular 2 code.

Setup

TypeScript

Before we get started a quick note about TypeScript. Initially developed by Microsoft it is now open source and actively developed on Github. It is a superset of JavaScript that offers features some may consider benefits.

• type checking - the biggy for me.
• classes, modules and interfaces
• intellisense

The Angular 2 team recommends you develop Angular 2 apps in TypeScript. Indeed, Angular 2 itself is wholly written in the language as is the TypeScript compiler.

You will have to decide if the features are worth the overhead of learning Typescript and the extra markup / verbosity required. I'd not used Typescript before, but have enjoyed using it for this small demo.

Note: you don't have to use Typescript, you can use plain (ES5) Javascript if you prefer. However the Angular2 code examples in this series will use Typescript.

Configure TypeScript

Create a new file called tsconfig.json in the root of your project and paste in the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": false,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Type CTRL + SHIFT + B. A message appears telling us that we don’t have a task runner enabled for this project yet. Click “Configure Task Runner” to set up a config file. Update the config file to show the following:

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the program to compile.
    "args": ["app/boot.ts", "app/app.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

If you get stuck, refer back to this guide: https://blogs.msdn.microsoft.com/typescript/2015/04/30/using-typescript-in-visual-studio-code/

Install Packages

Setup JSPM

Install the JSPM CLI.

npm install jspm -g

Configure JSPM.

jspm init

Select the defaults in all cases bar the last where you should choose TypeScript as the transpiler instead of the default, Babel.

This will create a bunch of files for you; but we need to tweak a couple of things.

Open up config.json and add the following:

packages: {
    "app": {
      "main": "boot",
      "defaultExtension": "ts"
    }
  },

The name of the package is 'app' and all files that belong to this package should be in a folder of the same name. The main property points to a file that will be used to boot the application - in this case boot.ts. DefaultExtenstion is set to ts as we are using TypeScript.

Load Packages From JSPM

Open up the command shell and type the following to load our dependencies'

jspm install angular2

This will install angular2 and all required dependencies.

You should now have a packages.json that looks like this:

{
  "jspm": {
    "dependencies": {
      "angular2": "npm:angular2@^2.0.0-beta.3"
    },
    "devDependencies": {
      "typescript": "npm:typescript@^1.6.2"
    }
  }
}

Create Index

Create an index.html file and paste in the following:

    <title>Angular 2 Slidedeck with TypeScript and JSPM</title>
    <meta charset="UTF-8">
    
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- systemJS loader and config -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2-polyfills.min.js"></script>
    <pre><code>&lt;script src="jspm_packages/system.js"&gt;&lt;/script&gt;
    &lt;script src="config.js"&gt;&lt;/script&gt;
    </code>
    </pre>
    <app>
        ... Loading ...
    </app>
<pre><code>&lt;!-- import and run our app --&gt;
&lt;script&gt;
    System.import('app');
&lt;/script&gt;
</code></pre>

Here we are loading **system.js** module loader and then the **config.js** which lists the dependencies and defines our application package. Importantly it points to the **boot.ts** file which will be used to boostrap our app when **System.import('app')** is run.

Importantly we also need to load the angular-2-polyfills script.

boot.ts

This is the file that will bootstrap our Angular 2 application.

import {
  bootstrap
} from 'angular2/platform/browser';

import {App} from './app';

bootstrap(App);

We import the required angular dependencies and then a component called App, which we then bootstrap. This will start our app.

But before we can test this, we need to create the 'App' component.

//app.ts
import {Component} from 'angular2/core';
@Component({
    selector: 'app',
    template: '<h1>Ciao Mondo</h1>'
})
export class App  { }

This very simple app just displays 'Ciao Mondo' in the browser when run. In slighly more detail when Angular2 encounters the selector (element) app in our code it will invoke the app component which will render our template on the page.

Testing Setup

Before we proceed with converting the Angular-Slidedeck let's just check that everything is bootstrapped correctly.

Compiling (Transpiling)

First, we need to transpile our TypeScript into JavaScript. We can do this using the VSCode keyboard shortcut. The blue band at the bottom will show the build status - there should be no errors or warnings. You should now see a .js file sitting alongside both the app.ts and boot.ts files.

CTRL + SHIFT + B

Install http-server

We are going to use the lightweight http-server to serve our site.

npm install -g http-server

http-server

Now browse to http://127.0.0.1:8080/ and all being well, you should have a white screen with the words 'Ciao Mondo' displayed.

Sample Code

The code for this blog post can be found in the following repo.
https://github.com/kildareflare/angular-2-slidedeck

Clone it to you machine then run the following to create a new branch with code as it was at the end of this post.
git checkout -b version0 v0.1

Next Up

In Part Two we will start converting the Angular 1 angular-slidedeck to Angular 2.