Angular Hello World Example

Angular 2 Hello World app is a basic example to show how to write your first Angular 2 project.

angular 2 hello world
angular 2 hello world

If you want to setup your environment click here

live example and Resources ( Code source A  > Z ) at the end of the article

angular 2 hello world
angular 2 hello world

we want to create a Tag (component) to show hello world.

build hello world
build hello world

We will create 3 files :

File1 : angular-2-hello-world.component.ts

We create the file that contains our <angular-2-hello-world>loading…</angular-2-hello-world> Tag.

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

/*Angular 2 Hello World Example*/
@Component({
    selector: 'angular-2-hello-world',
    template:`
                <div class="bg-primary">Angular 2 Hello World Example</div>
                <div class="bg-info">i'm a value from the Class : {{iAmVariableFromTheClass}}</div>
             `
})
export class Angular2HelloWorldComponent {
    iAmVariableFromTheClass:string = "Hello World Declaration";
    constructor (){
      this.iAmVariableFromTheClass="Hello World Constructor"; //if you uncomment this the default value will be "Hello World Constructor" : )
    }

}

file 2 :main.ts

 We boostrap our app.

import {Angular2HelloWorldAppComponent} from "./angular-2-hello-world-app.component";
bootstrap(Angular2HelloWorldAppComponent);

file3: index.html

We explain the root file:

  • We include the needed css and js files.
  • We configure the System used to load modules. And we run the app.
  • We call our main app:
     <angular-2-hello-world>Loading Sample...</angular-2-hello-world>
<!DOCTYPE html>
<html>
    <head>
        <!-- We set the base href -->
<script>document.write('<base href="' + document.location + '" />');</script>

<title>Angular 2 Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS file -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<link rel="stylesheet" type="text/css" href="style.css">

    <!-- IE polyfills, keep the order please -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

    <!-- Agular 2 -->
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>

    <!-- Agular 2 Router -->
<script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>
    <!-- Config Agular 2 and Typescript -->
<script>
    System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
    });
System.import('app/main')
    .then(null, console.error.bind(console));
</script>

</head>

<!-- Run the application -->
<body>
    <angular-2-hello-world>Loading Sample...</angular-2-hello-world>
</body>

</html>
<!--
    Copyright 2016 angulartypescript.com. All Rights Reserved.
    Everyone can use this source code; don’t forget to indicate the source please:
    http://www.angulartypescript.com/ 
        -->

all files from here: angular 2 hello world

angular 2 hello world