diff --git a/modules/angular2/core.js b/modules/angular2/core.js index ca1c4573bb..dda0bbf525 100644 --- a/modules/angular2/core.js +++ b/modules/angular2/core.js @@ -1,6 +1,6 @@ export * from './src/core/annotations/visibility'; export * from './src/core/compiler/interfaces'; -export * from './src/core/annotations/template'; +export * from './src/core/annotations/view'; export * from './src/core/application'; export * from './src/core/application_tokens'; export * from './src/core/annotations/di'; diff --git a/modules/angular2/docs/core/02_directives.md b/modules/angular2/docs/core/02_directives.md index 113ba6fb89..c528b4e385 100644 --- a/modules/angular2/docs/core/02_directives.md +++ b/modules/angular2/docs/core/02_directives.md @@ -67,10 +67,10 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt ``` @Decorator({ selector: '[tooltip]', // CSS Selector which triggers the decorator - bind: { // List which properties need to be bound + properties: { // List which properties need to be bound text: 'tooltip' // - DOM element tooltip property should be }, // mapped to the directive text property. - events: { // List which events need to be mapped. + hostListeners: { // List which events need to be mapped. mouseover: 'show' // - Invoke the show() method every time } // the mouseover event is fired. }) @@ -112,13 +112,13 @@ Example of a component: ``` @Component({ | Component annotation selector: 'pane', | CSS selector on element - bind: { | List which property need to be bound + properties: { | List which property need to be bound 'title': 'title', | - title mapped to component title 'open': 'open' | - open attribute mapped to component's open property }, | }) | -@Template({ | Template annotation - url: 'pane.html' | - URL of template HTML +@View({ | View annotation + templateUrl: 'pane.html' | - URL of template HTML }) | class Pane { | Component controller class title:string; | - title property @@ -179,7 +179,7 @@ Viewport is a directive which can control instantiation of child views which are ``` @Viewport({ selector: '[if]', - bind: { + properties: { 'condition': 'if' } }) @@ -220,7 +220,7 @@ To better understand the kinds of injections which are supported in Angular we h ### Injecting Services -Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `services` and then letting the directive ask for the configured service. +Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `injectables` and then letting the directive ask for the configured service. This example illustrates how to inject `MyService` into `House` directive. @@ -231,10 +231,10 @@ class MyService {} | Assume a service which needs to be inject | @Component({ | Assume a top level application component which selector: 'my-app', | configures the services to be injected. - services: [MyService] | + injectables: [MyService] | }) | -@Template({ | Assume we have a template that needs to be - url: 'my_app.html', | configured with directives to be injected. +@View({ | Assume we have a template that needs to be + templateUrl: 'my_app.html', | configured with directives to be injected. directives: [House] | }) | class MyApp {} | @@ -279,7 +279,7 @@ Here is an example of the kinds of injections which can be achieved: @Component({ | selector: 'my-app', | template: new TemplateConfig({ | - url: 'my_app.html', | + templateUrl: 'my_app.html', | directives: [Form, FieldSet, | Field, Primary] | }) | diff --git a/modules/angular2/docs/core/10_view.md b/modules/angular2/docs/core/10_view.md index efa264f09a..6e4efd112c 100644 --- a/modules/angular2/docs/core/10_view.md +++ b/modules/angular2/docs/core/10_view.md @@ -12,12 +12,12 @@ Views form a tree structure which mimics the DOM tree. nested in a tree like structure. The View tree is a simplified version of the DOM tree. A View can have a single DOM Element or large DOM structures. The key is that the DOM tree in the View can not undergo structural changes (only property changes). -* Views represent a running instance of a DOM Template. This implies that while elements in a View +* Views represent a running instance of a DOM View. This implies that while elements in a View can change properties, they can not change structurally. (Structural changes such as, adding or removing elements requires adding or removing child Views into ViewContainers). * View can have zero or more ViewPorts. A ViewPort is a marker in the DOM which allows the insertion of child Views. -* Views are created from a ProtoView. A ProtoView is a compiled DOM Template which is efficient at +* Views are created from a ProtoView. A ProtoView is a compiled DOM View which is efficient at creating Views. * View contains a context object. The context represents the object instance against which all expressions are evaluated. @@ -40,7 +40,7 @@ class Greeter { } ``` -And assume following HTML Template: +And assume following HTML View: ```
@@ -90,7 +90,7 @@ Note: An important part of an application is to be able to change the DOM structure to render data for the user. In Angular this is done by inserting child views into the ViewPort. -Let's start with a Template such as: +Let's start with a View such as: ```