iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: temporary TS-referencing chapters for gaps in JS/Dart 

Also displays styleguide at language level
Fragmented glossary for JS & Dart
This commit is contained in:
Ward Bell 2016-02-25 09:03:50 -08:00
parent 8bc53b260b
commit 95c34d27bc
60 changed files with 429 additions and 815 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/_includes/_footer.jade
View File

@ -1,3 +1,12 @@
if current.path[1]
- var language = current.path[1]
if current.path[2]
- var version = current.path[2].replace(/\_+/gm, ".")
if version && language
- var styleguide = "/docs/"+language+"/"+ version +"/styleguide.html"
else
- var styleguide = "/docs/ts/latest/styleguide.html"
.main-footer
nav.background-silver.grid-fluid
@ -44,5 +53,5 @@
footer(class="background-steel")
small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
a(aria-label="View Style Guide" href="/docs/styleguide.html" title="Style Guide" class="styleguide-trigger text-snow" md-button)
a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button)
span.icon-favorite

11
public/_includes/_version-dropdown.jade
View File

@ -5,12 +5,17 @@
- var version = ''
- var page = ''
<!-- Replace _ undscores with . dots -->
<!-- Replace _ underscores with . dots -->
if current.path[2]
- var version = current.path[2].replace(/\_+/gm, ".")
<!-- Replace _ undscores with . dots -->
if current.path[3]
if current.path[4]
if public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
- var page = current.path[3] + '/' + current.path[4] + '/'
else
- var page = current.path[3] + '/' + current.path[4] + '.html'
else if current.path[3]
if public.docs[current.path[1]][current.path[2]][current.path[3]]
- var page = current.path[3] + '/'
else

33
public/docs/_includes/_ts-temp.jade Normal file
View File

@ -0,0 +1,33 @@
- var language = current.path[1]
- var lang = 'your choosen language'
if language == 'dart'
- lang = 'Dart'
if language == 'js'
- lang = 'JavaScript'
if language == 'ts'
- lang = 'TypeScript'
- var page = ''
if current.path[4]
- var page = current.path[4] + '.html'
- var path = '/docs/ts/latest/'+ current.path[3] + '/' + page
- var name = 'it'
- var secondaryPath = public.docs[current.path[1]][current.path[2]][current.path[3]]
if secondaryPath
- var data = secondaryPath._data
- var listType = data._listtype
- var items = listType == 'api' ? secondaryPath : data
for item, slug in items
if slug == current.path[4]
- name = 'the <b><i>' + item.title + '</i></b> chapter'
p.
This chapter is not yet available in #{lang}.
We recommend reading the TypeScript version.
a(href=path, class='md-primary md-button md-ink-ripple').
Read !{name} in TypeScript
// != partial(path)

2
public/docs/_includes/styleguide/_code-examples.jade
View File

@ -170,7 +170,7 @@ include ../../../_includes/_util-fns
as can CSS files:
code-example(format="linenums" language="css").
/* #docregion bar */
/* #docregion center-global */
.center-global {
max-width: 1020px;
margin: 0 auto;

10
public/docs/_includes/styleguide/_styleguide.jade Normal file
View File

@ -0,0 +1,10 @@
.grid-fluid
.c10
!= partial("_layouts")
!= partial("_code-examples")
!= partial("_alerts")
!= partial("_callouts")
!= partial("_tables")
!= partial("_aside")
//!= partial("_jump-nav")

12
public/docs/dart/latest/_data.json
View File

@ -11,12 +11,24 @@
"title": "5 Min Quickstart"
},
"tutorial": {
"icon": "list",
"title": "Tutorial",
"banner": "Angular 2 is currently in Beta."
},
"guide": {
"icon": "list",
"title": "Developers Guide",
"banner": "Angular 2 is currently in Beta."
},
"cookbook": {
"icon": "list",
"title": "Cookbook",
"banner": "How to solve common implementation challenges."
},
"api": {
"icon": "book",
"title": "API Proposal"

18
public/docs/dart/latest/cookbook/_data.json Normal file
View File

@ -0,0 +1,18 @@
{
"_listtype": "alpha",
"index": {
"title": "Cookbook",
"description": "A collection of recipes for common Angular application scenarios"
},
"a1-a2-quick-reference": {
"title": "Angular 1 to 2 Quick Ref",
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
},
"component-communication": {
"title": "Component Interaction",
"description": "Share information between different directives and components"
}
}

1
public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/cookbook/component-communication.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/cookbook/index.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

7
public/docs/dart/latest/guide/_data.json
View File

@ -8,7 +8,7 @@
"cheatsheet": {
"title": "Angular Cheat Sheet"
},
"architecture": {
"title": "Architecture Overview"
},
@ -73,6 +73,11 @@
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
},
"upgrade": {
"title": "Upgrading from 1.x",
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
},
"glossary": {
"title": "Glossary",
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary"

16
public/docs/dart/latest/guide/glossary.jade
View File

@ -1,6 +1,14 @@
include ../../../../_includes/_util-fns
+includeShared('{ts}', 'intro')
+includeShared('{ts}', 'a2')
+includeShared('{ts}', 'b-c')
+includeShared('{ts}', 'd1')
+includeShared('{ts}', 'd2')
+includeShared('{ts}', 'e1')
+includeShared('{ts}', 'e2')
+includeShared('{ts}', 'f-l')
+includeShared('{ts}', 'm1')
+includeShared('{ts}', 'n-s')
+includeShared('{ts}', 't1')
:marked
We're working on the Dart version of this glossary.
In the meantime, please read the
[TypeScript version of the glossary](/docs/ts/latest/guide/glossary.html).
+includeShared('{ts}', 'u-z')

5
public/docs/dart/latest/guide/server-communication.jade
View File

@ -5,8 +5,7 @@ include ../../../../_includes/_util-fns
In the meantime, please see these resources:
* [Http Client](/docs/ts/latest/guide/server-communication.html):
The TypeScript version of this chapter
The TypeScript version of this chapter.
* [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/server-communication/dart):
A preliminary version of the example code that will appear in this chapter
A preliminary version of the example code that will appear in this chapter.

2
public/docs/dart/latest/guide/template-syntax-NEW.jade
View File

@ -1,6 +1,6 @@
include ../../../../_includes/_util-fns
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'intro')
+includeShared('{ts}', 'intro')
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'html-1')
+makeExample('template-syntax/dart/lib/app_component.html', 'my-first-app')(format=".")

