Skip to content

Commit a4a1f76

Browse files
brandonrobertsbrandonroberts
committed
docs(aio): Added developer guide on RxJS
1 parent cf7d47d commit a4a1f76

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2574
-23
lines changed

‎aio/content/examples/.DS_Store‎

6 KB
Binary file not shown.

‎aio/content/examples/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,7 @@ dist/
6464

6565
# plunkers
6666
*plnkr.no-link.html
67+
68+
# rxjs
69+
!rxjs/src/browser-test-shim.js
70+
!rxjs/src/jasmine-marbles.umd.js

‎aio/content/examples/rxjs/e2e-spec.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use strict'; // necessary for es6 output in node
2+
3+
import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor';
4+
5+
describe('RxJS', function () {
6+
let page: any;
7+
8+
function getPage() {
9+
return {
10+
findHrefs: () => element.all(by.css('my-app a')),
11+
findHeroes: () => element(by.linkText('Heroes')),
12+
findHeroCounter: () => element(by.linkText('Hero Counter')),
13+
14+
findMessageLog: () => element(by.css('message-log')),
15+
findHeroList: () => element(by.css('ul.items')),
16+
findHeroListItems: () => element.all(by.css('ul.items li')),
17+
18+
findHeroDetailDivs: () => element.all(by.css('ng-component div div'))
19+
};
20+
}
21+
22+
beforeAll(function () {
23+
browser.get('');
24+
});
25+
26+
beforeEach(() => {
27+
page = getPage();
28+
});
29+
30+
it('should have 10 heroes', async() => {
31+
const heroes: ElementArrayFinder = page.findHeroListItems();
32+
33+
expect(await heroes.count()).toBe(10);
34+
});
35+
36+
it('should have 1 initial event log items', async() => {
37+
const log: ElementFinder = page.findMessageLog();
38+
const logItems: ElementArrayFinder = log.all(by.css('ul li'));
39+
40+
expect(await logItems.count()).toBe(1);
41+
});
42+
43+
xit('should add log entries after leaving hero counter page', async() => {
44+
const heroCounter: ElementFinder = page.findHeroCounter();
45+
const heroes: ElementFinder = page.findHeroes();
46+
const log: ElementFinder = page.findMessageLog();
47+
const logItems: ElementArrayFinder = log.all(by.css('ul li'));
48+
await heroCounter.click();
49+
await heroes.click();
50+
51+
expect(await logItems.count()).toBe(9);
52+
});
53+
54+
it('should display hero details', async () => {
55+
const hero: ElementFinder = page.findHeroListItems().first().element(by.css('a'));
56+
const heroDetailDivs = page.findHeroDetailDivs();
57+
await hero.click();
58+
59+
expect(await heroDetailDivs.first().getText()).toContain('ID: 1');
60+
expect(await heroDetailDivs.last().getText()).toContain('Name: Mr. Nice');
61+
});
62+
});

‎aio/content/examples/rxjs/example-config.json‎

Whitespace-only changes.

‎aio/content/examples/rxjs/plnkr.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"description": "RxJS",
3+
"basePath": "src/",
4+
"files":[
5+
"!**/*.d.ts",
6+
"!**/*.js",
7+
"!**/*.[0-9].*"
8+
],
9+
"tags": ["rxjs", "observable"]
10+
}

‎aio/content/examples/rxjs/src/app/app-routing.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { HeroListComponent } from './hero-list.component';
4+
import { HeroCounterComponent } from './hero-counter.component';
5+
import { HeroDetailComponent } from './hero-detail.component';
6+
7+
const appRoutes: Routes = [
8+
{ path: 'hero/counter', component: HeroCounterComponent },
9+
{ path: 'hero/:id', component: HeroDetailComponent },
10+
{ path: 'heroes', component: HeroListComponent },
11+
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
12+
];
13+
14+
@NgModule({
15+
imports: [RouterModule.forRoot(appRoutes)],
16+
exports: [RouterModule]
17+
})
18+
export class AppRoutingModule {}

