Angular Typescript Hello World Example – Angular 2

Hello World example with angular 2 and typescript. We will show you how to build an app with angular 2 and typescript. (With Images)

angular typescript hello world example 1
angular typescript hello world example 1

Technologies used:

  • Angular 2.X.
  • Typescript Compiler.
  • npm package manager (you need to install nodeJS, it’s easy : ) )

npm install on Mac Angular typescript Mac npm install

npm install on Windows Angular typescript Windows npm install

npm install on Linux Angular typescript Linux npm install

 

A step by step tutorial, you can find the code source at the end of this tutorial.

Part -1-

  • Create your project folder and give it a name e.g.: hello-world-angulartypescript.com
  • Then create an app folder inside it.
  • Add an index.html file in the root folder; this file is the main app.
angular typescript hello world project structure 1
angular typescript hello world project structure 1
  • Inside the app folder add two files: main.ts and app.component.ts
angular typescript hello world project structure 2
angular typescript hello world project structure 2
  • Go back to our root folder and add a new file: package.json
angular typescript hello world project structure 3
angular typescript hello world project structure 3

 

Inside this file we declare our dependencies and we can then install it with the npm command from the Git-Bash or another terminal.

angular typescript hello world project install dependencies
angular typescript hello world project install dependencies

 

  • Let’s install now our project dependencies. it’s very easy : )

Call the terminal from your project root folder (or use another terminal/command line)

With npm install that’s all, wait a little because the download and the install can take some minutes.

angular typescript hello world project npm install
angular typescript hello world project npm install

After you run the command npm install, now a new folder called node_modules is added to our project structure, this folder contains the dependencies.

  • It’s time to configure the typescript.

Typescript: is the compiler used to convert all .ts files to JavaScript files so the Browsers they can understand our code. We need to create in our root folder a file called: tsconfig.json

First we add a file called tsconfig.json:

angular typescript hello world project tsconfig
angular typescript hello world project tsconfig

This file tells typescript compiler what to do.

angular typescript hello world project tsconfig json
angular typescript hello world project tsconfig json

 

Part -2-

Let’s write our hello-world Component.

Angular 2 is based on components and according to the new Angular 2 approach, we recommend to create or write small components, this will allow us to reuse them in other components in our project.

  • Write the hello-world component code inside this file “app/app.component.ts”.
  • Bootstrap the app from this file “app/main.ts”.
  • Now the main app is the “index.html” file.

app.component.ts

 import  {Component} from  'angular2/core';

@Component({
selector: 'hello-world',
template: '


<h2>Hello World From www.angulartypescript.com</h2>




<h2>Hallo</h2>


'
})
export class AppComponent {

//here we can declare our properties and application logic

}

Now we have our component, to be able to use it in our application we need to export it.

Once the component is exported we can then import it.

We will import this module in the main.ts file.

Let’s see how this mechanism works:

  • Everything in angular 2 is modularized:

Each file (as app.component.ts ) is dedicated to do a specific thing (e.g. print hello world)

  • A file exports a Component with the name of the Class. ( e.g. AppComponent )
  • The export action turns our app.component.ts into a Module
  • In ts we can now import the module to our application.

main.ts : to be able to launch the application ( launcher )

 
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

As shown above we have imported our component “AppComponent” to the main.ts file.

We need more things from angular 2, so if you need something from angular 2 just go and import it. Everything in angular 2 is modular and can be imported easily : )

We have already imported the angular 2 bootstrap in our main.ts (ask angular to run the app in the Browser)

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

index.html : here we import needed files and we write the code to launch our app

angular 2 typescript hello world project index html

angular typescript hello world project index html
angular typescript hello world project index html

1) Load the Js needed libraries e.g.
…check index.html for the full list

<script src="./node_modules/angular2/bundles/angular2-polyfills.js"></script>


2)

 
         //Configure the SystemJS : this API allow us to load JS files.
  <script>
   			 System.config({
   			     packages: {
    		        app: {
     		           format: 'register',
      		          defaultExtension: 'js'
      			      }
      			  }
    		});
	//Import the main app (it’s main.ts but we just need the main to do the import)
	
		System.import('app/main').then(null, console.error.bind(console));
   </script>
	

3 ) add our app to the BODY

    
	<hello-world>Loading...</hello-world>
	

Now we run our app, as you may already know we have a start command in our package.json (we can run npm start because it’s already declared in our package file)

 

angular typescript hello world project ts to javascript
angular typescript hello world project ts to javascript

See the result in the Browser :

 

angular typescript hello world project demo 1
angular typescript hello world project demo 1

Try to add a new tag e.g. <h2> </h2>tag with Hallo or something else and see what happens on the Browser.

TypeScript compiler and lite server they keep the eyes on new changes made to our files. When they detect something new they compile the files and they print the new results on the Browser.

angular typescript hello world project demo 2
angular typescript hello world project demo 2

Download – Hello world angulartypescript.com – Code Source