Example of adding angular2-materialize in response for aspnet#394

SteveSandersonMS · SteveSandersonMS · commit 6b60cdae77a9 · 2016-10-21T11:35:43.000+01:00
diff --git a/templates/Angular2Spa/ClientApp/app/app.module.ts b/templates/Angular2Spa/ClientApp/app/app.module.ts
@@ -6,10 +6,12 @@ import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
 import { CounterComponent } from './components/counter/counter.component';
+import { MaterializeDirective } from 'angular2-materialize';
 
 @NgModule({
     bootstrap: [ AppComponent ],
     declarations: [
+        MaterializeDirective,
         AppComponent,
         NavMenuComponent,
         CounterComponent,
diff --git a/templates/Angular2Spa/ClientApp/app/components/home/home.component.html b/templates/Angular2Spa/ClientApp/app/components/home/home.component.html
@@ -1,4 +1,20 @@
 <h1>Hello, world!</h1>
+
+<ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
+    <li>
+    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+    </li>
+    <li>
+    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+    </li>
+    <li>
+    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+    </li>
+</ul>
+
 <p>Welcome to your new single-page application, built with:</p>
 <ul>
     <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
diff --git a/templates/Angular2Spa/ClientApp/boot-client.ts b/templates/Angular2Spa/ClientApp/boot-client.ts
@@ -1,4 +1,6 @@
 import 'angular2-universal-polyfills/browser';
+import 'materialize-css';
+import 'angular2-materialize';
 import { enableProdMode } from '@angular/core';
 import { platformUniversalDynamic } from 'angular2-universal';
 import { AppModule } from './app/app.module';
diff --git a/templates/Angular2Spa/Views/Home/Index.cshtml b/templates/Angular2Spa/Views/Home/Index.cshtml
@@ -2,7 +2,7 @@
     ViewData["Title"] = "Home Page";
 }
 
-<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
+<app>Loading...</app>
 
 <script src="~/dist/vendor.js" asp-append-version="true"></script>
 @section scripts {
diff --git a/templates/Angular2Spa/Views/Shared/_Layout.cshtml b/templates/Angular2Spa/Views/Shared/_Layout.cshtml
@@ -6,6 +6,8 @@
         <title>@ViewData["Title"] - WebApplicationBasic</title>
         <base href="/" />
         <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
+        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     </head>
     <body>
         @RenderBody()
diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json
@@ -12,6 +12,7 @@
     "@angular/platform-server": "2.0.2",
     "@angular/router": "3.0.2",
     "@types/node": "^6.0.42",
+    "angular2-materialize": "^5.2.1",
     "angular2-platform-node": "~2.0.11",
     "angular2-universal": "~2.0.11",
     "angular2-universal-polyfills": "~2.0.11",
@@ -27,6 +28,7 @@
     "file-loader": "^0.9.0",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
+    "materialize-css": "^0.97.7",
     "preboot": "^4.5.2",
     "raw-loader": "^0.5.1",
     "rxjs": "5.0.0-beta.12",
@@ -37,8 +39,8 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-hot-middleware": "^2.12.2",
-    "webpack-node-externals": "^1.4.3",
     "webpack-merge": "^0.14.1",
+    "webpack-node-externals": "^1.4.3",
     "zone.js": "^0.6.25"
   }
 }
diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js
@@ -24,6 +24,7 @@ module.exports = {
             '@angular/platform-browser-dynamic',
             '@angular/router',
             '@angular/platform-server',
+            'angular2-materialize',
             'angular2-universal',
             'angular2-universal-polyfills',
             'bootstrap',
@@ -32,6 +33,7 @@ module.exports = {
             'es6-promise',
             'event-source-polyfill',
             'jquery',
+            'materialize-css',
             'zone.js',
         ]
     },
@@ -42,7 +44,12 @@ module.exports = {
     },
     plugins: [
         extractCSS,
-        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery',
+            'window.jQuery': 'jquery',
+            Hammer: 'hammerjs/hammer'
+        }), // Maps these identifiers to the jQuery/Hammer packages (because Materialize/Bootstrap expects them to be global variables)
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.DllPlugin({
             path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`ViewData["Title"] = "Home Page";`
`3`	`3`	`}`
`4`	`4`
`5`		`-<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>`
	`5`	`+<app>Loading...</app>`
`6`	`6`
`7`	`7`	`<script src="~/dist/vendor.js" asp-append-version="true"></script>`
`8`	`8`	`@section scripts {`