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

Update to Angular 2 Beta 1. New bug: no longer waits for server-side HTTP requests to complete - waiting for info to resolve this.

Browse Source
This commit is contained in:
SteveSandersonMS
2016-01-25 15:13:30 +00:00
parent f44b84f2ab
commit 381b7b884e
32 changed files with 113 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
samples/angular/MusicStore/Views/Home/Index.cshtml
View File

@@ -12,11 +12,12 @@
@await Html.PrimeCache(Url.Action("GenreMenuList", "GenresApi"))
@await Html.PrimeCache(Url.Action("MostPopular", "AlbumsApi"))
<script src="~/lib/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/lib/traceur/bin/traceur-runtime.js"></script>
<script src="~/lib/es6-module-loader/dist/es6-module-loader-sans-promises.js"></script>
<script src="~/lib/reflect-metadata/Reflect.js"></script>
<script src="~/lib/systemjs/dist/system.src.js"></script>
<script src="~/system.config.js"></script>
<script src="~/lib/rxjs/bundles/Rx.js"></script>
<script src="~/lib/angular2/bundles/angular2.dev.js"></script>
<script src="~/lib/angular2/bundles/router.dev.js"></script>
<script src="~/lib/angular2/bundles/http.dev.js"></script>

5
samples/angular/MusicStore/gulpfile.js vendored
View File

@@ -17,16 +17,17 @@ var config = {
lib: [
require.resolve('bootstrap/dist/css/bootstrap.css'),
path.dirname(require.resolve('bootstrap/dist/fonts/glyphicons-halflings-regular.woff')) + '/**',
require.resolve('angular2/bundles/angular2-polyfills.js'),
require.resolve('traceur/bin/traceur-runtime.js'),
require.resolve('es6-module-loader/dist/es6-module-loader-sans-promises.js'),
require.resolve('reflect-metadata/Reflect.js'),
require.resolve('systemjs/dist/system.src.js'),
require.resolve('angular2/bundles/angular2.dev.js'),
require.resolve('angular2/bundles/router.dev.js'),
require.resolve('angular2/bundles/http.dev.js'),
require.resolve('angular2-aspnet/bundles/angular2-aspnet.js'),
require.resolve('jquery/dist/jquery.js'),
require.resolve('bootstrap/dist/js/bootstrap.js')
require.resolve('bootstrap/dist/js/bootstrap.js'),
require.resolve('rxjs/bundles/Rx.js')
]
};

5
samples/angular/MusicStore/package.json
View File

@@ -2,15 +2,16 @@
"name": "MusicStore",
"version": "0.0.0",
"dependencies": {
"angular2": "2.0.0-alpha.44",
"angular2": "2.0.0-beta.1",
"angular2-aspnet": "^0.0.3",
"angular2-universal-patched": "^0.5.4",
"angular2-universal-preview": "^0.32.2",
"bootstrap": "^3.3.5",
"es6-module-loader": "^0.15.0",
"jquery": "^2.1.4",
"less": "^2.5.3",
"lodash": "^3.10.1",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.0",
"systemjs": "^0.19.3",
"traceur": "0.0.91"
},

8
samples/angular/MusicStore/wwwroot/ng-app/components/admin/admin-home/admin-home.ts
View File

