docs(homepage): examples conform to std + e2e tests

closes #740
This commit is contained in:
Ward Bell 2016-01-22 02:40:37 -08:00
parent 49f4b9e147
commit 17fe05b73d
31 changed files with 280 additions and 56 deletions

View File

@ -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 + '!');
});
});
});

View File

@ -0,0 +1 @@
**/*.js

View File

@ -6,7 +6,7 @@ import {Component} from 'angular2/core';
selector: 'hello-world', selector: 'hello-world',
// Location of the template for this component // Location of the template for this component
templateUrl: 'src/hello_world.html' templateUrl: 'app/hello_world.html'
}) })
export class HelloWorld { export class HelloWorld {

View File

@ -0,0 +1,5 @@
// #docregion
import {bootstrap} from 'angular2/platform/browser';
import {HelloWorld} from './hello_world';
bootstrap(HelloWorld);

View File

@ -3,14 +3,14 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <title>Angular 2 Hello World</title>
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order --> <!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
@ -21,22 +21,15 @@
System.config({ System.config({
transpiler: 'typescript', transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }, typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}} packages: {'app': {defaultExtension: 'ts'}}
});
</script>
<!-- 3. Bootstrap -->
<script>
System.import('angular2/platform/browser').then(function(ng){
System.import('src/hello_world').then(function(src) {
ng.bootstrap(src.HelloWorld);
});
}); });
System.import('app/main')
.then(null, console.error.bind(console));
</script> </script>
</head> </head>
<!-- 4. Display the application --> <!-- 3. Display the application -->
<body> <body>
<hello-world>Loading...</hello-world> <hello-world>Loading...</hello-world>
</body> </body>

View File

@ -0,0 +1,35 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Todos</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<hello-world class="container" style="display: block">Loading...</hello-world>
</body>
</html>

View File

@ -0,0 +1,8 @@
{
"description": "Hello World",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
]
}

View File

@ -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);
});
});

View File

@ -0,0 +1 @@
**/*.js

View File

@ -2,6 +2,11 @@
import {Component} from 'angular2/core'; import {Component} from 'angular2/core';
import {UiTabs, UiPane} from './ui_tabs'; import {UiTabs, UiPane} from './ui_tabs';
class Detail {
title: string;
text: string;
}
@Component({ @Component({
selector: 'di-demo', selector: 'di-demo',
template: ` template: `
@ -35,7 +40,7 @@ export class DiDemo {
}); });
} }
removeDetail(detail) { removeDetail(detail:Detail) {
this.details = this.details.filter((d) => d !== detail); this.details = this.details.filter((d) => d !== detail);
} }
} }

View File

@ -0,0 +1,5 @@
// #docregion
import {bootstrap} from 'angular2/platform/browser';
import {DiDemo} from './di_demo';
bootstrap(DiDemo);

View File

@ -34,11 +34,12 @@ export class UiPane {
<li *ngFor="var pane of panes" <li *ngFor="var pane of panes"
(click)="select(pane)" (click)="select(pane)"
role="presentation" [class.active]="pane.active"> role="presentation" [class.active]="pane.active">
<a href="javascript: false">{{pane.title}}</a> <a>{{pane.title}}</a>
</li> </li>
</ul> </ul>
<ng-content></ng-content> <ng-content></ng-content>
` `,
styles:['a { cursor: pointer; cursor: hand; }']
}) })
export class UiTabs { export class UiTabs {
@ContentChildren(UiPane) panes: QueryList<UiPane>; @ContentChildren(UiPane) panes: QueryList<UiPane>;

View File

@ -3,15 +3,15 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <title>Angular 2 Tabs</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order --> <!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
@ -22,22 +22,15 @@
System.config({ System.config({
transpiler: 'typescript', transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }, typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}} packages: {'app': {defaultExtension: 'ts'}}
});
</script>
<!-- 3. Bootstrap -->
<script>
System.import('angular2/platform/browser').then(function(ng){
System.import('src/di_demo').then(function(src) {
ng.bootstrap(src.DiDemo);
});
}); });
System.import('app/main')
.then(null, console.error.bind(console));
</script> </script>
</head> </head>
<!-- 4. Display the application --> <!-- 3. Display the application -->
<body> <body>
<di-demo class="container" style="display: block;">Loading...</di-demo> <di-demo class="container" style="display: block;">Loading...</di-demo>
</body> </body>

View File

@ -0,0 +1,37 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Todos</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<di-demo class="container" style="display: block">Loading...</di-demo>
</body>
</html>

View File

@ -0,0 +1,8 @@
{
"description": "Tabs",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
]
}

View File

@ -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);
});
});

View File

@ -0,0 +1 @@
**/*.js

View File

@ -0,0 +1,5 @@
// #docregion
import {bootstrap} from 'angular2/platform/browser';
import {TodoApp} from './todo_app';
bootstrap(TodoApp);

View File

@ -9,10 +9,11 @@ import {TodoForm} from './todo_form';
template: ` template: `
<h2>Todo</h2> <h2>Todo</h2>
<span>{{remaining}} of {{todos.length}} remaining</span> <span>{{remaining}} of {{todos.length}} remaining</span>
[ <a href="javascript: false" (click)="archive()">archive</a> ] [ <a (click)="archive()">archive</a> ]
<todo-list [todos]="todos"></todo-list> <todo-list [todos]="todos"></todo-list>
<todo-form (newTask)="addTask($event)"></todo-form>`, <todo-form (newTask)="addTask($event)"></todo-form>`,
styles:['a { cursor: pointer; cursor: hand; }'],
directives: [TodoList, TodoForm] directives: [TodoList, TodoForm]
}) })
export class TodoApp { export class TodoApp {

View File

@ -3,15 +3,15 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <title>Angular 2 Todos</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order --> <!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
@ -22,22 +22,15 @@
System.config({ System.config({
transpiler: 'typescript', transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }, typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}} packages: {'app': {defaultExtension: 'ts'}}
});
</script>
<!-- 3. Bootstrap -->
<script>
System.import('angular2/platform/browser').then(function(ng){
System.import('src/todo_app').then(function(src) {
ng.bootstrap(src.TodoApp);
});
}); });
System.import('app/main')
.then(null, console.error.bind(console));
</script> </script>
</head> </head>
<!-- 4. Display the application --> <!-- 3. Display the application -->
<body> <body>
<todo-app class="container" style="display: block">Loading...</todo-app> <todo-app class="container" style="display: block">Loading...</todo-app>
</body> </body>

View File

@ -0,0 +1,37 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Todos</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<todo-app class="container" style="display: block">Loading...</todo-app>
</body>
</html>

View File

@ -0,0 +1,8 @@
{
"description": "Todo",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
]
}

View File

@ -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 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.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.
p(style='text-align:right') 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 span.icon-open-in-new
| Try in Plunker | 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 br
div div
h3.text-headline Structuring Apps With Components 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 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.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') 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 span.icon-open-in-new
| Try in Plunker | 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 br
div div
h3.text-headline Advanced Component Communication 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 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 <code>ngFor</code> without any special knowledge of it. 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 <code>ngFor</code> without any special knowledge of it.
p(style='text-align:right') 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 span.icon-open-in-new
| Try in Plunker | 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`)

View File

@ -91,8 +91,7 @@ var _rxData = [
{ {
pattern: 'link', pattern: 'link',
from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', 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.6/css/bootstrap.min.css'
// to: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css'
}, },
{ {
pattern: 'config', pattern: 'config',