diff --git a/angular.io/angular-cli.json b/angular.io/angular-cli.json index 9a820c1866..66edaae4fa 100644 --- a/angular.io/angular-cli.json +++ b/angular.io/angular-cli.json @@ -16,7 +16,7 @@ "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.json", - "prefix": "app", + "prefix": "aio", "styles": [ "styles.scss" ], diff --git a/angular.io/e2e/app.e2e-spec.ts b/angular.io/e2e/app.e2e-spec.ts index 65f3ff6f23..1f33ba48d5 100644 --- a/angular.io/e2e/app.e2e-spec.ts +++ b/angular.io/e2e/app.e2e-spec.ts @@ -7,8 +7,10 @@ describe('site App', function() { page = new SitePage(); }); - it('should display message saying app works', () => { + it('should show features text after clicking "Features"', () => { page.navigateTo(); - expect(page.getParagraphText()).toEqual('home-page works!'); + page.featureLink.click().then(() => { + expect(page.getDocViewerText()).toContain('Progressive web apps'); + }); }); }); diff --git a/angular.io/e2e/app.po.ts b/angular.io/e2e/app.po.ts index 74d5448125..4d6ce57dee 100644 --- a/angular.io/e2e/app.po.ts +++ b/angular.io/e2e/app.po.ts @@ -1,11 +1,14 @@ import { browser, element, by } from 'protractor'; export class SitePage { + + featureLink = element(by.css('md-toolbar a[aioNavLink=features]')); + navigateTo() { return browser.get('/'); } - getParagraphText() { - return element(by.css('app-home-page p')).getText(); + getDocViewerText() { + return element(by.css('aio-doc-viewer')).getText(); } } diff --git a/angular.io/src/app/app.component.html b/angular.io/src/app/app.component.html index 951bc70dfb..118fa24c4c 100644 --- a/angular.io/src/app/app.component.html +++ b/angular.io/src/app/app.component.html @@ -1,7 +1,10 @@ - Angular - + Angular + Home + News + Features +
- +
diff --git a/angular.io/src/app/app.component.scss b/angular.io/src/app/app.component.scss index e69de29bb2..9c7f0a83e8 100644 --- a/angular.io/src/app/app.component.scss +++ b/angular.io/src/app/app.component.scss @@ -0,0 +1,8 @@ +.fill-remaining-space { + flex: 1 1 auto; +} +.nav-link { + margin-right: 10px; + margin-left: 20px; + cursor: pointer; +} diff --git a/angular.io/src/app/app.component.ts b/angular.io/src/app/app.component.ts index a2f7fddaf4..012d81275c 100644 --- a/angular.io/src/app/app.component.ts +++ b/angular.io/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; - +import { NavEngine } from './nav-engine/nav-engine'; @Component({ - selector: 'app-shell', + selector: 'aio-shell', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app works!'; + constructor(public navEngine: NavEngine) {} } diff --git a/angular.io/src/app/app.module.ts b/angular.io/src/app/app.module.ts index 3b3574b4b9..bc4656432a 100644 --- a/angular.io/src/app/app.module.ts +++ b/angular.io/src/app/app.module.ts @@ -3,19 +3,23 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { MdToolbarModule } from '@angular/material/toolbar'; +import { MdButtonModule} from '@angular/material/button'; +import { DocViewerComponent } from './doc-viewer/doc-viewer.component'; +import { NavEngine } from './nav-engine/nav-engine'; +import { NavLinkDirective } from './nav-engine/nav-link'; @NgModule({ declarations: [ - AppComponent + AppComponent, + DocViewerComponent, + NavLinkDirective ], imports: [ BrowserModule, MdToolbarModule.forRoot(), - RouterModule.forRoot([ - { path: '', loadChildren: './home-page/home-page.module#HomePageModule'} - ]) + MdButtonModule.forRoot() ], - providers: [], + providers: [NavEngine], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/angular.io/src/app/doc-viewer/doc-viewer.component.css b/angular.io/src/app/doc-viewer/doc-viewer.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/angular.io/src/app/doc-viewer/doc-viewer.component.html b/angular.io/src/app/doc-viewer/doc-viewer.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/angular.io/src/app/doc-viewer/doc-viewer.component.spec.ts b/angular.io/src/app/doc-viewer/doc-viewer.component.spec.ts new file mode 100644 index 0000000000..52dfe9fbdf --- /dev/null +++ b/angular.io/src/app/doc-viewer/doc-viewer.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { DocViewerComponent } from './doc-viewer.component'; + +describe('DocViewerComponent', () => { + let component: DocViewerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DocViewerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DocViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular.io/src/app/doc-viewer/doc-viewer.component.ts b/angular.io/src/app/doc-viewer/doc-viewer.component.ts new file mode 100644 index 0000000000..1270811ff2 --- /dev/null +++ b/angular.io/src/app/doc-viewer/doc-viewer.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit, Input, ElementRef, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'aio-doc-viewer', + templateUrl: './doc-viewer.component.html', + styleUrls: ['./doc-viewer.component.css'], + // TODO(robwormald): shadow DOM and emulated don't work here (?!) + // encapsulation: ViewEncapsulation.Native +}) +export class DocViewerComponent implements OnInit { + + @Input() + set doc(currentDoc) { + if (currentDoc) { + this.element.nativeElement.innerHTML = currentDoc.content; + } + } + + constructor(private element: ElementRef) { } + + ngOnInit() { + } + +} diff --git a/angular.io/src/app/docs-app/docs-app.component.ts b/angular.io/src/app/docs-app/docs-app.component.ts index 7b57100b49..659da60ab8 100644 --- a/angular.io/src/app/docs-app/docs-app.component.ts +++ b/angular.io/src/app/docs-app/docs-app.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-ngio-docs', + selector: 'aio-ngio-docs', templateUrl: './docs-app.component.html', styleUrls: ['./docs-app.component.css'] }) diff --git a/angular.io/src/app/home-page/home-page.component.ts b/angular.io/src/app/home-page/home-page.component.ts index 24e18724df..ad162c8e1c 100644 --- a/angular.io/src/app/home-page/home-page.component.ts +++ b/angular.io/src/app/home-page/home-page.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-home-page', + selector: 'aio-home-page', templateUrl: './home-page.component.html', styleUrls: ['./home-page.component.css'] }) diff --git a/angular.io/src/app/nav-engine/nav-engine.ts b/angular.io/src/app/nav-engine/nav-engine.ts new file mode 100644 index 0000000000..86ed275587 --- /dev/null +++ b/angular.io/src/app/nav-engine/nav-engine.ts @@ -0,0 +1,32 @@ +declare var fetch; + +// TODO(robwormald): figure out how to handle this properly... +const siteMap = [ + { 'title': 'Home', 'url': 'assets/documents/home.html', id: 'home'}, + { 'title': 'Features', 'url': 'assets/documents/features.html', id: 'features'}, + { 'title': 'News', 'url': 'assets/documents/news.html', id: 'news'} +]; + + +export class NavEngine { + currentDoc: any; + constructor() {} + navigate(documentId) { + console.log('navigating to', documentId); + const doc = siteMap.find(d => d.id === documentId); + if (doc) { + this._fetchDoc(doc.url) + .then(content => { + console.log('fetched content', content); + this.currentDoc = Object.assign({}, doc, {content}); + }); + } + } + + private _fetchDoc(url) { + // TODO(robwormald): use Http proper once new API is done. + return fetch(url).then(res => res.text()); + } +} + + diff --git a/angular.io/src/app/nav-engine/nav-link.ts b/angular.io/src/app/nav-engine/nav-link.ts new file mode 100644 index 0000000000..febef1948b --- /dev/null +++ b/angular.io/src/app/nav-engine/nav-link.ts @@ -0,0 +1,19 @@ +import { Directive, HostListener, Input } from '@angular/core'; +import { NavEngine } from './nav-engine'; + +@Directive({ + selector: '[aioNavLink]' +}) +export class NavLinkDirective { + + @Input() + aioNavLink: string; + + constructor(private navEngine: NavEngine) { } + + @HostListener('click', ['$event']) + onClick($event) { + this.navEngine.navigate(this.aioNavLink); + return false; + } +} diff --git a/angular.io/src/app/page-manager.service.spec.ts b/angular.io/src/app/page-manager.service.spec.ts new file mode 100644 index 0000000000..89b2a9ceab --- /dev/null +++ b/angular.io/src/app/page-manager.service.spec.ts @@ -0,0 +1,16 @@ +/* tslint:disable:no-unused-variable */ + +import { TestBed, async, inject } from '@angular/core/testing'; +import { PageManagerService } from './page-manager.service'; + +describe('PageManagerService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [PageManagerService] + }); + }); + + it('should ...', inject([PageManagerService], (service: PageManagerService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/angular.io/src/app/page-manager.service.ts b/angular.io/src/app/page-manager.service.ts new file mode 100644 index 0000000000..b038885a50 --- /dev/null +++ b/angular.io/src/app/page-manager.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class PageManagerService { + + constructor() { } + +} diff --git a/angular.io/src/index.html b/angular.io/src/index.html index 09c8b491ae..dab83942cb 100644 --- a/angular.io/src/index.html +++ b/angular.io/src/index.html @@ -23,7 +23,7 @@ - + diff --git a/angular.io/src/polyfills.ts b/angular.io/src/polyfills.ts index 5d11316a19..4a9f6bbcfd 100644 --- a/angular.io/src/polyfills.ts +++ b/angular.io/src/polyfills.ts @@ -15,6 +15,7 @@ // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/set'; +import 'reflect-metadata'; // If you need to support the browsers/features below, uncomment the import diff --git a/angular.io/tslint.json b/angular.io/tslint.json index 86bc1841f3..c374c0ac1c 100644 --- a/angular.io/tslint.json +++ b/angular.io/tslint.json @@ -98,8 +98,8 @@ "check-type" ], - "directive-selector": [true, "attribute", "app", "camelCase"], - "component-selector": [true, "element", "app", "kebab-case"], + "directive-selector": [true, "attribute", "aio", "camelCase"], + "component-selector": [true, "element", "aio", "kebab-case"], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true,