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

Commit a595eb8

Browse files
committed
docs(dart): update BASICS intro (#1410)
Also copy edited the TS version a bit.
1 parent 5b1a84b commit a595eb8

File tree

4 files changed

+84
-159
lines changed

4 files changed

+84
-159
lines changed

public/_includes/_util-fns.jade

+10-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
33
//- _docsFor: used to identify the language this version of the docs if for;
44
//- Should be one of: 'ts', 'dart' or 'js'. Set in lang specific _util-fns file.
5-
- var _docsFor = '';
5+
- var _docsFor = '';
66

77
//- Should match `_docsFor`, but in this case provides the full capitalized
88
//- name of the language.
@@ -29,6 +29,10 @@
2929
- var _Promise = 'Promise';
3030
- var _Observable = 'Observable';
3131

32+
//- Location of sample code
33+
- var _liveLink = 'live link';
34+
35+
3236
//- Used to prefix identifiers that are private. In Dart this will be '_'.
3337
- var _priv = '';
3438

@@ -46,7 +50,7 @@ mixin adjExPath(path)
4650
| #{adjustExamplePath(path)}
4751
else
4852
| #{path}
49-
53+
5054
mixin includeShared(filePath, region)
5155
- var newPath = translatePath(filePath, region);
5256
!=partial(newPath)
@@ -69,8 +73,8 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
6973
code-example(language="#{language}" format="#{format}")
7074
!= styleString(frag, stylePatterns)
7175

72-
//- Like makeExample, but the first argument is a path that is
73-
//- relative to the project root. Unless title is defined,
76+
//- Like makeExample, but the first argument is a path that is
77+
//- relative to the project root. Unless title is defined,
7478
//- the project relative path will be used.
7579
mixin makeProjExample(projRootRelativePath, region, title, stylePatterns)
7680
- var relPath = projRootRelativePath.trim();
@@ -83,7 +87,7 @@ mixin makeProjExample(projRootRelativePath, region, title, stylePatterns)
8387
+makeExample(filePath, region, title, stylePatterns)
8488

8589
//- Like makeExample, but doesn't show line numbers, and the first
86-
//- argument is a path that is relative to the example project root.
90+
//- argument is a path that is relative to the example project root.
8791
//- Unless title is defined, the project relative path will be used.
8892
//- Title will always end with a phrase in parentheses; if no such
8993
//- ending is given, then the title will be suffixed with
@@ -164,7 +168,7 @@ script.
164168
el.style.display = isVerbose ? 'block' : 'none';
165169
var el = document.querySelector('button.verbose.on');
166170
el.style.display = isVerbose ? 'none' : 'block';
167-
171+
168172
CCSStylesheetRuleStyle('main','.l-verbose-section', 'display',
169173
isVerbose ? 'block' : 'none');
170174
}

public/docs/dart/latest/_util-fns.jade

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ include ../../../_includes/_util-fns
1111
- var _Lang = 'Dart';
1212
- var _Promise = 'Future';
1313
- var _Observable = 'Stream';
14+
- var _liveLink = 'sample repo';
1415

1516
mixin liveExampleLink(linkText, exampleUrlPartName)
1617
a(href='https://angular-examples.github.io/#{exampleUrlPartName}' target="_blank")= linkText
1718

