Skip to content

Commit 97ac684

Browse files
SteveSandersonMSSteveSandersonMS
committed
Change Angular 2 template to use app-style layout, like the React template
1 parent d102fdb commit 97ac684

10 files changed

Lines changed: 134 additions & 156 deletions

File tree

‎templates/Angular2Spa/ClientApp/components/app/app.css‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
1-
/* Wrapping element */
2-
/* Set some basic padding to keep content from hitting the edges */
3-
.body-content {
4-
padding-top: 50px;
5-
padding-bottom: 20px;
6-
padding-left: 15px;
7-
padding-right: 15px;
8-
}
9-
10-
/* Set widths on the form inputs since otherwise they're 100% wide */
11-
input,
12-
select,
13-
textarea {
14-
max-width: 280px;
15-
}
16-
17-
/* Carousel */
18-
.carousel-caption p {
19-
font-size: 20px;
20-
line-height: 1.4;
1+
@media (max-width: 767px) {
2+
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
3+
.body-content {
4+
padding-top: 50px;
5+
}
216
}

‎templates/Angular2Spa/ClientApp/components/app/app.html‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,10 @@
1-
<div class="navbar navbar-inverse navbar-fixed-top">
2-
<div class="container">
3-
<div class="navbar-header">
4-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
5-
<span class="sr-only">Toggle navigation</span>
6-
<span class="icon-bar"></span>
7-
<span class="icon-bar"></span>
8-
<span class="icon-bar"></span>
9-
</button>
10-
<a class="navbar-brand" [routerLink]="['/Home']">WebApplicationBasic</a>
1+
<div class='container-fluid'>
2+
<div class='row'>
3+
<div class='col-sm-3'>
4+
<nav-menu></nav-menu>
115
</div>
12-
<div class="navbar-collapse collapse">
13-
<ul class="nav navbar-nav">
14-
<li><a [routerLink]="['/Home']">Home</a></li>
15-
<li><a [routerLink]="['/About']">About</a></li>
16-
<li><a [routerLink]="['/Counter']">Counter</a></li>
17-
</ul>
6+
<div class='col-sm-9 body-content'>
7+
<router-outlet></router-outlet>
188
</div>
199
</div>
2010
</div>
21-
22-
<div class="container body-content">
23-
<router-outlet></router-outlet>
24-
<hr />
25-
<footer>
26-
<p>&copy; 2016 - WebApplicationBasic</p>
27-
</footer>
28-
</div>

‎templates/Angular2Spa/ClientApp/components/app/app.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as ng from 'angular2/core';
22
import * as router from 'angular2/router';
33
import { Http, HTTP_BINDINGS } from 'angular2/http';
4+
import { NavMenu } from '../nav-menu/nav-menu.ts';
45
import { Home } from '../home/home.ts';
56
import { About } from '../about/about';
67
import { Counter } from '../counter/counter';
@@ -16,7 +17,7 @@ import { Counter } from '../counter/counter';
1617
@ng.View({
1718
template: require('./app.html'),
1819
styles: [require('./app.css')],
19-
directives: [router.ROUTER_DIRECTIVES]
20+
directives: [NavMenu, router.ROUTER_DIRECTIVES]
2021
})
2122
export class App {
2223
}

‎templates/Angular2Spa/ClientApp/components/home/home.html‎

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,15 @@
1-
<!-- Carousel -->
2-
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
3-
<ol class="carousel-indicators">
4-
<li *ngFor="#item of carouselItems; #i = index" data-target="#myCarousel" [attr.data-slide-to]="i" class="{{ i == 0 ? 'active' : '' }}"></li>
5-
</ol>
6-
<div class="carousel-inner" role="listbox">
7-
<div *ngFor="#item of carouselItems; #i = index" class="{{ 'item ' + (i == 0 ? 'active' : '') }}">
8-
<img src="{{ item.imageUrl }}" alt="{{ item.imageAlt }}" class="img-responsive" />
9-
10-
<div class="carousel-caption">
11-
<p>
12-
{{ item.text }}
13-
<a class="btn btn-default" href="{{ item.learnMoreUrl }}">Learn More</a>
14-
</p>
15-
</div>
16-
</div>
17-
</div>
18-
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
19-
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
20-
<span class="sr-only">Previous</span>
21-
</a>
22-
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
23-
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
24-
<span class="sr-only">Next</span>
25-
</a>
26-
</div>
27-
28-
<!-- Lists of links -->
29-
<div class="row">
30-
<div *ngFor="#list of linkLists" class="col-md-3">
31-
<h2>{{ list.title }}</h2>
32-
<ul>
33-
<li *ngFor="#entry of list.entries" [innerHTML]="entry"></li>
34-
</ul>
35-
</div>
36-
</div>
1+
<h1>Hello, world!</h1>
2+
<p>Welcome to your new single-page application, built with:</p>
3+
<ul>
4+
<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>
5+
<li><a href='https://angular.io/'>Angular 2</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
6+
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
7+
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
8+
</ul>
9+
<p>To help you get started, we've also set up:</p>
10+
<ul>
11+
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
12+
<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>
13+
<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>
14+
<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>
15+
</ul>

‎templates/Angular2Spa/ClientApp/components/home/home.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import * as ng from 'angular2/core';
2-
import { carouselItems } from '../../data/CarouselItems';
3-
import { linkLists } from '../../data/HomepageLinkLists';
42

53
@ng.Component({
64
selector: 'home'
@@ -9,6 +7,4 @@ import { linkLists } from '../../data/HomepageLinkLists';
97
template: require('./home.html')
108
})
119
export class Home {
12-
public carouselItems = carouselItems;
13-
public linkLists = linkLists;
1410
}

‎templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.main-nav li .glyphicon {
2+
margin-right: 10px;
3+
}
4+
5+
/* Highlighting rules for nav menu items */
6+
.main-nav li a.router-link-active,
7+
.main-nav li a.router-link-active:hover,
8+
.main-nav li a.router-link-active:focus {
9+
background-color: #4189C7;
10+
color: white;
11+
}
12+
13+
14+
/* Keep the nav menu independent of scrolling and on top of other items */
15+
.main-nav {
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
right: 0;
20+
z-index: 1;
21+
}
22+
23+
@media (min-width: 768px) {
24+
/* On small screens, convert the nav menu to a vertical sidebar */
25+
.main-nav {
26+
height: 100%;
27+
width: calc(25% - 20px);
28+
}
29+
.main-nav .navbar {
30+
border-radius: 0px;
31+
border-width: 0px;
32+
height: 100%;
33+
}
34+
.main-nav .navbar-header {
35+
float: none;
36+
}
37+
.main-nav .navbar-collapse {
38+
border-top: 1px solid #444;
39+
padding: 0px;
40+
}
41+
.main-nav .navbar ul {
42+
float: none;
43+
}
44+
.main-nav .navbar li {
45+
float: none;
46+
font-size: 15px;
47+
margin: 6px;
48+
}
49+
.main-nav .navbar li a {
50+
padding: 10px 16px;
51+
border-radius: 4px;
52+
}
53+
.main-nav .navbar a {
54+
/* If a menu item's text is too long, truncate it */
55+
width: 100%;
56+
white-space: nowrap;
57+
overflow: hidden;
58+
text-overflow: ellipsis;
59+
}
60+
}

‎templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class='main-nav'>
2+
<div class='navbar navbar-inverse'>
3+
<div class='navbar-header'>
4+
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
5+
<span class='sr-only'>Toggle navigation</span>
6+
<span class='icon-bar'></span>
7+
<span class='icon-bar'></span>
8+
<span class='icon-bar'></span>
9+
</button>
10+
<a class='navbar-brand' [routerLink]="['/Home']">WebApplicationBasic</a>
11+
</div>
12+
<div class='clearfix'></div>
13+
<div class='navbar-collapse collapse'>
14+
<ul class='nav navbar-nav'>
15+
<li>
16+
<a [routerLink]="['/Home']">
17+
<span class='glyphicon glyphicon-home'></span> Home
18+
</a>
19+
</li>
20+
<li>
21+
<a [routerLink]="['/Counter']">
22+
<span class='glyphicon glyphicon-education'></span> Counter
23+
</a>
24+
</li>
25+
<li>
26+
<a [routerLink]="['/About']">
27+
<span class='glyphicon glyphicon-th-list'></span> Fetch data
28+
</a>
29+
</li>
30+
</ul>
31+
</div>
32+
</div>
33+
</div>

‎templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as ng from 'angular2/core';
2+
import * as router from 'angular2/router';
3+
4+
@ng.Component({
5+
selector: 'nav-menu'
6+
})
7+
@ng.View({
8+
template: require('./nav-menu.html'),
9+
directives: [router.ROUTER_DIRECTIVES],
10+
styles: [require('./nav-menu.css')]
11+
})
12+
export class NavMenu {
13+
}

‎templates/Angular2Spa/ClientApp/data/CarouselItems.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)