Card

app/app.config.js

@@ -0,0 +1,21 @@
+'use strict';
+
+angular.module('myApp').config([
+  '$locationProvider',
+  '$routeProvider',
+  function config($locationProvider, $routeProvider) {
+    $locationProvider.hashPrefix('!');
+
+    $routeProvider
+      .when('/vehicles', {
+        template: '<vehicle-list></vehicle-list>'
+      })
+      .when('/vehicles/:vehicleId', {
+        template: '<vehicle-detail></vehicle-detail>'
+      })
+      .when('/cartform', {
+        template: '<cart-form></cart-form>'
+      })
+      .otherwise('/vehicles');
+  }
+]);

app/app.css

@@ -1,25 +1,3 @@
-/* app css stylesheet */
-
-.menu {
-  list-style: none;
-  border-bottom: 0.1em solid black;
-  margin-bottom: 2em;
-  padding: 0 0 0.5em;
-}
-
-.menu:before {
-  content: "[";
-}
-
-.menu:after {
-  content: "]";
-}
-
-.menu > li {
-  display: inline;
-}
-
-.menu > li + li:before {
-  content: "|";
-  padding-right: 0.3em;
+body {
+  padding-top: 20px;
 }

app/app.module.js

@@ -0,0 +1,12 @@
+"use strict";
+
+// define the myApp module
+let myApp = angular.module("myApp", [
+  // ...which depends on the `vehicleList` module
+  "ngRoute",
+  "ngMessages",
+  "vehicleDetail",
+  "vehicleList",
+  "cartForm",
+  "ngMaterial"
+]);

app/components/cart-form.component.js

@@ -0,0 +1,24 @@
+"use strict";
+
+angular.module("cartForm").component("cartForm", {
+  controllerAs: "vm",
+
+  templateUrl: "components/cart-form.template.html",
+
+  controller: function($scope) {
+    let vm = $scope;
+    vm.master = {};
+
+    vm.update = function(user) {
+      vm.master = angular.copy(user);
+    };
+
+    vm.reset = function() {
+      vm.user = angular.copy(vm.master);
+    };
+
+    vm.state = [{ state: "New York" }, { state: "New Jersey" }];
+
+    vm.reset();
+  }
+});

app/components/cart-form.module.js

@@ -0,0 +1,3 @@
+"use strict";
+
+angular.module("cartForm", ["ngRoute", "ngMessages", "ngMaterial"]);

app/components/cart-form.template.html

@@ -0,0 +1,125 @@
+<div>
+    <form name="cartForm" class="css-form">
+
+        <!-- USERNAME FORM & VALIDATION -->
+        <md-input-container>
+            <label>
+                Name:
+            </label>
+            <input aria-label="name" matInput type="text" ng-model="user.name" name="uName" required />
+        </md-input-container>
+
+        <span ng-hide="cartForm.uName.$pristine">
+            <div ng-messages="cartForm.uName.$error" style="color:red" role="alert">
+                <div ng-message="required">Please enter your name.</div>
+            </div>
+        </span>
+
+
+        <!-- EMAIL FORM & VALIDATION -->
+        <md-input-container>
+            <label>
+                E-mail:
+            </label>
+            <input aria-label="email" type="email" ng-model="user.email" name="uEmail" required />
+
+            <span ng-hide="cartForm.uEmail.$pristine">
+                <div ng-messages="cartForm.uEmail.$error" style="color:red" role="alert">
+                    <div ng-message="required">Please enter your email.</div>
+                </div>
+            </span>
+        </md-input-container>
+
+
+        <!-- ADDRESS FORM & VALIDATION -->
+        <md-input-container>
+            <label>
+                Address:
+            </label>
+            <input aria-label="address" type="address" ng-model="user.address" name="uAddress" required />
+
+            <span ng-hide="cartForm.uAddress.$pristine">
+                <div ng-messages="cartForm.uAddress.$error" style="color:red" role="alert">
+                    <div ng-message="required">Please enter your address.</div>
+                </div>
+            </span>
+        </md-input-container>
+
+
+        <!-- ZIPCODE FORM & VALIDATION -->
+        <md-input-container>
+            <label>
+                Zipcode:
+            </label>
+            <input type="zipcode" ng-model="zipcode.email" name="uZipcode" required/>
+
+            <span ng-hide="cartForm.uZipcode.$pristine">
+                <div ng-messages="cartForm.uZipcode.$error" style="color:red" role="alert">
+                    <div ng-message="required">Please enter your zipcode.</div>
+                </div>
+            </span>
+        </md-input-container>
+
+
+        <!-- CITY FORM & VALIDATION -->
+        <md-input-container>
+            <label>
+                City:
+            </label>
+            <input type="city" ng-model="city.email" name="uCity" required />
+
+            <span ng-hide="cartForm.uCity.$pristine">
+                <div ng-messages="cartForm.uCity.$error" style="color:red" role="alert">
+                    <div ng-message="required">Please enter your city.</div>
+                </div>
+            </span>
+        </md-input-container>
+
+        <!-- STATE OPTIONS -->
+
+        <md-input-container>
+            <label>State:</label>
+            <md-select ng-model="user" placeholder="Select a state">
+                <md-option ng-value="user" ng-repeat="user in state">{{ user.state }}
+            </md-select>
+        </md-input-container>
+
+
+        <!-- GENDER FORM & VALIDATION -->
+        <br/>
+        <label aria-label="gender">
+            Gender:
+        </label>
+        <md-checkbox>
+            <label>
+                Male
+            </label>
+            <!-- <input type="checkbox" ng-model="user.gender" value="male" /> -->
+        </md-checkbox>
+
+        <md-checkbox>
+            <label>
+                Female
+            </label>
+            <!-- <input type="checkbox" ng-model="user.gender" value="female" /> -->
+        </md-checkbox>
+
+        <br/>
+
+
+        <!-- AGREE FORM & VALIDATION -->
+
+        <label> I agree:
+            <input type="checkbox" ng-model="user.agree" name="userAgree" required />
+        </label>
+
+        <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
+
+
+        <!-- RESET AND SUBMIT BUTTONS -->
+        <input type="button" ng-click="reset(form)" value="Reset" />
+        <input type="submit" ng-click="update(user)" value="Submit" />
+
+    </form>
+
+</div>

app/components/vehicle-detail.component.js

@@ -0,0 +1,19 @@
+'use strict';
+
+// Register `vehicleDetail` component, along with its associated controller and template
+angular.
+  module('vehicleDetail').
+  component('vehicleDetail', {
+    controllerAs: 'vm',
+    templateUrl: 'components/vehicle-detail.template.html',
+    controller: ['$http','$routeParams',
+      function VehicleDetailController($http, $routeParams) {
+
+        $http.get('./vehicles.json' )
+                .then(res => {
+                    this.vehicle = res.data[$routeParams.vehicleId]
+                    console.log('CURRENT', this.vehicle)
+                })
+      }
+    ]
+  });

app/components/vehicle-detail.module.js

@@ -0,0 +1,6 @@
+'use strict';
+
+// Define the `vehicleDetail` module
+angular.module('vehicleDetail', [
+    'ngRoute'
+  ]);

app/components/vehicle-detail.template.html

@@ -0,0 +1,25 @@
+<img ng-src="{{vm.vehicle.imageURL}}" class="vehicle" />
+
+<h1>{{vm.vehicle.make}} {{vm.vehicle.model}}</h1>
+
+<p>{{vm.vehicle.description}}</p>
+
+<ul class="specs">
+  <h4>Details</h4>
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">Year</th>
+        <th scope="col">Color</th>
+        <th scope="col">Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td scope="row">{{vm.vehicle.year}}</td>
+        <td scope="row">{{vm.vehicle.color}}</td>
+        <td scope="row">{{vm.vehicle.type}}</td>
+      </tr>
+    </tbody>
+  </table>
+</ul>

app/components/vehicle-list.component.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('vehicleList').component('vehicleList', {
+  controllerAs: 'vm',
+
+  templateUrl: 'components/vehicle-list.template.html',
+
+  controller: function VehicleController($scope, $http) {
+    let vm = $scope;
+
+    vm.orderProp = 'year';
+    vm.vehicles = [];
+
+    $http.get('./vehicles.json').then(result => {
+      vm.vehicles = result.data;
+    });
+  }
+});

app/components/vehicle-list.module.js

@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `vehicleList` module
+angular.module('vehicleList', []);

app/components/vehicle-list.template.html

@@ -0,0 +1,39 @@
+<div class="container-fluid">
+  <mat-grid-list cols="2" rowHeight="2:1">
+    <!--Sidebar content-->
+    <p>
+      Search:
+      <input ng-model="vm.query" />
+    </p>
+
+    <p>
+      Sort by:
+      <select ng-model="vm.orderProp">
+        <option value="make">Make</option>
+        <option value="year">Year</option>
+      </select>
+    </p>
+</div>
+<md-content>
+  <div flex-xs flex-gt-xs="50" layout="row" >
+    <md-card>
+      <mat-grid-title ng-repeat="vehicle in vehicles | filter: vm.query | orderBy: vm.orderProp " class="thumbnail">
+        <a href="#!/vehicles/{{ vehicle.id }}" class="thumb">
+          <img ng-src="{{ vehicle.imageURL }}" class="md-card-image" alt="Washed Out">
+        </a>
+        <md-card-title>
+          <md-card-title-text>
+            <a href="#!/vehicles/{{ vehicle.id }}">{{ vehicle.make }} {{ vehicle.model }}</a>
+          </md-card-title-text>
+        </md-card-title>
+        <md-card-content>
+          <p> {{ vehicle.description }} </p>
+        </md-card-content>
+        <mat-grid-title/>
+    </md-card>
+    <div/>
+    <md-content/>
+    <div>
+    </div>
+    </mat-grid-list>
+  </div>