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.

Lab 1:- Learn AngularJS 2.0 step by step


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


Lab 1:- Learn AngularJS 2.0 step by step


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.


Lab 1:- Learn AngularJS 2.0 step by step


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. 


Lab 1:- Learn AngularJS 2.0 step by step


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.


Lab 1:- Learn AngularJS 2.0 step by step


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.


Lab 1:- Learn AngularJS 2.0 step by step


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.


Lab 1:- Learn AngularJS 2.0 step by step


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.


Lab 1:- Learn AngularJS 2.0 step by step


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”.


Lab 1:- Learn AngularJS 2.0 step by step


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.


Lab 1:- Learn AngularJS 2.0 step by step

Step 7

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


Application”. It will show in below image.


Lab 1:- Learn AngularJS 2.0 step by step


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. And write 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.


Lab 1:- Learn AngularJS 2.0 step by step


 * 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


Lab 1:- Learn AngularJS 2.0 step by step


import
{ Component } from
'@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>hello world</h1>'
})
export class 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]
})
export class 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”.


Lab 1:- Learn AngularJS 2.0 step by step


<html>
<head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- 1. Load libraries -->
    <!-- Polyfill 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>
    <!-- 2. Configure SystemJS -->
    <script src="../../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”.


Lab 1:- Learn AngularJS 2.0 step by step


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





  Modified On May-24-2019 09:55:14 PM

Leave Comment