first commit: basic structure

Author: shiluka

README.md

@@ -0,0 +1,12 @@
+## Setup
+
+### To start server
+1. `cd AngularVehicleApp`
+2. `npm install`
+3. `nodemon server.js`
+
+### To start client
+1. `cd AngularVehicleApp/client`
+2. `npm install`
+3. `npm start`
+

client/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app',
+    template: '<h1> hello vehicles!</h1><vehicle></vehicle>'
+})
+export class AppComponent { }

client/app/app.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { VehicleComponent } from './vehicle.component';
+import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms'; 
+
+@NgModule({
+    imports: [BrowserModule, HttpModule, FormsModule],
+    declarations: [AppComponent, VehicleComponent],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}

client/app/app.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers } from '@angular/http';
+import 'rxjs/add/operator/map';
+
+ @Injectable()
+ export class VehicleService {
+
+     constructor(private http: Http) {} 
+
+     getVehicles() {
+         return this.http.get('/api/vehicle')
+                    .map(response => response.json());
+     }
+
+     addVehicle(vehicle) {
+        var headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        return this.http.post("/api/vehicle", JSON.stringify(vehicle), { headers: headers }) .map(response => response.json());
+     }
+
+     viewVehicle(id) {
+         console.log('in vehicle service' + id);
+         return this.http.get('/api/vehicle/'+id)
+                    .map(response => response.json());
+     }
+
+     removeVehicle(id) {
+         return this.http.delete("/api/vehicles/"+ id)
+                .map(response => response.json());
+     }
+
+ }

client/app/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+var platform = platformBrowserDynamic();
+
+platform.bootstrapModule(AppModule);

client/app/vehicle.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { VehicleService } from './app.service';
+
+@Component({
+    selector: 'vehicle',
+    moduleId: module.id,
+    templateUrl: 'vehicle.html',
+    providers: [VehicleService]
+})
+export class VehicleComponent {
+    vehicles: Array<any>;
+    name: string;
+    specificVehicleName: string;
+
+    constructor(private vehicleService: VehicleService) {
+       vehicleService.getVehicles().subscribe(response => {
+           this.vehicles = response
+       })
+    }
+
+    viewVehicle(id){
+        console.log('vehicle component  with ' + id);
+        this.vehicleService.viewVehicle(id).subscribe(data => {
+            this.specificVehicleName = data.name;
+        });
+    }
+
+    addVehicle(){
+        var vehicle = {
+            name: this.name
+        }
+        this.vehicleService.addVehicle(vehicle)
+            .subscribe(data => {
+                console.log('Success adding' + data)
+                this.vehicles.push(vehicle);
+            })
+    }
+
+    removeVehicle(id) {
+        this.vehicleService.removeVehicle(id)
+            .subscribe(data => {
+                console.log('Success deleting ' + data);
+                
+            })
+    }
+
+}

client/app/vehicle.html

@@ -0,0 +1,15 @@
+<div class="container">
+    <hr>
+    <h3>Enter a vehicle</h3>
+    <input type="text" name="name" [(ngModel)]="name" />
+    <br><br>
+    <button (click)="addVehicle()">Add a vehicle</button>
+</div>
+<div class="vehicles">
+    <li *ngFor="let vehicle of vehicles">{{vehicle.name}}
+        <button (click)="removeVehicle(vehicle._id)">Delete vehicle</button>
+    </li>
+</div>
+<div class="specific">
+    {{specificVehicleName}}
+</div>

client/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "angular-vehicle",
+    "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.1.1",
+        "@angular/compiler": "2.1.1",
+        "@angular/core": "2.1.1",
+        "@angular/forms": "2.1.1",
+        "@angular/http": "2.1.1",
+        "@angular/platform-browser": "2.1.1",
+        "@angular/platform-browser-dynamic": "2.1.1",
+        "@angular/router": "3.1.1",
+        "@angular/upgrade": "2.1.1",
+        "angular-in-memory-web-api": "0.1.13",
+        "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"
+    }
+}

client/systemjs.config.js

@@ -0,0 +1,40 @@
+/**
+ * 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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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.js',
+                defaultExtension: 'js'
+            },
+            rxjs: {
+                defaultExtension: 'js'
+            }
+        }
+    });
+})(this);

client/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "removeComments": false,
+        "noImplicitAny": false
+    }
+}

client/views/detail.ejs

@@ -0,0 +1 @@
+<%=vehicle.name %>

client/views/index.html

@@ -0,0 +1,28 @@
+<html>
+
+<head>
+    <title>Angular Vehicle Application</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <!-- 1. Load libraries -->
+    <!-- Polyfill(s) 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.import('app').catch(function(err) {
+            console.error(err);
+        });
+    </script>
+</head>
+<!-- 3. Display the application -->
+
+<body class="container text-center">
+    <app>Loading...</app>
+</body>
+
+</html>

models/model.js

@@ -0,0 +1,9 @@
+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+var VehicleSchema = new Schema({
+    name: String
+});
+
+var Model = mongoose.model('Vehcile', VehicleSchema);
+
+module.exports = Model;

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "angularvehicle",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "",
+  "dependencies": {
+    "body-parser": "^1.15.2",
+    "ejs": "^2.5.2",
+    "express": "^4.14.0",
+    "mongoose": "^4.6.5",
+    "morgan": "^1.7.0",
+    "path": "^0.12.7"
+  }
+}

routes/api.js

@@ -0,0 +1,52 @@
+var express = require('express');
+var router = express.Router();
+var Model = require('../models/model.js');
+
+router.get('/vehicles/:id', function(request, response) {
+    console.log('getting a vehicle');
+    var id = request.params.id;
+    Model.findById(id, function(err, res) {
+        if (err) {
+            return response.send(err);
+        } else {
+            var vehicle = res;
+            response.json(vehicle);
+        }
+    });
+});
+
+
+router.get('/vehicle', function(request, response) {
+    Model.find({}, function(err, resources) {
+        if (err) {
+            response.send(err).status(404);
+        } else {
+            response.send(resources).status(200);
+        }
+    });
+});
+
+router.delete('/vehicles/:id', function(request, response) {
+    var id = request.params.id;
+    Model.remove({ _id: id }, function(err, resource) {
+        if (err) {
+            return response.send(err);
+        } else {
+            response.send(resource);
+        }
+    })
+});
+
+router.post('/vehicle', function(request, response) {
+    var vehicle = new Model(request.body);
+    vehicle.save(function(err, resource) {
+        if (err) {
+            response.send(err).status(501);
+        } else {
+            response.json(resource).status(201);
+        }
+    });
+});
+
+
+module.exports = router;

routes/index.js

@@ -0,0 +1,8 @@
+var express = require('express');
+var router = express.Router();
+
+router.get('/', function(request, response) {
+    response.render('index.html');
+});
+
+module.exports = router;