diff --git a/Gruntfile.js b/Gruntfile.js
index 89a71cf5..18f92267 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -246,6 +246,12 @@ module.exports = function (grunt) {
},
webpack: {
singleJs: require('./webpack.config.js')
+ },
+
+ universal: {
+ examples: {
+ src: 'index.html'
+ }
}
});
@@ -355,6 +361,97 @@ module.exports = function (grunt) {
});
});
+ // NOTE: This task does not work. It is WIP.
+ grunt.registerMultiTask('universal', 'Prerender examples app as static HTML', function () {
+ var done = this.async();
+ /*
+ * based on angular2-grunt-prerender
+ * https://github.com/angular/universal
+ *
+ * Copyright (c) 2016 Wassim Chegham
+ * Licensed under the MIT license.
+ */
+ try {
+ var proxyquire = require('proxyquire');
+ var zone = require('zone.js');
+ var reflect = require('reflect-metadata');
+ var provide = require('angular2/core');
+ var router = require('angular2/router');
+ var ng2material = require('./ng2-material/all');
+ ng2material['@global'] = true;
+ ng2material['@noCallThru'] = true;
+ var app = proxyquire('./examples/app', {
+ 'ng2-material/all': ng2material
+ });
+ var all = proxyquire('./examples/all', {
+ 'ng2-material/all': ng2material
+ });
+ var universal = require('angular2-universal-preview');
+ var options = this.options({
+ component: [app.DemosApp],
+ providers: ng2material.MATERIAL_NODE_PROVIDERS,
+ platformProviders: [
+ universal.NODE_LOCATION_PROVIDERS,
+ ],
+ directives: ng2material.MATERIAL_DIRECTIVES.concat(all.DEMO_DIRECTIVES),
+ preboot: false,
+ separator: '\r\n'
+ });
+ var angular2Prerender = function (file) {
+ var clientHtml = file.toString();
+ // bootstrap and render component to string
+ var bootloader = options.bootloader;
+ if (!options.bootloader) {
+ options.bootloader = {
+ component: options.component,
+ document: universal.parseDocument(clientHtml),
+ providers: options.providers,
+ componentProviders: options.componentProviders,
+ platformProviders: options.platformProviders,
+ directives: options.directives,
+ preboot: options.preboot
+ };
+ }
+ bootloader = universal.Bootloader.create(options.bootloader);
+ return bootloader.serializeApplication().then(function (html) {
+ return new Buffer(html);
+ });
+ };
+ this.files.forEach(function (f) {
+ var src = f.src.filter(function (filepath) {
+ if (!grunt.file.exists(filepath)) {
+ grunt.log.warn('Source file "' + filepath + '" not found.');
+ return false;
+ }
+ else {
+ return true;
+ }
+ })
+ .map(function (filepath) {
+ return grunt.file.read(filepath);
+ })
+ .join(grunt.util.normalizelf(options.separator));
+ // Handle options.
+ angular2Prerender(src)
+ .then(function (buffer) {
+ return src = buffer;
+ })
+ .then(function (_src) {
+ return grunt.file.write(f.dest, _src);
+ })
+ .then(function (_) {
+ return grunt.log.writeln('File "' + f.dest + '" created.');
+ done();
+ });
+ });
+
+ }
+ catch (e) {
+ console.error(e.stack);
+ return;
+ }
+
+ });
grunt.registerTask('site-meta', 'Build metadata files describing example usages', function (tag) {
var done = this.async();
@@ -379,7 +476,7 @@ module.exports = function (grunt) {
tasks.push(function buildCoverage() {
// Parse Lcov report and generate `coverage.json` file for site.
- var parse = require('lcov-parse');
+ var parse = require('lcov-parse');
parse('.coverage/lcov.info', function (err, data) {
if (err) {
grunt.log.ok('skipping code coverage because lcov.info is missing');
diff --git a/examples/app.ts b/examples/app.ts
index e74c5bc5..e9bf90ec 100644
--- a/examples/app.ts
+++ b/examples/app.ts
@@ -1,24 +1,14 @@
-import {Component, enableProdMode, bind, Input, OnDestroy, ApplicationRef} from "angular2/core";
-import {bootstrap} from "angular2/platform/browser";
-import {
- ROUTER_PROVIDERS,
- ROUTER_DIRECTIVES,
- RouteConfig,
- HashLocationStrategy,
- LocationStrategy,
- Router
-} from "angular2/router";
-import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "../ng2-material/all";
+import {Component, Input, OnDestroy, ApplicationRef} from "angular2/core";
+import {ROUTER_DIRECTIVES, RouteConfig, Router} from "angular2/router";
import {DEMO_DIRECTIVES} from "./all";
import Example from "./example";
-import {Http, Response, HTTP_PROVIDERS} from "angular2/http";
+import {Http, Response} from "angular2/http";
import {IndexPage} from "./routes/index";
import {ComponentPage} from "./routes/component";
import {ComponentsService, IComponentMeta} from "./services/components";
import {NavigationService} from "./services/navigation";
-import {VersionService} from "./services/version";
-import {SidenavService} from "ng2-material/components/sidenav/sidenav_service";
-import {Media} from "ng2-material/core/util/media";
+import {Media, MATERIAL_DIRECTIVES, SidenavService} from "ng2-material/all";
+// import {bootstrap} from "angular2/bootstrap";
/**
* Describe an example that can be dynamically loaded.
@@ -35,7 +25,6 @@ export interface IExampleData {
{path: '/', name: 'Index', component: IndexPage, useAsDefault: true},
{path: '/components/:id', name: 'Component', component: ComponentPage}
])
-
@Component({
selector: 'demos-app',
templateUrl: 'examples/app.html',
@@ -49,7 +38,7 @@ export class DemosApp implements OnDestroy {
static SIDE_MENU_BREAKPOINT: string = 'gt-md';
@Input()
- fullPage: boolean = Media.hasMedia(DemosApp.SIDE_MENU_BREAKPOINT);
+ fullPage: boolean = this.media.hasMedia(DemosApp.SIDE_MENU_BREAKPOINT);
public site: string = 'Angular2 Material';
@@ -96,15 +85,3 @@ export class DemosApp implements OnDestroy {
}
}
-
-let appProviders = [
- HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_PROVIDERS,
- ComponentsService, NavigationService, VersionService,
- bind(LocationStrategy).toClass(HashLocationStrategy)
-];
-
-if (window.location.href.indexOf('github.com') !== -1) {
- enableProdMode();
-}
-
-bootstrap(DemosApp, appProviders);
diff --git a/examples/components/dialog/basic_usage.ts b/examples/components/dialog/basic_usage.ts
index 325652ca..c82c6e79 100644
--- a/examples/components/dialog/basic_usage.ts
+++ b/examples/components/dialog/basic_usage.ts
@@ -1,8 +1,6 @@
import {Component, ElementRef} from "angular2/core";
-import {MATERIAL_DIRECTIVES, MdDialog} from "ng2-material/all";
+import {MATERIAL_DIRECTIVES, MdDialog, Media, MdDialogConfig, MdDialogBasic, MdDialogRef} from "ng2-material/all";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
-import {MdDialogConfig, MdDialogBasic, MdDialogRef} from "ng2-material/components/dialog/dialog";
-import {Media} from "../../../ng2-material/core/util/media";
@Component({
selector: 'dialog-basic-usage',
@@ -13,9 +11,11 @@ import {Media} from "../../../ng2-material/core/util/media";
export default class DialogBasicUsage {
status = ' ';
- customFullscreen = Media.hasMedia('xs') || Media.hasMedia('sm');
+ customFullscreen = this.media.hasMedia('xs') || this.media.hasMedia('sm');
- constructor(public dialog: MdDialog, public element: ElementRef) {
+ constructor(public dialog: MdDialog,
+ public media: Media,
+ public element: ElementRef) {
}
diff --git a/examples/components/sidenav/basic_usage.ts b/examples/components/sidenav/basic_usage.ts
index b44a5923..14491e4e 100644
--- a/examples/components/sidenav/basic_usage.ts
+++ b/examples/components/sidenav/basic_usage.ts
@@ -10,12 +10,13 @@ import {MATERIAL_DIRECTIVES, Media, SidenavService} from "ng2-material/all";
})
export default class SidenavBasicUsage {
- constructor(public sidenav: SidenavService) {
+ constructor(public sidenav: SidenavService,
+ public media: Media) {
}
hasMedia(breakSize: string): boolean {
- return Media.hasMedia(breakSize);
+ return this.media.hasMedia(breakSize);
}
open(name: string) {
diff --git a/examples/example.ts b/examples/example.ts
index 8dc48d01..d20ddb53 100644
--- a/examples/example.ts
+++ b/examples/example.ts
@@ -1,11 +1,10 @@
import {Component, Input, DynamicComponentLoader, ElementRef, ComponentRef, Query, QueryList} from "angular2/core";
import {IExampleData} from "./app";
import {DEMO_DIRECTIVES} from "./all";
-import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+import {MATERIAL_DIRECTIVES, MdTabs} from "ng2-material/all";
import {Http, Response} from "angular2/http";
import {Highlight} from "./highlight";
import {TimerWrapper} from "angular2/src/facade/async";
-import {MdTabs} from "ng2-material/components/tabs/tabs";
export interface ISourceFile {
diff --git a/examples/platform/browser/bootstrap.ts b/examples/platform/browser/bootstrap.ts
new file mode 100644
index 00000000..7e282675
--- /dev/null
+++ b/examples/platform/browser/bootstrap.ts
@@ -0,0 +1,18 @@
+import {bind, enableProdMode} from "angular2/core";
+import {bootstrap} from "angular2/platform/browser";
+import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from "angular2/router";
+import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
+import {HTTP_PROVIDERS} from "angular2/http";
+import {ComponentsService} from "../../services/components";
+import {NavigationService} from "../../services/navigation";
+import {VersionService} from "../../services/version";
+import {DemosApp} from "../../app";
+
+if (window.location.href.indexOf('github.com') !== -1) {
+ enableProdMode();
+}
+bootstrap(DemosApp, [
+ HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_BROWSER_PROVIDERS,
+ ComponentsService, NavigationService, VersionService,
+ bind(LocationStrategy).toClass(HashLocationStrategy)
+]);
diff --git a/examples/platform/node/bootstrap.ts b/examples/platform/node/bootstrap.ts
new file mode 100644
index 00000000..a80416d9
--- /dev/null
+++ b/examples/platform/node/bootstrap.ts
@@ -0,0 +1,13 @@
+import {bootstrap} from "angular2-universal-preview";
+import {ROUTER_PROVIDERS} from "angular2/router";
+import {MATERIAL_NODE_PROVIDERS} from "ng2-material/all";
+import {HTTP_PROVIDERS} from "angular2/http";
+import {ComponentsService} from "../../services/components";
+import {NavigationService} from "../../services/navigation";
+import {VersionService} from "../../services/version";
+import {DemosApp} from "../../app";
+
+bootstrap(DemosApp, [
+ HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_NODE_PROVIDERS,
+ ComponentsService, NavigationService, VersionService
+]);
diff --git a/examples/routes/component.ts b/examples/routes/component.ts
index 7f76be82..361e4d75 100644
--- a/examples/routes/component.ts
+++ b/examples/routes/component.ts
@@ -1,11 +1,10 @@
import {Component, OnInit} from "angular2/core";
import {RouteParams, ROUTER_DIRECTIVES} from "angular2/router";
import {ComponentsService, IComponentMeta} from "../services/components";
-import {MATERIAL_DIRECTIVES} from "../../ng2-material/all";
+import {MATERIAL_DIRECTIVES, SidenavService} from "ng2-material/all";
import Example from "../example";
import {NavigationService} from "../services/navigation";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
-import {SidenavService} from "../../ng2-material/components/sidenav/sidenav_service";
import {TimerWrapper} from "angular2/src/facade/async";
@Component({
diff --git a/examples/routes/index.ts b/examples/routes/index.ts
index 00874281..d9427d15 100644
--- a/examples/routes/index.ts
+++ b/examples/routes/index.ts
@@ -2,10 +2,9 @@ import {Component, OnInit} from "angular2/core";
import {ROUTER_DIRECTIVES} from "angular2/router";
import {ComponentsService, IComponentMeta} from "../services/components";
import {NavigationService} from "../services/navigation";
-import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+import {MATERIAL_DIRECTIVES, SidenavService} from "ng2-material/all";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {Highlight} from "../highlight";
-import {SidenavService} from "../../ng2-material/components/sidenav/sidenav_service";
import {TimerWrapper} from "angular2/src/facade/async";
import {Http, Response} from "angular2/http";
diff --git a/index.html b/index.html
index 50a116d4..5bae176b 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,8 @@