feat: add watcher for AngularJS template changes to enable CLI's auto reload

- add gulp type defs
- improvements to AngularJS tabs/buttons
- disable click hijacking in AngularJS Material

Author: Splaktar

README.md

@@ -48,13 +48,23 @@ The following steps will configure a module that loads `$templateCache` at build
 - The [src/app/angularjs/templates/index.js](src/app/angularjs/templates/index.js) file sets up a module.
 - Then we import the module and use the `'templates'` string in our AngularJS module creation.
 
+If you are working on AngularJS Templates (`.html` files referenced via `templateUrl`) and you want
+to enable the Angular CLI to auto-reload on changes, run:
+
+```sh
+npm run watch:templates
+```
+
 ## TODO
 
-- [ ] Add more AngularJS Material components.
-- [ ] Add more Angular Material components.
-- [ ] Add more CDK components.
 - [ ] Add some AngularJS Material services.
 - [ ] Add some Angular Material services.
 - [ ] Add some CDK services.
+- [x] Set up a watcher to rebuild AngularJS `$templateCache`
+- [x] Customize the AngularJS Material theme.
+- [x] Customize the Angular Material theme.
+- [x] Add more AngularJS Material components.
+- [x] Add more Angular Material components.
+- [x] Add more CDK components.
 - [x] Work around Terser mangling, using [dependency annotation](https://docs.angularjs.org/guide/di#dependency-annotation).
 - [x] Look into loading `$templateCache` at build time, using Gulp.

gulpfile.ts

@@ -1,11 +1,18 @@
+/* tslint:disable:no-var-requires */
 const gulp = require('gulp');
 const htmlmin = require('gulp-htmlmin');
 const templateCache = require('gulp-angular-templatecache');
 
-gulp.task('templates', () => {
+const templates = () => {
   return gulp
-    .src('src/angularjs/**/*.html')
+    .src('src/app/angularjs/**/*.html')
     .pipe(htmlmin({ collapseWhitespace: true }))
     .pipe(templateCache('templates.js', { standalone: true }))
-    .pipe(gulp.dest('src/angularjs/templates'));
+    .pipe(gulp.dest('src/app/angularjs/templates'));
+};
+
+gulp.task('templates', templates);
+
+gulp.task('watch', () => {
+  return gulp.watch('src/app/angularjs/**/*.html', templates);
 });

package-lock.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "npm run build:templates && ng serve",
     "build:templates": "gulp templates",
+    "watch:templates": "gulp watch",
     "build": "npm run build:templates && ng build",
     "test": "ng test",
     "prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
@@ -48,6 +49,7 @@
     "@angular/language-service": "~9.1.6",
     "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "^2.0.8",
+    "@types/gulp": "^4.0.6",
     "@types/node": "^13.13.5",
     "codelyzer": "^5.2.2",
     "firebase-tools": "^8.2.0",

package.json

@@ -13,14 +13,15 @@ import { bootstrapAngular } from './bootstrap-module';
 
 const downgradedModule = downgradeModule(bootstrapAngular);
 
-const configFunction = $mdThemingProvider => {
+const configFunction = ($mdThemingProvider, $mdGestureProvider) => {
   $mdThemingProvider
     .theme('default')
     .primaryPalette('indigo')
     .accentPalette('green', { default: '500' })
     .backgroundPalette('grey', { default: 'A100' });
+  $mdGestureProvider.skipClickHijack();
 };
-configFunction.$inject = ['$mdThemingProvider'];
+configFunction.$inject = ['$mdThemingProvider', '$mdGestureProvider'];
 
 export const appAngularjsModule = angular
   .module('AngularJSApp', ['ngMaterial', 'ngMessages', 'templates', downgradedModule])

src/app/angularjs/app-angularjs.module.ts

@@ -1,31 +1,51 @@
+<style>
+  #tabsContainer md-tab-content {
+    min-height: 240px;
+  }
+</style>
 <div class="layout-margin">
   <div id="tabsContainer">
-    <md-tabs>
+    <md-tabs md-dynamic-height md-border-bottom md-swipe-content>
       <md-tab>
         <md-tab-label>Buttons</md-tab-label>
         <md-tab-body>
+          <md-subheader>Flat Buttons</md-subheader>
           <section layout="row" layout-align="start center" layout-wrap layout-margin>
             <md-button>Button</md-button>
-            <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
-            <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
+            <md-button md-no-ink class="md-primary"
+              >Primary
+              <md-tooltip>md-noink</md-tooltip>
+            </md-button>
+            <md-button class="md-accent">Accent</md-button>
             <md-button class="md-warn">Warn</md-button>
+            <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
           </section>
           <md-divider></md-divider>
+          <md-subheader>Raised Buttons</md-subheader>
           <section layout="row" layout-align="start center" layout-wrap layout-margin>
             <md-button class="md-raised">Button</md-button>
             <md-button class="md-raised md-primary">Primary</md-button>
-            <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
+            <md-button class="md-raised md-accent">Accent</md-button>
             <md-button class="md-raised md-warn">Warn</md-button>
+            <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
           </section>
         </md-tab-body>
       </md-tab>
       <md-tab>
         <md-tab-label>tab two</md-tab-label>
-        <md-tab-body>tab two content</md-tab-body>
+        <md-tab-body>
+          <div class="md-padding md-margin">
+            tab two content
+          </div>
+        </md-tab-body>
       </md-tab>
       <md-tab>
         <md-tab-label>tab three</md-tab-label>
-        <md-tab-body>tab three content</md-tab-body>
+        <md-tab-body>
+          <div class="md-padding md-margin">
+            tab three content
+          </div></md-tab-body
+        >
       </md-tab>
     </md-tabs>
   </div>

src/app/angularjs/tabs.component.html

@@ -23,12 +23,12 @@ export const versionStampComponent = {
       .version img {
         vertical-align: top;
       }
-      md-divider {
+      #version-stamp-divider {
         margin-top: 64px;
       }
     </style>
 
-    <md-divider></md-divider>
+    <md-divider id="version-stamp-divider"></md-divider>
     <div class="version-container">
       <span class="version"><img src="/assets/angularjs.svg" alt="AngularJS icon" height="24px"> AngularJS v{{ $ctrl.versions.angularjs.full }} ({{ $ctrl.versions.angularjs.codeName }})</span>
       <span class="version"><img src="/assets/angularjs-material.png" alt="AngularJS Material icon" height="24px"> AngularJS Material v{{ $ctrl.versions.md }}</span>