fourth commit

Esha_Aggarwal/angular/dom_manip/public/src/app/app.component.html

@@ -0,0 +1,26 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{ title }}!
+    <p *ngFor="let i of quotes"> {{ i.name  }}</p>
+  </h1>
+  <button (click)="onButtonClick()" >Click me!</button>
+  <button (click)="onButtonClickParam(5)">Click me!</button>
+  <button (click)="onButtonClickParams(5, 'hello')">Click me!</button>
+  <button (click)="onButtonClickEvent($event)">Click me!</button>
+
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+  </li>
+</ul>
+

Esha_Aggarwal/angular/dom_manip/public/src/app/app.component.ts

@@ -0,0 +1,42 @@
+
+import { HttpService } from './http.service';
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit{
+  title = 'MEAN';
+  quotes: string;
+  constructor(private _httpService: HttpService){}
+  ngOnInit(){
+    this.getQuotesFromService()
+    this.quotes ='';
+  }
+  getQuotesFromService(){
+    let observable = this._httpService.getQuotes()
+    observable.subscribe(data => {
+      console.log("Yay quotes!", data)
+      this.quotes = data['data']
+    })
+  }
+  onButtonClick(): void { 
+      console.log(`Click event is working`);
+  }
+  onButtonClickParam(num: Number): void { 
+      console.log(`Click event is working with num param: ${num}`);
+      let obseravable = this._httpService.postToServer({data: num})
+      obseravable.subscribe(data => console.log('Got the DATA!!', data))
+  }
+  onButtonClickParams(num: Number, str: String): void { 
+      console.log(`Click event is working with num param: ${num} and str param: ${str}`);
+  }
+  onButtonClickEvent(event: any): void { 
+      console.log(`Click event is working with event: ${event}`);
+  }
+
+}
+

Esha_Aggarwal/angular/dom_manip/public/src/app/app.module.ts

@@ -0,0 +1,20 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpService } from './http.service';
+import { HttpClientModule } from '@angular/common/http';
+
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule
+  ],
+  providers: [HttpService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

Esha_Aggarwal/angular/dom_manip/public/src/app/http.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { HttpService } from './http.service';
+
+describe('HttpService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HttpService]
+    });
+  });
+
+  it('should be created', inject([HttpService], (service: HttpService) => {
+    expect(service).toBeTruthy();
+  }));
+});

Esha_Aggarwal/angular/dom_manip/public/src/app/http.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HttpService {
+
+  constructor(private _http: HttpClient){ 
+  }
+  getQuotes(){
+    return this._http.get('/quotes')
+  }
+  postToServer(num){
+    return this._http.post('/quotes', num)
+  }
+}
+
+

Esha_Aggarwal/angular/dom_manip/server.js

@@ -0,0 +1,58 @@
+var express = require("express");
+var app = express();
+var session = require('express-session');
+var bodyparser = require('body-parser');
+var mongoose = require('mongoose');
+var flash = require('express-flash');
+app.use(flash());
+
+app.use(session({
+    secret: 'keyboardkitteh',
+    resave: false,
+    saveUninitialized: true,
+    cookie: { maxAge: 60000 }
+  }));
+
+mongoose.connect('mongodb://localhost/quotes');
+
+app.use(express.static( __dirname + '/public/dist/public' ));
+app.use(bodyparser.json());
+
+var QuotesSchema = new mongoose.Schema({
+    name: {type: String},
+    quote: {type: String},
+}, {timestamps: true})
+
+mongoose.model('Quote', QuotesSchema)
+var Quote = mongoose.model('Quote')
+mongoose.Promise = global.Promise;
+
+
+app.get('/', function(request, response) {
+    response.render('index');
+})
+
+app.get('/quotes', function(req, res){
+    Quote.find({}, function(err, quotes){
+        if(err){
+           console.log("Returned error", err);
+            // respond with JSON
+           res.json({message: "Error", error: err})
+        }
+        else {
+            // respond with JSON
+           res.json({message: "Success", data: quotes})
+        }
+     })
+})   
+
+app.post('/quotes', function(request, response) {
+    var newQuote = new Quote({name:request.body.name, quote:request.body.quote});
+    newQuote.save(function(err){
+        response.redirect('/quotes')
+    })
+})
+
+app.listen(6789, function() {
+  console.log("listening on port 6789");
+})

Esha_Aggarwal/angular/hello_angular/server.js

@@ -18,8 +18,8 @@ app.use(session({
 app.use(flash());
 app.use(express.static( __dirname + '/public/dist/public' ));
 
-app.set('views', path.join(__dirname, '/views'));
-app.set('view engine', 'ejs');
+// app.set('views', path.join(__dirname, '/views'));
+// app.set('view engine', 'ejs');
 
 mongoose.connect('mongodb://localhost/hello');
 mongoose.Promise = global.Promise;