About Angular

Angular is JavaScript framework, which is helps, the binds HTML, UI with a Java Script object. It is binding framework. Angular 2 and Typescript are bringing true object oriented web development to the main stream, in a syntax that is strikingly close to Java.

What is Node?

Node.js is an open source, cross-platform runtime environment for developing server-side and networking application. Node.js application is written in JavaScript. It can be run within the Node.js runtime on OS, Linux, Windows.

First you go and click on the given link https://nodejs.org/en/download/ to install the Node.js.

Before open the Node.js command prompt first we go to project so we can right click on the project and “Open Folder in file Explorer” as show in the below imager.

So go to run and type”Node.js command prompt” as shown in the below image.

Then Node.js command prompt is open “cd “and then pastes “title bar”. Write to

command window as “cd install”.  It will show in below image.

TypeScript

First you go and click on the given link https://www.microsoft.com/en-us/download/details.aspx?id=48593  to install the TypeScript .

TypeScript is a superset of JavaScript but like Java it allows you to define new types. Declaring variables with types rather than the generic var opens the door to new tooling support, which you will find to be a great productivity enhancer. TypeScript comes with a static code analyzer, and as you enters code in your TypeScript-aware IDE. you’re guided by context sensitive help suggesting the available methods in the object or types of the function argument. If you accidentally use an incorrect type, the IDE will highlight the erroneous code.

Even if your TypeScript application uses a third-party library written in JavaScript, you can install a type definition file (having the extension .d.ts), containing type declarations for this library. Type declarations for hundreds of popular JavaScript libraries are freely available, and you can easily install them with Typings, a TypeScript Definition Manager. Imagine that you want to use jQuery (written in JavaScript) from your TypeScript code. The type-definition files for jQuery will contain declarations (with types) of all jQuery APIs so your IDE can prompt you with which types to use, or highlight any

Erroneous code

It will show below image. 

If do you have an old VS 2015 than also install typing.

Let’s create a simple project to show “hello world”.

Step 1. 

When you click on the “File”, a new window will be open. After that first we need to

select “New”. Then select the “Web Site”. It will show below image.

Step 2.

When you have to click on the “Web Site”. It will not show the “ASP.NETCore Web

Application”. Enter the project name and location. It will show below image.

Step 3

When you click on the ok, a new window will be open. After that we need to select

“Get ASP.NET 5 RC”. Then click ok. It will show in below image.

Step 4

When you click ok after that we need to select “DotNetCore 1.0.0…exe” then run. It

will show in below image.

Step 5

When you click on the “run”, a new window will be open. After that we need to

select “Install”. Then select the “Web Site”.

Step 6

After installing the “DotNetCore” it will show in your application list. After that select

the “ASP.NETCore web Appication”. And enter your project name. It will be show in

below Image.

Step 7

When you click on the ok, a new window wills open. Then select the “Web

Application”. It will show in below image.

1. Create and configure the project.

2. Create the project folder.

3. Create configuration files.

Our Angular project needs several configuration files:

1. Tsconfig.json: defines how the TypeScript compiler generates JavaScript from the

Project files.

2. Package.json: identifies npm package dependencies for the project.

3. Systemjs.config.js: provides information to a module loader about where to find application modules, and registers the entire necessary package. It also contains other package that will be needed by later documentation examples.

Tsconfig.json

Typescript is a superset of JavaScript that compile to clean JavaScript output. We are going to install typescript, which we will use to compile our typescript into the JavaScript. We need to create a tsconfig.json file. Andwrite the code, it will show in below.

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

Package.json

The main field is a module ID that is the primary entry point to your program. Now

we need to create “package.json” file. And copy the code, it will show in below.

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

Systemjs.config.js

Once systemjs has loaded in the project, configuration can be set on Systemjs by using the configuration function “systemjs.comfig.js”. This is a helper function which normalizes configuration and set configuration property on the systemjs instance. We also need to create a”systemjs.config.js file and copy the code, it will show in below.Web pack is bundling everything into a single file, we only need to include one bundle.js file and copy the Code, which is given below.

 * 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 tells the System loader where to look for things
        map: {
            // 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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.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:  ‘Main',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Component

Add a new file named component.ts to the component folder. The next thing we

are going to do is to import our dependencies. In this case, we just need to import

Component from @angular/core. We will import the appropriate dependencies.

And copy the Code, which is given below

import { Component } from'@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>hello world</h1>'
})
exportclass AppComponent { }

Module

Add a new file named “module.js” to the module folder and copy the Code, which is given below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from '../Component/Component';
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
exportclass AppModule { }

Startup

The first thing we need to do to bootstrap our application is to include the necessary

resources into our “masterpage.html” file. Then create a “Startup” folder. Inside the

startup folder we create a “startup.js” file and code is given below.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from '../Modules/Module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

UI page

Add a new file named “MasterPage.html” to the UI page folder. And copy the Code,

which is given below.

In MasterPage you add the proper path of “node modules”as will as “defaultjs”.

<html>
<head>
    <title>Angular QuickStart</title>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1">
 
    <!-- 1. Load libraries -->
    <!-- Polyfill for older browsers -->
    <scriptsrc="../../node_modules/core-js/client/shim.min.js"></script>
    <scriptsrc="../../node_modules/zone.js/dist/zone.js"></script>
    <scriptsrc="../../node_modules/reflect-metadata/Reflect.js"></script>
    <scriptsrc="../../node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <scriptsrc="../../systemjs.config.js"></script>
    <script>
        System.config({
            "defaultJSExtensions": true
        });
      System.import('../../Startup').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>

OUTPUT

In the url you write the “UI/MasterPage.html”. Then after it will show the “hello

world”.

Also see one most promising video on Learn Angular 2.0 step by step.