diff --git a/aio/src/app/layout/nav-item/nav-item.component.ts b/aio/src/app/layout/nav-item/nav-item.component.ts index 8f73ab3ec5..f74935756e 100644 --- a/aio/src/app/layout/nav-item/nav-item.component.ts +++ b/aio/src/app/layout/nav-item/nav-item.component.ts @@ -5,8 +5,8 @@ import { NavigationService, NavigationNode } from 'app/navigation/navigation.ser selector: 'aio-nav-item', template: `
- keyboard_arrow_down -
{{node.title}}
+
{{node.title}}
diff --git a/aio/src/app/navigation/navigation.service.ts b/aio/src/app/navigation/navigation.service.ts index 1a82a4c4fa..6ddda0b8ee 100644 --- a/aio/src/app/navigation/navigation.service.ts +++ b/aio/src/app/navigation/navigation.service.ts @@ -9,7 +9,6 @@ import { LocationService } from 'app/shared/location.service'; export interface NavigationNode { url?: string; - path?: string; title?: string; tooltip?: string; target?: string; @@ -17,7 +16,7 @@ export interface NavigationNode { } export interface NavigationViews { - [name: string]: NavigationNode; + [name: string]: NavigationNode[]; } export interface NavigationMap { @@ -58,14 +57,20 @@ export class NavigationService { private computeNavMap(navigation: NavigationViews): 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; - function walk(node: NavigationNode, parent: NavigationMapItem) { - const item = { node, parents: [parent.node, ...parent.parents] }; - if (node.path) { - // only map to this item if it has a doc associated with it - navMap[node.path] = item; + function walk(node: NavigationNode, parent: NavigationMapItem | null) { + const item: NavigationMapItem = { node, parents: [] }; + if (parent) { + item.parents = [parent.node, ...parent.parents]; + } + if (node.url) { + // only map to this item if it has a url associated with it + navMap[node.url] = item; } if (node.children) { node.children.forEach(child => walk(child, item)); diff --git a/aio/src/content/navigation.json b/aio/src/content/navigation.json index 32ce5d95cf..1e00548e7e 100644 --- a/aio/src/content/navigation.json +++ b/aio/src/content/navigation.json @@ -1,29 +1,29 @@ { "TopBar": [ { - "path": "/", + "url": "/", "title": "Home" }, { - "path": "api", + "url": "api", "title": "API" }, { - "path": "news", + "url": "news", "title": "News" }, { - "path": "features", + "url": "features", "title": "Features" } ], "SideNav": [ { - "path": "guide/quickstart", + "url": "guide/quickstart", "title": "Quickstart", "tooltip": "A quick look at an Angular app." }, { - "path": "guide/cli-quickstart", + "url": "guide/cli-quickstart", "title": "CLI Quickstart", "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.", "children": [ { - "path": "tutorial/", + "url": "tutorial/", "title": "Introduction", "tooltip": "Introduction to the Tour of Heroes tutorial" }, { - "path": "tutorial/toh-pt1", + "url": "tutorial/toh-pt1", "title": "The hero editor", "tooltip": "Build a simple hero editor" }, { - "path": "tutorial/toh-pt2", + "url": "tutorial/toh-pt2", "title": "Master/detail", "tooltip": "Build a master/detail page with a list of heroes." }, { - "path": "tutorial/toh-pt3", + "url": "tutorial/toh-pt3", "title": "Multiple components", "tooltip": "Refactor the master/detail view into separate components." }, { - "path": "tutorial/toh-pt4", + "url": "tutorial/toh-pt4", "title": "Services", "tooltip": "Create a reusable service to manage hero data." }, { - "path": "tutorial/toh-pt5", + "url": "tutorial/toh-pt5", "title": "Routing", "tooltip": "Add the Angular router and navigate among the views." }, { - "path": "tutorial/toh-pt6", + "url": "tutorial/toh-pt6", "title": "HTTP", "tooltip": "Use HTTP to retrieve and save hero data." } @@ -75,84 +75,84 @@ "tooltip": "A gentle introduction to Angular.", "children": [ { - "path": "guide/docs-overview", + "url": "guide/docs-overview", "title": "Overview", "tooltip": "How to read and use this documentation." }, { - "path": "guide/setup", + "url": "guide/setup", "title": "Setup", "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", "tooltip": "A suggested path through the documentation for Angular newcomers." }, { - "path": "guide/architecture", + "url": "guide/architecture", "title": "Architecture", "tooltip": "The basic building blocks of Angular applications." }, { - "path": "guide/appmodule", + "url": "guide/appmodule", "title": "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", "tooltip": "Property binding helps show app data in the UI." }, { - "path": "guide/user-input", + "url": "guide/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." }, { - "path": "guide/forms", + "url": "guide/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." }, { - "path": "guide/dependency-injection", + "url": "guide/dependency-injection", "title": "Dependency Injection", "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", "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", "tooltip": "A quick guide to common Angular coding techniques." }, { - "path": "guide/style-guide", + "url": "guide/style-guide", "title": "Style guide", "tooltip": "Write Angular with style." }, { - "path": "guide/glossary", + "url": "guide/glossary", "title": "Glossary", "tooltip": "Brief definitions of the most important words in the Angular vocabulary." }, { - "path": "guide/change-log", + "url": "guide/change-log", "title": "Change Log", "tooltip": "An annotated history of recent documentation improvements." } @@ -167,26 +167,26 @@ "tooltip": "Learn how directives modify the layout and behavior of elements.", "children": [ { - "path": "guide/ngmodule", + "url": "guide/ngmodule", "title": "NgModule", "tooltip": "Define application modules with @NgModule." }, { - "path": "guide/ngmodule-faq", + "url": "guide/ngmodule-faq", "title": "Angular module FAQs", "tooltip": "Answers to frequently asked questions about @NgModule." } ]}, { - "path": "guide/component-communication", + "url": "guide/component-communication", "title": "Component interaction", "tooltip": "Share information between different directives and components." }, { - "path": "guide/component-relative-paths", + "url": "guide/component-relative-paths", "title": "Component-relative paths", "tooltip": "Use relative URLs for component templates and styles." }, @@ -196,36 +196,36 @@ "tooltip": "More about Dependency Injection", "children": [ { - "path": "guide/cb-dependency-injection", + "url": "guide/cb-dependency-injection", "title": "Dependency injection", "tooltip": "Techniques for Dependency Injection." }, { - "path": "guide/hierarchical-dependency-injection", + "url": "guide/hierarchical-dependency-injection", "title": "Hierarchical injectors", "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", "tooltip": "Load components dynamically." }, { - "path": "guide/directives", + "url": "guide/directives", "title": "Directives", "tooltip": "Learn how directives modify the layout and behavior of elements.", "children": [ { - "path": "guide/attribute-directives", + "url": "guide/attribute-directives", "title": "Attribute directives", "tooltip": "Attribute directives attach behavior to elements." }, { - "path": "guide/structural-directives", + "url": "guide/structural-directives", "title": "Structural directives", "tooltip": "Structural directives manipulate the layout of the page." } @@ -237,44 +237,44 @@ "tooltip": "More about forms", "children": [ { - "path": "guide/dynamic-form", + "url": "guide/dynamic-form", "title": "Dynamic forms", "tooltip": "Render dynamic forms with FormGroup." }, { - "path": "guide/form-validation", + "url": "guide/form-validation", "title": "Form validation", "tooltip": "Validate user's form entries." }, { - "path": "guide/reactive-forms", + "url": "guide/reactive-forms", "title": "Reactive forms", "tooltip": "Create a reactive form using FormBuilder, groups, and arrays." } ]}, { - "path": "guide/server-communication", + "url": "guide/server-communication", "title": "HTTP client", "tooltip": "Use an HTTP Client to talk to a remote server." }, { - "path": "guide/lifecycle-hooks", + "url": "guide/lifecycle-hooks", "title": "Lifecycle hooks", "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", "tooltip": "Pipes transform displayed values within a template." }, { - "path": "guide/router", + "url": "guide/router", "title": "Routing & navigation", "tooltip": "Discover the basics of screen navigation with the Angular Router." } @@ -285,43 +285,43 @@ "tooltip": "Other", "children": [ { - "path": "guide/aot-compiler", + "url": "guide/aot-compiler", "title": "Ahead-of-Time compilation", "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler." }, { - "path": "guide/animations", + "url": "guide/animations", "title": "Animations", "tooltip": "A guide to Angular's animation system." }, { - "path": "guide/ajs-quick-reference", + "url": "guide/ajs-quick-reference", "title": "AngularJS to Angular", "tooltip": "Learn how AngularJS concepts and techniques map to Angular." }, { - "path": "guide/component-styles", + "url": "guide/component-styles", "title": "Component styles", "tooltip": "Learn how to apply CSS styles to components." }, { - "path": "guide/deployment", + "url": "guide/deployment", "title": "Deployment", "tooltip": "Learn how to deploy your Angular app." }, { - "path": "guide/i18n", + "url": "guide/i18n", "title": "Internationalization (i18n)", "tooltip": "Translate the app's template text into multiple languages." }, { - "path": "guide/security", + "url": "guide/security", "title": "Security", "tooltip": "Developing for content security in Angular applications." }, @@ -331,56 +331,56 @@ "tooltip": "Details of the local development setup", "children": [ { - "path": "guide/setup-systemjs-anatomy", + "url": "guide/setup-systemjs-anatomy", "title": "Setup Anatomy", "tooltip": "Inside the local development environment for SystemJS." }, { - "path": "guide/browser-support", + "url": "guide/browser-support", "title": "Browser support", "tooltip": "Browser support and polyfills guide." }, { - "path": "guide/npm-packages", + "url": "guide/npm-packages", "title": "Npm packages", "tooltip": "Recommended npm packages, and how to specify package dependencies." }, { - "path": "guide/typescript-configuration", + "url": "guide/typescript-configuration", "title": "TypeScript configuration", "tooltip": "TypeScript configuration for Angular developers." } ]}, { - "path": "guide/testing", + "url": "guide/testing", "title": "Testing", "tooltip": "Techniques and practices for testing an Angular app." }, { - "path": "guide/upgrade", + "url": "guide/upgrade", "title": "Upgrading from AngularJS", "tooltip": "Incrementally upgrade an AngularJS application to Angular." }, { - "path": "guide/ts-to-js", + "url": "guide/ts-to-js", "title": "TypeScript to 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", "tooltip": "Use Visual Studio 2015 with the QuickStart files." }, { - "path": "guide/webpack", + "url": "guide/webpack", "title": "Webpack: an introduction", "tooltip": "Create Angular applications with a Webpack based tooling." } @@ -388,11 +388,11 @@ }, { - "path": "resources/", + "url": "resources/", "title": "Resources", "children": [ { - "path": "about", + "url": "about", "title": "About", "tooltip": "The people behind Angular." }