diff --git a/aio/README.md b/aio/README.md index c1eebdd42d..565084645b 100644 --- a/aio/README.md +++ b/aio/README.md @@ -28,6 +28,7 @@ Here are the most important tasks you might need to use: * `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. * `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`. * `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs. +* `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs. ## Guide to authoring diff --git a/aio/content/guide/docs.md b/aio/content/guide/docs.md index cf78c19bb6..f60c2b6da6 100644 --- a/aio/content/guide/docs.md +++ b/aio/content/guide/docs.md @@ -29,16 +29,16 @@ Angular Docs - +

Core Guide

-

Core features of Angular.

- +

The Fundamentals of Angular.

+
- -

Additional Techniques

-

Additional modules and techniques.

- +
+

Angular Techniques

+

Techniques for setting up, configuring, and deploying your application.

+
diff --git a/aio/content/guide/fundamentals.md b/aio/content/guide/fundamentals.md index 9245676842..dce126d543 100644 --- a/aio/content/guide/fundamentals.md +++ b/aio/content/guide/fundamentals.md @@ -1,5 +1,5 @@ @title -Core features of Angular +Fundamentals of Angular @description -Explore the core modules and features of Angular in this section of the guide. \ No newline at end of file +Learn the fundamental features of Angular in this section of the guide. \ No newline at end of file diff --git a/aio/content/guide/setup-systemjs-anatomy.md b/aio/content/guide/setup-systemjs-anatomy.md index c203727194..0ad5ea13f2 100644 --- a/aio/content/guide/setup-systemjs-anatomy.md +++ b/aio/content/guide/setup-systemjs-anatomy.md @@ -1,5 +1,5 @@ @title -Setup Anatomy +Anatomy of the Setup Project @intro Inside the local development environment for SystemJS. diff --git a/aio/content/guide/techniques.md b/aio/content/guide/techniques.md index 6e9bf9c8d2..3ae2ac4e92 100644 --- a/aio/content/guide/techniques.md +++ b/aio/content/guide/techniques.md @@ -1,5 +1,5 @@ @title -Additional techniques +Techniques @description -Learn important techniques such as how to secure, style, animate, and deploy your application. +Learn important Angular application techniques such as how to setup, secure, and deploy your application. diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 91aafd07ba..8e18108e4b 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -5,7 +5,7 @@ "title": "Features" }, { - "url": "docs", + "url": "guide/docs", "title": "Docs", "hidden": true }, @@ -21,7 +21,7 @@ "SideNav": [ { - "url": "docs", + "url": "guide/docs", "title": "Docs", "tooltip": "Angular Documentation", "hidden": true @@ -31,12 +31,6 @@ "title": "Getting Started", "tooltip": "A gentle introduction to Angular.", "children": [ - { - "url": "guide/learning-angular", - "title": "Learning Angular", - "tooltip": "A suggested path through the documentation for Angular newcomers." - }, - { "url": "guide/quickstart", "title": "Basic Quickstart", @@ -47,48 +41,6 @@ "url": "guide/cli-quickstart", "title": "CLI Quickstart", "tooltip": "A quick look at an Angular app built with the Angular CLI." - }, - - { - "url": "guide/setup", - "title": "Setup", - "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine." - }, - - { - "url": "guide/architecture", - "title": "Architecture", - "tooltip": "The basic building blocks of Angular applications." - }, - - { - "url": "guide/appmodule", - "title": "The Root AppModule", - "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"." - }, - - { - "url": "guide/displaying-data", - "title": "Displaying Data", - "tooltip": "Property binding helps show app data in the UI." - }, - - { - "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." - }, - - { - "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." - }, - - { - "url": "guide/dependency-injection", - "title": "Dependency Injection", - "tooltip": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"." } ]}, @@ -135,54 +87,71 @@ }, { - "title": "Core", - "url": "guide/core", - "tooltip": "Learn the core capabilities of Angular", + "title": "Fundamentals", + "url": "guide/fundamentals", + "tooltip": "The fundamentals of Angular", "children": [ + { + "url": "guide/architecture", + "title": "Architecture", + "tooltip": "The basic building blocks of Angular applications." + }, + { "title": "Angular Modules", "tooltip": "Learn how directives modify the layout and behavior of elements.", "children": [ + { + "url": "guide/appmodule", + "title": "The Root AppModule", + "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"." + }, { "url": "guide/ngmodule", "title": "NgModule", "tooltip": "Define application modules with @NgModule." }, - { "url": "guide/ngmodule-faq", "title": "Angular Module FAQs", "tooltip": "Answers to frequently asked questions about @NgModule." } ]}, - { - "url": "guide/component-communication", - "title": "Component Interaction", - "tooltip": "Share information between different directives and components." - }, - - { - "title": "Dependency Injection", - "tooltip": "More about Dependency Injection", + "title": "Components", + "tooltip": "Components present information to users and collect their input.", "children": [ { - "url": "guide/cb-dependency-injection", - "title": "Dependency Injection", - "tooltip": "Techniques for Dependency Injection." + "url": "guide/displaying-data", + "title": "Displaying Data", + "tooltip": "Property binding helps show app data in the UI." }, - { - "url": "guide/hierarchical-dependency-injection", - "title": "Hierarchical Injectors", - "tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree." + "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." + }, + { + "url": "guide/lifecycle-hooks", + "title": "Lifecycle Hooks", + "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them." + }, + { + "url": "guide/component-communication", + "title": "Component Interaction", + "tooltip": "Share information between different directives and components." + }, + { + "url": "guide/component-styles", + "title": "Component Styles", + "tooltip": "Learn how to apply CSS styles to components." + }, + { + "url": "guide/dynamic-component-loader", + "title": "Dynamic Components", + "tooltip": "Load components dynamically." } - ]}, - - { - "url": "guide/dynamic-component-loader", - "title": "Dynamic Components", - "tooltip": "Load components dynamically." + ] }, { @@ -203,25 +172,57 @@ }, { - "title": "Forms", - "tooltip": "More about forms", + "title": "Dependency Injection", + "tooltip": "Dependency Injection: creating and injecting services", "children": [ { - "url": "guide/dynamic-form", - "title": "Dynamic forms", - "tooltip": "Render dynamic forms with FormGroup." + "url": "guide/dependency-injection", + "title": "Dependency Injection", + "tooltip": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"." + }, + { + "url": "guide/hierarchical-dependency-injection", + "title": "Hierarchical Injectors", + "tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree." + }, + { + "url": "guide/dependency-injection-in-action", + "title": "DI in Action", + "tooltip": "Techniques for Dependency Injection." + } + ] + }, + + { + "title": "User Input", + "tooltip": "User Input", + "children": [ + { + "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." }, { - "url": "guide/form-validation", - "title": "Form Validation", - "tooltip": "Validate user's form entries." + "url": "guide/forms", + "title": "Template-driven 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." }, { "url": "guide/reactive-forms", "title": "Reactive Forms", "tooltip": "Create a reactive form using FormBuilder, groups, and arrays." + }, + { + "url": "guide/form-validation", + "title": "Form Validation", + "tooltip": "Validate user's form entries." + }, + { + "url": "guide/dynamic-form", + "title": "Dynamic forms", + "tooltip": "Render dynamic forms with FormGroup." } ]}, @@ -232,9 +233,9 @@ }, { - "url": "guide/lifecycle-hooks", - "title": "Lifecycle Hooks", - "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them." + "url": "guide/router", + "title": "Routing & Navigation", + "tooltip": "Discover the basics of screen navigation with the Angular Router." }, { @@ -243,88 +244,43 @@ "tooltip": "Pipes transform displayed values within a template." }, - { - "url": "guide/router", - "title": "Routing & Navigation", - "tooltip": "Discover the basics of screen navigation with the Angular Router." - }, - - { - "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." - } - ]}, - - { - "title": "API", - "tooltip": "Details of the Angular classes and values.", - "url": "api" - }, - - { - "title": "Additional Techniques", - "url": "guide/additional", - "tooltip": "Additional modules and techniques", - "children": [ - { - "url": "guide/aot-compiler", - "title": "Ahead-of-Time Compilation", - "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler." - }, - { "url": "guide/animations", "title": "Animations", "tooltip": "A guide to Angular's animation system." }, - { - "url": "guide/ajs-quick-reference", - "title": "AngularJS to Angular", - "tooltip": "Learn how AngularJS concepts and techniques map to Angular." - }, - - { - "url": "guide/component-styles", - "title": "Component Styles", - "tooltip": "Learn how to apply CSS styles to components." - }, - - { - "url": "guide/deployment", - "title": "Deployment", - "tooltip": "Learn how to deploy your Angular app." - }, - { "url": "guide/i18n", "title": "Internationalization (i18n)", "tooltip": "Translate the app's template text into multiple languages." - }, + } + ]}, + { + "title": "Techniques", + "url": "guide/techniques", + "tooltip": "Techniques for putting Angular to work in your environment", + "children": [ { - "url": "guide/security", - "title": "Security", - "tooltip": "Developing for content security in Angular applications." - }, - - { - "title": "Setup", - "tooltip": "Details of the local development setup", + "title": "Setup & Deployment", + "tooltip": "Setup and Deployment", "children": [ + { + "url": "guide/setup", + "title": "Setup for local development", + "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine." + }, { "url": "guide/setup-systemjs-anatomy", - "title": "Setup Anatomy", + "title": "Anatomy of the Setup", "tooltip": "Inside the local development environment for SystemJS." }, - { "url": "guide/browser-support", "title": "Browser Support", "tooltip": "Browser support and polyfills guide." }, - { "url": "guide/npm-packages", "title": "Npm Packages", @@ -335,8 +291,42 @@ "url": "guide/typescript-configuration", "title": "TypeScript Configuration", "tooltip": "TypeScript configuration for Angular developers." + }, + { + "url": "guide/aot-compiler", + "title": "Ahead-of-Time Compilation", + "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler." + }, + { + "url": "guide/deployment", + "title": "Deployment", + "tooltip": "Learn how to deploy your Angular app." } - ]}, + ] + }, + + { + "title": "Upgrading", + "tooltip": "Incrementally upgrade an AngularJS application to Angular.", + "children": [ + { + "url": "guide/ajs-quick-reference", + "title": "AngularJS to Angular", + "tooltip": "Learn how AngularJS concepts and techniques map to Angular." + }, + { + "url": "guide/upgrade", + "title": "Upgrading from AngularJS", + "tooltip": "Incrementally upgrade an AngularJS application to Angular." + } + ] + }, + + { + "url": "guide/security", + "title": "Security", + "tooltip": "Developing for content security in Angular applications." + }, { "url": "guide/testing", @@ -345,9 +335,9 @@ }, { - "url": "guide/upgrade", - "title": "Upgrading from AngularJS", - "tooltip": "Incrementally upgrade an AngularJS application to Angular." + "url": "guide/set-document-title", + "title": "Set the document tab title", + "tooltip": "Set the browser tab title dynamically with the Angular Title service" }, { @@ -365,11 +355,17 @@ { "url": "guide/webpack", "title": "Webpack: An Introduction", - "tooltip": "Create Angular applications with a Webpack based tooling." + "tooltip": "Create Angular applications with Webpack based tooling." } ] }, + { + "title": "API", + "tooltip": "Details of the Angular classes and values.", + "url": "api" + }, + { "title": "References", "children": [ @@ -392,7 +388,7 @@ }, { - "url": "guide/style-guide", + "url": "guide/styleguide", "title": "Style Guide", "tooltip": "Write Angular with style." }