Angualr 2 material design components example

techieshravan · May 15, 2016 · 76f6cd7 · 76f6cd7
1 parent 06fc3c2
commit 76f6cd7
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 13 deletions.
diff --git a/material2-examples/example1/app/app.component.html b/material2-examples/example1/app/app.component.html
@@ -1,4 +1,4 @@
-<!-- <md-toolbar color="primary">
+<md-toolbar color="primary">
  Angular Material 2 App
 </md-toolbar>
 
@@ -31,5 +31,4 @@
  <br/><br/>
  <button md-mini-fab [disabled]="isDisabled">check circle</button>
  <br/><br/>
-</div> -->
-<h1>TEST</h1>
+</div>
diff --git a/material2-examples/example1/app/app.component.ts b/material2-examples/example1/app/app.component.ts
@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-// import {MdToolbar} from '@angular2-material/toolbar';
-// import {MdButton} from '@angular2-material/button';
+import {MdToolbar} from '@angular2-material/toolbar';
+import {MdButton} from '@angular2-material/button';
 
 @Component({
  selector: 'material-app',
- templateUrl: '/app/app.component.html'
- //,directives: [MdToolbar, MdButton]
+ templateUrl: '/app/app.component.html',
+ directives: [MdToolbar, MdButton]
 })
 export class AppComponent {}
diff --git a/material2-examples/example1/app/main.ts b/material2-examples/example1/app/main.ts
@@ -1,4 +1,4 @@
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
-bootstrap(AppComponent);
+bootstrap(AppComponent);
diff --git a/material2-examples/example1/index.html b/material2-examples/example1/index.html
@@ -3,7 +3,6 @@
  <title>Angular Material 2 App</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- <link rel="stylesheet" href="styles.css"> -->
 
  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
@@ -24,4 +23,4 @@
  <body>
  <material-app>Loading the Angular 2 Material App...</material-app>
  </body>
-</html>
+</html>
diff --git a/material2-examples/example1/package.json b/material2-examples/example1/package.json
@@ -45,4 +45,4 @@
  "typescript": "^1.8.10",
  "typings": "^0.8.1"
  }
-}
+}
diff --git a/material2-examples/example1/systemjs.config.js b/material2-examples/example1/systemjs.config.js
@@ -0,0 +1,64 @@
+/**
+ * Override at the last minute with global.filterSystemConfig (as plunkers do)
+ */
+(function(global) {
+
+ // map tells the System loader where to look for things
+ var _map = {
+ 'app': 'app', // 'dist',
+ 'rxjs': 'node_modules/rxjs',
+ '@angular': 'node_modules/@angular',
+ '@angular2-material': 'node_modules/@angular2-material'
+ };
+
+ // packages tells the System loader how to load when no filename and/or no extension
+ var _packages = {
+ 'app': { main: 'main.js', defaultExtension: 'js' },
+ 'rxjs': { defaultExtension: 'js' }
+ };
+
+ var _angularPackages = [
+ '@angular/common',
+ '@angular/compiler',
+ '@angular/core',
+ '@angular/platform-browser',
+ '@angular/platform-browser-dynamic'
+ ];
+
+ var _materialPackages = [
+ 'core',
+ 'button',
+ 'card',
+ 'checkbox',
+ 'icon',
+ 'input',
+ 'list',
+ 'progress-bar',
+ 'progress-circle',
+ 'radio',
+ 'sidenav',
+ 'toolbar'
+ ];
+
+ // add package entries for angular packages in the form
+ // '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+ _angularPackages.forEach(function(pkgName) {
+ _packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+ // _packages[pkgName] = { main: 'index' };
+ });
+
+ _materialPackages.forEach(function(pkgName) {
+ // All Material 2 components are prefixed with @angular2-material and use the components name as entry point.
+ _packages['@angular2-material/' + pkgName] = { main: pkgName };
+ });
+
+ console.log(_packages);
+
+ var config = {
+ map: _map,
+ packages: _packages
+ };
+
+ System.config(config);
+
+})(this);
diff --git a/material2-examples/example1/tsconfig.json b/material2-examples/example1/tsconfig.json
@@ -14,4 +14,4 @@
  "typings/main",
  "typings/main.d.ts"
  ]
-}
+}
diff --git a/material2-examples/example1/typings.json b/material2-examples/example1/typings.json
@@ -4,4 +4,4 @@
  "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
  "node": "registry:dt/node#4.0.0+20160509154515"
  }
-}
+}