cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): no need for path and url properties in nav

Browse Source
This commit is contained in:
Peter Bacon Darwin 2017-03-05 15:45:01 +00:00 committed by Igor Minar
parent 5815983178
commit b81693b30c
3 changed files with 78 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
aio/src/app/layout/nav-item/nav-item.component.ts
View File

@ -5,8 +5,8 @@ import { NavigationService, NavigationNode } from 'app/navigation/navigation.ser
selector: 'aio-nav-item', selector: 'aio-nav-item',
template: ` template: `
<div> <div>
<a *ngIf="node.path || node.url" <a *ngIf="node.url"
[href]="node.path || node.url" [href]="node.url"
[ngClass]="classes" [ngClass]="classes"
target={{node.target}} target={{node.target}}
title={{node.title}} title={{node.title}}
@ -17,7 +17,7 @@ import { NavigationService, NavigationNode } from 'app/navigation/navigation.ser
<md-icon [class.active]="isActive">keyboard_arrow_down</md-icon> <md-icon [class.active]="isActive">keyboard_arrow_down</md-icon>
</ng-template> </ng-template>
</a> </a>
<div *ngIf="!(node.path || node.url)" [ngClass]="classes">{{node.title}}</div> <div *ngIf="!node.url" [ngClass]="classes">{{node.title}}</div>
<div class="TODO:heading-children" [ngClass]="classes" *ngIf="node.children"> <div class="TODO:heading-children" [ngClass]="classes" *ngIf="node.children">
<aio-nav-item *ngFor="let node of node.children" [level]="level + 1" [node]="node"></aio-nav-item> <aio-nav-item *ngFor="let node of node.children" [level]="level + 1" [node]="node"></aio-nav-item>
</div> </div>

21
aio/src/app/navigation/navigation.service.ts
View File

