Forward Advance Learning

Angular Components with TypeScript

Now that we can compile TypeScript, it's time to build an app.

We're going to use webpack to bundle all our dependencies, so this can be tiny.

<html>
<head>
<title>Hello World</title>
</head>
<body>
<app></app>
<script src='build/app.js'></script>
</body>
</html>

app.ts

Next we need our bootstrapper object that will start the whole thing. This will look something like this:

import 'core-js/client/shim'
import 'zone.js/dist/zone-node.js'
import 'reflect-metadata'
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

If you have your compiler running you will notice that it fails at this point because it can't find app.component. We'll make this now.

app.component.ts

App.component looks like this. Notice how, instead of ng.core.component, we use the @component decorator. Instead of .Class, we export an actual class.

import {Component} from '@angular/core';
@Component({
selector: 'app',
template: `
<h1>Hello World</h1>
`
})
export class AppComponent { }

tsconfig.json

Now we need to set some Angular specific options for the TypeScript compiler. We use a file called tsconfig.json file to tell TypeScript how to build. Put this in your root directory.

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

Package.json

Finally we need a package.json file to get out dependencies. Do an npm install to download these

{
"name": "angular2-components",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.9",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"typescript": "^1.8.10",
"typings": "^0.8.1",
"webpack": "^1.13.1"
}
}

Exercise - Implement the hello world above

  1. You'll find a typescript starter in the github repo. Download this from the link above.
  2. Now grab your dependencies. Run npm install and all the dependencies defined in package.json will be downloaded.
  3. Now build with by typing webpack at the command line.
  4. You can now open up the index.html file. All being well, you should have a nice hello world.

Extension

Play with the SCSS. If you wish you can look at the SASS course: http://forwardadvance.com/course/sass/

If you manage this. Try to implement a cat component. Create a new component called cat.component.ts. Import it into app.component.js, then try to embed it as a child component of the app.component.