1819
mixin liveExampleLink2(linkText, exampleUrlPartName)
1920
- var liveExampleSourceLinkText = attributes.srcLinkText || 'view source'
20-
| #[+liveExampleLink(linkText, exampleUrlPartName)]
21+
| #[+liveExampleLink(linkText, exampleUrlPartName)]
2122
| (#[a(href='https://github.com/angular-examples/#{exampleUrlPartName}' target="_blank") #{liveExampleSourceLinkText}])
2223

2324
- var adjustExamplePath = function(_path) {
@@ -29,7 +30,7 @@ mixin liveExampleLink2(linkText, exampleUrlPartName)
2930
- var baseName = getBaseFileName(path) || path; // TODO: have getBaseFileName() return path
3031
- var baseNameNoExt = baseName.substr(0,baseName.length - (extn.length + 1));
3132
- var inWebFolder = baseNameNoExt.match(/^(main|index(\.\d)?)$/);
32-
- // Adjust the folder path, e.g., ts -> dart
33+
- // Adjust the folder path, e.g., ts -> dart
3334
- folder = folder.replace(/(^|\/)ts($|\/)/, '$1dart$2').replace(/(^|\/)app($|\/)/, inWebFolder ? '$1web$2' : '$1lib$2');
3435
- // Special case not handled above: e.g., index.html -> web/index.html
3536
- if(baseNameNoExt.match(/^(index|styles)(\.\d)?$/)) folder = (folder ? folder + '/' : '') + 'web';
+13-93
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,13 @@
1-
include ../_util-fns
2-
3-
:marked
4-
This Developers Guide is a practical guide to Angular for experienced programmers who
5-
are building client applications in HTML and Dart.
6-
figure
7-
img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
8-
:marked
9-
We are on a journey together to understand how Angular works and, more importantly,
10-
how to make it work for us. We look at our application requirements and we see problems to solve.
11-
<br clear="all">
12-
13-
* How do we get data onto the screen and handle user interactions?
14-
* How do we organize our code into manageable, cohesive chunks of functionality that work together?
15-
* What are the essential Angular building blocks and how do they help?
16-
* How do we minimize routine, mechanical coding in favor of declarative, higher level constructs without losing control?
17-
18-
This chapter begins the journey.
19-
20-
<a id="how-to-read"></a>
21-
:marked
22-
# How to read this guide
23-
Each chapter of this guide targets an Angular feature,
24-
showing how to use it to solve a programming problem.
25-
26-
All the chapters include code snippets ... snippets we can reuse in our own applications.
27-
Typically, these snippets are excerpts from a sample application that accompanies the chapter.
28-
29-
**All the source files** for each sample app are displayed together at the **end of each chapter.**
30-
31-
<!-- Although a few early chapters are written as tutorials, most later chapters
32-
don't explain how to build the accompanying sample.
33-
These non-tutorial chapters highlight key points in code but generally don't include the entire source. -->
34-
35-
<!-- We don't have to read this guide straight through. -->
36-
<!-- The "[Cheat Sheet](cheatsheet.html)" is a handy map to Angular overall. -->
37-
<!-- A few early chapters are arranged sequentially and best read together to establish a foundation in Angular.
38-
But most chapters stand on their own. We can browse to any of them as our interest or some necessity moves us. -->
39-
40-
Here is a learning path we might follow:
41-
42-
1. First, be familiar with Dart programming and with web concepts such as
43-
the DOM, HTML, and CSS. Dart tutorials such as
44-
[Get Started](https://www.dartlang.org/docs/tutorials/get-started/) and
45-
[Connect Dart & HTML](https://www.dartlang.org/docs/tutorials/connect-dart-html/)
46-
are a great way to start.
47-
48-
1. Follow the [QuickStart](../quickstart.html), which is the "Hello, World" of Angular 2.
49-
It shows how to set up the libraries and tools needed to write *any* Angular app.
50-
It ends with a "proof of life", a running Angular app.
51-
52-
1. Next, read the Developers Guide chapters in order:
53-
<!-- TODO: adjust this text once we have non-introductory/tutorial chapters -->
54-
1. The rest of this chapter, especially the Architecture overview
55-
1. [Displaying Data](displaying-data.html)
56-
1. [User Input](user-input.html)
57-
1. [Forms](forms.html)
58-
<!-- add dependency injection when it exists -->
59-
<!-- add text about template syntax, once that exists -->
60-
61-
1. Consider hopping over to the [TypeScript docs](/docs/ts/latest/)
62-
since they're currently ahead of the Dart docs. (We're working on that!)
63-
Especially check out the [Tutorial](/docs/ts/latest/tutorial/) and
64-
[Cheat Sheet](/docs/ts/latest/guide/cheatsheet.html), and the guide chapters
65-
[Dependency Injection](/docs/ts/latest/guide/dependency-injection.html)
66-
and [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
67-
68-
<!-- Follow your own star from there, wherever it leads. -->
69-
70-
Don't miss the [Cheat Sheet](cheatsheet.html), a handy map to Angular.
71-
72-
<a id="toh"></a>
73-
.l-main-section
74-
:marked
75-
# Appendix: The Hero Staffing Agency
76-
77-
There's a backstory to the <!-- the "Tour of Heroes" and --> samples in this guide.
78-
79-
The world is full of crises large and small.
80-
Fortunately, courageous heroes are prepared to take on every challenge.
81-
The shadowy Hero Staffing Agency matches crises to heroes.
82-
83-
We are contract developers, hired by the Agency to build an application to manage their operations.
84-
The Agency maintains a stable of heroes with special powers.
85-
Ordinary humans submit crises as job requests. The heroes bid to take the job, and the Agency
86-
assigns each job accordingly.
87-
88-
Our application handles every detail of recruiting, tracking, and job assignment.
89-
For example, the [Forms](forms.html) chapter features a screen for
90-
entering personal information about heroes:
91-
92-
figure.image-display
93-
img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
1+
extends ../../../ts/latest/guide/index.jade
2+
3+
block includes
4+
include ../_util-fns
5+
6+
block example-links
7+
:marked
8+
Look for a link to that sample near the top of each page.
9+
For example, the sample repo https://github.com/angular-examples/architecture
10+
contains the code
11+
for the [Architecture](architecture.html) chapter's sample.
12+
A running version of that sample is at
13+
https://angular-examples.github.io/architecture/.
+58-58
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
include ../_util-fns
1+
block includes
2+
include ../_util-fns
23

34
// #docregion intro
45
- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
@@ -17,7 +18,7 @@ figure
1718
<a id="learning-path"></a>
1819
:marked
1920
# Organization
20-
21+
2122
The documentation is divided into major thematic sections, each
2223
a collection of chapters devoted to that theme.
2324
// #enddocregion how-to-read-1
@@ -26,14 +27,16 @@ figure
2627
table(width="100%")
2728
col(width="15%")
2829
col
30+
tr(style=top)
31+
td <b>QuickStart</b>
32+
td
33+
:marked
34+
The foundation for every chapter and sample in this documentation.
2935
tr(style=top)
3036
td <b>Tutorial</b>
3137
td
3238
:marked
33-
A step-by-step, immersive approach to learning Angular.
34-
It begins with the [QuickStart](../quickstart.html),
35-
the foundation for every chapter and sample in this documentation,
36-
followed by the [*Tour of Heroes* tutorial](../tutorial) that
39+
A step-by-step, immersive approach to learning Angular that
3740
introduces the major features of Angular in an application context.
3841
tr(style=top)
3942
td <b>Basics</b>
@@ -44,86 +47,83 @@ table(width="100%")
4447
td <b>Developer Guide</b>
4548
td
4649
:marked
47-
In depth analysis of Angular features and development practices.
50+
In-depth analysis of Angular features and development practices.
4851
tr(style=top)
4952
td <b>Cookbook</b>
5053
td
5154
:marked
5255
Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
5356
tr(style=top)
54-
td <b>Reference</b>
57+
td <b>API Reference</b>
5558
td
5659
:marked
57-
Angular-specific reference material, most notably the [API Guide](../api)
58-
with its authoritative details about each member in the Angular libraries.
59-
tr(style=top)
60-
td <b>Resources</b>
61-
td
62-
:marked
63-
Other places to go for help and information.
60+
Authoritative details about each member of the Angular libraries.
6461
:marked
65-
# Learning Path
66-
We don't have to read the guide straight through. Most chapters stand on their own.
67-
68-
We recommend a learning path for those new to Angular.
62+
# Learning path
63+
We don't have to read the guide straight through. Most chapters stand on their own.
64+
65+
We recommend a learning path for those new to Angular.
6966
Most of that path runs through the *Basics* section:
7067

71-
1. Read the [Architecture Overview](architecture.html) to get the big picture.
72-
73-
1. Try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2.
74-
It shows us how to setup the libraries and tools we'll need to write *any* Angular app.
75-
76-
1. Take the *Tour of Heroes* [Tutorial](../tutorial) which picks up from where the QuickStart leaves off
77-
and builds a simple data-driven app.
68+
1. Read the [Architecture](architecture.html) overview to get the big picture.
69+
70+
1. Try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2.
71+
It shows us how to set up the libraries and tools we'll need to write *any* Angular app.
72+
73+
1. Take the *Tour of Heroes* [Tutorial](../tutorial), which picks up from where the QuickStart leaves off
74+
and builds a simple data-driven app.
7875
Simple, yes, but with the essential characteristics we'd expect of a professional application:
79-
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
80-
76+
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
77+
8178
Return to the *Basics* section and continue in the suggested order:
82-
79+
8380
1. [Displaying Data](displaying-data.html) explains how to get information on to the screen.
84-
81+
8582
1. [User Input](user-input.html) covers the basics of responding to user behavior.
86-
83+
8784
1. [Forms](forms.html) handle user data entry and validation within the UI.
88-
85+
8986
1. [Dependency Injection](dependency-injection.html) is the way we build large, maintainable applications
90-
from small, single purpose parts.
91-
92-
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
87+
from small, single-purpose parts.
88+
89+
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
9390

9491
With this foundation, we can read and understand any chapter in the guide.
9592
// #enddocregion how-to-read-2
9693
// #docregion the-rest
9794
:marked
98-
# Code Samples
99-
100-
Every chapter includes code snippets that we can reuse in our own applications.
95+
# Code samples
96+
97+
Every chapter includes code snippets that we can reuse in our own applications.
10198
These snippets are excerpts from a sample application that accompanies the chapter.
102-
103-
Look for a link to a running version of that sample near the top of each page
104-
such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter.
105-
106-
The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
107-
108-
A few early chapters are written as tutorials and are clearly marked as such.
109-
Most chapters are *not* tutorials.
99+
100+
block example-links
101+
:marked
102+
Look for a link to a running version of that sample near the top of each page,
103+
such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter.
104+
105+
The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
106+
107+
:marked
108+
A few early chapters are written as tutorials and are clearly marked as such.
109+
Most chapters are *not* tutorials.
110110
They highlight key points in code rather than explain each step necessary to build the sample.
111-
We can always get the full source by way of the live link.
112-
113-
## References
114-
111+
We can always get the full source by way of the #{_liveLink}.
112+
113+
# Reference pages
114+
115115
The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
116-
116+
117117
The [Glossary](glossary.html) defines terms that Angular developers should know.
118-
119-
The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries.
120-
118+
119+
The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
120+
121121
# Feedback
122-
122+
123123
We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
124-
125-
Post *documentation* issues and pull requests on the
124+
125+
Post *documentation* issues and pull requests on the
126126
[angular.io](https://github.com/angular/angular.io) github repository.
127-
127+
128128
Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
129129
// #enddocregion the-rest

0 commit comments

Comments
 (0)