feat(material): added angular material2

.gitignore

@@ -60,4 +60,7 @@ release
 src/app/dist
 
 #Remove configurations from version control
-config.json
+config.json
+
+#Remove vscode files
+.vscode

package.json

@@ -10,8 +10,6 @@
     "build:dev": "webpack --progress --profile",
     "package": "node package.js",
     "package-all": "npm run package -- --all",
-    "typings-install": "typings install",
-    "postinstall": "npm run typings-install",
     "electron": "electron src/app",
     "webpack-test": "webpack --config webpack.test.js --progress --profile",
     "test": "karma start"
@@ -27,27 +25,36 @@
   },
   "homepage": "",
   "dependencies": {
-    "@angular/common": "2.0.2",
-    "@angular/compiler": "2.0.2",
-    "@angular/core": "2.0.2",
-    "@angular/forms": "^2.0.2",
-    "@angular/http": "2.0.2",
-    "@angular/platform-browser": "2.0.2",
-    "@angular/platform-browser-dynamic": "2.0.2",
-    "@angular/platform-server": "2.0.2",
-    "@angular/router": "3.0.0",
-    "@ngrx/core": "^1.1.0",
-    "@ngrx/store": "^2.1.2",
+    "@angular/common": "2.1.2",
+    "@angular/compiler": "2.1.2",
+    "@angular/core": "2.1.2",
+    "@angular/forms": "^2.1.2",
+    "@angular/http": "2.1.2",
+    "@angular/material": "^2.0.0-alpha.10",
+    "@angular/platform-browser": "2.1.2",
+    "@angular/platform-browser-dynamic": "2.1.2",
+    "@angular/platform-server": "2.1.2",
+    "@angular/router": "3.1.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/store": "^2.2.1",
     "core-js": "^2.4.1",
     "electron": "^1.4.3",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "^5.0.0-rc.1",
     "webpack-target-electron-renderer": "^0.4.0",
     "zone.js": "^0.6.23"
   },
   "devDependencies": {
+    "@types/core-js": "^0.9.34",
+    "@types/hammerjs": "^2.0.33",
+    "@types/jasmine": "^2.2.34",
+    "@types/moment-timezone": "^0.2.32",
+    "@types/node": "^6.0.38",
+    "@types/source-map": "^0.1.27",
+    "@types/uglify-js": "^2.0.27",
+    "@types/webpack": "^1.12.34",
     "angular2-template-loader": "^0.5.0",
     "awesome-typescript-loader": "^0.15.10",
-    "codelyzer": "0.0.28",
+    "codelyzer": "^0.0.26",
     "css-loader": "^0.25.0",
     "electron-packager": "^8.1.0",
     "es6-promise-loader": "^1.0.1",
@@ -81,10 +88,10 @@
     "tslint": "^3.5.0",
     "tslint-loader": "^2.1.0",
     "typescript": "2.0.3",
-    "typings": "^1.3.2",
     "url-loader": "^0.5.7",
-    "webpack": "2.1.0-beta.22",
-    "webpack-dev-server": "^2.1.0-beta.2"
+    "webpack": "2.1.0-beta.25",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-server": "^2.1.0-beta.9"
   },
   "engines": {
     "node": ">= 4.2.1 <= 6",

src/app/app.ts

@@ -20,14 +20,18 @@ import { LoginComponent } from './components/login/login.component';
 import { HomeComponent } from './components/home/home.component';
 import { AppComponent } from './components/app.component';
 
+/**
+ * Import material UI Components
+ */
+import { MaterialModule } from '@angular/material';
+
 import { routes } from './app.routes';
 
 /**
  * Import the authentication service to be injected into our component
  */
 import { Authentication } from './services/authentication';
 
-
 /*
  * provide('AppStore', { useValue: appStore }),
  */
@@ -37,6 +41,7 @@ import { Authentication } from './services/authentication';
         FormsModule,
         ReactiveFormsModule,
         HttpModule,
+        MaterialModule.forRoot(),
         RouterModule.forRoot(routes, { useHash: true }),
         StoreModule.provideStore({ authStore }, { authStore: authInitialState }),
     ],

src/app/components/app.component.ts

@@ -1,3 +1,4 @@
+import { AppState } from './../store/appState.store';
 /**
  * Import decorators and services from angular
  */
@@ -10,17 +11,24 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     // The selector is what angular internally uses
     selector: 'ae-app', // <app></app>
+    styleUrls: ['./app.theme.scss'],
     template: `
-    <div>
-        <router-outlet></router-outlet>
+    <div [class.m2app-dark]="isDarkTheme">
+        <main>
+            <router-outlet></router-outlet>
+            <br/>
+            <button md-raised-button color="primary" (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
+        </main>
     </div>
     `
 })
 export class AppComponent implements OnInit {
     //component initialization
+    isDarkTheme: boolean = false;
+
     ngOnInit() {
         //check authentication
     }
 
-    checkAuthentication() {}
+    checkAuthentication() { }
 }

src/app/components/app.theme.scss

