docs: expose more API to public, document QueryList

This commit is contained in:
Misko Hevery 2015-04-14 23:26:49 +00:00
parent f149ae79c6
commit e819e97f9a
11 changed files with 160 additions and 14 deletions

View File

@ -2,11 +2,17 @@ import {CONST} from 'angular2/src/facade/lang';
import {DependencyAnnotation} from 'angular2/di';
/**
* The directive can inject an emitter function that would emit events onto the
* directive host element.
* Specifies that a function for emitting events should be injected.
*
* NOTE: This is changing pre 1.0.
*
* The directive can inject an emitter function that would emit events onto the directive host element.
*
* @exportedAs angular2/annotations
*/
export class EventEmitter extends DependencyAnnotation {
eventName: string;
@CONST()
constructor(eventName) {
super();
@ -19,8 +25,13 @@ export class EventEmitter extends DependencyAnnotation {
}
/**
* The directive can inject a property setter that would allow setting this property on the
* host element
* Specifies that a function for setting host properties should be injected.
*
* NOTE: This is changing pre 1.0.
*
* The directive can inject a property setter that would allow setting this property on the host element.
*
* @exportedAs angular2/annotations
*/
export class PropertySetter extends DependencyAnnotation {
propName: string;
@ -36,7 +47,32 @@ export class PropertySetter extends DependencyAnnotation {
}
/**
* The directive can inject the value of an attribute of the host element
* Specifies that a constant attribute value should be injected.
*
* The directive can inject constant string literals of host element attributes.
*
* ## Example
*
* suppose we have an `<input>` element and would like to know its `type`.
*
* ```html
* <input type="text">
* ```
*
* A decorator could inject string literal `text` like so:
*
* ```javascript
* @Decorator({
* selector: `input'
* })
* class InputDecorator {
* constructor(@Attribute('type') type) {
* // type would be `text` in this example
* }
* }
* ```
*
* @exportedAs angular2/annotations
*/
export class Attribute extends DependencyAnnotation {
attributeName: string;
@ -56,7 +92,11 @@ export class Attribute extends DependencyAnnotation {
}
/**
* The directive can inject an query that would reflect a list of ancestor directives
* Specifies that a [QueryList] should be injected.
*
* See: [QueryList] for usage.
*
* @exportedAs angular2/annotations
*/
export class Query extends DependencyAnnotation {
directive;

View File

@ -10,12 +10,12 @@ import 'dart:collection';
* In the future this class will implement an Observable interface.
* For now it uses a plain list of observable callbacks.
*/
class QueryList extends Object with IterableMixin<Directive> {
class BaseQueryList extends Object with IterableMixin<Directive> {
List<Directive> _results;
List _callbacks;
bool _dirty;
QueryList(): _results = [], _callbacks = [], _dirty = false;
BaseQueryList(): _results = [], _callbacks = [], _dirty = false;
Iterator<Directive> get iterator => _results.iterator;

View File

@ -7,8 +7,10 @@ import {Directive} from 'angular2/src/core/annotations/annotations';
*
* In the future this class will implement an Observable interface.
* For now it uses a plain list of observable callbacks.
*
* @exportedAs angular2/view
*/
export class QueryList {
export class BaseQueryList {
_results: List<Directive>;
_callbacks;
_dirty;

View File

@ -40,7 +40,9 @@ export class CompilerCache {
}
}
/**
* @exportedAs angular2/template
*/
@Injectable()
export class Compiler {
_reader: DirectiveMetadataReader;

View File

@ -10,7 +10,9 @@ import {Renderer} from 'angular2/src/render/api';
import {ElementRef} from './element_injector';
import {AppView} from './view';
/**
* @exportedAs angular2/view
*/
export class ComponentRef {
location:ElementRef;
instance:any;
@ -34,6 +36,8 @@ export class ComponentRef {
/**
* Service for dynamically loading a Component into an arbitrary position in the internal Angular
* application tree.
*
* @exportedAs angular2/view
*/
@Injectable()
export class DynamicComponentLoader {

View File

@ -19,6 +19,9 @@ var _undefined = new Object();
var _staticKeys;
/**
* @exportedAs angular2/view
*/
export class ElementRef {
elementInjector:ElementInjector;

View File

@ -0,0 +1,83 @@
import {BaseQueryList} from './base_query_list';
/**
* An iterable live list of components in the Light DOM.
*
* Injectable Objects that contains a live list of child directives in the light DOM of a directive.
* The directives are kept in depth-first pre-order traversal of the DOM.
*
* The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop as well as in
* template with `*for="of"` viewport.
*
* NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable
* callbacks.
*
* # Example:
*
* Assume that `<tabs>` component would like to get a list its children which are `<pane>` components as shown in this
* example:
*
* ```html
* <tabs>
* <pane title="Overview">...</pane>
* <pane *for="o in objects" [title]="o.title">{{o.text}}</pane>
* </tabs>
* ```
*
* In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so that it could render
* tabs with the correct titles and in the correct order.
*
* A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself with `<tabs>`
* component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this would only work
* partialy since `*for` could rearange the list of `<pane>` components which would not be reported to `<tabs>`
* component and thus the list of `<pane>` componets would be out of sync with respect to the list of `<pane>` elements.
*
* A prefferd solution is to inject a `QueryList` which is a live list of directives in the component`s light DOM.
*
* ```javascript
* @Component({
* selector: 'tabs'
* })
* @View({
* template: `
* <ul>
* <li *for="pane of panes">{{pane.title}}</li>
* </ul>
* <content></content>
* `
* })
* class Tabs {
* panes: QueryList<Pane>
*
* constructor(@Query(Pane) panes:QueryList<Pane>) {
* this.panes = panes;
* }
* }
*
* @Component({
* selector: 'pane',
* properties: ['title']
* })
* @View(...)
* class Pane {
* title:string;
* }
* ```
*
* @exportedAs angular2/view
*/
export class QueryList extends BaseQueryList {
/**
*/
onChange(callback) {
return super.onChange(callback);
}
/**
*/
removeCallback(callback) {
return super.removeCallback(callback);
}
}

View File

@ -13,7 +13,6 @@ import * as renderApi from 'angular2/src/render/api';
/**
* Const of making objects: http://jsperf.com/instantiate-size-of-object
*
* @exportedAs angular2/template
*/
@IMPLEMENTS(ChangeDispatcher)
// TODO(tbosch): this is not supported in dart2js (no '.' is allowed)
@ -288,7 +287,6 @@ export class AppView {
/**
*
* @exportedAs angular2/template
*/
export class AppProtoView {
elementBinders:List<ElementBinder>;

View File

@ -18,7 +18,9 @@ import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_meta
import {queryView, viewRootNodes, el} from './utils';
import {instantiateType, getTypeOf} from './lang_utils';
/**
* @exportedAs angular2/test
*/
export class TestBed {
_injector: Injector;

View File

@ -142,6 +142,7 @@ export function createTestInjector(bindings: List) {
* @param {Array} tokens
* @param {Function} fn
* @return {FunctionWithParamTokens}
* @exportedAs angular2/test
*/
export function inject(tokens: List, fn: Function) {
return new FunctionWithParamTokens(tokens, fn);

11
modules/angular2/test.js vendored Normal file
View File

@ -0,0 +1,11 @@
/**
* @module
* @public
* @description
* This module is used for writing tests for applications written in Angular.
*
* This module is not included in the `angular2` module; you must import the test module explicitly.
*
*/
export * from './src/test_lib/test_bed';
export * from './src/test_lib/test_injector';