1
public/docs/dart/latest/guide/typescript-configuration.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/guide/upgrade.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/styleguide.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../_includes/styleguide/_styleguide")

28
public/docs/dart/latest/tutorial/_data.json Normal file
View File

@ -0,0 +1,28 @@
{
"_listtype": "ordered",
"index": {
"title": "Tutorial: Tour of Heroes",
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript."
},
"toh-pt1": {
"title": "The Hero Editor",
"intro": "We build a simple hero editor"
},
"toh-pt2": {
"title": "Master/Detail",
"intro": "We build a master/detail page with a list of heroes"
},
"toh-pt3": {
"title": "Multiple Components",
"intro": "We refactor the master/detail view into separate components"
},
"toh-pt4": {
"title": "Services",
"intro": "We create a reusable service to manage our hero data calls"
},
"toh-pt5": {
"title": "Routing",
"intro": "We add the Angular Component Router and learn to navigate among the views"
}
}

1
public/docs/dart/latest/tutorial/index.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/tutorial/toh-pt1.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/tutorial/toh-pt2.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/tutorial/toh-pt3.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/tutorial/toh-pt4.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/dart/latest/tutorial/toh-pt5.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

12
public/docs/js/latest/_data.json
View File

@ -11,12 +11,24 @@
"title": "5 Min Quickstart"
},
"tutorial": {
"icon": "list",
"title": "Tutorial",
"banner": "Angular 2 is currently in Beta."
},
"guide": {
"icon": "list",
"title": "Developer Guide",
"banner": "Angular 2 is currently in Beta."
},
"cookbook": {
"icon": "list",
"title": "Cookbook",
"banner": "How to solve common implementation challenges."
},
"api": {
"icon": "book",
"title": "API Preview"

18
public/docs/js/latest/cookbook/_data.json Normal file
View File

@ -0,0 +1,18 @@
{
"_listtype": "alpha",
"index": {
"title": "Cookbook",
"description": "A collection of recipes for common Angular application scenarios"
},
"a1-a2-quick-reference": {
"title": "Angular 1 to 2 Quick Ref",
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
},
"component-communication": {
"title": "Component Interaction",
"description": "Share information between different directives and components"
}
}

1
public/docs/js/latest/cookbook/a1-a2-quick-reference.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/cookbook/component-communication.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/cookbook/index.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

65
public/docs/js/latest/guide/_data.json
View File

@ -2,25 +2,84 @@
"_listtype": "ordered",
"index": {
"title": "Developer Guide"
"title": "Developer Guides"
},
"cheatsheet": {
"title": "Angular Cheat Sheet"
},
"architecture": {
"title": "Architecture Overview"
},
"displaying-data": {
"title": "Displaying Data",
"intro": "Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML templates and Angular automatically updates the UI as data changes."
"intro": "Interpolation and other forms of property binding help us show app data in the UI."
},
"user-input": {
"title": "User Input",
"intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
},
"forms": {
"title": "Forms",
"intro": "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."
},
"dependency-injection": {
"title": "Dependency Injection",
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"."
},
"template-syntax": {
"title": "Template Syntax",
"intro": "Learn how to write templates that display data and consume user events with the help of data binding."
},
"pipes": {
"title": "Pipes",
"intro": "Pipes transform displayed values within a template."
},
"router": {
"title": "Routing & Navigation",
"intro": "Discover the basics of screen navigation with the Angular 2 router."
},
"server-communication": {
"title": "Http Client",
"intro": "Talk to a remote server with the Angular Http Client."
},
"lifecycle-hooks": {
"title": "Lifecycle Hooks",
"intro": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
},
"attribute-directives": {
"title": "Attribute Directives",
"intro": "Attribute directives attach behavior to elements."
},
"structural-directives": {
"title": "Structural Directives",
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
},
"hierarchical-dependency-injection": {
"title": "Hierarchical Injectors",
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
},
"upgrade": {
"title": "Upgrading from 1.x",
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
},
"glossary": {
"title": "Glossary",
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary"
}
}

