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

adds third demo to homepage

This commit is contained in:
Robert Messerle 2015-12-15 00:44:06 -08:00 committed by Naomi Black
parent 8f67e3fe54
commit 584d7971a8
4 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts Normal file
View File

@ -0,0 +1,23 @@
// #docregion
import {Component, Directive, Input, QueryList} from 'angular2/core';
@Directive({
selector: '[bsPane]'
})
export class BsPane {
@Input() title: string;
}
@Component({
selector: 'tabs',
template: `
<ul class="nav nav-tabs">
<li *ngFor="var pane of panes"
role="presentation" [class.active]="pane.active">
<a href="javascript: false">{{pane.title}}</a>
</li>
</ul>`
})
export class BsTabs {
//@ContentChildren(BsPane) panes: QueryList<Pane>;
}

17
public/docs/_examples/homepage-tabs/ts/src/di_demo.ts Normal file
View File

@ -0,0 +1,17 @@
// #docregion
import {Component} from 'angular2/core';
import {BsTabs, BsPane} from './bs_tabs';
@Component({
selector: 'di-demo',
template: `
Demo:
<bs-tabs>
<div *bsPane="title: 'Summary'">
summary text ...
</div>
</bs-tabs>`,
directives: [BsTabs, BsPane]
})
export class DiDemo {
}

38
public/docs/_examples/homepage-tabs/ts/src/index.html Normal file
View File

@ -0,0 +1,38 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.52/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {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);
});
});
</script>
</head>
<!-- 4. Display the application -->
<body>
<di-demo>Loading...</di-demo>
</body>
</html>

9
public/index.jade
View File

@ -31,3 +31,12 @@ div
| 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')
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 tobs component to work with <code>ngFor</code> without any special knowledge of it.
p(style='text-align:right')
md-button.md-primary(href='http://plnkr.co/edit/9GdLbXM0mh5zHPKhcwCL?p=preview' target='_blank')
span.icon-open-in-new
| Try in Plunker
+makeTabs('../docs/_fragments/homepage-tabs/ts/src/bs_tabs.ts,../docs/_fragments/homepage-tabs/ts/src/di_demo.ts,../docs/_fragments/homepage-tabs/ts/src/index.html', null, 'bs_tabs.ts,di_demo.ts,index.html')