WordPress.com



Angular2 application installation steps

Step 1:

To install Angular CLI, run:

$ npm install -g angular-cli

which will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run:

$ ng version

which should display the version you have installed:

angular-cli: 1.0.0-beta.21

node: 6.1.0

os: darwin x64

Now that you have Angular CLI installed, you can use it to generate your application

Step 2:

Create New Application by execute the following command:

$ng new my-app

after installing navigate to the project folder “my-app”

This creates a new directory with all files you need to get started:

my-app

├── README.md

├── angular-cli.json

├── e2e

│ ├── app.e2e-spec.ts

│ ├── app.po.ts

│ └── tsconfig.json

├── karma.conf.js

├── package.json

├── protractor.conf.js

├── src

│ ├── app

| | ||--student //create the folder

| | | |--ponent.ts //under student folder created new component

| | | |--ponent.html // created the view file for student comp

| | |

│ │ ├── ponent.css

│ │ ├── ponent.html

│ │ ├── ponent.spec.ts

│ │ ├── ponent.ts //the ponent is modified refer step9

│ │ ├── app.module.ts

| | |__ app.routing.ts // this file we need to create refer the step8

│ │ └── index.ts

│ ├── assets

│ ├── environments

│ │ ├── environment.prod.ts

│ │ └── environment.ts

│ ├── favicon.ico

│ ├── index.html

│ ├── main.ts

│ ├── polyfills.ts

│ ├── styles.css

│ ├── test.ts

│ ├── tsconfig.json

│ └── typings.d.ts

└── tslint.json

Step 3:

now navigate to the created folder

cd my-app

Step 4:

run the npm install command to download all dependency node modules,it download based on the package.json

$npm install

Step 5:

now we create simple application it contacin the student registration form fill data and submit.

And next screen shows the submitted data with two option on is create new and another one is download pdf-this will allow used to download the submitted data as pdf formate.

Before start the application install some dependency modlue for pdf generate and form module they are:

npm install @angular/http

npm install @angular/forms

npm install --save jspdf

Step 6:

After install the node_modules now run the application by using the following code

$npm start or $ng serve

once the development completed create the build and deploy in the production server

Step 7:

Routing & Navigation

The Angular Router enables navigation from one view to the next as users perform application tasks.

The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a client-generated view

Router imports

import the router module in the app.module.ts file :

--------------------------------------------------------------------------------

app.module.ts file :

import { BrowserModule } from '@angular/platform-browser';

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './ponent';

import { routing } from './app.routing';

import { StudentComponent } from './student/ponent';

@NgModule({

declarations: [

AppComponent,

StudentComponent

],

imports: [

BrowserModule,

routing,

FormsModule,

HttpModule,

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

------------------------------------------------------------------------------

add the above highlighted code in the app.module.ts

Step 8:

create the app.routing.ts file

it is used to set the url routing

------------------------------------------------------------------------------

app.routing.ts

import { Router,Routes, RouterModule,RouterLink } from '@angular/router';

import { AppComponent } from './ponent';

import { StudentComponent } from './student/ponent';

const appRoutes: Routes=[

{

path: '',

component: StudentComponent

},

];

export const routing = RouterModule.forRoot(appRoutes);

-------------------------------------------------------------------------------

Step 9:

replace the ponent.ts file using the below code :

--------------------------------------------------------------------------------

ponent.ts

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

import { Router, RouterModule,RouterLink } from '@angular/router';

@Component({

selector: 'my-app',

template: ' ',

})

export class AppComponent {

title = 'app';

constructor(private router: Router) {

}

}

--------------------------------------------------------------------------------

Step 10:

create the ponent.ts file and paste the below code:

--------------------------------------------------------------------------------

ponent.ts

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

import { Routes,Router,RouterModule} from '@angular/router';

import * as jsPDF from 'jspdf';

declare let jsPDF;

@Component({

selector: 'my-students',

templateUrl: './ponent.html',

providers: []

})

export class StudentComponent implements OnInit

{

title = 'app';

model: any = {};

showview:boolean=false;

showform:boolean=true;

item:any={};

ngOnInit() {

}

//this addstudent() function used when submit button is clicked

// we show the submitted data and hide the form

addstudent(){

this.showview = true;

this.showform=false;

}

//this create new() function is used when clicking the create new button in subitted view page

//show the form and hide the view

createnew(){

this.showview = false;

this.showform=true;

this.model={};

}

//this printForm() function is used when click the download pdf button

//it will get the data and load in pdf and download the generated pdf

printForm()

{

this.item=this.model;

var doc = new jsPDF();

var i=0;

for(var key in this.item){

doc.text(20, 10 + i, key + ": " + this.item[key]);

i+=10;

}

doc.save('Test.pdf');

}

}

------------------------------------------------------------------------------

Step 11:

create the ponent.html view page and paste the below form and view code

------------------------------------------------------------------------------

ponent.html

Student Registration Form

Name

Father Name

Postal Address

Personal Address

PinCode

Sex

Male

Female

EmailId

DOB

MobileNo

submit to print

Name

{{model.Names}}

Father Name

{{model.Fathername}}

Postal Address

{{model.Postaladdress}}

Personal Address

{{model.Personaladdress}}

PinCode

{{model.Pincode}}

Sex

{{model.Sex}}

EmailId

{{model.Emailid}}

DOB

{{model.Dob}}

MobileNo

{{model.Mobileno}}

Create new

Download Pdf

------------------------------------------------------------------------------

Output screen :

after submit the data it will navigate to view screen:

click the download pdf the view file will be download.

Step 11:

by running the below code the build will generated in the dist folder

$ng build

after running the above code the dist folder will be created and the code will be deployed in dist folder:

copy this files and host in the domain and run this is deployed code so no need to start the npm

just copy and host in the domain the scrpit having all the js in bundle.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download