Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 8eb88f3

Browse files
wardbellwardbell
committed
docs(quickstart): simplifying overhaul
1 parent f2daab7 commit 8eb88f3

File tree

17 files changed

+508
-538
lines changed

17 files changed

+508
-538
lines changed

‎public/docs/_examples/quickstart/ts/.gitignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/docs/_examples/quickstart/ts/app/app.component.ts

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎public/docs/_examples/quickstart/ts/app/app.module.1.ts

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎public/docs/_examples/quickstart/ts/app/app.module.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
// #docregion
2-
import { NgModule } from '@angular/core';
3-
import { BrowserModule } from '@angular/platform-browser';
2+
import { Component, NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
44

5-
import { AppComponent } from './app.component';
5+
@Component({
6+
template: `<h1>Hello Angular!</h1>`,
7+
selector: 'my-app'
8+
})
9+
export class AppComponent { }
610

711
@NgModule({
812
imports: [ BrowserModule ],
913
declarations: [ AppComponent ],
1014
bootstrap: [ AppComponent ]
1115
})
12-
1316
export class AppModule { }

‎public/docs/_examples/quickstart/ts/app/main.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
// #docregion
2-
// #docregion import
31
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
42

53
import { AppModule } from './app.module';
6-
// #enddocregion import
74

85
const platform = platformBrowserDynamic();
96
platform.bootstrapModule(AppModule);

‎public/docs/_examples/quickstart/ts/index.html

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,30 @@
22
<!-- #docregion -->
33
<html>
44
<head>
5-
<title>Angular QuickStart</title>
5+
<title>Hello Angular</title>
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="stylesheet" href="styles.css">
9+
<style>
10+
body {color:#369;font-family: Arial,Helvetica,sans-serif;}
11+
</style>
912

10-
<!-- 1. Load libraries -->
11-
<!-- #docregion libraries -->
12-
<!-- #docregion polyfills -->
1313
<!-- Polyfill for older browsers -->
1414
<script src="node_modules/core-js/client/shim.min.js"></script>
15-
<!-- #enddocregion polyfills -->
1615

1716
<script src="node_modules/zone.js/dist/zone.js"></script>
1817
<script src="node_modules/reflect-metadata/Reflect.js"></script>
1918
<script src="node_modules/systemjs/dist/system.src.js"></script>
20-
<!-- #enddocregion libraries -->
21-
22-
<!-- 2. Configure SystemJS -->
23-
<!-- #docregion systemjs -->
2419
<script src="systemjs.config.js"></script>
2520
<script>
2621
System.import('app').catch(function(err){ console.error(err); });
2722
</script>
28-
<!-- #enddocregion systemjs -->
2923
</head>
3024

31-
<!-- 3. Display the application -->
32-
<!-- #docregion my-app -->
3325
<body>
34-
<my-app>Loading...</my-app>
26+
<!-- #docregion my-app-->
27+
<my-app><!-- content managed by Angular --></my-app>
28+
<!-- #enddocregion my-app-->
3529
</body>
36-
<!-- #enddocregion my-app -->
30+
3731
</html>

‎public/docs/_examples/quickstart/ts/plnkr.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
22
"description": "QuickStart",
33
"files": [
4-
"!**/*.d.ts",
5-
"!**/*.js",
6-
"!**/*.[1].*"
4+
"app/app.module.ts",
5+
"index.html"
76
],
87
"tags": ["quickstart"]
9-
}
8+
}

‎public/docs/_examples/quickstart/ts/systemjs.config.1.js

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎public/docs/_examples/quickstart/ts/tsconfig.1.json

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎public/docs/ts/latest/_data.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"title": "Quickstart",
2121
"subtitle": "TypeScript",
2222
"description": "Get up and running with Angular",
23-
"banner": "This QuickStart guide demonstrates how to build and run a simple Angular application."
23+
"banner": "See Angular in action."
2424
},
2525

