diff --git a/public/docs/_examples/homepage-hello-world/e2e-spec.js b/public/docs/_examples/homepage-hello-world/e2e-spec.js new file mode 100644 index 0000000000..4cccdfa4e3 --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/e2e-spec.js @@ -0,0 +1,29 @@ + +describe('Homepage Hello World', function () { + + beforeAll(function () { + browser.get(''); + }); + + // Does it even launch? + var expectedLabel = 'Name:'; + it('should display the label: ' + expectedLabel, function () { + expect(element(by.css('label')).getText()).toEqual(expectedLabel); + }); + + it('should display entered name', function () { + var testName = 'Bobby Joe'; + var newValue; + var nameEle = element.all(by.css('input')).get(0); + nameEle.getAttribute('value').then(function(value) { + // nameEle.sendKeys(testName); // should work but doesn't + sendKeys(nameEle, testName); // utility that does work + newValue = value + testName; // old input box value + new name + expect(nameEle.getAttribute('value')).toEqual(newValue); + }).then(function() { + // Check the interpolated message built from name + var helloEle = element.all(by.css('h1')).get(0); + expect(helloEle.getText()).toEqual('Hello ' + testName + '!'); + }); + }); +}); diff --git a/public/docs/_examples/homepage-hello-world/ts/.gitignore b/public/docs/_examples/homepage-hello-world/ts/.gitignore new file mode 100644 index 0000000000..2cb7d2a2e9 --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/.gitignore @@ -0,0 +1 @@ +**/*.js diff --git a/public/docs/_examples/homepage-hello-world/ts/src/hello_world.html b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.html similarity index 100% rename from public/docs/_examples/homepage-hello-world/ts/src/hello_world.html rename to public/docs/_examples/homepage-hello-world/ts/app/hello_world.html diff --git a/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts similarity index 89% rename from public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts rename to public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts index 9d4fd95a9b..af08051387 100644 --- a/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts +++ b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts @@ -6,7 +6,7 @@ import {Component} from 'angular2/core'; selector: 'hello-world', // Location of the template for this component - templateUrl: 'src/hello_world.html' + templateUrl: 'app/hello_world.html' }) export class HelloWorld { diff --git a/public/docs/_examples/homepage-hello-world/ts/app/main.ts b/public/docs/_examples/homepage-hello-world/ts/app/main.ts new file mode 100644 index 0000000000..edafebcde5 --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/app/main.ts @@ -0,0 +1,5 @@ +// #docregion +import {bootstrap} from 'angular2/platform/browser'; +import {HelloWorld} from './hello_world'; + +bootstrap(HelloWorld); \ No newline at end of file diff --git a/public/docs/_examples/homepage-hello-world/ts/example-config.json b/public/docs/_examples/homepage-hello-world/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/homepage-hello-world/ts/src/index.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html similarity index 66% rename from public/docs/_examples/homepage-hello-world/ts/src/index.html rename to public/docs/_examples/homepage-hello-world/ts/index.1.html index 7a3e40fa88..389ffbae1f 100644 --- a/public/docs/_examples/homepage-hello-world/ts/src/index.html +++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html @@ -3,14 +3,14 @@ - Angular 2 QuickStart + Angular 2 Hello World - + @@ -21,22 +21,15 @@ System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, - packages: {'src': {defaultExtension: 'ts'}} - }); - - - - - - + + Loading... diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html new file mode 100644 index 0000000000..1e4072c556 --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/index.html @@ -0,0 +1,35 @@ + + + + + + Angular 2 Todos + + + + + + + + + + + + + + + Loading... + + + \ No newline at end of file diff --git a/public/docs/_examples/homepage-hello-world/ts/plnkr.json b/public/docs/_examples/homepage-hello-world/ts/plnkr.json new file mode 100644 index 0000000000..78f6fd979d --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Hello World", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ] +} \ No newline at end of file diff --git a/public/docs/_examples/homepage-tabs/e2e-spec.js b/public/docs/_examples/homepage-tabs/e2e-spec.js new file mode 100644 index 0000000000..12f4f4bf53 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/e2e-spec.js @@ -0,0 +1,14 @@ + +describe('Homepage Tabs', function () { + + beforeAll(function () { + browser.get(''); + }); + + // Does it even launch? + var expectedAppTitle = 'Tabs Demo'; + it('should display app title: ' + expectedAppTitle, function () { + expect(element(by.css('h4')).getText()).toEqual(expectedAppTitle); + }); + +}); diff --git a/public/docs/_examples/homepage-tabs/ts/.gitignore b/public/docs/_examples/homepage-tabs/ts/.gitignore new file mode 100644 index 0000000000..2cb7d2a2e9 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/.gitignore @@ -0,0 +1 @@ +**/*.js diff --git a/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts similarity index 92% rename from public/docs/_examples/homepage-tabs/ts/src/di_demo.ts rename to public/docs/_examples/homepage-tabs/ts/app/di_demo.ts index 5488c02bba..96c4751771 100644 --- a/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts +++ b/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts @@ -2,6 +2,11 @@ import {Component} from 'angular2/core'; import {UiTabs, UiPane} from './ui_tabs'; +class Detail { + title: string; + text: string; +} + @Component({ selector: 'di-demo', template: ` @@ -35,7 +40,7 @@ export class DiDemo { }); } - removeDetail(detail) { + removeDetail(detail:Detail) { this.details = this.details.filter((d) => d !== detail); } } diff --git a/public/docs/_examples/homepage-tabs/ts/app/main.ts b/public/docs/_examples/homepage-tabs/ts/app/main.ts new file mode 100644 index 0000000000..35eaece68e --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/app/main.ts @@ -0,0 +1,5 @@ +// #docregion +import {bootstrap} from 'angular2/platform/browser'; +import {DiDemo} from './di_demo'; + +bootstrap(DiDemo); \ No newline at end of file diff --git a/public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts b/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts similarity index 92% rename from public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts rename to public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts index 53b08dab18..63a3e87c54 100644 --- a/public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts +++ b/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts @@ -34,11 +34,12 @@ export class UiPane {
  • - {{pane.title}} + {{pane.title}}
    • - ` + `, + styles:['a { cursor: pointer; cursor: hand; }'] }) export class UiTabs { @ContentChildren(UiPane) panes: QueryList; diff --git a/public/docs/_examples/homepage-tabs/ts/example-config.json b/public/docs/_examples/homepage-tabs/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.html b/public/docs/_examples/homepage-tabs/ts/index.1.html similarity index 63% rename from public/docs/_examples/homepage-tabs/ts/src/index.html rename to public/docs/_examples/homepage-tabs/ts/index.1.html index 43cae53996..06ca63f0e2 100644 --- a/public/docs/_examples/homepage-tabs/ts/src/index.html +++ b/public/docs/_examples/homepage-tabs/ts/index.1.html @@ -3,15 +3,15 @@ - Angular 2 QuickStart - + Angular 2 Tabs + - + @@ -22,22 +22,15 @@ System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, - packages: {'src': {defaultExtension: 'ts'}} - }); - - - - - - + + Loading... diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html new file mode 100644 index 0000000000..bff45e85b3 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/index.html @@ -0,0 +1,37 @@ + + + + + + Angular 2 Todos + + + + + + + + + + + + + + + + + Loading... + + + \ No newline at end of file diff --git a/public/docs/_examples/homepage-tabs/ts/plnkr.json b/public/docs/_examples/homepage-tabs/ts/plnkr.json new file mode 100644 index 0000000000..05ee7a2b9d --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Tabs", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ] +} \ No newline at end of file diff --git a/public/docs/_examples/homepage-todo/e2e-spec.js b/public/docs/_examples/homepage-todo/e2e-spec.js new file mode 100644 index 0000000000..4bc9b5f6a6 --- /dev/null +++ b/public/docs/_examples/homepage-todo/e2e-spec.js @@ -0,0 +1,14 @@ + +describe('Homepage Todo', function () { + + beforeAll(function () { + browser.get(''); + }); + + // Does it even launch? + var expectedAppTitle = 'Todo'; + it('should display app title: ' + expectedAppTitle, function () { + expect(element(by.css('h2')).getText()).toEqual(expectedAppTitle); + }); + +}); diff --git a/public/docs/_examples/homepage-todo/ts/.gitignore b/public/docs/_examples/homepage-todo/ts/.gitignore new file mode 100644 index 0000000000..2cb7d2a2e9 --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/.gitignore @@ -0,0 +1 @@ +**/*.js diff --git a/public/docs/_examples/homepage-todo/ts/app/main.ts b/public/docs/_examples/homepage-todo/ts/app/main.ts new file mode 100644 index 0000000000..717623acdc --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/app/main.ts @@ -0,0 +1,5 @@ +// #docregion +import {bootstrap} from 'angular2/platform/browser'; +import {TodoApp} from './todo_app'; + +bootstrap(TodoApp); \ No newline at end of file diff --git a/public/docs/_examples/homepage-todo/ts/src/todo.ts b/public/docs/_examples/homepage-todo/ts/app/todo.ts similarity index 100% rename from public/docs/_examples/homepage-todo/ts/src/todo.ts rename to public/docs/_examples/homepage-todo/ts/app/todo.ts diff --git a/public/docs/_examples/homepage-todo/ts/src/todo_app.ts b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts similarity index 90% rename from public/docs/_examples/homepage-todo/ts/src/todo_app.ts rename to public/docs/_examples/homepage-todo/ts/app/todo_app.ts index d62b24279a..5688868b73 100644 --- a/public/docs/_examples/homepage-todo/ts/src/todo_app.ts +++ b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts @@ -9,10 +9,11 @@ import {TodoForm} from './todo_form'; template: `

    Todo

    {{remaining}} of {{todos.length}} remaining - [ archive ] + [ archive ] `, + styles:['a { cursor: pointer; cursor: hand; }'], directives: [TodoList, TodoForm] }) export class TodoApp { diff --git a/public/docs/_examples/homepage-todo/ts/src/todo_form.ts b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts similarity index 100% rename from public/docs/_examples/homepage-todo/ts/src/todo_form.ts rename to public/docs/_examples/homepage-todo/ts/app/todo_form.ts diff --git a/public/docs/_examples/homepage-todo/ts/src/todo_list.ts b/public/docs/_examples/homepage-todo/ts/app/todo_list.ts similarity index 100% rename from public/docs/_examples/homepage-todo/ts/src/todo_list.ts rename to public/docs/_examples/homepage-todo/ts/app/todo_list.ts diff --git a/public/docs/_examples/homepage-todo/ts/example-config.json b/public/docs/_examples/homepage-todo/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/homepage-todo/ts/src/index.html b/public/docs/_examples/homepage-todo/ts/index.1.html similarity index 63% rename from public/docs/_examples/homepage-todo/ts/src/index.html rename to public/docs/_examples/homepage-todo/ts/index.1.html index f3aada93dc..1d47696f58 100644 --- a/public/docs/_examples/homepage-todo/ts/src/index.html +++ b/public/docs/_examples/homepage-todo/ts/index.1.html @@ -3,15 +3,15 @@ - Angular 2 QuickStart - + Angular 2 Todos + - + @@ -22,22 +22,15 @@ System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, - packages: {'src': {defaultExtension: 'ts'}} - }); - - - - - + Loading... diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html new file mode 100644 index 0000000000..080b3be45a --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/index.html @@ -0,0 +1,37 @@ + + + + + + Angular 2 Todos + + + + + + + + + + + + + + + + + Loading... + + + \ No newline at end of file diff --git a/public/docs/_examples/homepage-todo/ts/plnkr.json b/public/docs/_examples/homepage-todo/ts/plnkr.json new file mode 100644 index 0000000000..7fecc539f7 --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Todo", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ] +} \ No newline at end of file diff --git a/public/index.jade b/public/index.jade index 8025c6b59d..fa9bb30168 100644 --- a/public/index.jade +++ b/public/index.jade @@ -16,27 +16,58 @@ div p.text-body In Angular you display data by defining components. Data in your component classes is automatically available to display in your templates or control how they render as in the example below. p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well. p(style='text-align:right') - md-button.md-primary(href='http://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview' target='_blank') + md-button.md-primary(href='/resources/live-examples/homepage-hello-world/ts/plnkr.html' target='_blank') span.icon-open-in-new | Try in Plunker - +makeTabs('../docs/_fragments/homepage-hello-world/ts/src/hello_world.html,../docs/_fragments/homepage-hello-world/ts/src/hello_world.ts,../docs/_fragments/homepage-hello-world/ts/src/index.html', null, 'hello_world.html,hello_world.ts,index.html') + +makeTabs(` + ../docs/_fragments/homepage-hello-world/ts/app/hello_world.html, + ../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts, + ../docs/_fragments/homepage-hello-world/ts/app/main.ts, + ../docs/_fragments/homepage-hello-world/ts/index.1.html`, + null, + `app/hello_world.html, + app/hello_world.ts, + app/main.ts, + index.html`) br div h3.text-headline Structuring Apps With Components p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates. p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion. p(style='text-align:right') - md-button.md-primary(href='http://plnkr.co/edit/q6DN6PztYuckF2mpRxQG?p=preview' target='_blank') + md-button.md-primary(href='/resources/live-examples/homepage-todo/ts/plnkr.html' target='_blank') span.icon-open-in-new | Try in Plunker - +makeTabs('../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/index.html', null, 'todo_app.ts,todo_form.ts,todo_list.ts,todo.ts,index.html') + +makeTabs(` + ../docs/_fragments/homepage-todo/ts/app/todo_app.ts, + ../docs/_fragments/homepage-todo/ts/app/todo_form.ts, + ../docs/_fragments/homepage-todo/ts/app/todo_list.ts, + ../docs/_fragments/homepage-todo/ts/app/todo.ts, + ../docs/_fragments/homepage-todo/ts/app/main.ts, + ../docs/_fragments/homepage-todo/ts/index.1.html`, + null, + `app/todo_app.ts, + app/todo_form.ts, + app/todo_list.ts, + app/todo.ts, + app/main.ts, + index.html`) br div h3.text-headline Advanced Component Communication p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost. p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows the tabs component to work with ngFor without any special knowledge of it. p(style='text-align:right') - md-button.md-primary(href='http://plnkr.co/edit/9E7T5XyLvn0SNQTOrVrJ?p=preview' target='_blank') + md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank') span.icon-open-in-new | Try in Plunker - +makeTabs('../docs/_fragments/homepage-tabs/ts/src/di_demo.ts,../docs/_fragments/homepage-tabs/ts/src/ui_tabs.ts,../docs/_fragments/homepage-tabs/ts/src/index.html', null, 'di_demo.ts,ui_tabs.ts,index.html') + +makeTabs(` + ../docs/_fragments/homepage-tabs/ts/app/di_demo.ts, + ../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts, + ../docs/_fragments/homepage-tabs/ts/app/main.ts, + ../docs/_fragments/homepage-tabs/ts/index.1.html`, + null, + `app/di_demo.ts, + app/ui_tabs.ts, + app/main.ts, + index.html`) diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js index c13464e492..6e51734578 100644 --- a/tools/plunker-builder/indexHtmlTranslator.js +++ b/tools/plunker-builder/indexHtmlTranslator.js @@ -91,8 +91,7 @@ var _rxData = [ { pattern: 'link', from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', - to: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css' - // to: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css' + to: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css' }, { pattern: 'config',