fix(aio): remove previous files
This commit is contained in:
Peter Bacon Darwin
Igor Minar
parent
e6e8123bdd
commit
93c0ab7131
|
|
@ -1,306 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { Component, DebugElement } from '@angular/core';
|
||||
|
||||
import { ComponentFactoryResolver, ElementRef, Injector, NgModule, OnInit, ViewChild } from '@angular/core';
|
||||
|
||||
import { Doc, DocMetadata } from '../nav-engine';
|
||||
import { DocViewerComponent } from '../doc-viewer/doc-viewer.component';
|
||||
|
||||
import { embeddedComponents, EmbeddedComponents } from '../embedded';
|
||||
|
||||
|
||||
/// Embedded Test Components ///
|
||||
|
||||
///// FooComponent /////
|
||||
|
||||
@Component({
|
||||
selector: 'aio-foo',
|
||||
template: `Foo Component`
|
||||
})
|
||||
class FooComponent { }
|
||||
|
||||
///// BarComponent /////
|
||||
|
||||
@Component({
|
||||
selector: 'aio-bar',
|
||||
template: `
|
||||
<hr>
|
||||
<h2>Bar Component</h2>
|
||||
<p #barContent></p>
|
||||
<hr>
|
||||
`
|
||||
})
|
||||
class BarComponent implements OnInit {
|
||||
|
||||
@ViewChild('barContent') barContentRef: ElementRef;
|
||||
|
||||
constructor(public elementRef: ElementRef) { }
|
||||
|
||||
// Project content in ngOnInit just like CodeExampleComponent
|
||||
ngOnInit() {
|
||||
// Security: this is a test component; never deployed
|
||||
this.barContentRef.nativeElement.innerHTML = this.elementRef.nativeElement.aioBarContent;
|
||||
}
|
||||
}
|
||||
|
||||
///// BazComponent /////
|
||||
|
||||
@Component({
|
||||
selector: 'aio-baz',
|
||||
template: `
|
||||
<div>++++++++++++++</div>
|
||||
<h2>Baz Component</h2>
|
||||
<p #bazContent></p>
|
||||
<div>++++++++++++++</div>
|
||||
`
|
||||
})
|
||||
class BazComponent implements OnInit {
|
||||
|
||||
@ViewChild('bazContent') bazContentRef: ElementRef;
|
||||
|
||||
constructor(public elementRef: ElementRef) { }
|
||||
|
||||
// Project content in ngOnInit just like CodeExampleComponent
|
||||
ngOnInit() {
|
||||
// Security: this is a test component; never deployed
|
||||
this.bazContentRef.nativeElement.innerHTML = this.elementRef.nativeElement.aioBazContent;
|
||||
}
|
||||
}
|
||||
///// Test Module //////
|
||||
|
||||
const embeddedTestComponents = [FooComponent, BarComponent, BazComponent, ...embeddedComponents];
|
||||
|
||||
@NgModule({
|
||||
entryComponents: embeddedTestComponents
|
||||
})
|
||||
class TestModule { }
|
||||
|
||||
//// Test Component //////
|
||||
|
||||
@Component({
|
||||
selector: 'aio-test',
|
||||
template: `
|
||||
<aio-doc-viewer>Test Component</aio-doc-viewer>
|
||||
`
|
||||
})
|
||||
class TestComponent {
|
||||
private currentDoc: Doc;
|
||||
|
||||
@ViewChild(DocViewerComponent) docViewer: DocViewerComponent;
|
||||
|
||||
setDoc(doc: Doc) {
|
||||
if (this.docViewer) {
|
||||
this.docViewer.doc = doc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//////// Tests //////////////
|
||||
|
||||
describe('DocViewerComponent', () => {
|
||||
const fakeDocMetadata: DocMetadata = { docId: 'fake', title: 'fake Doc' };
|
||||
let component: TestComponent;
|
||||
let docViewerDE: DebugElement;
|
||||
let docViewerEl: HTMLElement;
|
||||
let fixture: ComponentFixture<TestComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ TestModule ],
|
||||
declarations: [
|
||||
TestComponent,
|
||||
DocViewerComponent,
|
||||
embeddedTestComponents
|
||||
],
|
||||
providers: [
|
||||
{provide: EmbeddedComponents, useValue: {components: embeddedTestComponents}}
|
||||
]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TestComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
docViewerDE = fixture.debugElement.children[0];
|
||||
docViewerEl = docViewerDE.nativeElement;
|
||||
});
|
||||
|
||||
it('should create a DocViewer', () => {
|
||||
expect(component.docViewer).toBeTruthy();
|
||||
});
|
||||
|
||||
it(('should display nothing when set DocViewer.doc to doc w/o content'), () => {
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content: '' };
|
||||
expect(docViewerEl.innerHTML).toBe('');
|
||||
});
|
||||
|
||||
it(('should display simple static content doc'), () => {
|
||||
const content = '<p>Howdy, doc viewer</p>';
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
expect(docViewerEl.innerHTML).toEqual(content);
|
||||
});
|
||||
|
||||
it(('should display nothing after reset static content doc'), () => {
|
||||
const content = '<p>Howdy, doc viewer</p>';
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
fixture.detectChanges();
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content: '' };
|
||||
expect(docViewerEl.innerHTML).toEqual('');
|
||||
});
|
||||
|
||||
it(('should apply FooComponent'), () => {
|
||||
const content = `
|
||||
<p>Above Foo</p>
|
||||
<p><aio-foo></aio-foo></p>
|
||||
<p>Below Foo</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
const fooHtml = docViewerEl.querySelector('aio-foo').innerHTML;
|
||||
expect(fooHtml).toContain('Foo Component');
|
||||
});
|
||||
|
||||
it(('should apply multiple FooComponents'), () => {
|
||||
const content = `
|
||||
<p>Above Foo</p>
|
||||
<p><aio-foo></aio-foo></p>
|
||||
<div style="margin-left: 2em;">
|
||||
Holds a
|
||||
<aio-foo>Ignored text</aio-foo>
|
||||
</div>
|
||||
<p>Below Foo</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
const foos = docViewerEl.querySelectorAll('aio-foo');
|
||||
expect(foos.length).toBe(2);
|
||||
});
|
||||
|
||||
it(('should apply BarComponent'), () => {
|
||||
const content = `
|
||||
<p>Above Bar</p>
|
||||
<aio-bar></aio-bar>
|
||||
<p>Below Bar</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
|
||||
expect(barHtml).toContain('Bar Component');
|
||||
});
|
||||
|
||||
it(('should project bar content into BarComponent'), () => {
|
||||
const content = `
|
||||
<p>Above Bar</p>
|
||||
<aio-bar>###bar content###</aio-bar>
|
||||
<p>Below Bar</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
|
||||
// necessary to trigger projection within ngOnInit
|
||||
fixture.detectChanges();
|
||||
|
||||
const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
|
||||
expect(barHtml).toContain('###bar content###');
|
||||
});
|
||||
|
||||
|
||||
it(('should include Foo and Bar'), () => {
|
||||
const content = `
|
||||
<p>Top</p>
|
||||
<p><aio-foo>ignored</aio-foo></p>
|
||||
<aio-bar>###bar content###</aio-bar>
|
||||
<p><aio-foo></aio-foo></p>
|
||||
<p>Bottom</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
|
||||
// necessary to trigger Bar's projection within ngOnInit
|
||||
fixture.detectChanges();
|
||||
|
||||
const foos = docViewerEl.querySelectorAll('aio-foo');
|
||||
expect(foos.length).toBe(2, 'should have 2 foos');
|
||||
|
||||
const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
|
||||
expect(barHtml).toContain('###bar content###', 'should have bar with projected content');
|
||||
});
|
||||
|
||||
it(('should not include Bar within Foo'), () => {
|
||||
const content = `
|
||||
<p>Top</p>
|
||||
<div>
|
||||
<aio-foo>
|
||||
<aio-bar>###bar content###</aio-bar>
|
||||
</aio-foo>
|
||||
</div>
|
||||
<p><aio-foo></aio-foo><p>
|
||||
<p>Bottom</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
|
||||
// necessary to trigger Bar's projection within ngOnInit
|
||||
fixture.detectChanges();
|
||||
|
||||
const foos = docViewerEl.querySelectorAll('aio-foo');
|
||||
expect(foos.length).toBe(2, 'should have 2 foos');
|
||||
|
||||
const bars = docViewerEl.querySelectorAll('aio-bar');
|
||||
expect(bars.length).toBe(0, 'did not expect Bar inside Foo');
|
||||
});
|
||||
|
||||
// because FooComponents are processed before BazComponents
|
||||
it(('should include Foo within Bar'), () => {
|
||||
const content = `
|
||||
<p>Top</p>
|
||||
<aio-bar>
|
||||
<div style="margin-left: 2em">
|
||||
Inner <aio-foo></aio-foo>
|
||||
</div>
|
||||
</aio-bar>
|
||||
<p><aio-foo></aio-foo></p>
|
||||
<p>Bottom</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
|
||||
// necessary to trigger Bar's projection within ngOnInit
|
||||
fixture.detectChanges();
|
||||
|
||||
const foos = docViewerEl.querySelectorAll('aio-foo');
|
||||
expect(foos.length).toBe(2, 'should have 2 foos');
|
||||
|
||||
const bars = docViewerEl.querySelectorAll('aio-bar');
|
||||
expect(bars.length).toBe(1, 'should have a bar');
|
||||
expect(bars[0].innerHTML).toContain('Bar Component', 'should have bar template content');
|
||||
});
|
||||
|
||||
// The <aio-baz> tag and its inner content is copied
|
||||
// But the BazComponent is not created and therefore its template content is not displayed
|
||||
// because BarComponents are processed before BazComponents
|
||||
// and no chance for first Baz inside Bar to be processed by builder.
|
||||
it(('should NOT include Bar within Baz'), () => {
|
||||
const content = `
|
||||
<p>Top</p>
|
||||
<aio-bar>
|
||||
<div style="margin-left: 2em">
|
||||
Inner <aio-baz>---baz stuff---</aio-baz>
|
||||
</div>
|
||||
</aio-bar>
|
||||
<p><aio-baz>---More baz--</aio-baz></p>
|
||||
<p>Bottom</p>
|
||||
`;
|
||||
component.docViewer.doc = { metadata: fakeDocMetadata, content };
|
||||
|
||||
// necessary to trigger Bar's projection within ngOnInit
|
||||
fixture.detectChanges();
|
||||
const bazs = docViewerEl.querySelectorAll('aio-baz');
|
||||
|
||||
// Both baz tags are there ...
|
||||
expect(bazs.length).toBe(2, 'should have 2 bazs');
|
||||
|
||||
expect(bazs[0].innerHTML).not.toContain('Baz Component',
|
||||
'did not expect 1st Baz template content');
|
||||
|
||||
expect(bazs[1].innerHTML).toContain('Baz Component',
|
||||
'expected 2nd Baz template content');
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
import {
|
||||
Component, ComponentFactory, ComponentFactoryResolver, ComponentRef,
|
||||
DoCheck, ElementRef, Injector, Input, OnDestroy, ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
|
||||
import { Doc, DocMetadata, DocMetadataService, NavNode } from '../nav-engine';
|
||||
import { EmbeddedComponents } from '../embedded';
|
||||
|
||||
interface EmbeddedComponentFactory {
|
||||
contentPropertyName: string;
|
||||
factory: ComponentFactory<any>;
|
||||
}
|
||||
|
||||
// Initialization prevents flicker once pre-rendering is on
|
||||
const initialDocViewerElement = document.querySelector('aio-doc-viewer');
|
||||
const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElement.innerHTML : '';
|
||||
|
||||
@Component({
|
||||
selector: 'aio-doc-viewer',
|
||||
template: '',
|
||||
providers: [ DocMetadataService ],
|
||||
styles: [ `
|
||||
:host >>> doc-title.not-found h1 {
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
`]
|
||||
// TODO(robwormald): shadow DOM and emulated don't work here (?!)
|
||||
// encapsulation: ViewEncapsulation.Native
|
||||
})
|
||||
export class DocViewerComponent implements DoCheck, OnDestroy {
|
||||
|
||||
private displayedDoc: DisplayedDoc;
|
||||
private embeddedComponentFactories: Map<string, EmbeddedComponentFactory> = new Map();
|
||||
private hostElement: HTMLElement;
|
||||
|
||||
constructor(
|
||||
componentFactoryResolver: ComponentFactoryResolver,
|
||||
elementRef: ElementRef,
|
||||
embeddedComponents: EmbeddedComponents,
|
||||
private docMetadataService: DocMetadataService,
|
||||
private injector: Injector
|
||||
) {
|
||||
this.hostElement = elementRef.nativeElement;
|
||||
// Security: the initialDocViewerContent comes from the prerendered DOM and is considered to be secure
|
||||
this.hostElement.innerHTML = initialDocViewerContent;
|
||||
|
||||
for (const component of embeddedComponents.components) {
|
||||
const factory = componentFactoryResolver.resolveComponentFactory(component);
|
||||
const selector = factory.selector;
|
||||
const contentPropertyName = this.selectorToContentPropertyName(selector);
|
||||
this.embeddedComponentFactories.set(selector, { contentPropertyName, factory });
|
||||
}
|
||||
}
|
||||
|
||||
@Input()
|
||||
set doc(newDoc: Doc) {
|
||||
this.ngOnDestroy();
|
||||
if (newDoc) {
|
||||
this.docMetadataService.metadata = newDoc.metadata;
|
||||
window.scrollTo(0, 0);
|
||||
this.build(newDoc);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add doc content to host element and build it out with embedded components
|
||||
*/
|
||||
private build(doc: Doc) {
|
||||
|
||||
const displayedDoc = this.displayedDoc = new DisplayedDoc(doc);
|
||||
|
||||
// security: the doc.content is always authored by the documentation team
|
||||
// and is considered to be safe
|
||||
this.hostElement.innerHTML = doc.content || '';
|
||||
|
||||
if (!doc.content) { return; }
|
||||
|
||||
// TODO(i): why can't I use for-of? why doesn't typescript like Map#value() iterators?
|
||||
this.embeddedComponentFactories.forEach(({ contentPropertyName, factory }, selector) => {
|
||||
const embeddedComponentElements = this.hostElement.querySelectorAll(selector);
|
||||
|
||||
// cast due to https://github.com/Microsoft/TypeScript/issues/4947
|
||||
for (const element of embeddedComponentElements as any as HTMLElement[]){
|
||||
// hack: preserve the current element content because the factory will empty it out
|
||||
// security: the source of this innerHTML is always authored by the documentation team
|
||||
// and is considered to be safe
|
||||
element[contentPropertyName] = element.innerHTML;
|
||||
displayedDoc.addEmbeddedComponent(factory.create(this.injector, [], element));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngDoCheck() {
|
||||
if (this.displayedDoc) { this.displayedDoc.detectChanges(); }
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// destroy components otherwise there will be memory leaks
|
||||
if (this.displayedDoc) {
|
||||
this.displayedDoc.destroy();
|
||||
this.displayedDoc = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute the component content property name by converting the selector to camelCase and appending
|
||||
* 'Content', e.g. live-example => liveExampleContent
|
||||
*/
|
||||
private selectorToContentPropertyName(selector: string) {
|
||||
return selector.replace(/-(.)/g, (match, $1) => $1.toUpperCase()) + 'Content';
|
||||
}
|
||||
}
|
||||
|
||||
class DisplayedDoc {
|
||||
|
||||
metadata: DocMetadata;
|
||||
|
||||
private embeddedComponents: ComponentRef<any>[] = [];
|
||||
|
||||
constructor(doc: Doc) {
|
||||
// ignore doc.content ... don't need to keep it around
|
||||
this.metadata = doc.metadata;
|
||||
}
|
||||
|
||||
addEmbeddedComponent(component: ComponentRef<any>) {
|
||||
this.embeddedComponents.push(component);
|
||||
}
|
||||
|
||||
detectChanges() {
|
||||
this.embeddedComponents.forEach(comp => comp.changeDetectorRef.detectChanges());
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// destroy components otherwise there will be memory leaks
|
||||
this.embeddedComponents.forEach(comp => comp.destroy());
|
||||
this.embeddedComponents.length = 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import { DocFetchingService } from './doc-fetching.service';
|
||||
// Write tests when/if this service is retained.
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
import { Http, Response } from '@angular/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import 'rxjs/add/operator/catch';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
import { Doc, DocMetadata } from './doc.model';
|
||||
import { Logger } from '../logger.service';
|
||||
|
||||
@Injectable()
|
||||
export class DocFetchingService {
|
||||
|
||||
private base = 'content/';
|
||||
|
||||
constructor(
|
||||
private http: Http,
|
||||
private logger: Logger) { }
|
||||
|
||||
getPath(docId: string) {
|
||||
return this.base + addPathExtension(docId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch document from server.
|
||||
* NB: pass 404 response to caller as Doc with empty string content
|
||||
* Other errors and non-OK status responses are thrown errors.
|
||||
* TODO: add timeout and retry for lost connection
|
||||
*/
|
||||
getDocFile(docId: string): Observable<Doc> {
|
||||
|
||||
if (!docId) {
|
||||
const emsg = 'getFile: no document id';
|
||||
this.logger.error(emsg);
|
||||
throw new Error(emsg);
|
||||
}
|
||||
|
||||
// TODO: Metadata will be updated from file
|
||||
const metadata: DocMetadata = { docId, title: docId };
|
||||
const url = this.getPath(docId);
|
||||
|
||||
this.logger.log(`Fetching document file at '${url}'`);
|
||||
|
||||
return this.http.get(url)
|
||||
.map(res => <Doc> { metadata, content: res.text() }) // TODO: It will come as JSON soon
|
||||
.do(content => this.logger.log(`Fetched document file at '${url}'`) )
|
||||
.catch((error: Response) => {
|
||||
if (error.status === 404) {
|
||||
this.logger.error(`Document file not found at '${url}'`);
|
||||
return of({metadata, content: ''} as Doc);
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addPathExtension(path: string) {
|
||||
if (path) {
|
||||
if (path.endsWith('/')) {
|
||||
return path + 'index.html';
|
||||
} else if (!path.endsWith('.html')) {
|
||||
return path + '.html';
|
||||
}
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
// function removePathExtension(path: string) {
|
||||
// if (path) {
|
||||
// if (path.endsWith('/index.html')) {
|
||||
// return path.substring(0, path.length - 10);
|
||||
// } else if (path.endsWith('.html')) {
|
||||
// return path.substring(0, path.length - 5);
|
||||
// }
|
||||
// }
|
||||
// return path;
|
||||
// }
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { DocMetadata } from './doc.model';
|
||||
|
||||
@Injectable()
|
||||
export class DocMetadataService {
|
||||
metadata: DocMetadata;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
export interface DocMetadata {
|
||||
docId: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface Doc {
|
||||
metadata: DocMetadata;
|
||||
content: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* UI navigation node that describes a document or container of documents
|
||||
* Each node corresponds to a link in the UI.
|
||||
*/
|
||||
export interface NavNode {
|
||||
/** unique integer id for this node */
|
||||
id: number;
|
||||
/** Document id if this is a document node */
|
||||
docId: string;
|
||||
/** Document path (calculated from docId) if this is a document node */
|
||||
docPath: string;
|
||||
/** url to an external web page; docPath and url are mutually exclusive. */
|
||||
url?: string;
|
||||
/** Title to display in the navigation link; typically shorter */
|
||||
navTitle: string;
|
||||
/** Tooltip for links */
|
||||
tooltip: string;
|
||||
/** Ids of ancestor nodes higher in the hierarchy */
|
||||
ancestorIds: number[];
|
||||
/** true if should not be displayed in UI. Can still be loaded directly */
|
||||
// hide?: boolean; NO NO. If the JSON says, hide, simply omit it from this map
|
||||
/** If defined, this node is a container of child nodes */
|
||||
children?: NavNode[];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Navigation for the site.
|
||||
* - nodes: the top-level navigation nodes; node can have children.
|
||||
* - docs: find node for a given document id.
|
||||
*/
|
||||
export interface NavMap {
|
||||
/**
|
||||
* Map that drives the UI navigation.
|
||||
* Each node correspond to a navigation link in the UI.
|
||||
* Supports unlimited node nesting.
|
||||
*/
|
||||
nodes: NavNode[];
|
||||
|
||||
/**
|
||||
* NavNode for a document id in the NavMap.
|
||||
*/
|
||||
docs: Map<string, NavNode>;
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { fakeAsync, tick } from '@angular/core/testing';
|
||||
|
||||
import { DocService } from './doc.service';
|
||||
import { Doc, DocMetadata, NavNode } from './doc.model';
|
||||
import { DocFetchingService } from './doc-fetching.service';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import 'rxjs/add/observable/throw';
|
||||
import 'rxjs/add/operator/catch';
|
||||
import 'rxjs/add/operator/delay';
|
||||
import 'rxjs/add/operator/first';
|
||||
|
||||
describe('DocService', () => {
|
||||
let docFetchingService: DocFetchingService;
|
||||
let getFileSpy: jasmine.Spy;
|
||||
let loggerSpy: any;
|
||||
let docService: DocService;
|
||||
let testDoc: Doc;
|
||||
let testDocId: string;
|
||||
let testContent: string;
|
||||
|
||||
beforeEach(() => {
|
||||
testDocId = 'fake';
|
||||
testContent = 'fake file contents';
|
||||
testDoc = {
|
||||
metadata: {docId: testDocId, title: 'Fake Title'} as DocMetadata,
|
||||
content: testContent
|
||||
};
|
||||
|
||||
loggerSpy = jasmine.createSpyObj('logger', ['log', 'warn', 'error']);
|
||||
docFetchingService = new DocFetchingService(null, loggerSpy);
|
||||
getFileSpy = spyOn(docFetchingService, 'getDocFile').and
|
||||
.returnValue(of(testDoc).delay(0).first()); // first() -> completes
|
||||
|
||||
docService = new DocService(docFetchingService, loggerSpy);
|
||||
});
|
||||
|
||||
it('should return fake doc for fake id', fakeAsync(() => {
|
||||
docService.getDoc(testDocId).subscribe(doc =>
|
||||
expect(doc.content).toBe(testContent)
|
||||
);
|
||||
tick();
|
||||
}));
|
||||
|
||||
it('should retrieve file once for first file request', fakeAsync(() => {
|
||||
let doc: Doc;
|
||||
expect(getFileSpy.calls.count()).toBe(0, 'no call before tick');
|
||||
docService.getDoc(testDocId).subscribe(d => doc = d);
|
||||
tick();
|
||||
expect(getFileSpy.calls.count()).toBe(1, 'one call after tick');
|
||||
expect(doc).toBe(testDoc, 'expected doc');
|
||||
}));
|
||||
|
||||
it('should retrieve file from cache the second time', fakeAsync(() => {
|
||||
docService.getDoc(testDocId).subscribe(doc =>
|
||||
expect(doc).toBe(testDoc, 'expected doc from server')
|
||||
);
|
||||
tick();
|
||||
expect(getFileSpy.calls.count()).toBe(1, 'one call after 1st request');
|
||||
|
||||
docService.getDoc(testDocId).subscribe(doc =>
|
||||
expect(doc).toBe(testDoc, 'expected doc from cache')
|
||||
);
|
||||
tick();
|
||||
expect(getFileSpy.calls.count()).toBe(1, 'still only one call after 2nd request');
|
||||
}));
|
||||
|
||||
it('should pass along file error through its getDoc observable result', fakeAsync(() => {
|
||||
|
||||
const err = 'deliberate file error';
|
||||
getFileSpy.and.returnValue(
|
||||
// simulate async error in the file retrieval
|
||||
of('').delay(0).map(() => { throw new Error(err); })
|
||||
);
|
||||
|
||||
docService.getDoc(testDocId).subscribe(
|
||||
doc => expect(false).toBe(true, 'should have failed'),
|
||||
error => expect(error.message).toBe(err)
|
||||
);
|
||||
tick();
|
||||
}));
|
||||
});
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
|
||||
import { Doc, NavNode } from './doc.model';
|
||||
import { DocFetchingService } from './doc-fetching.service';
|
||||
import { Logger } from '../logger.service';
|
||||
|
||||
import { NavMapService } from './nav-map.service';
|
||||
|
||||
@Injectable()
|
||||
export class DocService {
|
||||
private cache = new Map<string, Doc>();
|
||||
private notFoundContent: string;
|
||||
|
||||
constructor(
|
||||
private fileService: DocFetchingService,
|
||||
private logger: Logger
|
||||
) { }
|
||||
|
||||
/**
|
||||
* Get document for id, from cache if found else server.
|
||||
* Pass server errors along to caller
|
||||
* Constructs and caches a "Not Found" doc when fileservice returns a doc with no content.
|
||||
*/
|
||||
getDoc(docId: string): Observable<Doc> {
|
||||
const cached = this.cache.get(docId);
|
||||
if (cached) {
|
||||
this.logger.log(`Returned cached document for '${docId}'`);
|
||||
return of(cached);
|
||||
}
|
||||
|
||||
return this.fileService.getDocFile(docId)
|
||||
.switchMap(doc => {
|
||||
this.logger.log(`Fetched document for '${docId}'`);
|
||||
return doc.content ? of(doc) :
|
||||
this.getNotFound()
|
||||
.map(nfContent => <Doc> {metadata: {docId, title: docId}, content: nfContent});
|
||||
})
|
||||
.do(doc => this.cache.set(docId, doc));
|
||||
}
|
||||
|
||||
getNotFound(): Observable<string> {
|
||||
if (this.notFoundContent) { return of(this.notFoundContent); }
|
||||
const nfDocId = 'not-found';
|
||||
return this.fileService.getDocFile(nfDocId)
|
||||
.map(doc => {
|
||||
this.logger.log(`Fetched "not found" document for '${nfDocId}'`);
|
||||
this.notFoundContent = doc.content;
|
||||
return doc.content;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { DocService } from './doc.service';
|
||||
import { DocFetchingService } from './doc-fetching.service';
|
||||
import { NavEngine } from './nav-engine.service';
|
||||
import { NavLinkDirective } from './nav-link.directive';
|
||||
import { NavMapService } from './nav-map.service';
|
||||
|
||||
export { Doc, DocMetadata, NavNode, NavMap } from './doc.model';
|
||||
export { DocMetadataService } from './doc-metadata.service';
|
||||
export { NavEngine } from './nav-engine.service';
|
||||
export { NavMapService } from './nav-map.service';
|
||||
|
||||
export const navDirectives = [
|
||||
NavLinkDirective
|
||||
];
|
||||
|
||||
export const navProviders = [
|
||||
DocService,
|
||||
DocFetchingService,
|
||||
NavEngine,
|
||||
NavMapService,
|
||||
];
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import { fakeAsync, tick} from '@angular/core/testing';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import 'rxjs/add/operator/delay';
|
||||
|
||||
import { DocService } from './doc.service';
|
||||
import { Doc, DocMetadata, NavNode } from './doc.model';
|
||||
|
||||
import { NavEngine } from './nav-engine.service';
|
||||
|
||||
describe('NavEngine', () => {
|
||||
|
||||
let fakeDoc: Doc;
|
||||
let navEngine: NavEngine;
|
||||
|
||||
beforeEach(() => {
|
||||
fakeDoc = {
|
||||
metadata: {
|
||||
docId: 'fake',
|
||||
title: 'All about the fake'
|
||||
},
|
||||
content: 'fake content'
|
||||
};
|
||||
|
||||
const docService: any = jasmine.createSpyObj('docService', ['getDoc']);
|
||||
docService.getDoc.and.returnValue(of(fakeDoc).delay(0));
|
||||
|
||||
navEngine = new NavEngine(docService);
|
||||
});
|
||||
|
||||
it('should set currentDoc to fake doc when navigate to fake id', fakeAsync(() => {
|
||||
navEngine.navigate('fake');
|
||||
navEngine.currentDoc.subscribe(doc =>
|
||||
expect(doc.content).toBe(fakeDoc.content)
|
||||
);
|
||||
tick();
|
||||
}));
|
||||
});
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import { Injectable, OnDestroy } from '@angular/core';
|
||||
|
||||
import { ReplaySubject } from 'rxjs/ReplaySubject';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { Doc } from './doc.model';
|
||||
import { DocService } from './doc.service';
|
||||
|
||||
@Injectable()
|
||||
export class NavEngine implements OnDestroy {
|
||||
|
||||
private docSubject = new ReplaySubject<Doc>(1);
|
||||
private subscription: Subscription;
|
||||
|
||||
/** Observable of the most recent document from a `navigate` call */
|
||||
currentDoc = this.docSubject.asObservable();
|
||||
|
||||
constructor(private docService: DocService) {}
|
||||
|
||||
/**
|
||||
* Navigate pushes new doc for the given `id` into the `currentDoc` observable.
|
||||
* TODO: handle document retrieval error
|
||||
*/
|
||||
navigate(docId: string) {
|
||||
this.ngOnDestroy();
|
||||
this.subscription = this.docService.getDoc(docId).subscribe(doc => this.docSubject.next(doc));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) { this.subscription.unsubscribe(); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { Directive, HostListener, Input } from '@angular/core';
|
||||
import { NavEngine } from './nav-engine.service';
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
import { fakeAsync, tick } from '@angular/core/testing';
|
||||
import { Http, Response } from '@angular/http';
|
||||
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import 'rxjs/add/operator/catch';
|
||||
import 'rxjs/add/operator/delay';
|
||||
|
||||
import { DocFetchingService } from './doc-fetching.service';
|
||||
import { NavNode, NavMap } from './doc.model';
|
||||
import { NavMapService } from './nav-map.service';
|
||||
|
||||
import { getTestNavMapResponse } from '../../testing/nav-map-json-response';
|
||||
|
||||
describe('NavMapService', () => {
|
||||
let httpSpy: any;
|
||||
let loggerSpy: any;
|
||||
let navMapService: NavMapService;
|
||||
let navMap: NavMap;
|
||||
|
||||
beforeEach(done => {
|
||||
httpSpy = jasmine.createSpyObj('http', ['get']);
|
||||
httpSpy.get.and.returnValue(of(getTestNavMapResponse()).delay(0).first()); // first() -> completes
|
||||
loggerSpy = jasmine.createSpyObj('logger', ['log', 'warn', 'error']);
|
||||
|
||||
navMapService = new NavMapService(new DocFetchingService(null, null), httpSpy, loggerSpy);
|
||||
|
||||
navMapService.navMap.first().subscribe(
|
||||
nm => navMap = nm,
|
||||
null,
|
||||
done);
|
||||
});
|
||||
|
||||
it('should return a navMap', () => {
|
||||
expect(navMap).toBeDefined();
|
||||
});
|
||||
|
||||
it('should have filtered away the "cli-quickstart" because `hide`===true', () => {
|
||||
const item = navMap.nodes.find(n => n.docId === 'guide/cli-quickstart');
|
||||
expect(item).toBeUndefined();
|
||||
});
|
||||
|
||||
describe('Quickstart', () => {
|
||||
let item: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
item = navMap.nodes.find(n => n.navTitle === 'Quickstart');
|
||||
});
|
||||
|
||||
it('should have expected item', () => {
|
||||
expect(item).toBeDefined();
|
||||
});
|
||||
|
||||
it('should have expected docId', () => {
|
||||
expect(item.docId).toBe('guide/quickstart');
|
||||
});
|
||||
|
||||
it('should have calculated expected docPath', () => {
|
||||
expect(item.docPath).toBe('content/guide/quickstart.html');
|
||||
});
|
||||
|
||||
it('should have no ancestors because it is a top-level item', () => {
|
||||
expect(item.ancestorIds).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Getting Started', () => {
|
||||
let section: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
section = navMap.nodes.find(n => n.navTitle === 'Getting started');
|
||||
});
|
||||
|
||||
it('should have an id', () => {
|
||||
expect(section.id).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should have distinct tooltip', () => {
|
||||
expect(section.tooltip).not.toBe(section.navTitle);
|
||||
});
|
||||
|
||||
it('should have 2 children', () => {
|
||||
expect(section.children.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should have itself as ancestor because it has children', () => {
|
||||
expect(section.ancestorIds).toEqual([section.id]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Tutorial', () => {
|
||||
let section: NavNode;
|
||||
let intro: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
section = navMap.nodes.find(n => n.navTitle === 'Tutorial');
|
||||
if (section && section.children) {
|
||||
intro = section.children.find(n => n.navTitle === 'Introduction');
|
||||
}
|
||||
});
|
||||
|
||||
it('should have 2 children', () => {
|
||||
expect(section.children.length).toBe(2);
|
||||
});
|
||||
|
||||
it('intro child\'s docId ends in "/"', () => {
|
||||
expect(intro.docId[intro.docId.length - 1]).toEqual('/');
|
||||
});
|
||||
|
||||
it('intro child\'s calculated docPath ends in "index.html"', () => {
|
||||
expect(intro.docPath).toMatch(/index.html$/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Core (3-level)', () => {
|
||||
let section: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
section = navMap.nodes.find(n => n.navTitle === 'Core');
|
||||
});
|
||||
|
||||
it('should have 2 children', () => {
|
||||
expect(section.children.length).toBe(2);
|
||||
});
|
||||
|
||||
describe('->directives', () => {
|
||||
let directives: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
directives = section.children.find(n => n.navTitle === 'Directives');
|
||||
});
|
||||
|
||||
it('should have a heading docId', () => {
|
||||
expect(directives.docId).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should have calculated expected docPath', () => {
|
||||
expect(directives.docPath).toBe('content/guide/directives.html');
|
||||
});
|
||||
|
||||
it('should have 2 children', () => {
|
||||
expect(directives.children.length).toBe(2);
|
||||
});
|
||||
|
||||
it('children should have two ancestor ids in lineal order', () => {
|
||||
const expectedAncestors = [section.id, directives.id];
|
||||
expect(directives.children[0].ancestorIds).toEqual(expectedAncestors, '#1');
|
||||
expect(directives.children[1].ancestorIds).toEqual(expectedAncestors, '#2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Empty Heading', () => {
|
||||
let section: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
section = navMap.nodes.find(n => n.navTitle === 'Empty Heading');
|
||||
});
|
||||
|
||||
it('should have no children', () => {
|
||||
expect(section.children.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should have itself as ancestor because it has a `children` array', () => {
|
||||
expect(section.ancestorIds).toEqual([section.id]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('External', () => {
|
||||
let section: NavNode;
|
||||
let gitter: NavNode;
|
||||
|
||||
beforeEach(() => {
|
||||
section = navMap.nodes.find(n => n.navTitle === 'External');
|
||||
if (section && section.children) {
|
||||
gitter = section.children[0];
|
||||
}
|
||||
});
|
||||
|
||||
it('should have one child (gitter)', () => {
|
||||
expect(section.children.length).toBe(1);
|
||||
});
|
||||
|
||||
it('child should have a url', () => {
|
||||
expect(gitter.url).toBeTruthy();
|
||||
});
|
||||
|
||||
it('child should not have a docId', () => {
|
||||
expect(gitter.docId).toBeUndefined();
|
||||
});
|
||||
|
||||
it('child should not have a docPath', () => {
|
||||
expect(gitter.docPath).toBeUndefined();
|
||||
});
|
||||
|
||||
it('child should have parent as only ancestor id', () => {
|
||||
expect(gitter.ancestorIds).toEqual([section.id]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { Http } from '@angular/http';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import { ReplaySubject } from 'rxjs/ReplaySubject';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
import { Doc, NavNode, NavMap } from './doc.model';
|
||||
import { DocFetchingService } from './doc-fetching.service';
|
||||
import { Logger } from '../logger.service';
|
||||
|
||||
const navMapUrl = 'content/navmap.json';
|
||||
|
||||
@Injectable()
|
||||
export class NavMapService {
|
||||
|
||||
private getDocPath: (string) => string;
|
||||
private navMapSubject: ReplaySubject<NavMap>;
|
||||
private nextNodeId = 1;
|
||||
|
||||
constructor(
|
||||
docFetchingService: DocFetchingService,
|
||||
private http: Http,
|
||||
private logger: Logger) {
|
||||
this.getDocPath = docFetchingService.getPath.bind(docFetchingService);
|
||||
}
|
||||
|
||||
get navMap(): Observable<NavMap> {
|
||||
return (this.navMapSubject ? this.navMapSubject : this.createNavMapSubject()).asObservable() ;
|
||||
}
|
||||
|
||||
private createNavMapSubject(): ReplaySubject<NavMap> {
|
||||
this.navMapSubject = new ReplaySubject<NavMap>(1);
|
||||
|
||||
this.http.get(navMapUrl)
|
||||
.map(res => res.json().nodes)
|
||||
.do(() => this.logger.log(`Fetched navigation map JSON at '${navMapUrl}'`))
|
||||
.subscribe(
|
||||
navNodes => this.navMapSubject.next(this.createNavMap(navNodes))
|
||||
);
|
||||
|
||||
return this.navMapSubject;
|
||||
}
|
||||
|
||||
|
||||
////// private helper functions ////
|
||||
|
||||
private createNavMap(nodes: NavNode[]) {
|
||||
nodes = this.removeHidden(nodes);
|
||||
const navMap: NavMap = { nodes, docs: new Map<string, NavNode>()};
|
||||
nodes.forEach(node => this.adjustNode(node, navMap, []));
|
||||
return navMap;
|
||||
}
|
||||
|
||||
// Adjust properties of a node from JSON and build navMap.docs
|
||||
private adjustNode(node: NavNode, navMap: NavMap, ancestorIds: number[] ) {
|
||||
node.id = this.nextNodeId++;
|
||||
node.ancestorIds = ancestorIds;
|
||||
if ( node.tooltip === undefined ) { node.tooltip = node.navTitle; }
|
||||
|
||||
if (node.docId) {
|
||||
// This node is associated with a document
|
||||
node.docId = node.docId.toLocaleLowerCase();
|
||||
node.docPath = this.getDocPath(node.docId);
|
||||
navMap.docs.set(node.docId, node);
|
||||
}
|
||||
|
||||
|
||||
if (node.children) {
|
||||
// Ancestors include self when this node has children
|
||||
node.ancestorIds = ancestorIds.concat(node.id);
|
||||
node.children.forEach(n => this.adjustNode(n, navMap, node.ancestorIds));
|
||||
}
|
||||
}
|
||||
|
||||
private removeHidden(nodes: NavNode[]) {
|
||||
return nodes.filter(node => {
|
||||
if (node['hide'] === true ) { return false; }
|
||||
if (node.children) {
|
||||
node.children = this.removeHidden(node.children);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.fill-remaining-space {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
margin-right: 10px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.nav-link {
|
||||
margin-right: 8px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.nav-link {
|
||||
font-size: 80%;
|
||||
margin-right: 8px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'aio-menu',
|
||||
template: `
|
||||
<span><a class="nav-link" aioNavLink="home">Home</a></span>
|
||||
<!-- <span><a class="nav-link" aioNavLink="api">API</a></span> -->
|
||||
<span><a class="nav-link" aioNavLink="api/common/date-pipe">API</a></span>
|
||||
<span><a class="nav-link" aioNavLink="news">News</a></span>
|
||||
<span><a class="nav-link" aioNavLink="features">Features</a></span>
|
||||
`,
|
||||
styleUrls: ['./menu.component.scss'],
|
||||
animations: []
|
||||
})
|
||||
export class MenuComponent {
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div *ngIf="isItem">
|
||||
<a href={{href}} [ngClass]="classes" target={{target}} title={{tooltip}}
|
||||
(click)="itemClicked()" class="vertical-menu">
|
||||
{{label}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isItem">
|
||||
<a href={{href}} [ngClass]="classes" target={{target}} title={{tooltip}}
|
||||
(click)="headerClicked()" class="vertical-menu heading">
|
||||
{{label}}
|
||||
<md-icon [class.active]="!isActive">keyboard_arrow_right</md-icon>
|
||||
<md-icon [class.active]="isActive">keyboard_arrow_down</md-icon>
|
||||
</a>
|
||||
<div class="heading-children" [ngClass]="classes">
|
||||
<aio-navitem *ngFor="let node of node.children" [level]="level + 1"
|
||||
[node]="node" [selectedNode]="selectedNode"></aio-navitem>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
|
||||
/************************************
|
||||
|
||||
Media queries
|
||||
|
||||
To use these, put this snippet in the approriate selector:
|
||||
|
||||
@include bp(tiny) {
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
Replace "tiny" with "medium" or "big" as necessary.
|
||||
|
||||
*************************************/
|
||||
|
||||
@mixin bp($point) {
|
||||
|
||||
$bp-xsmall: "(min-width: 320px)";
|
||||
$bp-teeny: "(min-width: 480px)";
|
||||
$bp-tiny: "(min-width: 600px)";
|
||||
$bp-small: "(min-width: 650px)";
|
||||
$bp-medium: "(min-width: 800px)";
|
||||
$bp-big: "(min-width: 1000px)";
|
||||
|
||||
@if $point == big {
|
||||
@media #{$bp-big} { @content; }
|
||||
}
|
||||
@else if $point == medium {
|
||||
@media #{$bp-medium} { @content; }
|
||||
}
|
||||
@else if $point == small {
|
||||
@media #{$bp-small} { @content; }
|
||||
}
|
||||
@else if $point == tiny {
|
||||
@media #{$bp-tiny} { @content; }
|
||||
}
|
||||
@else if $point == teeny {
|
||||
@media #{$bp-teeny} { @content; }
|
||||
}
|
||||
@else if $point == xsmall {
|
||||
@media #{$bp-xsmall} { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
/************************************/
|
||||
|
||||
.vertical-menu {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a.vertical-menu {
|
||||
color: #545454;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-right: 10px;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
&:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu.selected {
|
||||
color:#018494;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
font-size: .85rem;
|
||||
min-width: 200px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.material-icons.active {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
// left: 4px;
|
||||
}
|
||||
|
||||
.heading-children {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.heading-children.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.heading.selected.level-1,
|
||||
.heading-children.selected.level-1 {
|
||||
border-left: 3px #00bcd4 solid;
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { Component, EventEmitter, Input, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { Doc, NavNode } from '../nav-engine';
|
||||
|
||||
@Component({
|
||||
selector: 'aio-navitem',
|
||||
templateUrl: 'nav-item.component.html',
|
||||
styleUrls: ['nav-item.component.scss']
|
||||
})
|
||||
export class NavItemComponent implements OnInit, OnDestroy {
|
||||
@Input() selectedNode: EventEmitter<NavNode>;
|
||||
@Input() node: NavNode;
|
||||
@Input() level = 1;
|
||||
|
||||
isActive = false;
|
||||
isSelected = false;
|
||||
isItem = false;
|
||||
classes: {[index: string]: boolean };
|
||||
href = '';
|
||||
label = '';
|
||||
selectedNodeSubscription: Subscription;
|
||||
target = '';
|
||||
tooltip = '';
|
||||
|
||||
ngOnInit() {
|
||||
this.label = this.node.navTitle;
|
||||
this.tooltip = this.node.tooltip;
|
||||
this.isItem = this.node.children == null;
|
||||
this.href = this.node.url || this.node.docPath ;
|
||||
this.target = this.node.url ? '_blank' : '_self';
|
||||
this.setClasses();
|
||||
|
||||
if (this.selectedNode) {
|
||||
this.selectedNodeSubscription = this.selectedNode.subscribe((n: NavNode) => {
|
||||
this.isSelected = n &&
|
||||
( n === this.node ||
|
||||
(n.ancestorIds && n.ancestorIds.indexOf(this.node.id) > -1)
|
||||
);
|
||||
// this.isActive = this.isSelected; // disabled per meeting Feb 13
|
||||
this.setClasses();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.selectedNodeSubscription) {
|
||||
this.selectedNodeSubscription.unsubscribe();
|
||||
this.selectedNodeSubscription = null;
|
||||
}
|
||||
}
|
||||
|
||||
setClasses() {
|
||||
this.classes = {
|
||||
['level-' + this.level]: true,
|
||||
active: this.isActive,
|
||||
selected: this.isSelected
|
||||
};
|
||||
}
|
||||
|
||||
itemClicked() {
|
||||
this.isActive = true;
|
||||
this.isSelected = !!this.node.docId;
|
||||
this.setClasses();
|
||||
if (this.isSelected) {
|
||||
this.selectedNode.emit(this.node);
|
||||
return false;
|
||||
}
|
||||
return !!this.node.url; // let browser handle the external page request.
|
||||
}
|
||||
|
||||
headerClicked() {
|
||||
this.isActive = !this.isActive;
|
||||
if (this.isActive && this.node.docId) {
|
||||
this.isSelected = true;
|
||||
if (this.selectedNode) {
|
||||
this.selectedNode.emit(this.node);
|
||||
}
|
||||
}
|
||||
this.setClasses();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
|
||||
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide">
|
||||
<md-toolbar color="primary" class="app-toolbar" [class.active]="!isSideBySide">
|
||||
<aio-menu class="small"></aio-menu>
|
||||
<span class="fill-remaining-space"></span>
|
||||
</md-toolbar>
|
||||
|
||||
<aio-navitem *ngFor="let node of nodes | async" [node]="node" [selectedNode]="selectedNode"></aio-navitem>
|
||||
</md-sidenav>
|
||||
<section class="sidenav-content">
|
||||
<aio-doc-viewer [doc]="currentDoc | async"></aio-doc-viewer>
|
||||
</section>
|
||||
</md-sidenav-container>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.sidenav-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sidenav-content button {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
md-toolbar {
|
||||
display: none;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
md-toolbar.active {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
/* tslint:disable:no-unused-variable */
|
||||
import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, EventEmitter, Input, OnInit } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import 'rxjs/add/operator/delay';
|
||||
|
||||
import { Doc, DocMetadata, NavEngine, NavMapService, NavMap, NavNode } from '../nav-engine';
|
||||
import { SidenavComponent } from './sidenav.component';
|
||||
|
||||
//// Test Components ///
|
||||
@Component({
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'md-sidenav',
|
||||
template: ''
|
||||
})
|
||||
class FakeMdSideNavComponent {
|
||||
_isOpen = false;
|
||||
@Input() opened: boolean;
|
||||
@Input() mode: 'side' | 'over';
|
||||
toggle = jasmine.createSpy('toggle');
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'aio-doc-viewer',
|
||||
template: ''
|
||||
})
|
||||
class FakeDocViewerComponent {
|
||||
@Input() doc: Doc;
|
||||
}
|
||||
|
||||
//// Tests /////
|
||||
describe('SidenavComponent', () => {
|
||||
let component: SidenavComponent;
|
||||
let fixture: ComponentFixture<SidenavComponent>;
|
||||
|
||||
let fakeDoc: Doc;
|
||||
let fakeNode: NavNode;
|
||||
let fakeNavMap: NavMap;
|
||||
let navEngine: NavEngine;
|
||||
let navMapService: NavMapService;
|
||||
let navigateSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(async(() => {
|
||||
fakeDoc = {
|
||||
metadata: {docId: 'fake'} as DocMetadata,
|
||||
content: 'Fake content'
|
||||
};
|
||||
|
||||
navEngine = {
|
||||
currentDoc: of(fakeDoc).delay(0).first(),
|
||||
navigate: (docId: string) => { }
|
||||
} as NavEngine;
|
||||
navigateSpy = spyOn(navEngine, 'navigate');
|
||||
|
||||
fakeNode = {
|
||||
id: 42,
|
||||
docId: fakeDoc.metadata.docId,
|
||||
navTitle: 'Fakery',
|
||||
docPath: 'content/fake.hmlt'
|
||||
} as NavNode;
|
||||
|
||||
fakeNavMap = {
|
||||
nodes: [fakeNode],
|
||||
docs: new Map<string, NavNode>([[fakeNode.docId, fakeNode]])
|
||||
};
|
||||
|
||||
navMapService = {
|
||||
navMap: of(fakeNavMap).delay(0).first()
|
||||
} as NavMapService;
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
SidenavComponent,
|
||||
FakeMdSideNavComponent,
|
||||
FakeDocViewerComponent
|
||||
],
|
||||
providers: [
|
||||
{provide: NavEngine, useValue: navEngine },
|
||||
{provide: NavMapService, useValue: navMapService }
|
||||
],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SidenavComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
describe('#currentDoc', () => {
|
||||
it('should have "currentDoc" after a tick', fakeAsync(() => {
|
||||
component.currentDoc.subscribe(doc => {
|
||||
expect(doc).toBe(fakeDoc);
|
||||
});
|
||||
tick();
|
||||
}));
|
||||
it('should set "currentDocId" as side effect', fakeAsync(() => {
|
||||
component.currentDoc.subscribe(doc => {
|
||||
expect(component.currentDocId).toEqual(fakeDoc.metadata.docId);
|
||||
});
|
||||
tick();
|
||||
}));
|
||||
});
|
||||
|
||||
describe('#nodes', () => {
|
||||
it('should have "nodes" after a tick', fakeAsync(() => {
|
||||
component.nodes.subscribe(nodes => {
|
||||
expect(nodes).toEqual(fakeNavMap.nodes);
|
||||
});
|
||||
tick();
|
||||
}));
|
||||
});
|
||||
|
||||
describe('#selectedNode', () => {
|
||||
// Simulate when user clicks a left nav link in a `NavItemComponent`
|
||||
// which calls `emit` on the selectedNode navigates
|
||||
// all of this synchronously
|
||||
it('should call navigate after emitting a node', () => {
|
||||
expect(navigateSpy.calls.count()).toBe(0, 'before emit');
|
||||
component.selectedNode.emit(fakeNode);
|
||||
expect(navigateSpy.calls.count()).toBe(1, 'after emit');
|
||||
});
|
||||
|
||||
it('should raise event when currentDoc changes', done => {
|
||||
component.selectedNode.subscribe((node: NavNode) => {
|
||||
expect(node.docId).toBe(fakeDoc.metadata.docId);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#onResize', () => {
|
||||
it('should go into side-by-side when width > 600', () => {
|
||||
component.onResize(601);
|
||||
expect(component.isSideBySide).toBe(true);
|
||||
});
|
||||
|
||||
it('should emit overlay mode when width > 600', () => {
|
||||
component.isOverlayMode.subscribe(isOverlay =>
|
||||
expect(isOverlay).toBe(false)
|
||||
);
|
||||
component.onResize(601);
|
||||
});
|
||||
it('should go into side-by-side when width == 600', () => {
|
||||
component.onResize(600);
|
||||
expect(component.isSideBySide).toBe(false);
|
||||
});
|
||||
|
||||
it('should emit overlay mode when width == 600', () => {
|
||||
component.isOverlayMode.subscribe(isOverlay =>
|
||||
expect(isOverlay).toBe(true)
|
||||
);
|
||||
component.onResize(600);
|
||||
});
|
||||
});
|
||||
|
||||
describe('-> MdSideNav', () => {
|
||||
|
||||
let mdSideNavComponent: FakeMdSideNavComponent;
|
||||
|
||||
beforeEach(() => {
|
||||
mdSideNavComponent = fixture.debugElement
|
||||
.query(By.directive(FakeMdSideNavComponent))
|
||||
.componentInstance as FakeMdSideNavComponent;
|
||||
});
|
||||
|
||||
it('toggle should call through to MdSideNav toggle', () => {
|
||||
const calls = mdSideNavComponent.toggle.calls;
|
||||
expect(calls.count()).toBe(0, 'before toggle');
|
||||
component.toggle();
|
||||
expect(calls.count()).toBe(1, 'after toggle');
|
||||
});
|
||||
|
||||
it('should be opened when width > 600', () => {
|
||||
component.onResize(601);
|
||||
fixture.detectChanges();
|
||||
expect(mdSideNavComponent.opened).toBe(true);
|
||||
});
|
||||
|
||||
it('should be not open when width == 600', () => {
|
||||
component.onResize(600);
|
||||
fixture.detectChanges();
|
||||
expect(mdSideNavComponent.opened).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('-> DocViewer', () => {
|
||||
let docViewer: FakeDocViewerComponent;
|
||||
|
||||
beforeEach(() => {
|
||||
docViewer = fixture.debugElement
|
||||
.query(By.directive(FakeDocViewerComponent))
|
||||
.componentInstance as FakeDocViewerComponent;
|
||||
});
|
||||
|
||||
it('should not have a document at the start', () => {
|
||||
expect(docViewer.doc).toBeNull();
|
||||
});
|
||||
|
||||
// Doesn't work with fakeAsync and async complains about the delay timer (setInterval);
|
||||
// it('should have a document after NavEngine has a current doc', (fakeAsync(() => {
|
||||
// tick();
|
||||
// fixture.detectChanges();
|
||||
// expect(docViewer.doc).toBe(fakeDoc);
|
||||
// })));
|
||||
|
||||
// Must go old school with setTimeout and `done`
|
||||
it('should have a document after NavEngine has a current doc', (done => {
|
||||
setTimeout(() => {
|
||||
fixture.detectChanges();
|
||||
expect(docViewer.doc).toBe(fakeDoc);
|
||||
done();
|
||||
}, 1);
|
||||
}));
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import { Component, EventEmitter, Output, OnInit, OnChanges, ViewChild } from '@angular/core';
|
||||
import { MdSidenav } from '@angular/material/sidenav';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/take';
|
||||
|
||||
import { Doc, NavEngine, NavMap, NavMapService, NavNode } from '../nav-engine';
|
||||
|
||||
@Component({
|
||||
selector: 'aio-sidenav',
|
||||
templateUrl: './sidenav.component.html',
|
||||
styleUrls: ['./sidenav.component.scss'],
|
||||
animations: []
|
||||
})
|
||||
export class SidenavComponent implements OnInit {
|
||||
|
||||
@Output() isOverlayMode = new EventEmitter<boolean>();
|
||||
@ViewChild('sidenav') private sidenav: MdSidenav;
|
||||
|
||||
currentDoc: Observable<Doc>;
|
||||
currentDocId: string;
|
||||
isSideBySide = false;
|
||||
nodes: Observable<NavNode[]>;
|
||||
selectedNode = new EventEmitter<NavNode>();
|
||||
sideBySideWidth = 600;
|
||||
windowWidth = 0;
|
||||
|
||||
constructor(
|
||||
private navEngine: NavEngine,
|
||||
private navMapService: NavMapService ) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.onResize(window.innerWidth);
|
||||
|
||||
this.nodes = this.navMapService.navMap.map( navMap => navMap.nodes );
|
||||
|
||||
this.currentDoc = this.navEngine.currentDoc
|
||||
.do(doc => {
|
||||
// Side effect: when the current doc changes,
|
||||
// get its NavNode and alert the navigation panel
|
||||
this.currentDocId = doc.metadata.docId;
|
||||
this.navMapService.navMap.first() // take makes sure it completes!
|
||||
.map(navMap => navMap.docs.get(this.currentDocId))
|
||||
.subscribe( node => this.selectedNode.emit(node));
|
||||
});
|
||||
|
||||
this.selectedNode.subscribe((node: NavNode) => {
|
||||
// Navigate when the user selects a doc other than the current doc
|
||||
const docId = node && node.docId;
|
||||
if (docId && docId !== this.currentDocId) {
|
||||
this.navEngine.navigate(docId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onResize(width) {
|
||||
this.windowWidth = width;
|
||||
this.isSideBySide = width > this.sideBySideWidth;
|
||||
this.sidenav.mode = this.isSideBySide ? 'side' : 'over';
|
||||
this.isOverlayMode.emit(!this.isSideBySide);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.sidenav.toggle();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,402 +0,0 @@
|
|||
{ "nodes": [
|
||||
{
|
||||
"docId": "guide/quickstart",
|
||||
"navTitle": "Quickstart",
|
||||
"tooltip": "A quick look at an Angular app."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/cli-quickstart",
|
||||
"navTitle": "CLI Quickstart",
|
||||
"tooltip": "A quick look at an Angular app built with the Angular CLI."
|
||||
},
|
||||
|
||||
{
|
||||
"navTitle": "Tutorial",
|
||||
"tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.",
|
||||
"children": [
|
||||
{
|
||||
"docId": " tutorial/",
|
||||
"navTitle": "Introduction",
|
||||
"tooltip": "Introduction to the Tour of Heroes tutorial"
|
||||
},
|
||||
{
|
||||
"docId": "tutorial/toh-1",
|
||||
"navTitle": "The hero editor",
|
||||
"tooltip": "Build a simple hero editor"
|
||||
},
|
||||
{
|
||||
"docId": "tutorial/toh-2",
|
||||
"navTitle": "Master/detail",
|
||||
"tooltip": "Build a master/detail page with a list of heroes."
|
||||
},
|
||||
{
|
||||
"docId": "tutorial/toh-3",
|
||||
"navTitle": "Multiple components",
|
||||
"tooltip": "Refactor the master/detail view into separate components."
|
||||
},
|
||||
{
|
||||
"docId": "tutorial/toh-4",
|
||||
"navTitle": "Services",
|
||||
"tooltip": "Create a reusable service to manage hero data."
|
||||
},
|
||||
{
|
||||
"docId": "tutorial/toh-5",
|
||||
"navTitle": "Routing",
|
||||
"tooltip": "Add the Angular router and navigate among the views."
|
||||
},
|
||||
{
|
||||
"docId": "tutorial/toh-6",
|
||||
"navTitle": "HTTP",
|
||||
"tooltip": "Use HTTP to retrieve and save hero data."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"navTitle": "Getting started",
|
||||
"tooltip": "A gentle introduction to Angular.",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/docs-overview",
|
||||
"navTitle": "Overview",
|
||||
"tooltip": "How to read and use this documentation."
|
||||
},
|
||||
{
|
||||
"docId": "guide/setup",
|
||||
"navTitle": "Setup",
|
||||
"tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/learning-angular",
|
||||
"navTitle": "Learning Angular",
|
||||
"tooltip": "A suggested path through the documentation for Angular newcomers."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/architecture",
|
||||
"navTitle": "Architecture",
|
||||
"tooltip": "The basic building blocks of Angular applications."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/appmodule",
|
||||
"navTitle": "The root AppModule",
|
||||
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/displaying-data",
|
||||
"navTitle": "Displaying data",
|
||||
"tooltip": "Property binding helps show app data in the UI."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/user-input",
|
||||
"navTitle": "User Input",
|
||||
"tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/forms",
|
||||
"navTitle": "Forms",
|
||||
"tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/dependency-injection",
|
||||
"navTitle": "Dependency Injection",
|
||||
"tooltip": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/template-syntax",
|
||||
"navTitle": "Template Syntax",
|
||||
"tooltip": "Learn how to write templates that display data and consume user events with the help of data binding."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/cheatsheet",
|
||||
"navTitle": "Cheat Sheet",
|
||||
"tooltip": "A quick guide to common Angular coding techniques."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/style-guide",
|
||||
"navTitle": "Style guide",
|
||||
"tooltip": "Write Angular with style."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/glossary",
|
||||
"navTitle": "Glossary",
|
||||
"tooltip": "Brief definitions of the most important words in the Angular vocabulary."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/change-log",
|
||||
"navTitle": "Change Log",
|
||||
"tooltip": "An annotated history of recent documentation improvements."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"navTitle": "Core",
|
||||
"tooltip": "Learn the core capabilities of Angular",
|
||||
"children": [
|
||||
{
|
||||
"navTitle": "Angular Modules",
|
||||
"tooltip": "Learn how directives modify the layout and behavior of elements.",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/ngmodule",
|
||||
"navTitle": "NgModule",
|
||||
"tooltip": "Define application modules with @NgModule."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/ngmodule-faq",
|
||||
"navTitle": "Angular module FAQs",
|
||||
"tooltip": "Answers to frequently asked questions about @NgModule."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"docId": "guide/component-communication",
|
||||
"navTitle": "Component interaction",
|
||||
"tooltip": "Share information between different directives and components."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/component-relative-paths",
|
||||
"navTitle": "Component-relative paths",
|
||||
"tooltip": "Use relative URLs for component templates and styles."
|
||||
},
|
||||
|
||||
{
|
||||
"navTitle": "Dependency Injection",
|
||||
"tooltip": "More about Dependency Injection",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/cb-dependency-injection",
|
||||
"navTitle": "Dependency injection",
|
||||
"tooltip": "Techniques for Dependency Injection."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/hierarchical-dependency-injection",
|
||||
"navTitle": "Hierarchical injectors",
|
||||
"tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"docId": "guide/dynamic-component-loader",
|
||||
"navTitle": "Dynamic components",
|
||||
"tooltip": "Load components dynamically."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/directives",
|
||||
"navTitle": "Directives",
|
||||
"tooltip": "Learn how directives modify the layout and behavior of elements.",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/attribute-directives",
|
||||
"navTitle": "Attribute directives",
|
||||
"tooltip": "Attribute directives attach behavior to elements."
|
||||
},
|
||||
{
|
||||
"docId": "guide/structural-directives",
|
||||
"navTitle": "Structural directives",
|
||||
"tooltip": "Structural directives manipulate the layout of the page."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"navTitle": "Forms",
|
||||
"tooltip": "More about forms",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/dynamic-form",
|
||||
"navTitle": "Dynamic forms",
|
||||
"tooltip": "Render dynamic forms with FormGroup."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/form-validation",
|
||||
"navTitle": "Form validation",
|
||||
"tooltip": "Validate user's form entries."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/reactive-forms",
|
||||
"navTitle": "Reactive forms",
|
||||
"tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"docId": "guide/server-communication",
|
||||
"navTitle": "HTTP client",
|
||||
"tooltip": "Use an HTTP Client to talk to a remote server."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/lifecycle-hooks",
|
||||
"navTitle": "Lifecycle hooks",
|
||||
"tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/pipes",
|
||||
"navTitle": "Pipes",
|
||||
"tooltip": "Pipes transform displayed values within a template."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/router",
|
||||
"navTitle": "Routing & navigation",
|
||||
"tooltip": "Discover the basics of screen navigation with the Angular Router."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"navTitle": "Additional Techniques",
|
||||
"tooltip": "Other",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/aot-compiler",
|
||||
"navTitle": "Ahead-of-Time compilation",
|
||||
"tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/animations",
|
||||
"navTitle": "Animations",
|
||||
"tooltip": "A guide to Angular's animation system."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/ajs-quick-reference",
|
||||
"navTitle": "AngularJS to Angular",
|
||||
"tooltip": "Learn how AngularJS concepts and techniques map to Angular."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/component-styles",
|
||||
"navTitle": "Component styles",
|
||||
"tooltip": "Learn how to apply CSS styles to components."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/deployment",
|
||||
"navTitle": "Deployment",
|
||||
"tooltip": "Learn how to deploy your Angular app."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/i18n",
|
||||
"navTitle": "Internationalization (i18n)",
|
||||
"tooltip": "Translate the app's template text into multiple languages."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/security",
|
||||
"navTitle": "Security",
|
||||
"tooltip": "Developing for content security in Angular applications."
|
||||
},
|
||||
|
||||
{
|
||||
"navTitle": "Setup",
|
||||
"tooltip": "Details of the local development setup",
|
||||
"children": [
|
||||
{
|
||||
"docId": "guide/setup-systemjs-anatomy",
|
||||
"navTitle": "Setup Anatomy",
|
||||
"tooltip": "Inside the local development environment for SystemJS."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/browser-support",
|
||||
"navTitle": "Browser support",
|
||||
"tooltip": "Browser support and polyfills guide."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/npm-packages",
|
||||
"navTitle": "Npm packages",
|
||||
"tooltip": "Recommended npm packages, and how to specify package dependencies."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/typescript-configuration",
|
||||
"navTitle": "TypeScript configuration",
|
||||
"tooltip": "TypeScript configuration for Angular developers."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"docId": "guide/testing",
|
||||
"navTitle": "Testing",
|
||||
"tooltip": "Techniques and practices for testing an Angular app."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/upgrade",
|
||||
"navTitle": "Upgrading from AngularJS",
|
||||
"tooltip": "Incrementally upgrade an AngularJS application to Angular."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/ts-to-js",
|
||||
"navTitle": "TypeScript to JavaScript",
|
||||
"tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/visual-studio-2015",
|
||||
"navTitle": "Visual Studio 2015 QuickStart",
|
||||
"tooltip": "Use Visual Studio 2015 with the QuickStart files."
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "guide/webpack",
|
||||
"navTitle": "Webpack: an introduction",
|
||||
"tooltip": "Create Angular applications with a Webpack based tooling."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"docId": "resources/",
|
||||
"navTitle": "Resources",
|
||||
"children": [
|
||||
{
|
||||
"docId": "about",
|
||||
"navTitle": "About",
|
||||
"tooltip": "The people behind Angular."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"navTitle": "Help",
|
||||
"children": [
|
||||
{
|
||||
"url":
|
||||
"http://stackoverflow.com/questions/tagged/angular2",
|
||||
"urlNew": "http://stackoverflow.com/questions/tagged/angular2.html",
|
||||
"navTitle": "Stack Overflow",
|
||||
"tooltip": "Stack Overflow: where the community answers your technical Angular questions."
|
||||
},
|
||||
{
|
||||
"url": "https://gitter.im/angular/angular",
|
||||
"navTitle": "Gitter",
|
||||
"tooltip": "Chat about Angular with other birds of a feather."
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
Loading…
Reference in New Issue