2626
"tutorial": {

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"index": {
33
"title": "Cookbook",
44
"navTitle": "Overview",
5-
"description": "A collection of recipes for common Angular application scenarios"
5+
"intro": "A collection of recipes for common Angular application scenarios"
66
},
77

88
"aot-compiler": {

‎public/docs/ts/latest/guide/_data.json

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,23 @@
22
"index": {
33
"title": "Documentation Overview",
44
"navTitle": "Overview",
5-
"description": "How to read and use this documentation",
5+
"intro": "How to read and use this documentation",
6+
"nextable": true,
7+
"basics": true
8+
},
9+
10+
"learning-angular": {
11+
"title": "Learning Angular",
12+
"navTitle": "Learning Angular",
13+
"intro": "A suggested path through the documentation for Angular newcomers",
14+
"nextable": true,
15+
"basics": true
16+
},
17+
18+
"setup": {
19+
"title": "Setup for local development",
20+
"navTitle": "Setup",
21+
"intro": "Setup a local development environment",
622
"nextable": true,
723
"basics": true
824
},
@@ -136,6 +152,11 @@
136152
"intro": "Developing for content security in Angular applications"
137153
},
138154

155+
"setup-systemjs-anatomy": {
156+
"title": "Setup anatomy",
157+
"intro": "Inside the local development environment for SystemJS"
158+
},
159+
139160
"structural-directives": {
140161
"title": "Structural Directives",
141162
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."

‎public/docs/ts/latest/guide/index.jade

Lines changed: 36 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,89 @@
11
block includes
22
include ../_util-fns
33

4-
figure
5-
img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px")
6-
4+
- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
75
:marked
8-
This is a practical guide to Angular for experienced programmers who
9-
are building client applications in HTML and #{_Lang}.
10-
<br class="l-clear-left">
6+
This page describes the Angular documentation at a high level.
7+
If you're new to Angular, you may want to visit "[Learning Angular](learning-angular.html)" first.
118

12-
## Organization
9+
## Themes
1310

1411
The documentation is divided into major thematic sections, each
1512
a collection of pages devoted to that theme.
13+
<br clear="all">
1614

1715
block js-alert
1816

19-
- var __lang = _docsFor || current.path[1] || 'ts';
20-
- var guideData = public.docs[__lang].latest.guide._data;
21-
- var advancedLandingPage = '';
22-
- for(var page in guideData) {
23-
- if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; }
24-
- }
25-
- var advancedUrl = './' + advancedLandingPage + '.html'
2617
- var top="vertical-align:top"
2718
table(width="100%")
2819
col(width="15%")
2920
col
3021
tr(style=top)
31-
td <b><a href="../quickstart">QuickStart</a></b>
22+
td <b><a href="../quickstart.html">QuickStart</a></b>
3223
td
3324
:marked
34-
The foundation for every page and sample in this documentation.
25+
A first taste of Angular with zero installation.
26+
Run "Hello World" in an online code editor and start playing with live code.
3527
tr(style=top)
36-
td <b><a href="./">Guide</a></b>
28+
td <b>Guide</b>
3729
td
3830
:marked
39-
The essential ingredients of Angular development.
31+
Learn the Angular basics (you're already here!).
4032
tr(style=top)
41-
td <b><a href="../api">API Reference</a></b>
33+
td <b><a href="../api/">API Reference</a></b>
4234
td
4335
:marked
4436
Authoritative details about each member of the Angular libraries.
4537
tr(style=top)
46-
td <b><a href="../tutorial">Tutorial</a></b>
38+
td <b><a href="../tutorial/">Tutorial</a></b>
4739
td
4840
:marked
4941
A step-by-step, immersive approach to learning Angular that
5042
introduces the major features of Angular in an application context.
5143
tr(style=top)
52-
td <b><a href="!{advancedUrl}">Advanced</a></b>
44+
td <b><a href="!{advancedUrl}">Advanced</a></b>
5345
td
5446
:marked
5547
In-depth analysis of Angular features and development practices.
5648
tr(style=top)
57-
td <b><a href="../cookbook">Cookbook</a></b>
49+
td <b><a href="../cookbook/">Cookbook</a></b>
5850
td
5951
:marked
6052
Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
6153

6254
:marked
63-
## Learning path
64-
65-
You don't have to read the guide straight through. Most pages stand on their own.
66-
67-
For those new to Angular, the recommended learning path runs through the *Guide* section:
68-
69-
1. For the big picture, read the [Architecture](architecture.html) overview.
70-
71-
1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular.
72-
It shows you how to set up the libraries and tools you'll need to write *any* Angular app.
73-
74-
1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off,
75-
and builds a simple data-driven app. The app demonstrates the essential characteristics of a professional application:
76-
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
77-
78-
1. [Displaying Data](displaying-data.html) explains how to display information on the screen.
55+
A few early pages are written as tutorials and are clearly marked as such.
56+
The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
57+
You can always get the full source through the #{_liveLink}s.
7958

80-
1. [User Input](user-input.html) covers how Angular responds to user behavior.
59+
:marked
60+
## Code samples
8161

82-
1. [Forms](forms.html) handles user data entry and validation within the UI.
62+
Each page includes code snippets that you can reuse in your applications.
63+
These snippets are excerpts from a sample application that accompanies the page.
8364

84-
1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
85-
from small, single-purpose parts.
65+
block example-links
66+
:marked
67+
Look for a link to a running version of that sample near the top of each page,
68+
such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
8669

87-
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
70+
The link launches a browser-based, code editor where you can inspect, modify, save, and download the code.
8871

89-
After reading the above sections, you can skip to any other pages on this site.
72+
:marked
73+
## Reference pages
9074

91-
## Code samples
75+
The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
9276

93-
Each page includes code snippets that you can reuse in your applications.
94-
These snippets are excerpts from a sample application that accompanies the page.
77+
The [Glossary](glossary.html) defines terms that Angular developers should know.
9578

96-
Look for a link to a running version of that sample near the top of each page,
97-
such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
98-
<p if-docs="ts">
99-
The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
100-
</p>
79+
The [Change Log](change-log.html) announces what's new and changed in the documentation..
10180

102-
A few early pages are written as tutorials and are clearly marked as such.
103-
The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
104-
You can always get the full source through the #{_liveLink}.
81+
The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
10582

106-
## Reference pages
83+
## Feedback
10784

108-
- The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
109-
- The [Glossary](glossary.html) defines terms that Angular developers should know.
110-
- The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
85+
We welcome feedback!
11186

112-
## We welcome feedback!
87+
Use the [angular.io Github repo](https://github.com/angular/angular.io) for **documentation** issues and pull requests.
11388

114-
- Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests.
115-
- Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself.
89+
Use the [Angular Github repo](https://github.com/angular/angular) to report issues with **Angular** itself.

0 commit comments

Comments
 (0)