Angular2 HelloWorld

2016/6/304 min read

Following is for someone who one to get quick hello world angular2 running, the code is reference from angular2's original quickstart GitHub source code and with additional few udpates, all code shows here are at my Github repository Angular2HelloWorld

File Structure

.
+-- app
|   +-- main.ts
|   +-- app.component.ts
+-- .gitignore
+-- index.html
+-- package.json
+-- styles.css
+-- systemjs.config.js
+-- tsconfig.json
+-- typings.json

Features

HelloWorld Angular2
Runtime TypeScript compiler
One Html example
Css

`index.html`

index.html is the main page, my-app is the section will inject by angular2 code.

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

`package.json`

package.json contains all the dependency modules for this app, just run npm install -d , will install all the npm modules.

{
  "name": "angular2_helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "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.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  },
  "description": "helloworld",
  "repository": "helloworld"
}

`styles.css`

Just a style for this example, later want to try how to use SASS with this hello world structure.

h1 { color: #ffffff; font-family: 'Lato', sans-serif; font-size: 54px; font-weight: 300; line-height: 58px; margin: 0 0 58px; }
body {
    background-color: #333;
}

`systemjs.config.js`

A file from original angular2 quick start example, which bootstrap the angualr2 code.

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

`tsconfig.json`

Typescript config files.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

`typings.json`

Typing script config files.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

`main.ts`

HelloWorld app's main class.

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);

`app.component.ts`

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

`.gitignore`

.gitignore, so you won't check-in extra code to git.

.idea
typings/**
node_modules
jspm_packages
link-checker-results.txt
**/*npm-debug.log.*
*.js
*.js.map
_test-output
_temp

!**/*e2e-spec.js
!karma*.js
!protractor*.js
!systemjs.config.js
!typings/typings.d.ts
!wallaby.js

Get code form github

Now, you can get code as following, first clone and download to your local.

a:\>git clone https://github.com/keke78ui9/Angular2HelloWorld helloAngular2
Cloning into 'helloAngular2'...
remote: Counting objects: 15, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 15 (delta 1), reused 11 (delta 0), pack-reused 0
Unpacking objects: 100% (15/15), done.
Checking connectivity... done.

Then go to the new folder contains the code

a:\>cd helloAngular2

a:\helloAngular2>npm install -d

a:\helloAngular2>npm start

Angular

Angular2 HelloWorld

Features

index.html

package.json

styles.css

systemjs.config.js

tsconfig.json

typings.json

main.ts

app.component.ts

.gitignore