Angular 2 – Hello World

Firends, After introduction of Angular 2. Now we are going to write our first program in Angular 2.

=> Angular Application = AngApp

Refresh:

AngApp contains modules.

Module contains components.

Component conatins 3 parts.

  1. Template
  2. Class or Code
  3. Metadata

We need to install first NPM. You can download it from following URL ‘https://nodejs.org/en/download/’.

Start

Create folder for project.

mkdir firstproject
cd firstproject

Now we need to create following files in our project folder

file name: tsconfig.json

This is configuration file for TypeScript compiler.

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

file name: typings.json

This is used to identify TypeScript definition files in AngApp.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

 

file name: package.json

This file contains packages require in AngApp.

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

Open npm command prompt and use following command to install npm packages.

npm install

If you get some errors then ingnore them.

Prepare project files

mkdir App
cd App

file name: firstproject.component.ts

This file contains code for component.

import {Component} from "angular2/core";

@Component({
   selector: 'my-app',
   template: '<h2>My First Angular 2 App</h2>
{{msg}}
' }) export class AppComponent { msg:string = "Hello World!"; }

file name: firstproject.main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./firstproject.component"

bootstrap(AppComponent);

Move to project folder

cd ..

and create final file

file name: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
     src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js">
     src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js">
     src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js">
     src="https://code.angularjs.org/tools/system.js">
     src="https://code.angularjs.org/tools/typescript.js">
     src="https://code.angularjs.org/2.0.0-beta.6/Rx.js">
     src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js">
    
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}},
        map: { 'app': './app' }
      });
      System.import('app/firstproject.main')
            .then(null, console.error.bind(console));
    
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

To complie and Run your firstproject. Type following command in command prompt

npm start

 

By Vikas Jindal

Advertisements

One thought on “Angular 2 – Hello World

  1. Pingback: Introduction of Angular | Vikas Jindal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s