Update docs with up to date screenshots

Author: infomofo

README.md

@@ -5,6 +5,18 @@ Follow the commit history of this project to learn how to build a yeoman angular
 
 [![Build Status](https://travis-ci.org/infomofo/cordova-angular-md-template.svg?branch=master)](https://travis-ci.org/infomofo/cordova-angular-md-template)
 
+Sample screenshots
+------------------
+
+![A Demo Material-Angular App running in Grunt](docs/images/GruntSlideNav.png)
+![A Demo Material-Angular App running on iOS](docs/images/iPhoneSlideNav.png)
+![A Demo Material-Angular App running on Android](docs/images/AndroidSlideNav.png)
+
+![A Form running in Grunt](docs/images/GruntForm.png)
+![A Form running in Android](docs/images/AndroidFormNumberInput.png)
+![A Form running on iOS](docs/images/iPhoneForm.png)
+
+
 To build a cordova app
 ---------------------
 
@@ -38,6 +50,12 @@ Directory Structure
 * .bower.json - contains the bower dependencies
 * Gruntfile.js - contains the build process for this application
 
+Modifications
+-------------
+
+Additions to the app can be made with the standard [yeoman generator-angular](https://github.com/yeoman/generator-angular)
+commands.  For example, a new route, tab, and controller can be added with the command <code>yo angular:route myroute</code>
+
 Generated files not in git
 --------------------------
 

app/index.html

@@ -55,9 +55,9 @@
 
 <!-- build:js({.tmp,app}) scripts/scripts.js -->
 <script src="scripts/app.js"></script>
-<script src="scripts/router.js"></script>
 <script src="scripts/controllers/main.js"></script>
 <script src="scripts/controllers/about.js"></script>
+<script src="scripts/controllers/myroute.js"></script>
 <!-- endbuild -->
 </body>
 </html>

app/scripts/app.js

@@ -19,6 +19,37 @@ var app = angular
     'ngMaterial'
   ]);
 
+app
+  .config(function($compileProvider){
+    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension):/);
+  })
+  .config(function ($routeProvider) {
+    $routeProvider
+      .when('/', {
+        templateUrl: 'views/main.html',
+        controller: 'MainCtrl'
+      })
+      .when('/about', {
+        templateUrl: 'views/about.html',
+        controller: 'AboutCtrl'
+      })
+      .when('/list', {
+        templateUrl: 'views/list.html'
+      })
+      .when('/form', {
+        templateUrl: 'views/form.html'
+      })
+      .when('/dialog', {
+        templateUrl: 'views/dialog.html'
+      })
+      .when('/tabs', {
+        templateUrl: 'views/tabs.html'
+      })
+      .otherwise({
+        redirectTo: '/'
+      });
+  });
+
 app.run(function ($rootScope, $location, $mdSidenav, $mdToast) {
 
   var searchActive = false;

app/scripts/router.js

@@ -1,9 +1,6 @@
 <md-content class="md-padding" flex layout="column" layout-margin>
   <h3>Ways to display various messages to a user</h3>
 
-  <md-button class="md-fab md-fab-bottom-right" aria-label="Time">
-    <i class="fa fa-clock-o fa-2x"></i>
-  </md-button>
   <section layout="row" layout-align="center center">
     <md-button class="md-raised" style="margin: 1em;" ng-click="showAlertToast('Toasty!')">Toast</md-button>
     <md-button class="md-raised md-primary" style="margin: 1em;" ng-click="showUndoToastPersistent('Toasty!')">Toast with Action</md-button>

app/views/dialog.html

@@ -1,6 +1,6 @@
 <md-content class="md-padding">
   <h3>Various form elements</h3>
-  <md-button class="md-fab md-fab-bottom-right" aria-label="Time">
+  <md-button class="md-fab md-fab-bottom-right md-accent" aria-label="Time">
     <i class="fa fa-clock-o fa-2x"></i>
   </md-button>
 
@@ -14,6 +14,12 @@ <h3>Various form elements</h3>
       <input type="number"/>
     </md-input-container>
   </div>
+  <div layout="row">
+  <md-input-container flex>
+    <label>Textarea input</label>
+    <textarea columns="1" ></textarea>
+  </md-input-container>
+  </div>
   <div layout="row" layout-fill>
     <md-switch aria-label="Switch 1" ng-model="data.cb1">
       Switch 1: {{data.cb1}}

app/views/form.html

@@ -4,21 +4,32 @@ <h1>Hello!</h1>
   </div>
 
   <div class="row marketing">
-    <h4>HTML5 Boilerplate</h4>
+    <h4>Demo App</h4>
     <p>
-      HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
+      This is a demo app testing the use of angular/material widgets in a cordova application container.
     </p>
 
-    <h4>Angular</h4>
+    <h4>How to use this app</h4>
     <p>
-      AngularJS is a toolset for building the framework most suited to your application development.
+      <ol>
+        <li>Clone the repo from infomofo/cordova-angular-md-template</li>
+        <li>Run <code>npm install</code></li>
+        <li>Run <code>grunt</code></li>
+        <li>From there you can run this application in one of three ways:
+          <ul>
+            <li>Run <code>grunt serve</code> to open the application as a standard webpage</li>
+            <li>Run <code>cd cordova; cordova emulate ios</code> to emulate it on an ios simulator running on your machine</li>
+            <li>Run <code>cd cordova; cordova run android</code> to emulate it on an android simulator running on your machine, or to a connected android device with debugging options turned on.</li>
+          </ul>
+        </li>
+      </ol>
     </p>
 
-    <h4>Karma</h4>
-    <p>Spectacular Test Runner for JavaScript.</p>
+    <h4>Application scaffolding and organization</h4>
+    <p>.</p>
+
+    <h4>Other features</h4>
+    <p>This app will also contain example grunt tests that can be run on an integration server, such as Travis.</p>
   </div>
 
-  <md-button class="md-fab md-fab-bottom-right" aria-label="Time">
-    <i class="fa fa-clock-o fa-2x"></i>
-  </md-button>
 </md-content>