.js rather than
- .ts.
-
-.l-main-section
- h2#section-create-an-entry-point Create an entry point
-
- p Open your favorite editor and create a show-properties.html file with the content:
-
- code-example(language="html" escape="html").
- <display> 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 {{ }}.
-
- p To see this working, create another file, show-properties.ts, 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: `
- <p>My name: {{ myName }}</p>
- `
- })
- 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:
- '<p>My name: {{ myName }}</p>'
- })
- ];
-
-
- 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").
- My name: {{ myName }}
- - p. - Angular will automatically pull the value ofmyName 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 DisplayComponent 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 DisplayComponent 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 DisplayComponent that has
- just one property, myName.
-
- .callout.is-helpful
- header Note
- p.
- While you've used template: to specify an inline view, for larger templates you'd
- want to move them to a separate file and load them with templateUrl: 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;
- names: Array<string>;
-
- constructor() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- }
-
- code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
- //ES5
- function DisplayComponent() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- p.
- You can then use this array in your template with the NgFor 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: `
- <p>My name: {{ myName }}</p>
- <p>Friends:</p>
- <ul>
- <li *ng-for="#name of names">
- {{ name }}
- </li>
- </ul>
- `,
- code-pane(language="javascript" name="ES5" format="linenums").
- //ES5
- template:
- '<p>My name: {{ myName }}</p>' +
- '<p>Friends:</p>' +
- '<ul>' +
- '<li *ng-for="#name of names">' +
- '{{ name }}' +
- '</li>' +
- '</ul>',
-
- p.
- To make this work, you'll also need to add the NgFor 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 <li>. 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
- <li *ng-for="#name of names">
- {{ name }}
- </li>
- p The way to read this is:
- ul
- li.
- *ng-for : create a DOM element for each item in an
- iterable
- like an array
- li #name : refer to individual values of the iterable as 'name'
- li of names : 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 FriendsService class to provide the model with the list of friends.
-
- code-tabs
- code-pane(language="javascript" name="TypeScript" format="linenums").
- class FriendsService {
- names: Array<string>;
- 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({
- ...
- appInjector: [FriendsService]
- })
- class DisplayComponent {
- myName: string;
- names: Array<string>;
- constructor(friendsService: FriendsService) {
- this.myName = 'Alice';
- this.names = friendsService.names;
- }
- }
-
-
- code-pane(language="javascript" name="ES5" format="linenums").
- //ES5
- function DisplayComponent(friends) {
- this.myName = "Alice";
- this.names = friends.names;
- }
- DisplayComponent.annotations = [
- new angular.ComponentAnnotation({
- selector: "display",
- appInjector: [FriendsService]
- }),
- new angular.ViewAnnotation({
- template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>',
- directives: [angular.NgFor]
- })
- ];
- DisplayComponent.parameters = [[FriendsService]];
- 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 NgIf. The
- NgIf 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.
- <p *ng-if="names.length > 3">You have many friends!</p>
- p You'll also need to add the NgIf 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({
- template: `
- <p>My name: {{ myName }}</p>
- <p>Friends:</p>
- <ul>
- <li *ng-for="#name of names">
- {{ name }}
- </li>
- </ul>
- <p *ng-if="names.length > 3">You have many friends!</p>
- `,
- directives: [NgFor, NgIf]
- })
- class DisplayComponent {
- ...
- }
-
- class FriendsService {
- names: Array<string>;
- constructor() {
- this.names = ["Aarav", "Martín", "Shannon"];
- }
- }
- code-pane(language="javascript" name="ES5" format="linenums").
- //ES5
- function DisplayComponent(friends) {
- this.myName = "Alice";
- this.names = friends.names;
- }
- DisplayComponent.annotations = [
- ...
- new angular.ViewAnnotation({
- template: '
- '<p>My name: {{ myName }}</p>' +
- '<p>Friends:</p>' +
- '<ul>' +
- '<li *ng-for="#name of names">' +
- '{{ name }}' +
- '</li>' +
- '</ul>' +
- '<p *ng-if="names.length > 3">You have many friends!</p>'',
- directives: [angular.NgFor, angular.NgIf]
- })
- ];
-
- function FriendsService () {
- this.names = ["Aarav", "Martín", "Shannon"];
- }
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/js/latest/guide/glossary.jade b/public/docs/js/latest/guide/glossary.jade
new file mode 100644
index 0000000000..7f952a480b
--- /dev/null
+++ b/public/docs/js/latest/guide/glossary.jade
@@ -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')
\ No newline at end of file
diff --git a/public/docs/js/latest/guide/hierarchical-dependency-injection.jade b/public/docs/js/latest/guide/hierarchical-dependency-injection.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/hierarchical-dependency-injection.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/index.jade b/public/docs/js/latest/guide/index.jade
index cbcf5addb2..e5f6e3deac 100644
--- a/public/docs/js/latest/guide/index.jade
+++ b/public/docs/js/latest/guide/index.jade
@@ -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')
diff --git a/public/docs/js/latest/guide/lifecycle-hooks.jade b/public/docs/js/latest/guide/lifecycle-hooks.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/lifecycle-hooks.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/pipes.jade b/public/docs/js/latest/guide/pipes.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/pipes.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/router.jade b/public/docs/js/latest/guide/router.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/router.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/server-communication.jade b/public/docs/js/latest/guide/server-communication.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/server-communication.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade
deleted file mode 100644
index 65ad0c942f..0000000000
--- a/public/docs/js/latest/guide/setup.jade
+++ /dev/null
@@ -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 quickstart to get Typescript setup.
-
- p.
- If you don't already have an HTTP server,
- you can install one using npm install -g http-server.
- (If that results in an access error, then you might need to use
- sudo npm ....)
-
- 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 .js rather than
- .ts.
-
-
-.l-main-section
- h2#section-create-an-entry-point Create an entry point
- p.
- Create an index.html file and add the Angular library tags and a main.ts file where
- you'll build your first component.
-
- p.
- In the <body>, add an element called <my-app> 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").
- <!DOCTYPE html>
- <html>
- <head>
- <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
- <script src="https://jspm.io/system@0.16.js"></script>
- <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
- </head>
- <body>
- <my-app></my-app>
- <script>
- System.import('main');
- </script>
- </body>
- </html>
-
- code-pane(language="html" name="ES5" format="linenums").
- <!DOCTYPE html>
- <html>
- <head>
- <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script>
- <script src="main.js"></script>
- </head>
- <body>
- <my-app></my-app>
- </body>
- </html>
-
-.callout.is-helpful
- header Don't use code.angularjs.org in a live app
- p.
- This example serves the Angular library from code.angularjs.org. 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 main.ts, create a class called AppComponent, configure it to bind to the
- <my-app> element in index.html, and call Angular's bootstrap() 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: '<h1>My first Angular 2 App</h1>'
- })
- 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: '<h1>My first Angular 2 App</h1>'
- })
- ];
-
- 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 @ symbols to
- annotations (for example Traceur), you will need to import the annotation versions of
- Component and View. That can be easily achieved using
- import {ComponentAnnotation as Component, ViewAnnotation as View}.
-
-.l-main-section
- h2#section-run-it Run it!
-
- p.
- Open index.html 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 AppComponent, 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 index.html file where your application will
- render through its element, in this case <my-app>. 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 (@).
- p.
- The @Component annotation defines the HTML tag for the component by specifying the component's CSS selector.
- p.
- The @View 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 templateUrl 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);
- });
diff --git a/public/docs/js/latest/guide/structural-directives.jade b/public/docs/js/latest/guide/structural-directives.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/structural-directives.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/template-syntax.jade b/public/docs/js/latest/guide/template-syntax.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/template-syntax.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/typescript-configuration.jade b/public/docs/js/latest/guide/typescript-configuration.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/typescript-configuration.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/upgrade.jade b/public/docs/js/latest/guide/upgrade.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/guide/upgrade.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade
index b686e9ea9e..f8df2a84a6 100644
--- a/public/docs/js/latest/guide/user-input.jade
+++ b/public/docs/js/latest/guide/user-input.jade
@@ -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: (event). A controller function is then assigned to the event name: (event)="controllerFn()".
- 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").
- <input (keyup)="myControllerMethod()">
-
- 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 #var syntax. With this and events, we can do the old "update text as you type" example:
-
- code-example(language="html").
- <input #myname (keyup)>
- <p>{{myname.value}}</p>
-
- p.text-body(ng-non-bindable).
- The #myname creates a local variable in the template that we'll refer to below in the
- <p> element. The (keyup) tells Angular to trigger updates when it gets a keyup
- event. And the {{myname.value}} binds the text node of the <p> 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<string>;
- 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 TodoList. 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 *ng-for iterator, create an <li> for each item in the todos array and set
- its text to the value.
-
- code-example(language="html" format="linenums").
- <ul>
- <li *ng-for="#todo of todos">
- {{ todo }}
- </li>
- </ul>
-
-.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 #varname. Call it #todotext here.
-
- code-example(language="html" format="linenums").
- <input #todotext>
- p.
- Lastly, specify the target of the click event binding as your controller's addTodo() method and pass
- it the value. Since you created a reference called todotext, you can get the value with
- todotext.value.
-
- code-example(language="html" format="linenums").
- <button (click)="addTodo(todotext.value)">Add Todo</button>
-
- p And then create the doneTyping() 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: `
- <ul>
- <li *ng-for="#todo of todos">
- {{ todo }}
- </li>
- </ul>
-
- <input #todotext (keyup)="doneTyping($event)">
- <button (click)="addTodo(todotext.value)">Add Todo</button>
- `,
- directives: [NgFor]
- })
- class TodoList {
- todos: Array<string>;
-
- 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:
- '<ul>' +
- '<li *ng-for="#todo of todos">' +
- '{{ todo }}' +
- '</li>' +
- '</ul>' +
- '<input #textbox (keyup)="doneTyping($event)">' +
- '<button (click)="addTodo(textbox.value)">Add Todo</button>',
- directives: [angular.NgFor]
- })
- ];
-
- document.addEventListener("DOMContentLoaded", function() {
- angular.bootstrap(TodoList);
- });
-
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/js/latest/styleguide.jade b/public/docs/js/latest/styleguide.jade
new file mode 100644
index 0000000000..29caa74a86
--- /dev/null
+++ b/public/docs/js/latest/styleguide.jade
@@ -0,0 +1 @@
+!= partial("../../_includes/styleguide/_styleguide")
diff --git a/public/docs/js/latest/tutorial/_data.json b/public/docs/js/latest/tutorial/_data.json
new file mode 100644
index 0000000000..e70d5aaa55
--- /dev/null
+++ b/public/docs/js/latest/tutorial/_data.json
@@ -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"
+ }
+}
\ No newline at end of file
diff --git a/public/docs/js/latest/tutorial/index.jade b/public/docs/js/latest/tutorial/index.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/tutorial/index.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/tutorial/toh-pt1.jade b/public/docs/js/latest/tutorial/toh-pt1.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/tutorial/toh-pt1.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/tutorial/toh-pt2.jade b/public/docs/js/latest/tutorial/toh-pt2.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/tutorial/toh-pt2.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/tutorial/toh-pt3.jade b/public/docs/js/latest/tutorial/toh-pt3.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/tutorial/toh-pt3.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/tutorial/toh-pt4.jade b/public/docs/js/latest/tutorial/toh-pt4.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/tutorial/toh-pt4.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/tutorial/toh-pt5.jade b/public/docs/js/latest/tutorial/toh-pt5.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/tutorial/toh-pt5.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade
deleted file mode 100644
index 581e78bdb7..0000000000
--- a/public/docs/styleguide.jade
+++ /dev/null
@@ -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")
\ No newline at end of file
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index fa3783d3e6..baf52bc46c 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -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"
}
}
diff --git a/public/docs/ts/latest/guide/glossary.jade b/public/docs/ts/latest/guide/glossary.jade
index 385eea25a4..6c1a6611cb 100644
--- a/public/docs/ts/latest/guide/glossary.jade
+++ b/public/docs/ts/latest/guide/glossary.jade
@@ -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
+// #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' ? '' : '@'
+.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
+.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
+.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
+
:marked
-
## 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
+// #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
+.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
+.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
+// #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' ? '' : '@'
+.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
@@ -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").
{{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
+.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
+.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
+.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
@@ -593,3 +634,4 @@
Learn more about zones in this
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
+// #enddocregion u-z
diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade
index 0e3960214f..0f81e00900 100644
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@@ -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.