@ -9,7 +9,6 @@ import { LocationService } from 'app/shared/location.service';
export interface NavigationNode { export interface NavigationNode {
url?: string; url?: string;
path?: string;
title?: string; title?: string;
tooltip?: string; tooltip?: string;
target?: string; target?: string;
@ -17,7 +16,7 @@ export interface NavigationNode {
} }
export interface NavigationViews { export interface NavigationViews {
[name: string]: NavigationNode; [name: string]: NavigationNode[];
} }
export interface NavigationMap { export interface NavigationMap {
@ -58,14 +57,20 @@ export class NavigationService {
private computeNavMap(navigation: NavigationViews): NavigationMap { private computeNavMap(navigation: NavigationViews): NavigationMap {
const navMap: NavigationMap = {}; const navMap: NavigationMap = {};
Object.keys(navigation).forEach(key => walk(navigation[key], null)); Object.keys(navigation).forEach(key => {
const nodes = navigation[key];
nodes.forEach(node => walk(node, null));
});
return navMap; return navMap;
function walk(node: NavigationNode, parent: NavigationMapItem) { function walk(node: NavigationNode, parent: NavigationMapItem | null) {
const item = { node, parents: [parent.node, ...parent.parents] }; const item: NavigationMapItem = { node, parents: [] };
if (node.path) { if (parent) {
// only map to this item if it has a doc associated with it item.parents = [parent.node, ...parent.parents];
navMap[node.path] = item; }
if (node.url) {
// only map to this item if it has a url associated with it
navMap[node.url] = item;
} }
if (node.children) { if (node.children) {
node.children.forEach(child => walk(child, item)); node.children.forEach(child => walk(child, item));

124
aio/src/content/navigation.json
View File

@ -1,29 +1,29 @@
{ {
"TopBar": [ "TopBar": [
{ {
"path": "/", "url": "/",
"title": "Home" "title": "Home"
}, },
{ {
"path": "api", "url": "api",
"title": "API" "title": "API"
}, { }, {
"path": "news", "url": "news",
"title": "News" "title": "News"
}, { }, {
"path": "features", "url": "features",
"title": "Features" "title": "Features"
} }
], ],
"SideNav": [ "SideNav": [
{ {
"path": "guide/quickstart", "url": "guide/quickstart",
"title": "Quickstart", "title": "Quickstart",
"tooltip": "A quick look at an Angular app." "tooltip": "A quick look at an Angular app."
}, },
{ {
"path": "guide/cli-quickstart", "url": "guide/cli-quickstart",
"title": "CLI Quickstart", "title": "CLI Quickstart",
"tooltip": "A quick look at an Angular app built with the Angular CLI." "tooltip": "A quick look at an Angular app built with the Angular CLI."
}, },
@ -33,37 +33,37 @@
"tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.", "tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.",
"children": [ "children": [
{ {
"path": "tutorial/", "url": "tutorial/",
"title": "Introduction", "title": "Introduction",
"tooltip": "Introduction to the Tour of Heroes tutorial" "tooltip": "Introduction to the Tour of Heroes tutorial"
}, },
{ {
"path": "tutorial/toh-pt1", "url": "tutorial/toh-pt1",
"title": "The hero editor", "title": "The hero editor",
"tooltip": "Build a simple hero editor" "tooltip": "Build a simple hero editor"
}, },
{ {
"path": "tutorial/toh-pt2", "url": "tutorial/toh-pt2",
"title": "Master/detail", "title": "Master/detail",
"tooltip": "Build a master/detail page with a list of heroes." "tooltip": "Build a master/detail page with a list of heroes."
}, },
{ {
"path": "tutorial/toh-pt3", "url": "tutorial/toh-pt3",
"title": "Multiple components", "title": "Multiple components",
"tooltip": "Refactor the master/detail view into separate components." "tooltip": "Refactor the master/detail view into separate components."
}, },
{ {
"path": "tutorial/toh-pt4", "url": "tutorial/toh-pt4",
"title": "Services", "title": "Services",
"tooltip": "Create a reusable service to manage hero data." "tooltip": "Create a reusable service to manage hero data."
}, },
{ {
"path": "tutorial/toh-pt5", "url": "tutorial/toh-pt5",
"title": "Routing", "title": "Routing",
"tooltip": "Add the Angular router and navigate among the views." "tooltip": "Add the Angular router and navigate among the views."
}, },
{ {
"path": "tutorial/toh-pt6", "url": "tutorial/toh-pt6",
"title": "HTTP", "title": "HTTP",
"tooltip": "Use HTTP to retrieve and save hero data." "tooltip": "Use HTTP to retrieve and save hero data."
} }
@ -75,84 +75,84 @@
"tooltip": "A gentle introduction to Angular.", "tooltip": "A gentle introduction to Angular.",
"children": [ "children": [
{ {
"path": "guide/docs-overview", "url": "guide/docs-overview",
"title": "Overview", "title": "Overview",
"tooltip": "How to read and use this documentation." "tooltip": "How to read and use this documentation."
}, },
{ {
"path": "guide/setup", "url": "guide/setup",
"title": "Setup", "title": "Setup",
"tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine." "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine."
}, },
{ {
"path": "guide/learning-angular", "url": "guide/learning-angular",
"title": "Learning Angular", "title": "Learning Angular",
"tooltip": "A suggested path through the documentation for Angular newcomers." "tooltip": "A suggested path through the documentation for Angular newcomers."
}, },
{ {
"path": "guide/architecture", "url": "guide/architecture",
"title": "Architecture", "title": "Architecture",
"tooltip": "The basic building blocks of Angular applications." "tooltip": "The basic building blocks of Angular applications."
}, },
{ {
"path": "guide/appmodule", "url": "guide/appmodule",
"title": "The root AppModule", "title": "The root AppModule",
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"." "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
}, },
{ {
"path": "guide/displaying-data", "url": "guide/displaying-data",
"title": "Displaying data", "title": "Displaying data",
"tooltip": "Property binding helps show app data in the UI." "tooltip": "Property binding helps show app data in the UI."
}, },
{ {
"path": "guide/user-input", "url": "guide/user-input",
"title": "User Input", "title": "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." "tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
}, },
{ {
"path": "guide/forms", "url": "guide/forms",
"title": "Forms", "title": "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." "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."
}, },
{ {
"path": "guide/dependency-injection", "url": "guide/dependency-injection",
"title": "Dependency Injection", "title": "Dependency Injection",
"tooltip": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"." "tooltip": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"."
}, },
{ {
"path": "guide/template-syntax", "url": "guide/template-syntax",
"title": "Template Syntax", "title": "Template Syntax",
"tooltip": "Learn how to write templates that display data and consume user events with the help of data binding." "tooltip": "Learn how to write templates that display data and consume user events with the help of data binding."
}, },
{ {
"path": "guide/cheatsheet", "url": "guide/cheatsheet",
"title": "Cheat Sheet", "title": "Cheat Sheet",
"tooltip": "A quick guide to common Angular coding techniques." "tooltip": "A quick guide to common Angular coding techniques."
}, },
{ {
"path": "guide/style-guide", "url": "guide/style-guide",
"title": "Style guide", "title": "Style guide",
"tooltip": "Write Angular with style." "tooltip": "Write Angular with style."
}, },
{ {
"path": "guide/glossary", "url": "guide/glossary",
"title": "Glossary", "title": "Glossary",
"tooltip": "Brief definitions of the most important words in the Angular vocabulary." "tooltip": "Brief definitions of the most important words in the Angular vocabulary."
}, },
{ {
"path": "guide/change-log", "url": "guide/change-log",
"title": "Change Log", "title": "Change Log",
"tooltip": "An annotated history of recent documentation improvements." "tooltip": "An annotated history of recent documentation improvements."
} }
@ -167,26 +167,26 @@
"tooltip": "Learn how directives modify the layout and behavior of elements.", "tooltip": "Learn how directives modify the layout and behavior of elements.",
"children": [ "children": [
{ {
"path": "guide/ngmodule", "url": "guide/ngmodule",
"title": "NgModule", "title": "NgModule",
"tooltip": "Define application modules with @NgModule." "tooltip": "Define application modules with @NgModule."
}, },
{ {
"path": "guide/ngmodule-faq", "url": "guide/ngmodule-faq",
"title": "Angular module FAQs", "title": "Angular module FAQs",
"tooltip": "Answers to frequently asked questions about @NgModule." "tooltip": "Answers to frequently asked questions about @NgModule."
} }
]}, ]},
{ {
"path": "guide/component-communication", "url": "guide/component-communication",
"title": "Component interaction", "title": "Component interaction",
"tooltip": "Share information between different directives and components." "tooltip": "Share information between different directives and components."
}, },
{ {
"path": "guide/component-relative-paths", "url": "guide/component-relative-paths",
"title": "Component-relative paths", "title": "Component-relative paths",
"tooltip": "Use relative URLs for component templates and styles." "tooltip": "Use relative URLs for component templates and styles."
}, },
@ -196,36 +196,36 @@
"tooltip": "More about Dependency Injection", "tooltip": "More about Dependency Injection",
"children": [ "children": [
{ {
"path": "guide/cb-dependency-injection", "url": "guide/cb-dependency-injection",
"title": "Dependency injection", "title": "Dependency injection",
"tooltip": "Techniques for Dependency Injection." "tooltip": "Techniques for Dependency Injection."
}, },
{ {
"path": "guide/hierarchical-dependency-injection", "url": "guide/hierarchical-dependency-injection",
"title": "Hierarchical injectors", "title": "Hierarchical injectors",
"tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree." "tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
} }
]}, ]},
{ {
"path": "guide/dynamic-component-loader", "url": "guide/dynamic-component-loader",
"title": "Dynamic components", "title": "Dynamic components",
"tooltip": "Load components dynamically." "tooltip": "Load components dynamically."
}, },
{ {
"path": "guide/directives", "url": "guide/directives",
"title": "Directives", "title": "Directives",
"tooltip": "Learn how directives modify the layout and behavior of elements.", "tooltip": "Learn how directives modify the layout and behavior of elements.",
"children": [ "children": [
{ {
"path": "guide/attribute-directives", "url": "guide/attribute-directives",
"title": "Attribute directives", "title": "Attribute directives",
"tooltip": "Attribute directives attach behavior to elements." "tooltip": "Attribute directives attach behavior to elements."
}, },
{ {
"path": "guide/structural-directives", "url": "guide/structural-directives",
"title": "Structural directives", "title": "Structural directives",
"tooltip": "Structural directives manipulate the layout of the page." "tooltip": "Structural directives manipulate the layout of the page."
} }
@ -237,44 +237,44 @@
"tooltip": "More about forms", "tooltip": "More about forms",
"children": [ "children": [
{ {
"path": "guide/dynamic-form", "url": "guide/dynamic-form",
"title": "Dynamic forms", "title": "Dynamic forms",
"tooltip": "Render dynamic forms with FormGroup." "tooltip": "Render dynamic forms with FormGroup."
}, },
{ {
"path": "guide/form-validation", "url": "guide/form-validation",
"title": "Form validation", "title": "Form validation",
"tooltip": "Validate user's form entries." "tooltip": "Validate user's form entries."
}, },
{ {
"path": "guide/reactive-forms", "url": "guide/reactive-forms",
"title": "Reactive forms", "title": "Reactive forms",
"tooltip": "Create a reactive form using FormBuilder, groups, and arrays." "tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
} }
]}, ]},
{ {
"path": "guide/server-communication", "url": "guide/server-communication",
"title": "HTTP client", "title": "HTTP client",
"tooltip": "Use an HTTP Client to talk to a remote server." "tooltip": "Use an HTTP Client to talk to a remote server."
}, },
{ {
"path": "guide/lifecycle-hooks", "url": "guide/lifecycle-hooks",
"title": "Lifecycle hooks", "title": "Lifecycle hooks",
"tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them." "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
}, },
{ {
"path": "guide/pipes", "url": "guide/pipes",
"title": "Pipes", "title": "Pipes",
"tooltip": "Pipes transform displayed values within a template." "tooltip": "Pipes transform displayed values within a template."
}, },
{ {
"path": "guide/router", "url": "guide/router",
"title": "Routing & navigation", "title": "Routing & navigation",
"tooltip": "Discover the basics of screen navigation with the Angular Router." "tooltip": "Discover the basics of screen navigation with the Angular Router."
} }
@ -285,43 +285,43 @@
"tooltip": "Other", "tooltip": "Other",
"children": [ "children": [
{ {
"path": "guide/aot-compiler", "url": "guide/aot-compiler",
"title": "Ahead-of-Time compilation", "title": "Ahead-of-Time compilation",
"tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler." "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
}, },
{ {
"path": "guide/animations", "url": "guide/animations",
"title": "Animations", "title": "Animations",
"tooltip": "A guide to Angular's animation system." "tooltip": "A guide to Angular's animation system."
}, },
{ {
"path": "guide/ajs-quick-reference", "url": "guide/ajs-quick-reference",
"title": "AngularJS to Angular", "title": "AngularJS to Angular",
"tooltip": "Learn how AngularJS concepts and techniques map to Angular." "tooltip": "Learn how AngularJS concepts and techniques map to Angular."
}, },
{ {
"path": "guide/component-styles", "url": "guide/component-styles",
"title": "Component styles", "title": "Component styles",
"tooltip": "Learn how to apply CSS styles to components." "tooltip": "Learn how to apply CSS styles to components."
}, },
{ {
"path": "guide/deployment", "url": "guide/deployment",
"title": "Deployment", "title": "Deployment",
"tooltip": "Learn how to deploy your Angular app." "tooltip": "Learn how to deploy your Angular app."
}, },
{ {
"path": "guide/i18n", "url": "guide/i18n",
"title": "Internationalization (i18n)", "title": "Internationalization (i18n)",
"tooltip": "Translate the app's template text into multiple languages." "tooltip": "Translate the app's template text into multiple languages."
}, },
{ {
"path": "guide/security", "url": "guide/security",
"title": "Security", "title": "Security",
"tooltip": "Developing for content security in Angular applications." "tooltip": "Developing for content security in Angular applications."
}, },
@ -331,56 +331,56 @@
"tooltip": "Details of the local development setup", "tooltip": "Details of the local development setup",
"children": [ "children": [
{ {
"path": "guide/setup-systemjs-anatomy", "url": "guide/setup-systemjs-anatomy",
"title": "Setup Anatomy", "title": "Setup Anatomy",
"tooltip": "Inside the local development environment for SystemJS." "tooltip": "Inside the local development environment for SystemJS."
}, },
{ {
"path": "guide/browser-support", "url": "guide/browser-support",
"title": "Browser support", "title": "Browser support",
"tooltip": "Browser support and polyfills guide." "tooltip": "Browser support and polyfills guide."
}, },
{ {
"path": "guide/npm-packages", "url": "guide/npm-packages",
"title": "Npm packages", "title": "Npm packages",
"tooltip": "Recommended npm packages, and how to specify package dependencies." "tooltip": "Recommended npm packages, and how to specify package dependencies."
}, },
{ {
"path": "guide/typescript-configuration", "url": "guide/typescript-configuration",
"title": "TypeScript configuration", "title": "TypeScript configuration",
"tooltip": "TypeScript configuration for Angular developers." "tooltip": "TypeScript configuration for Angular developers."
} }
]}, ]},
{ {
"path": "guide/testing", "url": "guide/testing",
"title": "Testing", "title": "Testing",
"tooltip": "Techniques and practices for testing an Angular app." "tooltip": "Techniques and practices for testing an Angular app."
}, },
{ {
"path": "guide/upgrade", "url": "guide/upgrade",
"title": "Upgrading from AngularJS", "title": "Upgrading from AngularJS",
"tooltip": "Incrementally upgrade an AngularJS application to Angular." "tooltip": "Incrementally upgrade an AngularJS application to Angular."
}, },
{ {
"path": "guide/ts-to-js", "url": "guide/ts-to-js",
"title": "TypeScript to JavaScript", "title": "TypeScript to JavaScript",
"tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript." "tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
}, },
{ {
"path": "guide/visual-studio-2015", "url": "guide/visual-studio-2015",
"title": "Visual Studio 2015 QuickStart", "title": "Visual Studio 2015 QuickStart",
"tooltip": "Use Visual Studio 2015 with the QuickStart files." "tooltip": "Use Visual Studio 2015 with the QuickStart files."
}, },
{ {
"path": "guide/webpack", "url": "guide/webpack",
"title": "Webpack: an introduction", "title": "Webpack: an introduction",
"tooltip": "Create Angular applications with a Webpack based tooling." "tooltip": "Create Angular applications with a Webpack based tooling."
} }
@ -388,11 +388,11 @@
}, },
{ {
"path": "resources/", "url": "resources/",
"title": "Resources", "title": "Resources",
"children": [ "children": [
{ {
"path": "about", "url": "about",
"title": "About", "title": "About",
"tooltip": "The people behind Angular." "tooltip": "The people behind Angular."
} }