Posts

6. login.component.html

<form #f="ngForm" (ngSubmit)="onLoginFormSubmit(f.value)">   name:<br>   <input type="text" name="userName" ngModel>   <br>   password:<br>   <input type="password" name="password" ngModel>   <br><br>   <input type="submit" value="Submit"> </form> <div *ngIf="_msgFromServer">   <div *ngIf="_msgFromServer == 'Login Denied'">     <p>{{_msgFromServer}}</p>   </div>   <div *ngIf="_msgFromServer != 'Login Denied'">     <p>{{_msgFromServer}} is logged</p>   </div> </div>

5. login.component

import { Component, OnInit } from '@angular/core'; import { LoginService } from './login.service'; import { User } from './user.model'; @Component({     selector: 'my-app',     templateUrl: 'app/login.component.html',     providers: [LoginService] }) export class LoginComponent implements OnInit {     private _msgFromServer: string;     constructor(private _loginService: LoginService){     }     ngOnInit() {     }     onLoginFormSubmit(formData: any) {         console.log('formData.userName = '+formData.userName);         console.log('formData.password = '+formData.password);         let user = {userName: formData.userName, password: formData.password};         this._loginService.login(user).subscribe(             msg => this._msgFromServer = msg   ...

4. login.service

imports import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import { User } from './user.model'; @Injectable() export class LoginService {     private _endpointUrl: string = "http://127.0.0.1:8080/";     constructor(private _http: Http) {     }     login(user: any): Observable<string> {         var headers = new Headers();         headers.append('Content-Type', 'application/json');         let body = JSON.stringify(user);               let msg = this._http             .post(this._endpointUrl + "user/login", body, { headers: headers })             .map(                 res => {           ...

3. user.model

export class User{     userName: string;     password: string; }

2. app.module.ts

import http module import { HttpModule } from '@angular/http'; import forms module import { FormsModule } from '@angular/forms'; import all the components you have created import { NgModule }      from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { FormsModule } from '@angular/forms'; import { AppComponent }  from './app.component'; import { LoginComponent }  from './login.component'; @NgModule({   imports:      [ BrowserModule, HttpModule, FormsModule ],   declarations: [ AppComponent, LoginComponent ],   bootstrap:    [ LoginComponent ] }) export class AppModule { }

1. Getting Started

Go to https://nodejs.org/en/download/ to download and install NODE js Go to https://github.com/angular/quickstart Clone the project Extract the downloaded Zip file. Go into that directory using node cmd type npm install Once done, open the downloaded project using IDE type npm start