github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Example of adding angular2-materialize in response for #394

Browse Source
This commit is contained in:
SteveSandersonMS
2016-10-21 11:35:43 +01:00
parent e0c18ab269
commit 6b60cdae77
7 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/Angular2Spa/ClientApp/app/app.module.ts
View File

@@ -6,10 +6,12 @@ import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component'; import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component'; import { CounterComponent } from './components/counter/counter.component';
import { MaterializeDirective } from 'angular2-materialize';
@NgModule({ @NgModule({
bootstrap: [ AppComponent ], bootstrap: [ AppComponent ],
declarations: [ declarations: [
MaterializeDirective,
AppComponent, AppComponent,
NavMenuComponent, NavMenuComponent,
CounterComponent, CounterComponent,

16
templates/Angular2Spa/ClientApp/app/components/home/home.component.html
View File

@@ -1,4 +1,20 @@
<h1>Hello, world!</h1> <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> <p>Welcome to your new single-page application, built with:</p>
<ul> <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> <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>

2
templates/Angular2Spa/ClientApp/boot-client.ts
View File

@@ -1,4 +1,6 @@
import 'angular2-universal-polyfills/browser'; import 'angular2-universal-polyfills/browser';
import 'materialize-css';
import 'angular2-materialize';
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal'; import { platformUniversalDynamic } from 'angular2-universal';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';

2
templates/Angular2Spa/Views/Home/Index.cshtml
View File

@@ -2,7 +2,7 @@
ViewData["Title"] = "Home Page"; 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> <script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts { @section scripts {

2
templates/Angular2Spa/Views/Shared/_Layout.cshtml
View File

@@ -6,6 +6,8 @@
<title>@ViewData["Title"] - WebApplicationBasic</title> <title>@ViewData["Title"] - WebApplicationBasic</title>
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /> <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> </head>
<body> <body>
@RenderBody() @RenderBody()

4
templates/Angular2Spa/package.json
View File

@@ -12,6 +12,7 @@
"@angular/platform-server": "2.0.2", "@angular/platform-server": "2.0.2",
"@angular/router": "3.0.2", "@angular/router": "3.0.2",
"@types/node": "^6.0.42", "@types/node": "^6.0.42",
"angular2-materialize": "^5.2.1",
"angular2-platform-node": "~2.0.11", "angular2-platform-node": "~2.0.11",
"angular2-universal": "~2.0.11", "angular2-universal": "~2.0.11",
"angular2-universal-polyfills": "~2.0.11", "angular2-universal-polyfills": "~2.0.11",
@@ -27,6 +28,7 @@
"file-loader": "^0.9.0", "file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.1", "jquery": "^2.2.1",
"materialize-css": "^0.97.7",
"preboot": "^4.5.2", "preboot": "^4.5.2",
"raw-loader": "^0.5.1", "raw-loader": "^0.5.1",
"rxjs": "5.0.0-beta.12", "rxjs": "5.0.0-beta.12",
@@ -37,8 +39,8 @@
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"webpack": "^1.13.2", "webpack": "^1.13.2",
"webpack-hot-middleware": "^2.12.2", "webpack-hot-middleware": "^2.12.2",
"webpack-node-externals": "^1.4.3",
"webpack-merge": "^0.14.1", "webpack-merge": "^0.14.1",
"webpack-node-externals": "^1.4.3",
"zone.js": "^0.6.25" "zone.js": "^0.6.25"
} }
} }

9
templates/Angular2Spa/webpack.config.vendor.js
View File

@@ -24,6 +24,7 @@ module.exports = {
'@angular/platform-browser-dynamic', '@angular/platform-browser-dynamic',
'@angular/router', '@angular/router',
'@angular/platform-server', '@angular/platform-server',
'angular2-materialize',
'angular2-universal', 'angular2-universal',
'angular2-universal-polyfills', 'angular2-universal-polyfills',
'bootstrap', 'bootstrap',
@@ -32,6 +33,7 @@ module.exports = {
'es6-promise', 'es6-promise',
'event-source-polyfill', 'event-source-polyfill',
'jquery', 'jquery',
'materialize-css',
'zone.js', 'zone.js',
] ]
}, },
@@ -42,7 +44,12 @@ module.exports = {
}, },
plugins: [ plugins: [
extractCSS, 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.optimize.OccurenceOrderPlugin(),
new webpack.DllPlugin({ new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),