forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add universal guide (angular#18707)
- based on original effort in PR 17573 PR Close angular#18707
- Loading branch information
Showing
36 changed files
with
1,200 additions
and
336 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
/* #docregion */ | ||
h1 { | ||
font-size: 1.2em; | ||
color: #999; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,3 @@ | ||
// #docplaster | ||
// #docregion | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,62 @@ | ||
// #docplaster | ||
// #docregion | ||
// #docregion v1, v2 | ||
import { NgModule } from '@angular/core'; | ||
import { BrowserModule } from '@angular/platform-browser'; | ||
import { FormsModule } from '@angular/forms'; | ||
import { HttpModule } from '@angular/http'; | ||
// #docregion simple | ||
import { NgModule } from '@angular/core'; | ||
import { BrowserModule } from '@angular/platform-browser'; | ||
import { FormsModule } from '@angular/forms'; | ||
import { HttpClientModule } from '@angular/common/http'; | ||
|
||
import { AppRoutingModule } from './app-routing.module'; | ||
|
||
// #enddocregion v1 | ||
// Imports for loading & configuring the in-memory web api | ||
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; | ||
import { InMemoryDataService } from './in-memory-data.service'; | ||
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; | ||
import { InMemoryDataService } from './in-memory-data.service'; | ||
|
||
// #docregion v1 | ||
import { AppComponent } from './app.component'; | ||
import { DashboardComponent } from './dashboard.component'; | ||
import { HeroesComponent } from './heroes.component'; | ||
import { HeroDetailComponent } from './hero-detail.component'; | ||
import { HeroService } from './hero.service'; | ||
// #enddocregion v1, v2 | ||
import { HeroSearchComponent } from './hero-search.component'; | ||
// #docregion v1, v2 | ||
|
||
// #enddocregion simple | ||
// #docregion platform-detection | ||
import { PLATFORM_ID, APP_ID, Inject } from '@angular/core'; | ||
import { isPlatformBrowser } from '@angular/common'; | ||
|
||
// #enddocregion platform-detection | ||
// #docregion simple | ||
@NgModule({ | ||
imports: [ | ||
BrowserModule.withServerTransition({ | ||
appId: 'toh-universal' | ||
}), | ||
// #docregion browsermodule | ||
BrowserModule.withServerTransition({ appId: 'uni' }), | ||
// #enddocregion browsermodule | ||
FormsModule, | ||
HttpModule, | ||
// #enddocregion v1 | ||
// #docregion in-mem-web-api | ||
InMemoryWebApiModule.forRoot(InMemoryDataService), | ||
// #enddocregion in-mem-web-api | ||
// #docregion v1 | ||
HttpClientModule, | ||
HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService), | ||
AppRoutingModule | ||
], | ||
// #docregion search | ||
declarations: [ | ||
AppComponent, | ||
DashboardComponent, | ||
HeroDetailComponent, | ||
HeroesComponent, | ||
// #enddocregion v1, v2 | ||
HeroSearchComponent | ||
// #docregion v1, v2 | ||
], | ||
// #enddocregion search | ||
providers: [ HeroService ], | ||
bootstrap: [ AppComponent ] | ||
}) | ||
export class AppModule { } | ||
export class AppModule { | ||
|
||
// #enddocregion simple | ||
// #docregion platform-detection | ||
constructor( | ||
@Inject(PLATFORM_ID) private platformId: Object, | ||
@Inject(APP_ID) private appId: string) { | ||
const platform = isPlatformBrowser(platformId) ? | ||
'on the server' : 'in the browser'; | ||
console.log(`Running ${platform} with appId=${appId}`); | ||
} | ||
// #enddocregion platform-detection | ||
// #docregion simple | ||
} | ||
// #enddocregion simple |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
/* #docregion */ | ||
[class*='col-'] { | ||
float: left; | ||
padding-right: 20px; | ||
|
3 changes: 1 addition & 2 deletions
3
aio/content/examples/universal/src/app/dashboard.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 6 additions & 5 deletions
11
aio/content/examples/universal/src/app/dashboard.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,23 @@ | ||
// #docregion , search | ||
import { Component, OnInit } from '@angular/core'; | ||
|
||
import { Hero } from './hero'; | ||
import { HeroService } from './hero.service'; | ||
|
||
import 'rxjs/add/operator/map'; | ||
import { Observable } from 'rxjs/Observable'; | ||
|
||
@Component({ | ||
selector: 'my-dashboard', | ||
templateUrl: './dashboard.component.html', | ||
styleUrls: [ './dashboard.component.css' ] | ||
}) | ||
// #enddocregion search | ||
export class DashboardComponent implements OnInit { | ||
heroes: Hero[] = []; | ||
heroes: Observable<Hero[]>; | ||
|
||
constructor(private heroService: HeroService) { } | ||
|
||
ngOnInit(): void { | ||
this.heroService.getHeroes() | ||
.then(heroes => this.heroes = heroes.slice(1, 5)); | ||
this.heroes = this.heroService.getHeroes() | ||
.map(heroes => heroes.slice(1, 5)); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
aio/content/examples/universal/src/app/hero-search.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
/* #docregion */ | ||
.search-result{ | ||
border-bottom: 1px solid gray; | ||
border-left: 1px solid gray; | ||
|
1 change: 0 additions & 1 deletion
1
aio/content/examples/universal/src/app/hero-search.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 16 additions & 8 deletions
24
aio/content/examples/universal/src/app/hero-search.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,28 @@ | ||
// #docregion | ||
import { Injectable } from '@angular/core'; | ||
import { Http } from '@angular/http'; | ||
import { Inject, Injectable, Optional } from '@angular/core'; | ||
import { APP_BASE_HREF } from '@angular/common'; | ||
import { HttpClient } from '@angular/common/http'; | ||
|
||
import { Observable } from 'rxjs/Observable'; | ||
import { Observable } from 'rxjs/Observable'; | ||
import 'rxjs/add/operator/map'; | ||
|
||
import { Hero } from './hero'; | ||
import { Hero } from './hero'; | ||
|
||
// #docregion class | ||
@Injectable() | ||
export class HeroSearchService { | ||
|
||
constructor(private http: Http) {} | ||
private searchUrl = 'api/heroes/?name='; // URL to web api | ||
|
||
constructor( | ||
private http: HttpClient, | ||
@Optional() @Inject(APP_BASE_HREF) origin: string) { | ||
this.searchUrl = (origin || '') + this.searchUrl; | ||
} | ||
|
||
search(term: string): Observable<Hero[]> { | ||
return this.http | ||
.get(`api/heroes/?name=${term}`) | ||
.map(response => response.json().data as Hero[]); | ||
.get(this.searchUrl + term) | ||
.map((data: any) => data.data as Hero[]); | ||
} | ||
} | ||
// #enddocregion class |
Oops, something went wrong.