Click here to Skip to main content
13,189,324 members (67,371 online)
Click here to Skip to main content
Add your own
alternative version

Stats

17.9K views
177 downloads
15 bookmarked
Posted 4 Jan 2017

Kick Start with AngularJS 2.0 and Visual Studio

, 10 Jan 2017
Rate this:
Please Sign up or sign in to vote.
This article is intended to deliver a kick start understanding about AngularJs 2.0 and Visual Studio.

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-sourcecross-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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AHMAD ANAS
Software Developer
India India
I am an passionate technology evangelist. I like reading and talks on technology you can join me on twitter or join my small group on WhatsApp for technology activities https://chat.whatsapp.com/F9LLSJVwKiT8GIOaSXb7u5

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionMessage Closed Pin
11-Jan-17 5:52
memberNithya Kk11-Jan-17 5:52 
AnswerRe: Very Good Article Pin
AHMAD ANAS11-Jan-17 18:24
memberAHMAD ANAS11-Jan-17 18:24 
GeneralRe: Very Good Article Pin
Nelek29-Jan-17 10:11
protectorNelek29-Jan-17 10:11 
GeneralRe: Very Good Article Pin
AHMAD ANAS29-Jan-17 18:46
memberAHMAD ANAS29-Jan-17 18:46 
Questionno code for index.ts ? Pin
dxloader10-Jan-17 1:18
memberdxloader10-Jan-17 1:18 
AnswerRe: no code for index.ts ? Pin
AHMAD ANAS10-Jan-17 22:08
memberAHMAD ANAS10-Jan-17 22:08 
Generalre Pin
Et-Cetera6-Jan-17 10:24
memberEt-Cetera6-Jan-17 10:24 
GeneralRe: re Pin
AHMAD ANAS8-Jan-17 18:16
memberAHMAD ANAS8-Jan-17 18:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171016.2 | Last Updated 11 Jan 2017
Article Copyright 2017 by AHMAD ANAS
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid