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

adds updated third demo to homepage

This commit is contained in:
Robert Messerle 2015-12-15 12:34:29 -08:00 committed by Naomi Black
parent 75ad34afcd
commit 0902d511cb
5 changed files with 95 additions and 33 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
View File

@ -1,23 +0,0 @@
// #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>;
}

41
public/docs/_examples/homepage-tabs/ts/src/di_demo.ts
View File

@ -1,17 +1,42 @@
// #docregion
import {Component} from 'angular2/core';
import {BsTabs, BsPane} from './bs_tabs';
import {UiTabs, UiPane} from './ui_tabs';
@Component({
selector: 'di-demo',
template: `
Demo:
<bs-tabs>
<div *bsPane="title: 'Summary'">
summary text ...
</div>
</bs-tabs>`,
directives: [BsTabs, BsPane]
<h4>Tabs Demo</h4>
<ui-tabs>
<template ui-pane title='Overview' active="true">
You have {{details.length}} details.
</template>
<template *ngFor="#detail of details" ui-pane [title]="detail.title">
{{detail.text}} <br><br>
<button class="btn" (click)="removeDetail(detail)">Remove</button>
</template>
<template ui-pane title='Summary'>
Next last ID is {{id}}.
</template>
</ui-tabs>
<hr>
<button class="btn" (click)="addDetail()">Add Detail</button>
`,
directives: [UiTabs, UiPane]
})
export class DiDemo {
details: Detail[] = [];
id: number = 0;
addDetail() {
this.id++;
this.details.push({
title: `Detail ${this.id}`,
text: `Some detail text for ${this.id}...`
});
}
removeDetail(detail) {
this.details = this.details.filter((d) => d !== detail);
}
}

3
public/docs/_examples/homepage-tabs/ts/src/index.html
View File

@ -4,6 +4,7 @@
<head>
<title>Angular 2 QuickStart</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
@ -32,7 +33,7 @@
<!-- 4. Display the application -->
<body>
<di-demo>Loading...</di-demo>
<di-demo class="container" style="display: block;">Loading...</di-demo>
</body>
</html>

50
public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts Normal file
View File

@ -0,0 +1,50 @@
// #docregion
import {Component, Directive, Input, QueryList,
ViewContainerRef, TemplateRef, ContentChildren} from 'angular2/core';
@Directive({
selector: '[ui-pane]'
})
export class UiPane {
@Input() title: string;
private _active:boolean = false;
constructor(public viewContainer: ViewContainerRef,
public templateRef: TemplateRef) { }
@Input() set active(active: boolean) {
if (active == this._active) return;
this._active = active;
if (active) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.remove(0);
}
}
get active(): boolean {
return this._active;
}
}
@Component({
selector: 'ui-tabs',
template: `
<ul class="nav nav-tabs">
<li *ngFor="var pane of panes"
(click)="select(pane)"
role="presentation" [class.active]="pane.active">
<a href="javascript: false">{{pane.title}}</a>
</li>
</ul>
<ng-content></ng-content>
`
})
export class UiTabs {
@ContentChildren(UiPane) panes: QueryList<UiPane>;
select(pane: UiPane) {
this.panes.toArray().forEach((p: UiPane) => p.active = p == pane);
}
}

11
public/index.jade
View File

@ -22,7 +22,7 @@ div
+makeTabs('../docs/_fragments/homepage-hello-world/ts/src/hello_world.ts,../docs/_fragments/homepage-hello-world/ts/src/hello_world.html,../docs/_fragments/homepage-hello-world/ts/src/index.html', null, 'hello_world.ts,hello_world.html,index.html')
br
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 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')
@ -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/PK6Hyg?p=preview' target='_blank')
span.icon-open-in-new
| Try in Plunker
+makeTabs('../docs/_fragments/homepage-tabs/ts/src/ui_tabs.ts,../docs/_fragments/homepage-tabs/ts/src/di_demo.ts,../docs/_fragments/homepage-tabs/ts/src/index.html', null, 'ui_tabs.ts,di_demo.ts,index.html')