Kick Start with AngularJS 2.0 and Visual Studio

• Download WP.zip - 12.6 MB
• Download WP.rar - 11.3 MB

Proejct Note : please locate your project e.g [C:\Users\b\Desktop\WP\WP] from command prompt then execute the npm install

Introduction

In this article I will demostrate to start with Angular 2.0 using Microsoft TypeScript 2.0 over .NET Framework with Visual Studio 2015.

Background

Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of tools and applications. Visual Studio is an IDE for developing variety of application developed and supported by Microsoft. In this article, I will show you to work with Node.js using the IDE Visual Studio 2015.

Prerequisite

Before we start you need to make sure few following requirements that your system meet.

NodeJS : It is noting but server side javascript. You can download NodeJs setup for your machine from here.

NPM : NPM is kind of resource manager for multiple piece of scripts that may like to work together for single project it provides them environment. You can find npm here.

TypeScript ^2.0 : TypeScript is a programming language and used by Angular 2.0 developer team as core language to work with Angular 2.0 You can download the setup from here.

Visual Studio 2015 with Update 3 is the said to be minimum requirement to work with Node.js application configurations and settings.

Using the code

Now, let get started with building a simple application and launch your first application. In this application we will go through 11 simple steps to launch the application. I have tried to simplify the steps by writting possible details about it. Not in general but it may require specific debugging on your system you may post your comment below.

1) File -> New -> Project -> [Create an Empty Web project from templete]  -> [Click OK and launch Project]

2) Copy the project path and open it in command prompt to do this right click on Solution Explorer and [Open Folder in File Explorer]
    e.g cd C:\Users\b\Documents\visual studio 2017\Projects\StatWorkks\WebApplication1 Or
    cd {Your Path}

3) Check few this to ensure the things are correct so far by running these commands 
    node -v  It should be > v6.x.x
    npm -v    It should be > v4.x.x
    tsc -v    It should be > v2.x.x  

Get update if you find any older version of any of these. If tsc gives an older version then it mean you probably have installed any version of typeScript earlier and may require to update the system variable. To do this go to Computer -> Properties(right click) -> Advance system settings -> Environment variable -> System variable -> path(click edit) then Find the typescript path and update it to latest.

Warning : Change carefully in system variable if you are not sure then know it before any change.

4) Now, go to command prompt and run the following command npm init. Give it a name 'angular2' when ask and accept all the default by hitting enter. Eventually it will adds a package.json file in your project. Include this file in your project be right click. Change the code to the following (remember we could have done this directly by GUI but I proceeded this way to let you explore the way npm usually works). Now, copy and past this code in your just included package.json file 

{
  "name": "angular2",
  "version": "1.0.0",
  "description": "This is demo app",
  "main": "index.ts",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.2",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "@types/jasmine": "^2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10"
  },
  "scripts": {
    "test":
"echo \"Error: no test specified\" && exit 1"
  },
  "author": "ahmad anas",
  "license": "MIT"
}

5) At root directory add typings.json and below code in it( you can also try this with command prompt in same directory execute the command npm i -g typings)

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  },
  "name": "angular2"
}

6) At root directory add tsconfig.json with following code( You can configure this also by  npm install tsconfig)

{
  "compilerOptions": 
  {
    "experimentalDecorators": true,
    "moduleResolution": "node"
  }
}

7) Add index.html and past the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
   
    <!-- 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>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <my-app>
        Loading AppComponent content here ...
    </my-app>
</body>
</html>

8) Now add app folder in root directory and add three files in this app.component.ts, app.module.ts and index.ts
Note : click no if any configuration popups

9) Add the following code in all three relevent files 

app.component.ts

import { Component } from "@angular/core" 

@Component({     
selector: 'my-app',     
template : `<h1>Welcome to Angular 2.0 Application<h1><div>{{ msg }}</div>` 
}) 
export class AppComponent 
{     
    msg: string = "Demo. Thanks You..!!" 
}

app.module.ts 

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from "./app.component"; 

@NgModule({     
imports: [BrowserModule],     
declarations: [AppComponent],     
bootstrap: [AppComponent] 
}) 
export class AppModule 
{
 
}

index.ts 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

10) Add systemjs.config.js at root folder with following codes

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {      // paths serve as alias
            'npm:': 'node_modules/'
        },
        map: { // map tells the System loader where to look for things
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './index.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

11) On the command prompt in same directory execute the command npm install
 

Note : Additional Setting may bother you to set it go to Tool -> Option -> Project and Solution Click on External Web Tools and place $(PATH) before $(DevEnvDir)\{Anything}..

Conclusion 

At the end of this application you must be able to launch you first AngularJs 2.0 Application with Visual Studio 2015. This will be kick and ride must be on. Happy learning, happy coding!