‎aio/content/examples/rxjs/src/app/app.component.1.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component, OnInit } from '@angular/core';
4+
import { EventAggregatorService } from './event-aggregator.service';
5+
import { ObservablePrinciples } from './observable-principles';
6+
7+
// #docregion message-log
8+
@Component({
9+
selector: 'my-app',
10+
template: `
11+
<h1 class="title">RxJS in Angular</h1>
12+
13+
<a routerLink="/heroes">Heroes</a><br>
14+
<a routerLink="/hero/counter">Hero Counter</a><br>
15+
16+
<router-outlet></router-outlet>
17+
18+
<message-log></message-log>
19+
`
20+
})
21+
// #enddocregion message-log
22+
export class AppComponent implements OnInit {
23+
constructor(
24+
private eventService: EventAggregatorService,
25+
private principles: ObservablePrinciples) {}
26+
27+
ngOnInit() {
28+
this.eventService.add({
29+
type: 'init',
30+
message: 'Application Initialized'
31+
});
32+
33+
this.principles.callFunctionalExamples();
34+
this.principles.callPromiseExamples();
35+
}
36+
}

‎aio/content/examples/rxjs/src/app/app.component.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component, OnInit } from '@angular/core';
4+
import { EventAggregatorService } from './event-aggregator.service';
5+
6+
@Component({
7+
selector: 'my-app',
8+
template: `
9+
<h1 class="title">RxJS in Angular</h1>
10+
11+
<a routerLink="/heroes">Heroes</a><br>
12+
<a routerLink="/hero/counter">Hero Counter</a><br>
13+
14+
<router-outlet></router-outlet>
15+
16+
<message-log></message-log>
17+
`
18+
})
19+
export class AppComponent implements OnInit {
20+
constructor(
21+
private eventService: EventAggregatorService) {}
22+
23+
ngOnInit() {
24+
this.eventService.add({
25+
type: 'init',
26+
message: 'Application Initialized'
27+
});
28+
}
29+
}

‎aio/content/examples/rxjs/src/app/app.module.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// #docregion
2+
import { NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { HttpModule } from '@angular/http';
5+
import { ReactiveFormsModule } from '@angular/forms';
6+
7+
import { AppComponent } from './app.component';
8+
import { AppRoutingModule } from './app-routing.module';
9+
import { HeroListComponent } from './hero-list.component';
10+
import { HeroCounterComponent } from './hero-counter.component';
11+
import { MessageLogComponent } from './message-log.component';
12+
import { HeroDetailComponent } from './hero-detail.component';
13+
14+
import { HeroService } from './hero.service';
15+
16+
// #docregion event-aggregator-import
17+
import { EventAggregatorService } from './event-aggregator.service';
18+
// #enddocregion event-aggregator-import
19+
20+
// Imports for loading & configuring the in-memory web api
21+
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
22+
import { InMemoryDataService } from './in-memory-data.service';
23+
24+
@NgModule({
25+
imports: [
26+
BrowserModule,
27+
HttpModule,
28+
AppRoutingModule,
29+
ReactiveFormsModule,
30+
InMemoryWebApiModule.forRoot(InMemoryDataService)
31+
],
32+
declarations: [
33+
AppComponent,
34+
HeroCounterComponent,
35+
HeroListComponent,
36+
MessageLogComponent,
37+
HeroDetailComponent
38+
],
39+
providers: [
40+
HeroService,
41+
EventAggregatorService
42+
],
43+
bootstrap: [ AppComponent ]
44+
})
45+
export class AppModule {
46+
}
47+
// #enddocregion

‎aio/content/examples/rxjs/src/app/event-aggregator.service.spec.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// #docregion
2+
// #docplaster
3+
// #docregion testing-1
4+
import { TestBed } from '@angular/core/testing';
5+
import { EventAggregatorService, AppEvent } from './event-aggregator.service';
6+
7+
describe('Event Aggregator Service', () => {
8+
let eventService: EventAggregatorService;
9+
10+
beforeEach(() => {
11+
TestBed.configureTestingModule({
12+
providers: [
13+
EventAggregatorService
14+
]
15+
});
16+
17+
eventService = TestBed.get(EventAggregatorService);
18+
});
19+
// #enddocregion testing-1
20+
// #docregion testing-2
21+
it('should start with an empty array', () => {
22+
eventService.events$.subscribe(events => {
23+
expect(events.length).toBe(0);
24+
});
25+
});
26+
// #enddocregion testing-2
27+
// #docregion testing-3
28+
it('should append new events to the array when add() is called', () => {
29+
const event: AppEvent = {
30+
type: 'Event',
31+
message: 'An event occurred'
32+
};
33+
34+
eventService.add(event);
35+
36+
eventService.events$.subscribe(events => {
37+
expect(events.length).toBe(1);
38+
expect(events[0]).toEqual(event);
39+
});
40+
});
41+
// #enddocregion testing-3
42+
// #docregion testing-1
43+
});
44+
// #enddocregion testing-1

0 commit comments

Comments
 (0)