1
public/docs/js/latest/guide/architecture.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/attribute-directives.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/dependency-injection.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

348
public/docs/js/latest/guide/displaying-data.jade
View File

@ -1,347 +1 @@
.l-main-section
h2#section-displaying-controller-properties Displaying controller properties
p.
Let's walk through how we'd display a property, a list of properties, and then conditionally show content
based on state. We'll end up with a UI that looks like this:
figure.image-display
img(src='/resources/images/examples/displaying-data-example1.png' alt="Example of Todo App")
.callout.is-helpful
header Typescript vs ES5
p.
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
<code>.ts</code>.
.l-main-section
h2#section-create-an-entry-point Create an entry point
p Open your favorite editor and create a <code>show-properties.html</code> file with the content:
code-example(language="html" escape="html").
<display></display>
p
| The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application.
| We'll assume a structure like this for the rest of the examples here and just focus on the parts that
| are different.
.l-main-section
h2#section-showing-properties-with-interpolation Showing properties with interpolation
p.text-body
| The simple method for binding text into templates is through interpolation where you put the name of a property
| inside <strong>{{ }}</strong>.
p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
// TypeScript
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
`
})
class DisplayComponent {
myName: string;
constructor() {
this.myName = "Alice";
}
}
code-pane(language="javascript" name="ES5" format="linenums").
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display"
}),
new angular.ViewAnnotation({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;'
})
];
p.
You've just defined a component that encompasses a view and controller for the app. The view
defines a template:
code-example(language="html" escape="html").
<p>My name: {{ myName }}</p>
p.
Angular will automatically pull the value of <code>myName</code> and insert it into the browser and
update it whenever it changes without work on your part.
p.
One thing to notice here is that though you've written your <code>DisplayComponent</code> class, you haven't
called new to create one anywhere. By associating your class with elements named 'display' in
the DOM, Angular knows to automatically call new on <code>DisplayComponent</code> and bind its properties to
that part of the template.
p.
When you're building templates, data bindings like these have access to the same scope of
properties as your controller class does. Here, your class is the <code>DisplayComponent</code> that has
just one property, myName.
.callout.is-helpful
header Note
p.
While you've used <code>template:</code> to specify an inline view, for larger templates you'd
want to move them to a separate file and load them with <code>templateUrl:</code> instead.
.l-main-section
h2#Create-an-array Create an array property and use NgFor on the view
p Moving up from a single property, create an array to display as a list.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
class DisplayComponent {
myName: string;
<span class='otl'>names: Array&lt;string&gt;;</span>
constructor() {
this.myName = "Alice";
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
}
}
code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
//ES5
function DisplayComponent() {
this.myName = "Alice";
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
}
p.
You can then use this array in your template with the <code>NgFor</code> directive to create copies of DOM elements
with one for each item in the array.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *ng-for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
`,
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
template:
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
p.
To make this work, you'll also need to add the <code>NgFor</code> directive used by the template so
that Angular knows to include it:
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
@View({
...
directives: [NgFor]
})
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
DisplayComponent.annotations = [
...
new angular.ViewAnnotation({
...
directives: [angular.NgFor]
})
];
p Reload and you've got your list of friends!
p.
Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of
the DOM list.
p Let's look at the few lines that do the work again:
code-example(language="html" format="linenums").
//HTML
&lt;li *ng-for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
p The way to read this is:
ul
li.
<code>*ng-for</code> : create a DOM element for each item in an
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
like an array
li <code>#name</code> : refer to individual values of the iterable as 'name'
li <code>of names</code> : the iterable to use is called 'names' in the current controller
p Using this syntax, you can build UI lists from any iterable object.
.l-main-section
h2#Create-a-class Create a class for the array property and inject into component
p.
Before we get too much further, we should mention that putting our model (array) directly in our controller isn't
proper form. We should separate the concerns by having another class serve the role of model and inject it into
the controller.
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
class FriendsService {
names: Array&lt;string&gt;;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
code-pane(language="javascript" name="ES5" format="linenums").
function FriendsService() {
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
p.
Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list,
then including the service in the constructor, and finally setting the list of
names in DisplayComponent to the names provided by the service you passed in.
.callout.is-helpful
header ES5 Note
p.
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
@Component({
...
<span class='otl'>appInjector: [FriendsService]</span>
})
class DisplayComponent {
myName: string;
names: Array&lt;string&gt;;
constructor(<span class='otl'>friendsService: FriendsService</span>) {
this.myName = 'Alice';
<span class='otl'>this.names = friendsService.names;</span>
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function DisplayComponent(<span class='otl'>friends</span>) {
this.myName = "Alice";
this.names = <span class='otl'>friends.names</span>;
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display",
<span class='otl'>appInjector: [FriendsService]</span>
}),
new angular.ViewAnnotation({
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
directives: [angular.NgFor]
})
];
<span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(DisplayComponent);
});
.l-main-section
h2#Conditionally-displaying-data-with-NgIf Conditionally displaying data with NgIf
p.
Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>NgIf</code>. The
<code>NgIf</code> directive adds or removes elements from the DOM based on the expression you provide.
p See it in action by adding a paragraph at the end of your template
pre.prettyprint.lang-html
code.
&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p You'll also need to add the <code>NgIf</code> directive so Angular knows to include it.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
...
directives: [NgFor, NgIf]
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
directives: [angular.NgFor, angular.NgIf]
p.
As there are currently 6 items in the list, you'll see the message congratulating you on your many friends.
Remove three items from the list, reload your browser, and see that the message no longer displays.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript
import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
...
@View({
<span class='otl'>template</span>: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *ng-for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
`,
directives: [NgFor, NgIf]
})
class DisplayComponent {
...
}
class FriendsService {
names: Array&lt;string&gt;;
constructor() {
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function DisplayComponent(friends) {
this.myName = "Alice";
this.names = friends.names;
}
DisplayComponent.annotations = [
...
new angular.ViewAnnotation({
<span class='otl'>template</span>: '
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39; +
&#39;&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
directives: [angular.NgFor, angular.NgIf]
})
];
function FriendsService () {
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
}
!= partial("../../../_includes/_ts-temp")

14
public/docs/js/latest/guide/glossary.jade Normal file
View File

@ -0,0 +1,14 @@
include ../../../../_includes/_util-fns
+includeShared('{ts}', 'intro')
+includeShared('{ts}', 'a2')
+includeShared('{ts}', 'b-c')
+includeShared('{ts}', 'd1')
+includeShared('{ts}', 'd2')
+includeShared('{ts}', 'e1')
+includeShared('{ts}', 'e2')
+includeShared('{ts}', 'f-l')
+includeShared('{ts}', 'm1')
+includeShared('{ts}', 'n-s')
+includeShared('{ts}', 't1')
+includeShared('{ts}', 't2')
+includeShared('{ts}', 'u-z')

1
public/docs/js/latest/guide/hierarchical-dependency-injection.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

20
public/docs/js/latest/guide/index.jade
View File

@ -1,10 +1,12 @@
- var number = 1;
ul.is-plain
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
include ../../../../_includes/_util-fns
if slug != '_listtype' && slug != 'index'
- var url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
- var num = number++
li
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })
+includeShared('{ts}', 'intro')
+includeShared('{ts}', 'how-to-read-1')
.alert.is-important
:marked
Most of the documentation has been written for TypeScript developers
and has not yet been translated to JavaScript.
Please bear with us. Meanwhile, we've provide links to the TypeScript chapters
where JavaScript versions are unavailable.
+includeShared('{ts}', 'how-to-read-2')
+includeShared('{ts}', 'the-rest')

1
public/docs/js/latest/guide/lifecycle-hooks.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/pipes.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/router.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/server-communication.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

196
public/docs/js/latest/guide/setup.jade
View File

@ -1,196 +0,0 @@
.l-main-section
h2#section-install-or-plunker Install Angular
p There are four steps to create any Angular app:
ol
li Create an entry point HTML file where users will start
li Load the Angular library at the top of the file
li Make a root component for your application
li Bootstrap Angular
p.
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
p.
If you don't already have an HTTP server,
you can install one using <code>npm install -g http-server</code>.
(If that results in an access error, then you might need to use
<code><b>sudo</b> npm ...</code>.)
p For example:
code-example.
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html
.callout.is-helpful
header Typescript vs ES5
p.
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
<code>.ts</code>.
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
you'll build your first component.
p.
In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your
application.
p.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
code-tabs
code-pane(language="html" name="TypeScript" format="linenums").
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;
System.import(&#39;main&#39;);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
code-pane(language="html" name="ES5" format="linenums").
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;
&lt;/html&gt;
.callout.is-helpful
header Don't use code.angularjs.org in a live app
p.
This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
.l-main-section
h2#section-set-up-the-starting-component Set up the starting component
p.
In <code>main.ts</code>, create a class called <code>AppComponent</code>, configure it to bind to the
<code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
it all off like this:
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
class AppComponent {
}
bootstrap(AppComponent);
code-pane(language="javascript" name="ES5" format="linenums").
function AppComponent() {}
AppComponent.annotations = [
new angular.ComponentAnnotation({
selector: 'my-app'
}),
new angular.ViewAnnotation({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
];
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
.callout.is-helpful
header Annotations vs Decorators
p.
If you are transpiling using a tool that translates the <code>@</code> symbols to
annotations (for example Traceur), you will need to import the annotation versions of
Component and View. That can be easily achieved using
<code>import {ComponentAnnotation as Component, ViewAnnotation as View}</code>.
.l-main-section
h2#section-run-it Run it!
p.
Open <code>index.html</code> through your web server and you should see:
figure.image-display
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
.l-main-section
h2#section-explanations Explanations
p This basic Angular app contains the structure for any app you'll build.
.l-sub-section
h3 It's all a tree
p.
You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
level container for the rest of your application. You've named this one <code>AppComponent</code>, but there's
nothing special about the name and you can use whatever makes sense to you.
p.
The root component's job is to give a location in the <code>index.html</code> file where your application will
render through its element, in this case <code>&lt;my-app&gt;</code>. There is also nothing special about this
element name; you can pick it as you like.
p.
The root component loads the initial template for the application that will load other components to perform
whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
these in the following pages.
.l-sub-section
h3 @Component and @View annotations
p.
A component annotation describes details about the component. An annotation can be identified by its at-sign (<code>@</code>).
p.
The <code>@Component</code> annotation defines the HTML tag for the component by specifying the component's CSS selector.
p.
The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
.l-sub-section
h3 import vs. window.angular
p.
The main difference between the ES5 and TypeScript versions is the loading of modules.
strong TypeScript
p.
TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.
strong ES5
p.
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums" ).
import {Component, View, bootstrap} from 'angular2/angular2';
...
// bootstrap is available for use because it was imported from angular core
bootstrap(AppComponent);
code-pane(language="javascript" name="ES5" format="linenums").
// window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});

1
public/docs/js/latest/guide/structural-directives.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/template-syntax.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/typescript-configuration.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/guide/upgrade.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

186
public/docs/js/latest/guide/user-input.jade
View File

@ -1,185 +1 @@
.l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax
p.
You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
p.
For a particular control like an input you can have it call methods on your controller on keyup event like so:
code-example(language="html").
&lt;input (keyup)="myControllerMethod()"&gt;
h3#local-variables Local variables
p.
As in previous examples, you can make element references available to other parts of the template as a local
variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example:
code-example(language="html").
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable).
The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
<code>&lt;p&gt;</code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
event. And the <code>{{myname.value}}</code> binds the text node of the <code>&lt;p&gt;</code> element to the
input's value property.
p Let's do something a little more complex where users enter items and add them to a list like this:
figure.image-display
img(src='/resources/images/examples/user-input-example1.png' alt="Example of Todo App")
.l-ain-section
h2#section-create-an-array-property Create an array property
p.
With the default bootstrapping in place, create a controller class that will manage interactions with the
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
on the array when called.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript
class TodoList {
todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
.callout.is-helpful
header Production Best Practice
p.
As with the previous example, in a production application you will separate your model out into another class
and inject it into <code>TodoList</code>. We've omitted it here for brevity.
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
Using the <code>*ng-for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
its text to the value.
code-example(language="html" format="linenums").
&lt;ul&gt;
&lt;li *ng-for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
.l-main-section
h2#section-add-todos-to-the-list Add todos to the list via button click
p.
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
code-example(language="html" format="linenums").
&lt;input #todotext&gt;
p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with
<code>todotext.value.</code>
code-example(language="html" format="linenums").
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
code-example(language="javascript" format="linenums").
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
.l-main-section
h2#section-final-code Final Code
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
@Component({
selector: 'todo-list'
})
@View({
template: `
&lt;ul&gt;
&lt;li *ng-for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [NgFor]
})
class TodoList {
todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo.value);
}
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo.value);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.ComponentAnnotation({
selector: "todo-list"
}),
new angular.ViewAnnotation({
template:
'&lt;ul&gt;' +
'&lt;li *ng-for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.NgFor]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/styleguide.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../_includes/styleguide/_styleguide")

28
public/docs/js/latest/tutorial/_data.json Normal file
View File

@ -0,0 +1,28 @@
{
"_listtype": "ordered",
"index": {
"title": "Tutorial: Tour of Heroes",
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript."
},
"toh-pt1": {
"title": "The Hero Editor",
"intro": "We build a simple hero editor"
},
"toh-pt2": {
"title": "Master/Detail",
"intro": "We build a master/detail page with a list of heroes"
},
"toh-pt3": {
"title": "Multiple Components",
"intro": "We refactor the master/detail view into separate components"
},
"toh-pt4": {
"title": "Services",
"intro": "We create a reusable service to manage our hero data calls"
},
"toh-pt5": {
"title": "Routing",
"intro": "We add the Angular Component Router and learn to navigate among the views"
}
}

1
public/docs/js/latest/tutorial/index.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/tutorial/toh-pt1.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/tutorial/toh-pt2.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/tutorial/toh-pt3.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/tutorial/toh-pt4.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

1
public/docs/js/latest/tutorial/toh-pt5.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../../_includes/_ts-temp")

10
public/docs/styleguide.jade
View File

@ -1,10 +0,0 @@
.grid-fluid
.c10
!= partial("/_includes/styleguide/_layouts")
!= partial("/_includes/styleguide/_code-examples")
!= partial("/_includes/styleguide/_alerts")
!= partial("/_includes/styleguide/_callouts")
!= partial("/_includes/styleguide/_tables")
!= partial("/_includes/styleguide/_aside")
//!= partial("/_includes/styleguide/_jump-nav")

9
public/docs/ts/latest/cookbook/_data.json
View File

@ -2,14 +2,17 @@
"_listtype": "alpha",
"index": {
"title": "Cookbook"
"title": "Cookbook",
"description": "A collection of recipes for common Angular application scenarios"
},
"a1-a2-quick-reference": {
"title": "Angular 1 to 2 Quick Ref"
"title": "Angular 1 to 2 Quick Ref",
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
},
"component-communication": {
"title": "Component Communication"
"title": "Component Interaction",
"description": "Share information between different directives and components"
}
}

128
public/docs/ts/latest/guide/glossary.jade
View File

@ -1,3 +1,6 @@
include ../../../../_includes/_util-fns
// #docregion intro
:marked
# Angular 2 Glossary
@ -12,15 +15,20 @@
[A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
[J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
[S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
.l-main-section
// #enddocregion intro
// #docregion a1
<a id="A"></a>
// #enddocregion a1
.l-main-section
:marked
## Annotation
.l-sub-section
:marked
In practice a synonym for [Decoration](#decoration).
:marked
In practice a synonym for [Decoration](#decorator).
// #enddocregion a-1
// #docregion a-2
:marked
## Attribute Directive
.l-sub-section
:marked
@ -30,9 +38,14 @@
The `ngClass` directive for adding and removing CSS class names is a good example of
an Attribute Directive.
// #enddocregion a-2
.l-main-section
// #docregion b-c
- var lang = current.path[1]
- var decorator = lang = 'dart' ? 'annotation' : '[decorator](#decorator)'
- var atSym = lang == 'js' ? '' : '@'
<a id="B"></a>
.l-main-section
:marked
## Barrel
.l-sub-section
@ -90,8 +103,8 @@
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
.l-main-section
<a id="C"></a>
.l-main-section
:marked
## Component
.l-sub-section
@ -101,18 +114,20 @@
and user-interaction logic.
The Component is one of the most important building blocks in the Angular system.
It is, in fact, an Angular [Directive](directive) with a companion [Template](#template).
It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
The developer applies the `@Component` [decorator](decorator) to
The developer applies the `#{atSym}Component` #{decorator} to
the component class, thereby attaching to the class the essential component metadata
that Angular needs to create a component instance and render it with its template
as a view.
Those familiar with "MVC" and "MVVM" patterns will recognize
the Component in the role of "Controller" or "View Model".
// #enddocregion b-c
.l-main-section
// #docregion d1
<a id="D"></a>
.l-main-section
:marked
## Data Binding
.l-sub-section
@ -133,19 +148,20 @@
operations and supporting declaration syntax.
The many forms of binding include:
* [Interpolation](./template-syntax.html#interpolation)
* [Property Binding](./template-syntax.html#property-binding)
* [Event Binding](./template-syntax.html#event-binding)
* [Attribute Binding](./template-syntax.html#attribute-binding)
* [Class Binding](./template-syntax.html#class-binding)
* [Style Binding](./template-syntax.html#style-binding)
* [Two-way data binding with ngModel](./template-syntax.html#ng-model)
* [Interpolation](template-syntax.html#interpolation)
* [Property Binding](template-syntax.html#property-binding)
* [Event Binding](template-syntax.html#event-binding)
* [Attribute Binding](template-syntax.html#attribute-binding)
* [Class Binding](template-syntax.html#class-binding)
* [Style Binding](template-syntax.html#style-binding)
* [Two-way data binding with ngModel](template-syntax.html#ng-model)
Learn more about data binding in the
[Template Syntax](./template-syntax.html#data-binding) chapter.
[Template Syntax](template-syntax.html#data-binding) chapter.
// #enddocregion d1
<a id="decorator"></a> <a id="decoration"></a>
:marked
<a id="decorator"></a> <a id="decoration"></a>
## Decorator | Decoration
.l-sub-section
:marked
@ -178,7 +194,8 @@
Always include the parentheses `()` when applying a decorator.
A decorator is a **function** that must be called when applied.
:marked
// #docregion d2
:marked
## Dependency Injection
.l-sub-section
:marked
@ -200,7 +217,7 @@
and returns a fully prepared instance of "A".
Angular provides and relies upon its own sophisticated
[Dependency Injection](./dependency-injection.html) system
[Dependency Injection](dependency-injection.html) system
to assemble and run applications by "injecting" application parts
into other application parts where and when needed.
@ -231,8 +248,8 @@
is when we [bootstrap](#bootstrap) the application.
There are other opportunities to register as well.
Learn more in the [Dependency Injection](./dependency-injection.html) chapter.
:marked
Learn more in the [Dependency Injection](dependency-injection.html) chapter.
:marked
## Directive
.l-sub-section
:marked
@ -257,16 +274,20 @@
They are the building blocks of an Angular application and the
developer can expect to write a lot of them.
1. [Attribute Directives](attribute-directive) that can listen to and modify the behavior of
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
other HTML elements, attributes, properties, and components. They are usually represented
as HTML attributes, hence the name.
1. [Structural Directives](#structural-directive), a directive responsible for
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
elements and their children.
// #enddocregion d2
.l-main-section
// #docregion e1
<a id="E"></a>
// #enddocregion e1
// #docregion e2
.l-main-section
:marked
## ECMAScript
.l-sub-section
@ -280,7 +301,7 @@
compatible with it such as [TypeScript](#typesScript).
Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
Applications written in ES2015 or one of its dialects must be "[transpiled](transpile)"
Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
to ES5 JavaScript.
Angular 2 developers may choose to write in ES5 directly.
@ -307,12 +328,14 @@
:marked
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
See [ECMAScript](#ecmascript).
// #enddocregion e2
.l-main-section
// #docregion f-l
<a id="F"></a>
<a id="G"></a>
<a id="H"></a>
<a id="I"></a>
.l-main-section
:marked
## Injector
.l-sub-section
@ -326,11 +349,11 @@
.l-sub-section
:marked
A directive property that can be the ***target*** of a
[Property Binding](./template-syntax.html#property-binding).
[Property Binding](template-syntax.html#property-binding).
Data values flow *into* this property from the data source identified
in the template expression to the right of the equal sign.
See the [Template Syntax](./template-syntax.html#inputs-outputs) chapter.
See the [Template Syntax](template-syntax.html#inputs-outputs) chapter.
:marked
## Interpolation
@ -347,12 +370,13 @@
:marked
Learn more about interpolation in the
[Template Syntax](./template-syntax.html#interpolation) chapter.
[Template Syntax](template-syntax.html#interpolation) chapter.
.l-main-section
<a id="J"></a>
<a id="K"></a>
<a id="L"></a>
.l-main-section
:marked
## Lifecycle Hooks
.l-sub-section
@ -377,8 +401,13 @@
* `ngOnDestroy` - just before the directive is destroyed.
Learn more in the [Lifecycle Hooks](lifecycle-hooks.html) chapter.
.l-main-section
// #enddocregion f-l
// #docregion m1
<a id="M"></a>
// #enddocregion m1
// #docregion m2
.l-main-section
:marked
## Module
.l-sub-section
@ -413,19 +442,25 @@
The `angular2/core` barrel is a good example.
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
// #enddocregion m2
// #docregion n-s
- var lang = current.path[1]
- var decorator = lang = 'dart' ? 'annotation' : '[decorator](#decorator)'
- var atSym = lang == 'js' ? '' : '@'
<a id="N"></a>
<a id="O"></a>
.l-main-section
:marked
## Output
.l-sub-section
:marked
A directive property that can be the ***target*** of an
[Event Binding](./template-syntax.html#property-binding).
[Event Binding](template-syntax.html#property-binding).
Events stream *out* of this property to the receiver identified
in the template expression to the right of the equal sign.
See the [Template Syntax](./template-syntax.html#inputs-outputs) chapter.
See the [Template Syntax](template-syntax.html#inputs-outputs) chapter.
.l-main-section
<a id="P"></a>
@ -434,7 +469,7 @@
.l-sub-section
:marked
An Angular pipe is a function that transforms input values to output values for
display in a [view](#view). We use the `@Pipe` [decorator](decorator)
display in a [view](#view). We use the `#{atSym}Pipe` #{decorator}
to associate the pipe function with a name. We then can use that
name in our HTML to declaratively transform values on screen.
@ -444,7 +479,7 @@
code-example(language="html" escape="html").
<label>Price: </label>{{product.price | currency}}
:marked
Learn more in the chapter on [pipes](./pipes.html) .
Learn more in the chapter on [pipes](pipes.html) .
:marked
## Provider
@ -471,7 +506,7 @@
and taking other similar actions that cause the application to
replace one view with another.
The Angular [Component Router](./router.html) is a richly featured mechanism for configuring
The Angular [Component Router](router.html) is a richly featured mechanism for configuring
and managing the entire view navigation process including the creation and destruction
of views.
:marked
@ -481,14 +516,14 @@
A [Component](#component) with an attached router.
In most cases, the component became attached to a [router](#router) by means
of a `@RouterConfig` decorator that defined routes to views controlled by this component.
of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
The component's template has a `RouterOutlet` element where it can display views produced by the router.
It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
.l-main-section
<a id="S"></a>
.l-main-section
:marked
## Structural Directive
.l-sub-section
@ -499,9 +534,11 @@
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
good examples in this category.
// #enddocregion n-s
.l-main-section
// #docregion t1
<a id="T"></a>
.l-main-section
:marked
## Template
.l-sub-section
@ -510,7 +547,7 @@
the support and continuing guidance of an Angular [Directive](#directive),
most notably a [Component](#component).
We write templates in a special [Template Syntax](./template-syntax.html).
We write templates in a special [Template Syntax](template-syntax.html).
:marked
## Template Expression
@ -518,8 +555,10 @@
:marked
An expression in a JavaScript-like syntax that Angular evaluates within
a [data binding](#data-binding). Learn how to write template expressions
in the [Template Syntax](./template-syntax.html#template-expressions) chapter.
in the [Template Syntax](template-syntax.html#template-expressions) chapter.
// #enddocregion t1
// #docregion t2
:marked
## Transpile
.l-sub-section
@ -546,10 +585,12 @@
Angular 2 itself is written in TypeScript.
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
// #enddocregion t2
.l-main-section
// #docregion u-z
<a id="U"></a>
<a id="V"></a>
.l-main-section
:marked
## View
.l-sub-section
@ -564,7 +605,7 @@
Views often contain other views and any view might be loaded and unloaded
dynamically as the user navigates through the application, typically
under the control of a [router](#rounter).
under the control of a [router](#router).
.l-main-section
<a id="W"></a>
@ -593,3 +634,4 @@
Learn more about zones in this
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
// #enddocregion u-z

20
public/docs/ts/latest/guide/index.jade
View File

@ -1,22 +1,28 @@
include ../../../../_includes/_util-fns
// #docregion intro
- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
figure
img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
:marked
The Developer Guide is a practical guide to Angular for experienced programmers who
are building client applications in HTML and JavaScript.
are building client applications in HTML and #{langName}.
We are on a journey together to understand how Angular works and, more importantly,
how to make it work for us. This chapter begins the journey.
<br clear="all">
// #enddocregion intro
// #docregion how-to-read-1
<a id="how-to-read"></a>
:marked
# How to Read this Guide
The guide consists of chapters devoted to the challenges of building an application and
meeting those challenges with Angular.
// #enddocregion how-to-read-1
// #docregion how-to-read-2
:marked
## Learning Path
We don't have to read the guide straight through. Most chapters stand on their own.
@ -46,7 +52,9 @@ figure
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
With this foundation, we can read and understand any chapter in the guide.
// #enddocregion how-to-read-2
// #docregion the-rest
:marked
## Code Samples
Every chapter includes code snippets that we can reuse in our own applications.
@ -65,6 +73,8 @@ figure
## Other Resources
The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
The [Glossary](glossary.html) defines terms that Angular developers should know.
The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries.
@ -76,4 +86,4 @@ figure
[angular.io](https://github.com/angular/angular.io) github repository.
Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
// #enddocregion the-rest

1
public/docs/ts/latest/styleguide.jade Normal file
View File

@ -0,0 +1 @@
!= partial("../../_includes/styleguide/_styleguide")