Angular 2 application using Visual studio 2015

              As we know between Angular 1.x.x and Angular 2.x.x has a huge difference . Although Angular 2 has an upgrade of Angular 1 but it has a lots of differences. Angular 2 is a complete rewrite of Angular 1.

              So before creating any angular 2 application we need to first configure the environment.Angular 2 application is a dependent of lots of packages and we manage this packages by npm.

              So we will divide the complete blog into two parts.In first part we will cover on set up/configure the system for angular 2 application and in the second part we will create our first angular 2 application using visual studio 2015.

Part 1:
These are the steps to set the environment to develop Angular 2 application:

Step 1: Required IDE - Visual Studio 2015(update 3). 

Step 2: Download and Install NodeJS from https://nodejs.org/en/download/  (select .msi based on system configuration). This helps in installing packages or dependency files for our application through npm.

Step 3: Create a new Project for angular application say ‘Angular2Demo. Now we need to add the files systemjs.config, tsconfig.json, typings.json, package.json file in this project.

package.json: This file lists packages or dependency files required by our application. For details you can refer https://angular.io/docs/js/latest/quickstart.html

tsconfig.json:This file contains configuration settings of typescript compiler.For details you can refer    https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig

typings.json:This file contains the typescript definition files.

systemjs.config.js: This file contains System Configuration for Angular 2 application.

You can get the content of above four files from this link:  https://angular.io/docs/js/latest/quickstart.html.

But for quick start, I have placed the content of files here

Content of Package.json file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

{ "name": "angular2demo", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/http": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.1", "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.11", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "typescript": "^1.8.10", "typings": "^1.0.4" } }

Content of tsConfig.json file:

1 2 3 4 5 6 7 8 9 10 11 12

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } }

Content of typings.json file:

1 2 3 4 5 6 7

{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160317120654", "jasmine": "registry:dt/jasmine#2.2.0+20160505161446", "node": "registry:dt/node#4.0.0+20160509154515" } }

Content of systemjs.config.js file:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for thing
    var map = {
        'app': 'src/app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: '.mainjs', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    };
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

    Step 4 :

 From command prompt, navigate to project folder ‘Angular2Demo' which contains package.json file and execute the command npm install. On successful installation, two folders i.e, node_modules, typings folder will be created and contains the dependent modules required for angular 2 application.

Now we finish the set up for our angular 2 application . Now we will create our first application in angular 2 . Wow so interesting.

Part 2:

Step 1:

 Add a html file in our project Angular2Demo and name it as 'index.html'. Then add the following content.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<html> <head> <title>Angular 2 Sample</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 1. Load libraries --> <!-- 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('src/app/main').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>

I have added our custom angular directive <my-app> under <body> tag. The definition for this tag or say Directive will be written in Component and placed in typescript file (i.e, file with .ts as extension).

Now, the content of this tag is "Interesting one…" which will be displayed on the browser until the actual definition is loaded.

Step 2:
Then create the proper folder structure 'src/app' inside our project Angular2Demo.

Note :
Just want to add few points about 'app' folder.
If you see systemjs.config.js file , then you will see below lines of code

 // Map tells the System loader where to look for thing
    var map = {
        'app': 'src/app',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };

So as per your app folder structure you have to mention same structure in systemjs.config.js file  as well .
In the component, when we reference the path as ‘@angular/core’, it will map the path to ‘node_modules/@angular/core’.

Step 3:

Let us create our First Component and save the file with .ts as extension. For a file containing Component, the standard naming convention is someName.component.ts. Let us name our file as 'app.component.ts' and place it under 'app' folder . Add the below content in component file.

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '
Hello World, Welcome to Angular2 application'

})

export class AppComponent {
   
}

Step 4:
Now let us bootstrap or initialize our root Component i.e AppComponent.Now we will create 'main.ts' under same app folder.
Add the below content in main.ts file.

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppComponent)

Step 5:

So as of now we have created files index.html, app.component.ts, main.ts file.

As this main.ts file contains initialization code, we add it's reference in our index.html file as System.import(‘src/app/main’),

And as the System.import is defined in systemjs.config file, For this reason we have referenced the systemjs.config.js file in index.html file.

Step 6 :

 Now its time run the application. So you can directly run the application by setting the Index.html as default page. Or you can run the application by npm start command.
 On successfully  you will get the below output.

I am coming with some interesting blogs . Please write yours comments.