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

Change Angular 2 template to use app-style layout, like the React template

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-29 11:11:07 +00:00
parent d102fdb363
commit 97ac684652
10 changed files with 134 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
templates/Angular2Spa/ClientApp/components/app/app.css
View File

@@ -1,21 +1,6 @@
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
@media (max-width: 767px) {
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
.body-content {
padding-top: 50px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Carousel */
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
}

32
templates/Angular2Spa/ClientApp/components/app/app.html
View File

@@ -1,28 +1,10 @@
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/Home']">WebApplicationBasic</a>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a [routerLink]="['/Home']">Home</a></li>
<li><a [routerLink]="['/About']">About</a></li>
<li><a [routerLink]="['/Counter']">Counter</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
<hr />
<footer>
<p>&copy; 2016 - WebApplicationBasic</p>
</footer>
</div>
</div>
</div>

3
templates/Angular2Spa/ClientApp/components/app/app.ts
View File

@@ -1,6 +1,7 @@
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { Http, HTTP_BINDINGS } from 'angular2/http';
import { NavMenu } from '../nav-menu/nav-menu.ts';
import { Home } from '../home/home.ts';
import { About } from '../about/about';
import { Counter } from '../counter/counter';
@@ -16,7 +17,7 @@ import { Counter } from '../counter/counter';
@ng.View({
template: require('./app.html'),
styles: [require('./app.css')],
directives: [router.ROUTER_DIRECTIVES]
directives: [NavMenu, router.ROUTER_DIRECTIVES]
})
export class App {
}

51
templates/Angular2Spa/ClientApp/components/home/home.html
View File

@@ -1,36 +1,15 @@
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators">
<li *ngFor="#item of carouselItems; #i = index" data-target="#myCarousel" [attr.data-slide-to]="i" class="{{ i == 0 ? 'active' : '' }}"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div *ngFor="#item of carouselItems; #i = index" class="{{ 'item ' + (i == 0 ? 'active' : '') }}">
<img src="{{ item.imageUrl }}" alt="{{ item.imageAlt }}" class="img-responsive" />
<div class="carousel-caption">
<p>
{{ item.text }}
<a class="btn btn-default" href="{{ item.learnMoreUrl }}">Learn More</a>
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Lists of links -->
<div class="row">
<div *ngFor="#list of linkLists" class="col-md-3">
<h2>{{ list.title }}</h2>
<ul>
<li *ngFor="#entry of list.entries" [innerHTML]="entry"></li>
</ul>
</div>
</div>
<h1>Hello, world!</h1>
<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>
<li><a href='https://angular.io/'>Angular 2</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
</ul>

4
templates/Angular2Spa/ClientApp/components/home/home.ts
View File

@@ -1,6 +1,4 @@
import * as ng from 'angular2/core';
import { carouselItems } from '../../data/CarouselItems';
import { linkLists } from '../../data/HomepageLinkLists';
@ng.Component({
selector: 'home'
@@ -9,6 +7,4 @@ import { linkLists } from '../../data/HomepageLinkLists';
template: require('./home.html')
})
export class Home {
public carouselItems = carouselItems;
public linkLists = linkLists;
}

60
templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css Normal file
View File

@@ -0,0 +1,60 @@
.main-nav li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
.main-nav li a.router-link-active,
.main-nav li a.router-link-active:hover,
.main-nav li a.router-link-active:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
@media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.main-nav .navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.main-nav .navbar-header {
float: none;
}
.main-nav .navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.main-nav .navbar ul {
float: none;
}
.main-nav .navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.main-nav .navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.main-nav .navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

33
templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html Normal file
View File

@@ -0,0 +1,33 @@
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]="['/Home']">WebApplicationBasic</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li>
<a [routerLink]="['/Home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li>
<a [routerLink]="['/Counter']">
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
<li>
<a [routerLink]="['/About']">
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
</div>

13
templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts Normal file
View File

@@ -0,0 +1,13 @@
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
@ng.Component({
selector: 'nav-menu'
})
@ng.View({
template: require('./nav-menu.html'),
directives: [router.ROUTER_DIRECTIVES],
styles: [require('./nav-menu.css')]
})
export class NavMenu {
}

28
templates/Angular2Spa/ClientApp/data/CarouselItems.ts
View File

@@ -1,28 +0,0 @@
export interface CarouselItem {
imageUrl: string;
imageAlt: string;
text: string;
learnMoreUrl: string;
}
export const carouselItems: CarouselItem[] = [{
imageUrl: "/images/ASP-NET-Banners-01.png",
imageAlt: "ASP.NET",
text: "Learn how to build ASP.NET apps that can run anywhere.",
learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409"
}, {
imageUrl: "/images/Banner-02-VS.png",
imageAlt: "Visual Studio",
text: "There are powerful new features in Visual Studio for building modern web apps.",
learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409"
}, {
imageUrl: "/images/ASP-NET-Banners-02.png",
imageAlt: "Package Management",
text: "Bring in libraries from NuGet, Bower, and npm, and automate tasks using Grunt or Gulp.",
learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409"
}, {
imageUrl: "/images/Banner-01-Azure.png",
imageAlt: "Microsoft Azure",
text: "Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.",
learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409"
}];

43
templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts
View File

@@ -1,43 +0,0 @@
export interface LinkList {
title: string;
entries: string[];
}
export const linkLists: LinkList[] = [{
title: "Application uses",
entries: [
"Sample pages using ASP.NET MVC 6",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=518007\">Gulp</a> and <a href=\"http://go.microsoft.com/fwlink/?LinkId=518004\">Bower</a> for managing client-side libraries",
"Theming using <a href=\"http://go.microsoft.com/fwlink/?LinkID=398939\">Bootstrap</a>"
]
}, {
title: "How to",
entries: [
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=398600\">Add a Controller and View</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=699314\">Add an appsetting in config and access it in app.</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=699315\">Manage User Secrets using Secret Manager.</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=699316\">Use logging to log a message.</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=699317\">Add packages using NuGet.</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=699318\">Add client packages using Bower.</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=699319\">Target development, staging or production environment.</a>"
]
}, {
title: "Overview",
entries: [
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=518008\">Conceptual overview of what is ASP.NET 5</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=699320\">Fundamentals of ASP.NET 5 such as Startup and middleware.</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=398602\">Working with Data</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkId=398603\">Security</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=699321\">Client side development</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=699322\">Develop on different platforms</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=699323\">Read more on the documentation site</a>"
]
}, {
title: "Run & Deploy",
entries: [
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=517851\">Run your app</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=517852\">Run your app on .NET Core</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=517853\">Run commands in your project.json</a>",
"<a href=\"http://go.microsoft.com/fwlink/?LinkID=398609\">Publish to Microsoft Azure Web Apps</a>"
]
}];