github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-25 11:07:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial state

Browse Source
This commit is contained in:
SteveSandersonMS
2015-11-02 10:30:36 -08:00
parent 0e1fa2e09d
commit f693bd60e3
110 changed files with 6722 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.html Normal file
View File

@@ -0,0 +1,26 @@
<div *ng-if="albumData">
<h2>{{ albumData.Title }}</h2>
<p>
<img alt="{{ albumData.Title }}" src="{{ albumData.AlbumArtUrl }}">
</p>
<div id="album-details">
<p>
<em>Genre:</em>
{{ albumData.Genre.Name }}
</p>
<p>
<em>Artist:</em>
{{ albumData.Artist.Name }}
</p>
<p>
<em>Price:</em>
{{ albumData.Price | currency:'USD':true }}
</p>
<p class="button">
<!-- TODO: Shopping cart functionality -->
Add to cart
</p>
</div>
</div>

21
samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.ts Normal file
View File

@@ -0,0 +1,21 @@
import * as ng from 'angular2/angular2';
import * as router from 'angular2/router';
import { Http } from 'angular2/http';
import * as models from '../../../models/models';
@ng.Component({
selector: 'album-details'
})
@ng.View({
templateUrl: './ng-app/components/public/album-details/album-details.html',
directives: [ng.NgIf]
})
export class AlbumDetails {
public albumData: models.Album;
constructor(http: Http, routeParam: router.RouteParams) {
http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
this.albumData = result.json();
});
}
}

4
samples/angular/MusicStore/wwwroot/ng-app/components/public/album-tile/album-tile.html Normal file
View File

@@ -0,0 +1,4 @@
<a [router-link]="['/Album', { albumId: albumData.AlbumId }]">
<img alt="{{ albumData.Title }}" src="{{ albumData.AlbumArtUrl }}">
<h4>{{ albumData.Title }}</h4>
</a>

14
samples/angular/MusicStore/wwwroot/ng-app/components/public/album-tile/album-tile.ts Normal file
View File

@@ -0,0 +1,14 @@
import * as ng from 'angular2/angular2';
import * as router from 'angular2/router';
import * as models from '../../../models/models';
@ng.Component({
selector: 'album-tile',
properties: ['albumData: albumdata']
})
@ng.View({
templateUrl: './ng-app/components/public/album-tile/album-tile.html',
directives: [router.ROUTER_DIRECTIVES]
})
export class AlbumTile {
}

7
samples/angular/MusicStore/wwwroot/ng-app/components/public/genre-contents/genre-contents.html Normal file
View File

@@ -0,0 +1,7 @@
<h3>Albums</h3>
<ul class="list-unstyled">
<li *ng-for="#album of albums" class="col-lg-2 col-md-2 col-sm-2 col-xs-4 container">
<album-tile [albumData]="album"></album-tile>
</li>
</ul>

22
samples/angular/MusicStore/wwwroot/ng-app/components/public/genre-contents/genre-contents.ts Normal file
View File

@@ -0,0 +1,22 @@
import * as ng from 'angular2/angular2';
import * as router from 'angular2/router';
import { Http } from 'angular2/http';
import * as models from '../../../models/models';
import { AlbumTile } from '../album-tile/album-tile';
@ng.Component({
selector: 'genre-contents'
})
@ng.View({
templateUrl: './ng-app/components/public/genre-contents/genre-contents.html',
directives: [ng.NgFor, AlbumTile]
})
export class GenreContents {
public albums: models.Album[];
constructor(http: Http, routeParam: router.RouteParams) {
http.get(`/api/genres/${ routeParam.params['genreId'] }/albums`).subscribe(result => {
this.albums = result.json();
});
}
}

13
samples/angular/MusicStore/wwwroot/ng-app/components/public/genres-list/genres-list.html Normal file
View File

@@ -0,0 +1,13 @@
<h3>Browse Genres</h3>
<p *ng-if="genres">
Select from {{ genres.length }} genres:
</p>
<ul class="list-group">
<li *ng-for="#genre of genres" class="list-group-item">
<a title="{{genre.Description}}" [router-link]="['/Genre', { genreId: genre.GenreId }]">
{{ genre.Name }}
</a>
</li>
</ul>

21
samples/angular/MusicStore/wwwroot/ng-app/components/public/genres-list/genres-list.ts Normal file
View File

@@ -0,0 +1,21 @@
import * as ng from 'angular2/angular2';
import * as router from 'angular2/router';
import { Http } from 'angular2/http';
import * as models from '../../../models/models';
@ng.Component({
selector: 'genres-list'
})
@ng.View({
templateUrl: './ng-app/components/public/genres-list/genres-list.html',
directives: [router.ROUTER_DIRECTIVES, ng.NgIf, ng.NgFor]
})
export class GenresList {
public genres: models.Genre[];
constructor(http: Http) {
http.get('/api/genres').subscribe(result => {
this.genres = result.json();
});
}
}

10
samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="jumbotron">
<h1>MVC Music Store</h1>
<img src="/Images/home-showcase.png">
</div>
<ul class="row list-unstyled" id="album-list">
<li *ng-for="#album of mostPopular" class="col-lg-2 col-md-2 col-sm-2 col-xs-4 container">
<album-tile [albumData]="album"></album-tile>
</li>
</ul>

21
samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.ts Normal file
View File

@@ -0,0 +1,21 @@
import * as ng from 'angular2/angular2';
import { Http } from 'angular2/http';
import { AlbumTile } from '../album-tile/album-tile';
import * as models from '../../../models/models';
@ng.Component({
selector: 'home'
})
@ng.View({
templateUrl: './ng-app/components/public/home/home.html',
directives: [ng.NgFor, AlbumTile]
})
export class Home {
public mostPopular: models.Album[];
constructor(http: Http) {
http.get('/api/albums/mostPopular').subscribe(result => {
this.mostPopular = result.json();
});
}
}