SES-79 #3
@ -0,0 +1,12 @@
|
|||||||
|
import {RouterModule, Routes} from '@angular/router';
|
||||||
|
import {HomeComponent} from './app/pages/home/home.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: HomeComponent,
|
||||||
|
pathMatch: 'full'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const appRoutingModule = RouterModule.forRoot(routes);
|
@ -5,28 +5,21 @@ import { HttpClientModule } from '@angular/common/http';
|
|||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { NavMenuComponent } from './nav-menu/nav-menu.component';
|
import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
|
||||||
import { HomeComponent } from './home/home.component';
|
import { HomeComponent } from './pages/home/home.component';
|
||||||
import { CounterComponent } from './counter/counter.component';
|
import {appRoutingModule} from '../app.routing';
|
||||||
import { FetchDataComponent } from './fetch-data/fetch-data.component';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
NavMenuComponent,
|
NavMenuComponent,
|
||||||
HomeComponent,
|
HomeComponent
|
||||||
CounterComponent,
|
|
||||||
FetchDataComponent
|
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
RouterModule.forRoot([
|
appRoutingModule
|
||||||
{ path: '', component: HomeComponent, pathMatch: 'full' },
|
|
||||||
{ path: 'counter', component: CounterComponent },
|
|
||||||
{ path: 'fetch-data', component: FetchDataComponent },
|
|
||||||
])
|
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
@ -1,7 +0,0 @@
|
|||||||
<h1>Counter</h1>
|
|
||||||
|
|
||||||
<p>This is a simple example of an Angular component.</p>
|
|
||||||
|
|
||||||
<p aria-live="polite">Current count: <strong>{{ currentCount }}</strong></p>
|
|
||||||
|
|
||||||
<button class="btn btn-primary" (click)="incrementCounter()">Increment</button>
|
|
@ -1,34 +0,0 @@
|
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { CounterComponent } from './counter.component';
|
|
||||||
|
|
||||||
describe('CounterComponent', () => {
|
|
||||||
let fixture: ComponentFixture<CounterComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [ CounterComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(CounterComponent);
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should display a title', async(() => {
|
|
||||||
const titleText = fixture.nativeElement.querySelector('h1').textContent;
|
|
||||||
expect(titleText).toEqual('Counter');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should start with count 0, then increments by 1 when clicked', async(() => {
|
|
||||||
const countElement = fixture.nativeElement.querySelector('strong');
|
|
||||||
expect(countElement.textContent).toEqual('0');
|
|
||||||
|
|
||||||
const incrementButton = fixture.nativeElement.querySelector('button');
|
|
||||||
incrementButton.click();
|
|
||||||
fixture.detectChanges();
|
|
||||||
expect(countElement.textContent).toEqual('1');
|
|
||||||
}));
|
|
||||||
});
|
|
@ -1,13 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-counter-component',
|
|
||||||
templateUrl: './counter.component.html'
|
|
||||||
})
|
|
||||||
export class CounterComponent {
|
|
||||||
public currentCount = 0;
|
|
||||||
|
|
||||||
public incrementCounter() {
|
|
||||||
this.currentCount++;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,24 +0,0 @@
|
|||||||
<h1 id="tableLabel">Weather forecast</h1>
|
|
||||||
|
|
||||||
<p>This component demonstrates fetching data from the server.</p>
|
|
||||||
|
|
||||||
<p *ngIf="!forecasts"><em>Loading...</em></p>
|
|
||||||
|
|
||||||
<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>Temp. (C)</th>
|
|
||||||
<th>Temp. (F)</th>
|
|
||||||
<th>Summary</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr *ngFor="let forecast of forecasts">
|
|
||||||
<td>{{ forecast.date }}</td>
|
|
||||||
<td>{{ forecast.temperatureC }}</td>
|
|
||||||
<td>{{ forecast.temperatureF }}</td>
|
|
||||||
<td>{{ forecast.summary }}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
@ -1,23 +0,0 @@
|
|||||||
import { Component, Inject } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-fetch-data',
|
|
||||||
templateUrl: './fetch-data.component.html'
|
|
||||||
})
|
|
||||||
export class FetchDataComponent {
|
|
||||||
public forecasts: WeatherForecast[];
|
|
||||||
|
|
||||||
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
|
|
||||||
http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
|
|
||||||
this.forecasts = result;
|
|
||||||
}, error => console.error(error));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WeatherForecast {
|
|
||||||
date: string;
|
|
||||||
temperatureC: number;
|
|
||||||
temperatureF: number;
|
|
||||||
summary: string;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user