diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 3f5a66386c..7925ad6d48 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -6,7 +6,7 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5") ul(ng-class="showMainNav ? 'is-visible' : ''") li.l-left Features - li.l-left Docs + li.l-left Docs li.l-left About li.l-left Contribute li.l-right Install \ No newline at end of file diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index 05048ac264..cbdd28acde 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/latest/guide/_data.json @@ -17,10 +17,5 @@ "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." - }, - - "making-components": { - "title": "Making Components", - "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template." } } diff --git a/public/docs/dart/latest/guide/making-components.jade b/public/docs/dart/latest/guide/making-components.jade deleted file mode 100644 index 45cb6c4b0b..0000000000 --- a/public/docs/dart/latest/guide/making-components.jade +++ /dev/null @@ -1,43 +0,0 @@ -.l-main-section - p. - As mentioned earlier, you build Angular applications as a tree of nested components. - You've seen how to create a top-level component. - You add child components to a parent component by using them in - the parent component's template, - and by specifying the child component classes in the parent's list of directives. - p. - Given a bootstrapping template with a <parent> tag in the body, - you can create a parent - component that uses a <child> component like so: - - code-example(language="dart" format="linenums"). - library parent_child.parent; - - import 'package:angular2/angular2.dart'; - import 'package:parent_child/child.dart'; - - @Component(selector: 'parent') - @View(template: ''' - <h1>{{ message }}</h1> - <child></child> - ''', directives: const [ChildComponent]) - class ParentComponent { - String message = "I'm the parent"; - } - - p You then just need to write the ChildComponent class to make it work: - - code-example(language="dart" format="linenums"). - library parent_child.child; - - import 'package:angular2/angular2.dart'; - - @Component(selector: 'child') - @View(template: ''' - <p> {{ message }} </p> - ''') - class ChildComponent { - String message = "I'm the child"; - } - -//- [TODO: Motivate communication between components with iterator example that passes index to the child] diff --git a/public/docs/js/latest/api/index.jade b/public/docs/js/latest/api/index.jade index d63b1ce5eb..6a3801f3a1 100644 --- a/public/docs/js/latest/api/index.jade +++ b/public/docs/js/latest/api/index.jade @@ -4,7 +4,8 @@ p. The Angular 2.0 API is currently in active development and not production ready. This page showcases a preview of proposed methods to help further the discussion - in the development community. If you're building a production app today, please + in the development community. Please also note that examples currently use TypeScript + rather than ES5 JavaScript. If you're building a production app today, please use Angular 1.X. ul.is-plain diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 9daf830a62..0bcaee890c 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -2,7 +2,7 @@ "_listtype": "ordered", "index": { - "title": "Step By Step Guide" + "title": "Developer Guide" }, "displaying-data": { @@ -13,10 +13,5 @@ "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." - }, - - "making-components": { - "title": "Making Components", - "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template." } } diff --git a/public/docs/js/latest/guide/making-components.jade b/public/docs/js/latest/guide/making-components.jade deleted file mode 100644 index 402d4eb3cf..0000000000 --- a/public/docs/js/latest/guide/making-components.jade +++ /dev/null @@ -1,87 +0,0 @@ -.l-main-section - - h2#section-its-all-a-tree It's all a tree - - p. - As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create - a top-level component. You add child components to a parent component by using them in the parent component's - template. - p. - Given a bootstrapping template with a <parent> tag in the body, you can create a parent - component that uses a <child> component like so: - - code-tabs - code-pane(language="javascript" name="TypeScript" format="linenums"). - //TypeScript - @Component({ - selector: 'parent' - }) - @View({ - template: ` - <h1>{{ message }}</h1> - <child></child> - `, - directives: [ChildComponent] - }) - class ParentComponent { - message: string; - - constructor() { - this.message = "I'm the parent"; - } - } - code-pane(language="javascript" name="ES5" format="linenums"). - //ES5 - function ParentComponent() { - this.message = "I'm the parent"; - } - ParentComponent.annotations = [ - new angular.ComponentAnnotation({ - selector: "parent" - }), - new angular.ViewAnnotation({ - template: - '<h1>{{ message }}</h1>' + - '<child></child>', - directives: [ChildComponent] - }) - ]; - - - p You then just need to write the ChildComponent class to make it work: - - code-tabs - code-pane(language="javascript" name="TypeScript" format="linenums"). - //TypeScript - @Component({ - selector: 'child' - }) - @View({ - template: ` - <p> {{ message }} </p> - ` - }) - class ChildComponent { - message: string; - constructor() { - this.message = "I'm the child"; - } - } - code-pane(language="javascript" name="ES5" format="linenums"). - //ES5 - function ChildComponent() { - this.message = "I'm the child"; - } - ChildComponent.annotations = [ - new angular.ComponentAnnotation({ - selector: "child" - }), - new angular.ViewAnnotation({ - template: '<p> {{ message }} </p>' - }) - ]; - - - p. - Notice that in addition to using the <child> element in the parent template, you also need to - add ChildComponent in ParentComponent's list of directives. diff --git a/public/docs/js/latest/guide/reusing-components.jade b/public/docs/js/latest/guide/reusing-components.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/js/latest/guide/talking-to-components.jade b/public/docs/js/latest/guide/talking-to-components.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/js/latest/guide/transforming-data.jade b/public/docs/js/latest/guide/transforming-data.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/js/latest/guide/using-forms.jade b/public/docs/js/latest/guide/using-forms.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 82f6a689f3..5c81afec6a 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -11,9 +11,21 @@ "title": "5 Min Quickstart" }, + "tutorial": { + "icon": "list", + "title": "Tutorial", + "banner": "Angular 2 is currently in Developer Preview. For Angular 1.X Resources please visit Angularjs.org." + }, + "guide": { "icon": "list", - "title": "Developer Guide", + "title": "Developer Guides", + "banner": "Angular 2 is currently in Developer Preview. For Angular 1.X Resources please visit Angularjs.org." + }, + + "testing": { + "icon": "list", + "title": "Testing Guides", "banner": "Angular 2 is currently in Developer Preview. For Angular 1.X Resources please visit Angularjs.org." }, diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 24244bf96e..39b399ba82 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -2,7 +2,7 @@ "_listtype": "ordered", "index": { - "title": "Step By Step Guide" + "title": "Developer Guides" }, "displaying-data": { @@ -13,30 +13,5 @@ "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." - }, - - "making-components": { - "title": "Making Components", - "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template." - }, - - "unit-testing-01": { - "title": "Unit Testing Overview" - }, - - "jasmine-testing-101": { - "title": "Jasmine Testing 101" - }, - - "application-under-test": { - "title": "The Application Under Test" - }, - - "first-app-tests": { - "title": "First App Tests" - }, - - "testing-an-angular-pipe": { - "title": "Testing an Angular Pipe" } } \ No newline at end of file diff --git a/public/docs/ts/latest/guide/making-components.jade b/public/docs/ts/latest/guide/making-components.jade deleted file mode 100644 index 402d4eb3cf..0000000000 --- a/public/docs/ts/latest/guide/making-components.jade +++ /dev/null @@ -1,87 +0,0 @@ -.l-main-section - - h2#section-its-all-a-tree It's all a tree - - p. - As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create - a top-level component. You add child components to a parent component by using them in the parent component's - template. - p. - Given a bootstrapping template with a <parent> tag in the body, you can create a parent - component that uses a <child> component like so: - - code-tabs - code-pane(language="javascript" name="TypeScript" format="linenums"). - //TypeScript - @Component({ - selector: 'parent' - }) - @View({ - template: ` - <h1>{{ message }}</h1> - <child></child> - `, - directives: [ChildComponent] - }) - class ParentComponent { - message: string; - - constructor() { - this.message = "I'm the parent"; - } - } - code-pane(language="javascript" name="ES5" format="linenums"). - //ES5 - function ParentComponent() { - this.message = "I'm the parent"; - } - ParentComponent.annotations = [ - new angular.ComponentAnnotation({ - selector: "parent" - }), - new angular.ViewAnnotation({ - template: - '<h1>{{ message }}</h1>' + - '<child></child>', - directives: [ChildComponent] - }) - ]; - - - p You then just need to write the ChildComponent class to make it work: - - code-tabs - code-pane(language="javascript" name="TypeScript" format="linenums"). - //TypeScript - @Component({ - selector: 'child' - }) - @View({ - template: ` - <p> {{ message }} </p> - ` - }) - class ChildComponent { - message: string; - constructor() { - this.message = "I'm the child"; - } - } - code-pane(language="javascript" name="ES5" format="linenums"). - //ES5 - function ChildComponent() { - this.message = "I'm the child"; - } - ChildComponent.annotations = [ - new angular.ComponentAnnotation({ - selector: "child" - }), - new angular.ViewAnnotation({ - template: '<p> {{ message }} </p>' - }) - ]; - - - p. - Notice that in addition to using the <child> element in the parent template, you also need to - add ChildComponent in ParentComponent's list of directives. diff --git a/public/docs/ts/latest/guide/reusing-components.jade b/public/docs/ts/latest/guide/reusing-components.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/ts/latest/guide/talking-to-components.jade b/public/docs/ts/latest/guide/talking-to-components.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/ts/latest/testing/_data.json b/public/docs/ts/latest/testing/_data.json new file mode 100644 index 0000000000..303b984b7a --- /dev/null +++ b/public/docs/ts/latest/testing/_data.json @@ -0,0 +1,27 @@ +{ + "_listtype": "ordered", + + "index": { + "title": "Testing Guides" + }, + + "unit-testing-01": { + "title": "Unit Testing Overview" + }, + + "jasmine-testing-101": { + "title": "Jasmine Testing 101" + }, + + "application-under-test": { + "title": "The Application Under Test" + }, + + "first-app-tests": { + "title": "First App Tests" + }, + + "testing-an-angular-pipe": { + "title": "Testing an Angular Pipe" + } +} \ No newline at end of file diff --git a/public/docs/ts/latest/guide/application-under-test.jade b/public/docs/ts/latest/testing/application-under-test.jade similarity index 100% rename from public/docs/ts/latest/guide/application-under-test.jade rename to public/docs/ts/latest/testing/application-under-test.jade diff --git a/public/docs/ts/latest/guide/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade similarity index 99% rename from public/docs/ts/latest/guide/first-app-tests.jade rename to public/docs/ts/latest/testing/first-app-tests.jade index 5f17e560f1..6787245607 100644 --- a/public/docs/ts/latest/guide/first-app-tests.jade +++ b/public/docs/ts/latest/testing/first-app-tests.jade @@ -14,7 +14,7 @@ include ../../../../_includes/_util-fns The Unit Testing chapters build upon each other. We recommend reading them in order. We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools we introduced in the [QuickStart](../quickstart.html) and - the [Tour of Heroes](./toh-pt1.html) tutorial + the [Tour of Heroes](../tutorial/) tutorial such as npm, gulp, and live-server. :markdown ## Create the test-runner HTML diff --git a/public/docs/ts/latest/testing/index.jade b/public/docs/ts/latest/testing/index.jade new file mode 100644 index 0000000000..5b8ffc591d --- /dev/null +++ b/public/docs/ts/latest/testing/index.jade @@ -0,0 +1,10 @@ +- var number = 1; +ul.is-plain + for page, slug in public.docs[current.path[1]][current.path[2]].testing._data + + 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 }) diff --git a/public/docs/ts/latest/guide/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade similarity index 100% rename from public/docs/ts/latest/guide/jasmine-testing-101.jade rename to public/docs/ts/latest/testing/jasmine-testing-101.jade diff --git a/public/docs/ts/latest/guide/testing-an-angular-pipe.jade b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade similarity index 98% rename from public/docs/ts/latest/guide/testing-an-angular-pipe.jade rename to public/docs/ts/latest/testing/testing-an-angular-pipe.jade index 8fab846449..22bc344f40 100644 --- a/public/docs/ts/latest/guide/testing-an-angular-pipe.jade +++ b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade @@ -41,7 +41,7 @@ code-example(format="linenums"). The Unit Testing chapters build upon each other. We recommend reading them in order. We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools we introduced in the [QuickStart](../quickstart.html) and - the [Tour of Heroes](./toh-pt1.html) tutorial + the [Tour of Heroes](../tutorial/) tutorial such as npm, gulp, and live-server. :markdown diff --git a/public/docs/ts/latest/guide/unit-testing-01.jade b/public/docs/ts/latest/testing/unit-testing-01.jade similarity index 98% rename from public/docs/ts/latest/guide/unit-testing-01.jade rename to public/docs/ts/latest/testing/unit-testing-01.jade index eab03a59d1..e93b3f8570 100644 --- a/public/docs/ts/latest/guide/unit-testing-01.jade +++ b/public/docs/ts/latest/testing/unit-testing-01.jade @@ -117,7 +117,7 @@ figure.image-display The Unit Testing chapters build upon each other. We recommend reading them in order. We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools we introduced in the [QuickStart](../quickstart.html) and - the [Tour of Heroes](./toh-pt1.html) tutorial + the [Tour of Heroes](../tutorial/) tutorial such as npm, gulp, and live-server. :markdown diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json new file mode 100644 index 0000000000..80a37282f7 --- /dev/null +++ b/public/docs/ts/latest/tutorial/_data.json @@ -0,0 +1,8 @@ +{ + "_listtype": "ordered", + + "index": { + "title": "Tutorial", + "intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript." + } +} \ No newline at end of file diff --git a/public/docs/ts/latest/guide/toh-pt1.jade b/public/docs/ts/latest/tutorial/index.jade similarity index 99% rename from public/docs/ts/latest/guide/toh-pt1.jade rename to public/docs/ts/latest/tutorial/index.jade index b84c28e07f..24ae74ed2f 100644 --- a/public/docs/ts/latest/guide/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/index.jade @@ -3,9 +3,8 @@ include ../../../../_includes/_util-fns .l-main-section :markdown - # Tour of Heroes - Part 1 + # Tour of Heroes - The Tour of Heroes tutorial takes us through the steps of creating an Angular application. Our grand vision is to build an app to help a staffing agency manage its stable of heroes. Even heroes need to find work.