@@ -1,4 +1,4 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { AlbumsList } from '../albums-list/albums-list';
import { AlbumDetails } from '../album-details/album-details';
@@ -8,9 +8,9 @@ import { AlbumEdit } from '../album-edit/album-edit';
selector: 'admin-home'
})
@router.RouteConfig([
{ path: 'albums', as: 'Albums', component: AlbumsList },
{ path: 'album/details/:albumId', as: 'AlbumDetails', component: AlbumDetails },
{ path: 'album/edit/:albumId', as: 'AlbumEdit', component: AlbumEdit }
{ path: 'albums', name: 'Albums', component: AlbumsList },
{ path: 'album/details/:albumId', name: 'AlbumDetails', component: AlbumDetails },
{ path: 'album/edit/:albumId', name: 'AlbumEdit', component: AlbumEdit }
])
@ng.View({
templateUrl: './ng-app/components/admin/admin-home/admin-home.html',

2
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.html
View File

@@ -1,5 +1,5 @@
<div class="modal fade">
<div class="modal-dialog" *ng-if="album">
<div class="modal-dialog" *ngIf="album">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

5
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.ts
View File

@@ -1,4 +1,5 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import { NgIf } from 'angular2/common';
import * as models from '../../../models/models';
@ng.Component({
@@ -6,7 +7,7 @@ import * as models from '../../../models/models';
})
@ng.View({
templateUrl: './ng-app/components/admin/album-delete-prompt/album-delete-prompt.html',
directives: [ng.NgIf]
directives: [NgIf]
})
export class AlbumDeletePrompt {
private modalElement: any;

6
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-details/album-details.html
View File

@@ -1,7 +1,7 @@
<h2>Album <small>Details</small></h2>
<hr />
<form class="form-horizontal" role="form" *ng-if="albumData">
<form class="form-horizontal" role="form" *ngIf="albumData">
<div class="form-group">
<label class="col-md-2 control-label">Artist</label>
<div class="col-md-10">
@@ -40,9 +40,9 @@
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<a class="btn btn-primary" [router-link]="['/Admin/AlbumEdit', { albumId: albumData.AlbumId }]">Edit</a>
<a class="btn btn-primary" [routerLink]="['/Admin/AlbumEdit', { albumId: albumData.AlbumId }]">Edit</a>
<button type="button" class="btn btn-danger" (click)="deleteprompt.show(albumData)">Delete</button>
<a class="btn btn-default" [router-link]="['/Admin/Albums']">Back to List</a>
<a class="btn btn-default" [routerLink]="['/Admin/Albums']">Back to List</a>
</div>
</div>
</form>

5
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-details/album-details.ts
View File

@@ -1,7 +1,8 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import * as models from '../../../models/models';
import { Http, HTTP_BINDINGS } from 'angular2/http';
import { NgIf } from 'angular2/common';
import { AlbumDeletePrompt } from '../album-delete-prompt/album-delete-prompt';
@ng.Component({
@@ -9,7 +10,7 @@ import { AlbumDeletePrompt } from '../album-delete-prompt/album-delete-prompt';
})
@ng.View({
templateUrl: './ng-app/components/admin/album-details/album-details.html',
directives: [router.ROUTER_DIRECTIVES, ng.NgIf, AlbumDeletePrompt]
directives: [router.ROUTER_DIRECTIVES, NgIf, AlbumDeletePrompt]
})
export class AlbumDetails {
public albumData: models.Album;

12
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html
View File

@@ -1,18 +1,18 @@
<h2>Album <small>Edit</small></h2>
<hr />
<form class="form-horizontal" [ng-form-model]="form" (ng-submit)="onSubmitModelBased()">
<form class="form-horizontal" [ngFormModel]="form" (ng-submit)="onSubmitModelBased()">
<form-field label="Artist" [validate]="form.controls.ArtistId">
<select class="form-control" ng-control="ArtistId">
<option value="0">-- choose Artist --</option>
<option *ng-for="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
<option *ngFor="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
</select>
</form-field>
<form-field label="Genre" [validate]="form.controls.GenreId">
<select class="form-control" ng-control="GenreId">
<option value="0">-- choose Genre --</option>
<option *ng-for="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
<option *ngFor="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
</select>
</form-field>
@@ -36,11 +36,11 @@
</form-field>
<form-field>
<div *ng-if="changesSaved" class="alert alert-success"><b>Done!</b> Your changes were saved.</div>
<div *ng-for="#errorMessage of formErrors" class="alert alert-danger">{{ errorMessage }}</div>
<div *ngIf="changesSaved" class="alert alert-success"><b>Done!</b> Your changes were saved.</div>
<div *ngFor="#errorMessage of formErrors" class="alert alert-danger">{{ errorMessage }}</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" (click)="deleteprompt.show(originalAlbum)">Delete</button>
<a class="btn btn-default" [router-link]="['/Admin/Albums']">Back to List</a>
<a class="btn btn-default" [routerLink]="['/Admin/Albums']">Back to List</a>
</form-field>
</form>

35
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
View File

@@ -1,4 +1,5 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import { Control, ControlGroup, FormBuilder, Validators, NgIf, NgFor, FORM_DIRECTIVES } from 'angular2/common';
import * as router from 'angular2/router';
import * as models from '../../../models/models';
import { Http, HTTP_BINDINGS, Headers, Response } from 'angular2/http';
@@ -11,10 +12,10 @@ import * as AspNet from 'angular2-aspnet';
})
@ng.View({
templateUrl: './ng-app/components/admin/album-edit/album-edit.html',
directives: [router.ROUTER_DIRECTIVES, ng.NgIf, ng.NgFor, AlbumDeletePrompt, FormField, ng.FORM_DIRECTIVES]
directives: [router.ROUTER_DIRECTIVES, NgIf, NgFor, AlbumDeletePrompt, FormField, FORM_DIRECTIVES]
})
export class AlbumEdit {
public form: ng.ControlGroup;
public form: ControlGroup;
public artists: models.Artist[];
public genres: models.Genre[];
public originalAlbum: models.Album;
@@ -22,18 +23,18 @@ export class AlbumEdit {
private _http: Http;
constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) {
constructor(fb: FormBuilder, http: Http, routeParam: router.RouteParams) {
this._http = http;
var albumId = parseInt(routeParam.params['albumId']);
http.get('/api/albums/' + albumId).subscribe(result => {
var json = result.json();
this.originalAlbum = json;
(<ng.Control>this.form.controls['Title']).updateValue(json.Title);
(<ng.Control>this.form.controls['Price']).updateValue(json.Price);
(<ng.Control>this.form.controls['ArtistId']).updateValue(json.ArtistId);
(<ng.Control>this.form.controls['GenreId']).updateValue(json.GenreId);
(<ng.Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
(<Control>this.form.controls['Title']).updateValue(json.Title);
(<Control>this.form.controls['Price']).updateValue(json.Price);
(<Control>this.form.controls['ArtistId']).updateValue(json.ArtistId);
(<Control>this.form.controls['GenreId']).updateValue(json.GenreId);
(<Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
});
http.get('/api/artists/lookup').subscribe(result => {
@@ -46,15 +47,15 @@ export class AlbumEdit {
this.form = fb.group(<any>{
AlbumId: fb.control(albumId),
ArtistId: fb.control(0, ng.Validators.required),
GenreId: fb.control(0, ng.Validators.required),
Title: fb.control('', ng.Validators.required),
Price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])),
AlbumArtUrl: fb.control('', ng.Validators.required)
ArtistId: fb.control(0, Validators.required),
GenreId: fb.control(0, Validators.required),
Title: fb.control('', Validators.required),
Price: fb.control('', Validators.compose([Validators.required, AlbumEdit._validatePrice])),
AlbumArtUrl: fb.control('', Validators.required)
});
this.form.valueChanges.observer({
next: _ => { this.changesSaved = false; }
this.form.valueChanges.subscribe(() => {
this.changesSaved = false;
});
}
@@ -78,7 +79,7 @@ export class AlbumEdit {
}
}
private static _validatePrice(control: ng.Control): { [key: string]: boolean } {
private static _validatePrice(control: Control): { [key: string]: boolean } {
return /^\d+\.\d+$/.test(control.value) ? null : { Price: true };
}

10
samples/angular/MusicStore/wwwroot/ng-app/components/admin/albums-list/albums-list.html
View File

@@ -13,15 +13,15 @@
</tr>
</thead>
<tbody>
<tr *ng-for="#row of rows">
<tr *ngFor="#row of rows">
<td>{{ row.Genre.Name }}</td>
<td>{{ row.Artist.Name }}</td>
<td>{{ row.Title }}</td>
<td>{{ row.Price | currency:'USD':true }}</td>
<td>
<div class="btn-group btn-group-xs">
<a class="btn btn-default" [router-link]="['/Admin/AlbumDetails', { albumId: row.AlbumId }]">Details</a>
<a class="btn btn-default" [router-link]="['/Admin/AlbumEdit', { albumId: row.AlbumId }]">Edit</a>
<a class="btn btn-default" [routerLink]="['/Admin/AlbumDetails', { albumId: row.AlbumId }]">Details</a>
<a class="btn btn-default" [routerLink]="['/Admin/AlbumEdit', { albumId: row.AlbumId }]">Edit</a>
<a class="btn btn-default" (click)="deleteprompt.show(row)">Delete</a>
</div>
</td>
@@ -32,8 +32,8 @@
<div class="btn-group">
<button class="btn btn-default" [disabled]="!canGoBack" (click)="goToPage(1)">First</button>
<button class="btn btn-default" [disabled]="!canGoBack" (click)="goToPage(pageIndex - 1)">Previous</button>
<button class="btn" *ng-for="#page of pageLinks"
[ng-class]="{ 'btn-info': page.isCurrent, 'btn-default': !page.isCurrent }"
<button class="btn" *ngFor="#page of pageLinks"
[ngClass]="{ 'btn-info': page.isCurrent, 'btn-default': !page.isCurrent }"
(click)="goToPage(page.index)">
{{ page.text }}
</button>

5
samples/angular/MusicStore/wwwroot/ng-app/components/admin/albums-list/albums-list.ts
View File

@@ -1,6 +1,7 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { Http, HTTP_BINDINGS } from 'angular2/http';
import { NgFor, NgClass } from 'angular2/common';
import * as models from '../../../models/models';
import { AlbumDeletePrompt } from '../album-delete-prompt/album-delete-prompt';
@@ -9,7 +10,7 @@ import { AlbumDeletePrompt } from '../album-delete-prompt/album-delete-prompt';
})
@ng.View({
templateUrl: './ng-app/components/admin/albums-list/albums-list.html',
directives: [ng.NgFor, ng.NgClass, router.ROUTER_DIRECTIVES, AlbumDeletePrompt]
directives: [NgFor, NgClass, router.ROUTER_DIRECTIVES, AlbumDeletePrompt]
})
export class AlbumsList {
public rows: models.Album[];

4
samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.html
View File

@@ -2,8 +2,8 @@
<label class="col-md-2 control-label">{{ label }}</label>
<div class="col-md-5">
<ng-content></ng-content>
<div class="alert alert-danger" role="alert" *ng-if="errorMessages.length">
<p *ng-for="#message of errorMessages">{{ message }}</p>
<div class="alert alert-danger" role="alert" *ngIf="errorMessages.length">
<p *ngFor="#message of errorMessages">{{ message }}</p>
</div>
</div>
</div>

7
samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.ts
View File

@@ -1,4 +1,5 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import { NgIf, NgFor, AbstractControl } from 'angular2/common';
@ng.Component({
selector: 'form-field',
@@ -6,10 +7,10 @@ import * as ng from 'angular2/angular2';
})
@ng.View({
templateUrl: './ng-app/components/admin/form-field/form-field.html',
directives: [ng.NgIf, ng.NgFor]
directives: [NgIf, NgFor]
})
export class FormField {
private validate: ng.AbstractControl;
private validate: AbstractControl;
public get errorMessages() {
var errors = (this.validate && this.validate.dirty && this.validate.errors) || {};

12
samples/angular/MusicStore/wwwroot/ng-app/components/app/app.html
View File

@@ -1,26 +1,26 @@
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" [router-link]="['/Home']">Music Store</a>
<a class="navbar-brand" [routerLink]="['/Home']">Music Store</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a [router-link]="['/Home']">Home</a></li>
<li><a [routerLink]="['/Home']">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Store <b class="caret"></b></a>
<ul class="dropdown-menu">
<li *ng-for="#genre of genres">
<a title="{{ genre.Description }}" [router-link]="['/Genre', { genreId: genre.GenreId }]">
<li *ngFor="#genre of genres">
<a title="{{ genre.Description }}" [routerLink]="['/Genre', { genreId: genre.GenreId }]">
{{ genre.Name }}
</a>
</li>
<li class="divider"></li>
<li>
<a [router-link]="['/GenresList']">More…</a>
<a [routerLink]="['/GenresList']">More…</a>
</li>
</ul>
</li>
<li><a [router-link]="['/Admin/Albums']">Admin</a></li>
<li><a [routerLink]="['/Admin/Albums']">Admin</a></li>
</ul>
</div>
</div>

15
samples/angular/MusicStore/wwwroot/ng-app/components/app/app.ts
View File

@@ -1,6 +1,7 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { Http, HTTP_BINDINGS } from 'angular2/http';
import { NgFor } from 'angular2/common';
import { Home } from '../public/home/home';
import { AlbumDetails } from '../public/album-details/album-details';
import { GenreContents } from '../public/genre-contents/genre-contents';
@@ -12,16 +13,16 @@ import * as models from '../../models/models';
selector: 'app'
})
@router.RouteConfig([
{ path: '/', component: Home, as: 'Home' },
{ path: '/album/:albumId', component: AlbumDetails, as: 'Album' },
{ path: '/genre/:genreId', component: GenreContents, as: 'Genre' },
{ path: '/genres', component: GenresList, as: 'GenresList' },
{ path: '/admin/...', component: AdminHome, as: 'Admin' }
{ path: '/', component: Home, name: 'Home' },
{ path: '/album/:albumId', component: AlbumDetails, name: 'Album' },
{ path: '/genre/:genreId', component: GenreContents, name: 'Genre' },
{ path: '/genres', component: GenresList, name: 'GenresList' },
{ path: '/admin/...', component: AdminHome, name: 'Admin' }
])
@ng.View({
templateUrl: './ng-app/components/app/app.html',
styleUrls: ['./ng-app/components/app/app.css'],
directives: [router.ROUTER_DIRECTIVES, ng.NgFor]
directives: [router.ROUTER_DIRECTIVES, NgFor]
})
export class App {
public genres: models.Genre[];

5
samples/angular/MusicStore/wwwroot/ng-app/components/app/bootstrap.ts
View File

@@ -1,7 +1,8 @@
import * as ng from 'angular2/angular2';
import { bootstrap } from 'angular2/platform/browser';
import { FormBuilder } from 'angular2/common';
import * as router from 'angular2/router';
import { Http, HTTP_PROVIDERS } from 'angular2/http';
import { CACHE_PRIMED_HTTP_PROVIDERS } from 'angular2-aspnet';
import { App } from './app';
ng.bootstrap(App, [router.ROUTER_BINDINGS, HTTP_PROVIDERS, CACHE_PRIMED_HTTP_PROVIDERS, ng.FormBuilder]);
bootstrap(App, [router.ROUTER_BINDINGS, HTTP_PROVIDERS, CACHE_PRIMED_HTTP_PROVIDERS, FormBuilder]);

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

@@ -1,4 +1,4 @@
<div *ng-if="albumData">
<div *ngIf="albumData">
<h2>{{ albumData.Title }}</h2>
<p>

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

@@ -1,5 +1,6 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { NgIf } from 'angular2/common';
import { Http } from 'angular2/http';
import * as models from '../../../models/models';
@@ -8,7 +9,7 @@ import * as models from '../../../models/models';
})
@ng.View({
templateUrl: './ng-app/components/public/album-details/album-details.html',
directives: [ng.NgIf]
directives: [NgIf]
})
export class AlbumDetails {
public albumData: models.Album;

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

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

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

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

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

@@ -1,7 +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">
<li *ngFor="#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>

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

@@ -1,5 +1,6 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { NgFor } from 'angular2/common';
import { Http } from 'angular2/http';
import * as models from '../../../models/models';
import { AlbumTile } from '../album-tile/album-tile';
@@ -9,7 +10,7 @@ import { AlbumTile } from '../album-tile/album-tile';
})
@ng.View({
templateUrl: './ng-app/components/public/genre-contents/genre-contents.html',
directives: [ng.NgFor, AlbumTile]
directives: [NgFor, AlbumTile]
})
export class GenreContents {
public albums: models.Album[];

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

@@ -1,12 +1,12 @@
<h3>Browse Genres</h3>
<p *ng-if="genres">
<p *ngIf="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 }]">
<li *ngFor="#genre of genres" class="list-group-item">
<a title="{{genre.Description}}" [routerLink]="['/Genre', { genreId: genre.GenreId }]">
{{ genre.Name }}
</a>
</li>

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

@@ -1,5 +1,6 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { NgIf, NgFor } from 'angular2/common';
import { Http } from 'angular2/http';
import * as models from '../../../models/models';
@@ -8,7 +9,7 @@ import * as models from '../../../models/models';
})
@ng.View({
templateUrl: './ng-app/components/public/genres-list/genres-list.html',
directives: [router.ROUTER_DIRECTIVES, ng.NgIf, ng.NgFor]
directives: [router.ROUTER_DIRECTIVES, NgIf, NgFor]
})
export class GenresList {
public genres: models.Genre[];

2
samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.html
View File

@@ -4,7 +4,7 @@
</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">
<li *ngFor="#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>

5
samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.ts
View File

@@ -1,5 +1,6 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import { Http } from 'angular2/http';
import { NgFor } from 'angular2/common';
import { AlbumTile } from '../album-tile/album-tile';
import * as models from '../../../models/models';
@@ -8,7 +9,7 @@ import * as models from '../../../models/models';
})
@ng.View({
templateUrl: './ng-app/components/public/home/home.html',
directives: [ng.NgFor, AlbumTile]
directives: [NgFor, AlbumTile]
})
export class Home {
public mostPopular: models.Album[];