@@ -0,0 +1,26 @@
+@import '~@angular/material/core/theming/all-theme';
+
+// NOTE: Theming is currently experimental and not yet publically released!
+
+@include md-core();
+
+//Here the existing theme is being redfined
+$primary: md-palette($md-deep-purple);
+$accent:  md-palette($md-amber, A200, A100, A400);
+
+$theme: md-light-theme($primary, $accent);
+
+@include angular-material-theme($theme);
+
+// This is where you define your custom them
+
+// md-palette takes, color, default, lighter and darker params
+.m2app-dark {
+  $dark-primary: md-palette($md-cyan, 700, 500, 900);
+  $dark-accent:  md-palette($md-yellow, A200, A100, A400);
+  $dark-warn:    md-palette($md-amber, A200, A100, A400);
+
+  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+  @include angular-material-theme($dark-theme);
+}

src/app/components/home/home.component.html

@@ -1,4 +1,4 @@
 <div [formGroup]="messageForm">
   <h1>{{messageForm.controls['messageText'].value}}</h1>
-  <input type="text" formControlName="messageText"/>
+  <input type="text" formControlName="messageText"/><br/>
 </div>

src/app/components/home/home.component.ts

@@ -3,7 +3,6 @@
  */
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-
 /**
  * Import the ngrx configured store
  */

tsconfig.json

@@ -2,22 +2,39 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "sourceMap": true
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "strictNullChecks": false,
+    "baseUrl": "./src",
+    "paths": {},
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "types": [
+      "hammerjs",
+      "jasmine",
+      "node",
+      "source-map",
+      "uglify-js",
+      "webpack",
+      "core-js"
+    ]
   },
   "exclude": [
     "node_modules",
     "dist"
   ],
+  "awesomeTypescriptLoaderOptions": {
+    "forkChecker": true,
+    "useWebpackText": true
+  },
   "compileOnSave": false,
   "buildOnSave": false,
   "atom": {
     "rewriteTsconfig": false
-  },
-  "allowSyntheticDefaultImports": true,
-  "awesomeTypescriptLoaderOptions": {
-    "forkChecker": true,
-    "useWebpackText": true
   }
 }

webpack.config.js

@@ -8,29 +8,21 @@ const helpers = require('./helpers');
 const path = require('path');
 
 const webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
-
-var METADATA = {
-    title: 'Angular2 Minimal Starter',
-    baseUrl: '/',
-    ENV: 'development'
-};
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 
 /*
  * Config
  */
 var config = {
-    // static data for index.html
-    metadata: METADATA,
     // for faster builds use 'eval'
     devtool: 'source-map',
-    debug: true,
     // cache: false,
 
     // our angular app
     entry: {
         'polyfills': './src/polyfills.ts',
         'vendor': './src/vendor.ts',
-        'app': './src/app/app'
+        'app': './src/app/app',
     },
 
     // Config for our build files
@@ -40,18 +32,30 @@ var config = {
         sourceMapFilename: '[name].map',
         chunkFilename: '[id].chunk.js'
     },
-
+    /*
+    * Options affecting the resolving of modules.
+    *
+    * See: http://webpack.github.io/docs/configuration.html#resolve
+    */
     resolve: {
-        // ensure loader extensions match
-        extensions: helpers.prepend(['.ts', '.js', '.json', '.css', '.html'], '.async') // ensure .async.ts etc also works
-    },
+        /*
+         * An array of extensions that should be used to resolve modules.
+         *
+         * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+         */
+        extensions: ['.ts', '.js', '.json', '.css', '.html'],
+
+        // An array of directory names to be resolved to the current directory
+        modules: [helpers.root('src'), 'node_modules'],
 
+    },
+    /*
+    * Options affecting the resolving of modules.
+    *
+    * See: http://webpack.github.io/docs/configuration.html#resolve
+    */
     module: {
-        preLoaders: [{
-            test: /\.ts$/,
-            loader: "tslint"
-        }],
-        loaders: [
+        rules: [
             // Support for .ts files.
             {
                 test: /\.ts$/,
@@ -90,11 +94,6 @@ var config = {
             }
         ]
     },
-
-    sassLoader: {
-        includePaths: [path.resolve(__dirname, "./src/app")]
-    },
-
     plugins: [
 
         // Plugin: CommonsChunkPlugin
@@ -104,16 +103,31 @@ var config = {
         // See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
         // See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
         new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'polyfills'], minChunks: Infinity }),
+        /**
+       * Plugin LoaderOptionsPlugin (experimental)
+       *
+       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+       */
+        new LoaderOptionsPlugin({
+            debug: true,
+            options: {
+                /**
+                 * Static analysis linter for TypeScript advanced options configuration
+                 * Description: An extensible linter for the TypeScript language.
+                 *
+                 * See: https://github.com/wbuchwalter/tslint-loader
+                 */
+                tslint: {
+                    emitErrors: false,
+                    failOnHint: false,
+                    resourcePath: 'src'
+                },
+            }
+        }),
     ],
-    // Other module loader config
-    tslint: {
-        emitErrors: true,
-        failOnHint: false,
-        resourcePath: 'src/*'
-    },
     // we need this due to problems with es6-shim
     node: {
-        global: 'window',
+        global: true,
         progress: false,
         crypto: 'empty',
         module: false,