github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-24 18:47:30 +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

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) || {};