<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.21?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/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...</my-app>
</body>
</html>
// Code goes here
/* Styles go here */
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
var ngVer = '@2.0.1'; // lock in the angular package version; do not let it float to current!
var routerVer = '@3.0.1'; // lock router version
var formsVer = '@0.3.0'; // lock forms version
var angular2ModalVer = '@2.0.1';
//map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular' : 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
'@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
'angular2-in-memory-web-api' : 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
'angular2-modal': 'https://npmcdn.com/angular2-modal' +angular2ModalVer
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js'
},
'angular2-modal': { defaultExtension: 'js', main: '/bundles/angular2-modal.umd.js'
},
// Plugins also need mappings.
'angular2-modal/plugins/bootstrap': {
defaultExtension : 'js', main: 'index' },
'angular2-modal/plugins/vex': { defaultExtension: 'js', main: 'index' },
'angular2-modal/plugins/js-native': {
defaultExtension: 'js', main: 'index' }
};
var ngPackageNames =[
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'upgrade',
'forms',
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
map['@angular/'+pkgName]= 'https://npmcdn.com/@angular/' +pkgName +ngVer;
});
// Add package entries for angular packages
ngPackageNames.concat(['router']).forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName]= {
main: '/bundles/' +pkgName + '.umd.js', defaultExtension: 'js'
};
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
map: map,
packages: packages
};
System.config(config);
}) (this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
// main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.modules';
// Extend Observable throughout the app
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {Component} from 'angular2/core';
//import {UserDataService} from './service';
@Component({
selector: 'contacts-list',
template: `
<h3>Online Contacts</h3>
<h3>Contacts</h3>
<div>{{contactName}}</div>
`
})
export class ContactsList {
contactName: string = 'Hi Welcome!!';
}
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeRoutes } from './EmployeeList/employee.routes';
// Route Configuration
export const routes: Routes = [
{
path: '',
redirectTo: '/employees',
pathMatch: 'full'
},
// Add dog routes form a different file
...EmployeeRoutes
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {EmployeeList} from './EmployeeList/employee-list.component';
import { routing } from './app.routes';
import {EmployeeDetailsComponent} from './EmployeeList/employee-details.component';
import {EditComponent} from './EmployeeList/edit.component';
@NgModule({
imports: [
BrowserModule,
ModalModule.forRoot(),
BootstrapModalModule,
HttpModule,
routing,
FormsModule
],
declarations: [ AppComponent, EmployeeList, EmployeeDetailsComponent, EditComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
import { Component, NgModule } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {BrowserModule} from '@angular/platform-browser';
import {Http, Response} from '@angular/http';
import {EmployeeList} from './EmployeeList/employee-list.component'
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
{
"Street": "355 fort",
"State": "Mah",
"Pincode": 400070
}
<div *ngIf="employee && !success">
<table>
<tr>
<td>Id:</td>
<td><label>{{employee.EmployeeId}}</label></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" [(ngModel)]="employee.Name"/></td>
</tr>
<tr>
<td>Department:</td>
<td><input type="text" [(ngModel)]="employee.Department" /></td>
</tr>
<tr>
<td>Street:</td>
<td><input type="text" [(ngModel)]="employee.Address.Street" /></td>
</tr>
<tr>
<td>State:</td>
<td><input type="text" [(ngModel)]="employee.Address.State" /></td>
</tr>
<tr>
<td>Pincode:</td>
<td><input type="text" [(ngModel)]="employee.Address.Pincode" /></td>
</tr>
</table>
<button (click)="SaveEdit()">Save</button>
<button [routerLink]="['/employees']">Cancel</button>
</div>
<div *ngIf="success">
<h2>Edited Successfully</h2>
<button [routerLink]="['/employees']">Back</button>
</div>
import {Component, OnInit} from '@angular/core';
import { ROUTER_DIRECTIVES, ActivatedRoute } from '@angular/router';
import {EmployeeService} from './employeeService';
import { Observable } from 'rxjs/Observable';
import { FormsModule } from '@angular/forms';
import {NgForm} from 'angular2/common';
@Component({
selector: 'employee-Edit',
templateUrl: 'app/EmployeeList/edit.component.html',
providers: [EmployeeService],
directives: [ROUTER_DIRECTIVES],
})
export class EditComponent implements OnInit{
private sub:any;
employee: Employee;
success: boolean = false;
constructor(private employeeService: EmployeeService, private route: ActivatedRoute) {
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
let id = params['id'];
this.employeeService.ShowEmployee(id).subscribe(Employee => this.employee = Employee);
});
}
SaveEdit():void{
this.employeeService.SaveEmployee(this.employee).subscribe(success => {
// refresh the list
this.success = true;
});
}
}
<div *ngIf="Address">
<h2>Address</h2>
<table>
<tr>
<td>Street:</td><td>{{Address.Street}}</td>
</tr>
<tr>
<td>State:</td>
<td>{{Address.State}}</td>
</tr>
<tr>
<td>Pincode:</td>
<td>{{Address.Pincode}}</td>
</tr>
</table>
<a [routerLink]="['/employees']">Back</a>
</div>
import {Component, OnInit} from '@angular/core';
import { ROUTER_DIRECTIVES, ActivatedRoute } from '@angular/router';
import {EmployeeService} from './employeeService';
import { Observable } from 'rxjs/Observable';
import {Employee, Address} from './EmployeeList/Employee';
@Component({
selector: 'employee-details',
templateUrl: 'app/EmployeeList/employee-details.component.html',
providers: [EmployeeService],
directives: [ROUTER_DIRECTIVES],
})
export class EmployeeDetailsComponent implements OnInit{
private sub:any;
private Address: Address;
constructor(private employeeService: EmployeeService, private route: ActivatedRoute) {
}
ngOnInit() {
// Subscribe to route params
this.sub = this.route.params.subscribe(params => {
let id = params['id'];
// Retrieve EmployeeDetails with Id route param
this.employeeService.findAddressById(id).subscribe(Address => this.Address = Address);
});
}
}
<div><h2>{{pageTitle}}</h2></div>
<div>
<table *ngIf='employees' border="1" style="border:solid 1px black">
<thead>
<tr style="border:solid 1px black">
<td>ID</td>
<td>Name</td>
<td>Department</td>
</tr>
</thead>
<tr *ngFor='let employee of employees' style="border:solid 1px black">
<td><label>{{employee.EmployeeId}}</label></td>
<td><label>{{employee.Name}}</label></td>
<td><label>{{employee.Department}}</label></td>
<td><a [routerLink]="['/employee',employee.EmployeeId]">Details</a></td>
<td><button (click)="DeleteEmployee(employee)">Delete</button></td>
<td><a [routerLink]="['/edit',employee.EmployeeId]">Edit</a> </td>
</tr>
<tr *ngIf='addEmployee' style="border:solid 1px black">
<td><input type="text" [(ngModel)]="EmployeeId" /></td>
<td><input type="text" [(ngModel)]="Name" /></td>
<td><input type="text" [(ngModel)]="Department"/></td>
<td><input type="button" (click)="SaveData()" value="Save"/></td>
<td><input type="button" (click)="Cancel()" value="Cancel" /></td>
</tr>
</table>
<input (click)="AddEmployee()" type="button" value="Add" />
</div>
import {Component, OnInit} from '@angular/core';
import {Employee} from './Employee';
import {EmployeeService} from './employeeService';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { FormsModule } from '@angular/forms';
import {NgForm} from 'angular2/common';
@Component({
selector: 'employee-list',
providers : [EmployeeService],
templateUrl: 'app/EmployeeList/employee-list.component.html',
})
export class EmployeeList implements OnInit {
pageTitle : string = 'Employee List';
employees: Employee[];
addEmployee: boolean = false;
newEmployee: Employee = new Employee();
EmployeeId: Number;
Name: string;
Department: string;
edit: boolean = false;
GetEmployee(): void{
this._employeeService.getEmployees().subscribe(employees => this.employees = employees);
};
constructor(private _employeeService : EmployeeService){
}
ngOnInit() : void{
this.GetEmployee();
}
AddEmployee(): void{
this.addEmployee = true;
}
SaveData(): void{
this.newEmployee.EmployeeId = this.EmployeeId;
this.newEmployee.Name = this.Name;
this.newEmployee.Department = this.Department;
this.newEmployee.Address.Street = "125 street";
this.newEmployee.Address.State = "Mah";
this.newEmployee.Address.Pincode = 123;
this.addEmployee = false;
console.log(this.newEmployee);
this._employeeService.AddEmployee(this.newEmployee).subscribe(success => {
// refresh the list
this.GetEmployee();
return true;
},
error => {
console.error("Error saving Employee!"+ error.Message);
});
}
DeleteEmployee(employee):void {
if (confirm("Are you sure you want to delete " + employee.Name + "?")) {
this._employeeService.DeleteEmployee(employee.EmployeeId).subscribe(
data => {
// refresh the list
this.GetEmployee();
return true;
},
error => {
console.error("Error deleting Employee!");
}
);
}
}
Cancel():void{
this.addEmployee = false;
}
}
import { Routes } from '@angular/router';
import { EmployeeList } from './employee-list.component';
import { EmployeeDetailsComponent } from './employee-details.component';
import { EditComponent } from './edit.component';
// Route Configuration
export const EmployeeRoutes: Routes = [
{ path: 'employees', component: EmployeeList },
{ path: 'employee/:id', component: EmployeeDetailsComponent },
{ path: 'edit/:id', component: EditComponent }
];
import {Address} from './Employee';
export class Employee {
Name: string;
EmployeeId : Number;
Department : string;
Address : Address = new Address();
constructor() {
this.Name = "";
this.EmployeeId = 123;
this.Department = "";
}
}
export class Address{
Street: string;
State : string;
Pincode: Number;
constructor() {
this.Street = "";
this.State = "";
this.Pincode = 123;
}
}
[{"Name":"Machine","EmployeeId":106125,"Department":"IT","Address":{"Street":"355 fort","State":"Maharashtra","Pincode":400070}},{"Name":"Jack","EmployeeId":505025,"Department":"Admin","Address":{"Street":"3423 tort","State":"Gujarat","Pincode":34535345}},{"Name":"Candididate","EmployeeId":34564,"Department":"Manufacture","Address":{"Street":"78 street","State":"MP","Pincode":78954}},{"Name":"Zillrtret","EmployeeId":5645656,"Department":"Accounts","Address":{"Street":"355 fortwert","State":"Maharata","Pincode":40076967}}]
import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions, RequestMethod} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Employee, Address} from './Employee'
import 'rxjs/Rx'
@Injectable()
export class EmployeeService{
//include appropriate API url
//public employeeListUrl = 'http://localhost:52467/Employee/EmployeeList';
public employeeListUrl = 'app/EmployeeList/Employee.json';
//public employeeDetailsUrl = 'http://localhost:52467/Employee/EmployeeDetails';
public employeeDetailsUrl = 'app/EmployeeList/address.json'
public employeeAddUrl = 'http://localhost:52467/Employee/EmployeeAdd'
constructor(public _http: Http){
}
getEmployees():Observable<Employee[]>{
return this._http.get(this.employeeListUrl)
.map((response:Response) => <Employee[]> response.json());
}
findAddressById(id):Observable<Address>{
return this._http.get(this.employeeDetailsUrl + '/'+ id)
.map((response:Response) => <Address> response.json());
//var obj = Json.parse(this._http.get(this.employeeDetailsUrl));
}
AddEmployee(employee){
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({
method: RequestMethod.Post,
headers: headers });
let body = employee;
return this._http.post(this.employeeAddUrl, body, headers).map((res: Response) => res.json());
}
DeleteEmployee(id){
return this._http.delete('http://localhost:52467/Employee/Delete/' + id);
}
ShowEmployee(id):Observable<Employee>{
return this._http.get('http://localhost:52467/Employee/GetEmployee/'+ id)
.map((response:Response) => <Employee> response.json());
}
SaveEmployee(employee){
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({
method: RequestMethod.Post,
headers: headers });
let body = employee;
return this._http.post('http://localhost:52467/Employee/Edit', body, headers).map((res: Response) => res.json());
}
}