github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-23 01:58:29 +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

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>