Alex Wolfe
commit
dee489683e
|
|
@ -1,3 +1,4 @@
|
|||
node_modules
|
||||
www
|
||||
.DS_Store
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Angular.io is currently the preview site for Angular 2. This site also includes
|
|||
|
||||
|
||||
## Development Setup
|
||||
1. Install Harp `sudo npm install -g harp`
|
||||
1. Install Harp `sudo npm install -g harp@v0.15.2`
|
||||
2. cd into root directory `angular.io/`
|
||||
3. run `harp server`
|
||||
4. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/)
|
||||
|
|
@ -25,4 +25,4 @@ Angular.io is currently the preview site for Angular 2. This site also includes
|
|||
|
||||
|
||||
## License
|
||||
Powered by Google ©2010-2015. Code licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/).
|
||||
Powered by Google ©2010-2015. Code licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/).
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
.banner.is-centered
|
||||
p.text-body !{banner}
|
||||
content = banner ? banner : intro
|
||||
|
||||
.banner
|
||||
p.text-body !{content}
|
||||
|
|
@ -3,7 +3,7 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
|||
form.st-input-inner
|
||||
label(for="search-io" class="is-hidden") Search Docs
|
||||
input(type="search" id="search-io" placeholder="SEARCH DOCS...")
|
||||
button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
|
||||
button(aria-label="Docs Menu" class="mobile-trigger button" aria-label="View Docs Menu" ng-click="toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
|
||||
|
||||
ul(class="side-nav-primary" ng-class="showDocsNav ? 'is-visible' : ''")
|
||||
if current.path[2]
|
||||
|
|
@ -11,4 +11,45 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
|||
name = page.menuTitle || page.title
|
||||
selected = current.path[3] == slug ? 'is-selected':''
|
||||
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
|
||||
// PRIMARY NAVIGATION
|
||||
if public.docs[current.path[1]][current.path[2]][slug]
|
||||
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}/" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
|
||||
|
||||
else
|
||||
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
|
||||
|
||||
// SECONDARY NAVIGATION
|
||||
if selected
|
||||
secondarySection = public.docs[current.path[1]][current.path[2]][current.path[3]]
|
||||
|
||||
if secondarySection
|
||||
listType = public.docs[current.path[1]][current.path[2]][current.path[3]]._data._listtype || 'unordered'
|
||||
ordered = listType == "ordered" ? "is-ordered" : ""
|
||||
number = 0
|
||||
|
||||
ul(class="side-nav-secondary #{ordered}")
|
||||
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data
|
||||
if slug != "index"
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
num = (listType == "ordered") ? number++ : ''
|
||||
|
||||
if slug != "_listtype"
|
||||
if num
|
||||
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button>#{num}. #{page.title}</a>
|
||||
|
||||
else
|
||||
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button>#{page.title}</a>
|
||||
|
||||
|
||||
// TERTIARY NAVIGATION
|
||||
if selected
|
||||
tertiarySection = public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
|
||||
|
||||
if tertiarySection
|
||||
ul.side-nav-tertiary
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[5] == slug ? 'is-selected':''
|
||||
li(class="#{selected}")<a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button>#{name}</a>
|
||||
|
|
|
|||
|
|
@ -43,5 +43,5 @@
|
|||
|
||||
footer(class="background-steel")
|
||||
small.text-caption Powered by Google ©2010-2015. Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" class="text-snow">Apache License, Version 2.0</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
|
||||
a(href="/docs/styleguide.html" title="Style Guide" class="styleguide-trigger text-snow" md-button)
|
||||
a(aria-label="View Style Guide" href="/docs/styleguide.html" title="Style Guide" class="styleguide-trigger text-snow" md-button)
|
||||
span.icon-favorite
|
||||
|
|
@ -34,9 +34,10 @@ meta(itemprop="description" content="#{description}")
|
|||
meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png")
|
||||
|
||||
link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
|
||||
link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css")
|
||||
link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css")
|
||||
link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css')
|
||||
link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
|
||||
link(rel="stylesheet" href="/resources/css/vendor/animate.css")
|
||||
link(rel="stylesheet" href="/resources/css/main.css")
|
||||
|
||||
<!-- MOBILE ICONS -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
hasIcon = icon ? 'has-icon' : ''
|
||||
iconNumber = number ? number : ''
|
||||
a(class="hover-card is-button #{hasIcon}" href="#{url}" md-button)
|
||||
if icon
|
||||
span(class="hover-card-icon #{icon}") #{iconNumber}
|
||||
|
||||
h3 #{name}
|
||||
|
||||
if cta
|
||||
p #{cta}
|
||||
else
|
||||
p View #{name} Docs
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
currentPage = false
|
||||
nextPage = false
|
||||
data = public.docs[current.path[1]][current.path[2]][current.path[3]]._data
|
||||
|
||||
for page, slug in data
|
||||
|
||||
if slug != "index"
|
||||
// CHECK IF CURRENT PAGE IS SET, THEN SET NEXT PAGE
|
||||
if currentPage
|
||||
if !nextPage
|
||||
.l-sub-section
|
||||
h3 Next Step
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title}
|
||||
|
||||
//NEXT PAGE HAS NOW BEEN SET
|
||||
nextPage = true
|
||||
|
||||
// SET CURRENT PAGE FLAG WHEN YOU PASS IT
|
||||
if current.path[4] == slug
|
||||
currentPage = true
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
<!-- Angular Material Dependencies -->
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js")
|
||||
|
||||
<!-- VENDORS -->
|
||||
script(src="/resources/js/vendor/prettify.js")
|
||||
script(src="/resources/js/vendor/lang-basic.js")
|
||||
script(src="/resources/js/vendor/lang-dart.js")
|
||||
script(src="/resources/js/vendor/jquery.js")
|
||||
|
||||
|
||||
<!-- Angular Material Dependencies -->
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js")
|
||||
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
|
||||
|
||||
|
||||
|
||||
script(src="/resources/js/site.js")
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@ if current.path[2]
|
|||
|
||||
<!-- Replace _ undscores with . dots -->
|
||||
if current.path[3]
|
||||
page = current.path[3] + '.html'
|
||||
|
||||
if public.docs[current.path[1]][current.path[2]][current.path[3]]
|
||||
page = current.path[3] + '/'
|
||||
else
|
||||
page = current.path[3] + '.html'
|
||||
|
||||
<!-- VERSION TREE CREATOR MIXIN -->
|
||||
mixin tree(directory, urlPrefix, name, latest)
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
"title": "5 Min Quickstart"
|
||||
},
|
||||
|
||||
"resources": {
|
||||
"icon": "play-circle-fill",
|
||||
"title": "Angular Resources",
|
||||
"guide": {
|
||||
"icon": "list",
|
||||
"title": "Step By Step Guide",
|
||||
"banner": "Angular 2 is currently in Alpha Preview. For AngularDart 1.X resources, visit <a href='https://angulardart.org/'>angulardart.org</a>."
|
||||
},
|
||||
|
||||
|
|
@ -22,6 +22,12 @@
|
|||
"title": "API Proposal"
|
||||
},
|
||||
|
||||
"resources": {
|
||||
"icon": "play-circle-fill",
|
||||
"title": "Angular Resources",
|
||||
"banner": "Angular 2 is currently in Alpha Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
|
||||
},
|
||||
|
||||
"help": {
|
||||
"icon": "chat",
|
||||
"title": "Help & Support"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"_listtype": "ordered",
|
||||
"setup": {
|
||||
"title": "Getting Started"
|
||||
},
|
||||
|
||||
"index": {
|
||||
"title": "Step By Step Guide"
|
||||
},
|
||||
|
||||
"displaying-data": {
|
||||
"title": "Displaying Data"
|
||||
},
|
||||
"user-input": {
|
||||
"title": "User Input"
|
||||
},
|
||||
"making-components": {
|
||||
"title": "Making Components"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
doctype
|
||||
html(lang="en" ng-app="angularIOApp")
|
||||
head
|
||||
!= partial("../../../../_includes/_head-include")
|
||||
|
||||
body(class="l-offset-nav l-offset-side-nav" ng-controller="AppCtrl")
|
||||
!= partial("../../../../_includes/_main-nav")
|
||||
!= partial("../../../../_includes/_docs-nav")
|
||||
!= partial("../../../../_includes/_hero")
|
||||
|
||||
if banner
|
||||
!= partial("../../../../_includes/_banner")
|
||||
|
||||
article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
|
||||
!= yield
|
||||
!= partial("../../../../_includes/_next-item")
|
||||
|
||||
!= partial("../../../../_includes/_footer")
|
||||
!= partial("../../../../_includes/_scripts-include")
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -0,0 +1,448 @@
|
|||
.l-main-section
|
||||
p.
|
||||
Displaying data is job number one for any good application.
|
||||
In Angular, you bind data to elements in HTML
|
||||
templates, and Angular automatically updates the UI as data changes.
|
||||
p.
|
||||
Let's walk through how to display a property and a list of properties,
|
||||
and then to conditionally show content
|
||||
based on state.
|
||||
p.
|
||||
The final UI looks like this:
|
||||
figure.image-display
|
||||
img(src='displaying-data-example1.png')
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-entry-point Create entry points and pubspec
|
||||
|
||||
p.
|
||||
Open your favorite editor and create a directory with
|
||||
a <code>web/main.dart</code> file,
|
||||
a <code>web/index.html</code> file, and
|
||||
a <code>pubspec.yaml</code> file:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-dart(data-name="dart")
|
||||
code.
|
||||
// web/main.dart
|
||||
library displaying_data;
|
||||
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/src/reflection/reflection.dart' show reflector;
|
||||
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
|
||||
|
||||
part 'show_properties.dart';
|
||||
|
||||
main() {
|
||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
||||
bootstrap(DisplayComponent);
|
||||
}
|
||||
pre.prettyprint.lang-html(data-name="html")
|
||||
code.
|
||||
<!-- web/index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<display></display>
|
||||
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
pre.prettyprint.lang-yaml(data-name="yaml")
|
||||
code.
|
||||
# pubspec.yaml
|
||||
name: displaying_data
|
||||
description: Dart version of Angular 2 example, Displaying Data
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.20
|
||||
browser: any
|
||||
|
||||
p.
|
||||
All of this code should look familiar from the previous page,
|
||||
except for the <code>library</code> and <code>part</code> statements
|
||||
in <code>main.dart</code>.
|
||||
Those statements let you implement part of the app in a different Dart file.
|
||||
All three of these files remain similar in the rest of the examples,
|
||||
so we'll just focus on what's different.
|
||||
|
||||
.l-main-section
|
||||
h2#section-showing-properties-with-interpolation Showing properties with interpolation
|
||||
p.
|
||||
The simple method for binding text into templates is through interpolation,
|
||||
where you put the name of a property
|
||||
inside <strong>{{ }}</strong>.
|
||||
|
||||
p.
|
||||
To see this working, create a Dart file under <code>web</code>
|
||||
named <code>show_properties.dart</code>,
|
||||
and add the following:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
// web/show_properties.dart
|
||||
part of displaying_data;
|
||||
|
||||
@Component(
|
||||
selector: 'display'
|
||||
)
|
||||
@View(
|
||||
template: '''
|
||||
<p>My name: {{ myName }}</p>
|
||||
'''
|
||||
)
|
||||
class DisplayComponent {
|
||||
String myName = 'Alice';
|
||||
}
|
||||
|
||||
p.
|
||||
You've just defined a component that encompasses a view and controller for the app. The view
|
||||
defines a template:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<p>My name: {{ myName }}</p>
|
||||
|
||||
p.
|
||||
Angular will automatically pull the value of <code>myName</code> and
|
||||
insert it into the browser,
|
||||
automatically updating it whenever it changes.
|
||||
|
||||
.callout.is-helpful
|
||||
header Note
|
||||
p.
|
||||
While you've used <code>template:</code> to specify an inline view, for larger templates you'd
|
||||
want to move them to a separate file and load them with <code>templateUrl:</code> instead.
|
||||
|
||||
p.
|
||||
One thing to notice is that although you've written
|
||||
your <code>DisplayComponent</code> class, you haven't
|
||||
used <code>new</code> to instantiate it.
|
||||
Because your class is associated with <code><display></code> elements in
|
||||
the DOM, Angular automatically calls <code>new</code> on
|
||||
<code>DisplayComponent</code> and bind its properties to
|
||||
that part of the template.
|
||||
|
||||
p.
|
||||
When you're building templates, data bindings like these have access to
|
||||
the same scope of
|
||||
properties as your controller class does.
|
||||
Here your class is <code>DisplayComponent</code>, which has
|
||||
just one property, <code>myName</code>.
|
||||
|
||||
p.
|
||||
Add a second line to the template,
|
||||
so you can see Angular dynamically update content:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<p>Current time: {{ time }}</p>
|
||||
|
||||
p.
|
||||
Then give the <code>DisplayComponent</code> a starting value for time and
|
||||
a call to update time
|
||||
via <code>setInterval</code>:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
class DisplayComponent {
|
||||
String myName = 'Alice';
|
||||
String time;
|
||||
Timer _timer;
|
||||
|
||||
DisplayComponent() {
|
||||
_updateTime(null);
|
||||
_timer = new Timer.periodic(new Duration(seconds: 1), _updateTime);
|
||||
}
|
||||
|
||||
_updateTime(Timer _) {
|
||||
time = new DateTime.now().toString();
|
||||
}
|
||||
}
|
||||
|
||||
p Reload the app, and you'll now see the seconds updating automatically.
|
||||
|
||||
.l-main-section
|
||||
h2#Create-an-array Display an iterable using *for
|
||||
p Moving up from a single value, create a property that's a list of values.
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
class DisplayComponent {
|
||||
String myName = 'Alice';
|
||||
List<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
|
||||
}
|
||||
|
||||
p.
|
||||
You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
|
||||
with one for each item in the list.
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
@View(
|
||||
template: '''
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
<ul>
|
||||
<li *for="#name of friendNames">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
'''
|
||||
)
|
||||
p.
|
||||
To make this work, you'll also need to add the Angular <code>For</code> directive used by
|
||||
the template to <code>show_properties.dart</code>, so that Angular knows to include it.
|
||||
Add <code>For</code> using the optional <code>directives</code> parameter,
|
||||
which contains a list of directives:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
@View(
|
||||
template: '''
|
||||
// ...HTML...
|
||||
''',
|
||||
directives: const[For]
|
||||
)
|
||||
|
||||
p Reload and you've got your list of friends!
|
||||
p.
|
||||
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
|
||||
list. Delete one and Angular deletes the <li>. Reorder items and Angular makes the corresponding reorder of
|
||||
the DOM list.
|
||||
|
||||
p Let's look at the few lines that do the work again:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<li *for="#name of friendNames">
|
||||
{{ name }}
|
||||
</li>
|
||||
|
||||
p The way to read this is:
|
||||
ul
|
||||
li.
|
||||
<code>*for</code>: Create a DOM element for each item in an
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
|
||||
such as a list.
|
||||
li <code>#name</code>: Refer to individual values of the iterable as <code>name</code>.
|
||||
li <code>of friendNames</code>: The iterable to use is called <code>friendNames</code> in the current controller.
|
||||
|
||||
p Using this syntax, you can build UI lists from any iterable object.
|
||||
|
||||
.l-main-section
|
||||
h2#Create-a-class Create a model and inject it
|
||||
p.
|
||||
Before we get too much further, we should mention that putting the model (list) directly into the controller isn't
|
||||
proper form. We should separate the concerns by having another class serve the role of model and inject it into
|
||||
the controller.
|
||||
|
||||
p.
|
||||
Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new
|
||||
<code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
// web/friends_service.dart
|
||||
part of displaying_data;
|
||||
|
||||
class FriendsService {
|
||||
List<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
|
||||
}
|
||||
|
||||
.callout.is-helpful
|
||||
header Note
|
||||
p.
|
||||
Remember to tie <code>friends_service.dart</code> into the library's main file:
|
||||
add <code>part friends_service.dart</code> to <code>main.dart</code>.
|
||||
p.
|
||||
Now you can replace the current list of friends in DisplayComponent.
|
||||
First add a FriendsService parameter to the constructor.
|
||||
Then set <code>friendNames</code> to the names provided by the service.
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
// In web/show_properties.dart
|
||||
class DisplayComponent {
|
||||
String myName = 'Alice';
|
||||
List<String> friendNames;
|
||||
|
||||
DisplayComponent(FriendsService friendsService) {
|
||||
friendNames = friendsService.names;
|
||||
}
|
||||
}
|
||||
|
||||
p.
|
||||
Next, make FriendsService available to dependency injection
|
||||
by adding an <code>injectables</code> parameter to DisplayComponent's
|
||||
<code>@Component</code> annotation:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
@Component(
|
||||
selector: 'display',
|
||||
injectables: const[FriendsService]
|
||||
)
|
||||
|
||||
.l-main-section
|
||||
h2#Conditionally-displaying-data-with-If Conditionally display data using *if
|
||||
p.
|
||||
Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>*if</code>. The
|
||||
<code>If</code> directive adds or removes elements from the DOM based on the expression you provide.
|
||||
|
||||
p See it in action by adding a paragraph at the end of your template:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<p *if="names.length > 3">You have many friends!</p>
|
||||
|
||||
p.
|
||||
Also add <code>If</code> to the list of directives,
|
||||
so Angular knows to include it:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
directives: const[For, If]
|
||||
p.
|
||||
The list current has 5 items, so if you run the app you'll see the message
|
||||
congratulating you on your many friends.
|
||||
Remove two items from the list, reload your browser,
|
||||
and see that the message no longer displays.
|
||||
<!-- PENDING: mention somewhere that once you start a web server,
|
||||
you can just refresh the browser to see your changes. -->
|
||||
|
||||
p Here's the final code.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-dart(data-name="show_properties.dart")
|
||||
code.
|
||||
// web/show_properties.dart
|
||||
part of displaying_data;
|
||||
|
||||
@Component(
|
||||
selector: 'display',
|
||||
injectables: const[FriendsService]
|
||||
)
|
||||
@View(
|
||||
template: '''
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
<ul>
|
||||
<li *for="#name of friendNames">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
''',
|
||||
directives: const[For]
|
||||
)
|
||||
class DisplayComponent {
|
||||
String myName = 'Alice';
|
||||
List<String> friendNames;
|
||||
|
||||
DisplayComponent(FriendsService friendsService) {
|
||||
friendNames = friendsService.names;
|
||||
}
|
||||
}
|
||||
pre.prettyprint.lang-dart(data-name="friends_service.dart")
|
||||
code.
|
||||
// web/friends_service.dart
|
||||
part of displaying_data;
|
||||
|
||||
class FriendsService {
|
||||
List<String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
|
||||
}
|
||||
pre.prettyprint.lang-dart(data-name="main.dart")
|
||||
code.
|
||||
// web/main.dart
|
||||
library displaying_data;
|
||||
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/src/reflection/reflection.dart' show reflector;
|
||||
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
|
||||
|
||||
part 'show_properties.dart';
|
||||
part 'friends_service.dart';
|
||||
|
||||
main() {
|
||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
||||
bootstrap(DisplayComponent);
|
||||
}
|
||||
pre.prettyprint.lang-html(data-name="html")
|
||||
code.
|
||||
<!-- web/index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<display></display>
|
||||
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
pre.prettyprint.lang-yaml(data-name="yaml")
|
||||
code.
|
||||
# pubspec.yaml
|
||||
name: displaying_data
|
||||
description: Dart version of Angular 2 example, Displaying Data
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.20
|
||||
browser: any
|
||||
.l-main-section
|
||||
h2#section-explanations Explanations
|
||||
|
||||
.l-sub-section
|
||||
h3 Using multiple Dart files in an Angular app
|
||||
|
||||
p.
|
||||
Dart offers a few ways to implement an app in multiple files.
|
||||
In this guide, all the code for each example is in a single library;
|
||||
each Dart file under <code>web</code> is part of that library.
|
||||
|
||||
p.
|
||||
To let the code in <code>main.dart</code>
|
||||
use the code in <code>show_properties.dart</code>,
|
||||
declare a library in <code>main.dart</code>.
|
||||
Then make <code>show_properties.dart</code> part of that library.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-dart(data-name="main library file")
|
||||
code.
|
||||
// web/main.dart
|
||||
library displaying_data;
|
||||
// imports...
|
||||
part 'show_properties.dart';
|
||||
// Code goes here...
|
||||
pre.prettyprint.lang-dart(data-name="additional library file")
|
||||
code.
|
||||
// web/show_properties.dart
|
||||
part of displaying_data;
|
||||
// Code goes here...
|
||||
|
||||
p.
|
||||
Another way to split Dart code is to
|
||||
define multiple libraries in a single package.
|
||||
The additional libraries go under a <code>lib</code> directory
|
||||
parallel to <code>web</code>.
|
||||
<!-- PENDING: show or point to an example -->
|
||||
|
||||
p.
|
||||
Yet another approach, often used when some of the code is highly reusable,
|
||||
is to split the code into libraries in two or more packages.
|
||||
|
||||
p.
|
||||
For more information on implementing Dart libraries, see
|
||||
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
|
||||
in the
|
||||
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
number = 1;
|
||||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
|
||||
|
||||
if slug != '_listtype' && slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
|
||||
num = number++
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.l-main-section
|
||||
p.
|
||||
As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create
|
||||
a top-level component. You add child components to a parent component by using them in the parent component's
|
||||
template.
|
||||
p.
|
||||
Given a bootstrapping template with a <code><parent></code> tag in the body, you can create a parent
|
||||
component that uses a <code><child></code> component like so:
|
||||
|
||||
pre.prettyprint.linenums.lang-dart
|
||||
code.
|
||||
part of making_components;
|
||||
|
||||
@Component(
|
||||
selector: 'parent'
|
||||
)
|
||||
@View(
|
||||
template: '''
|
||||
<h1>{{ message }}</h1>
|
||||
<child></child>
|
||||
''',
|
||||
directives: const[ChildComponent]
|
||||
)
|
||||
class ParentComponent {
|
||||
String message = "I'm the parent";
|
||||
}
|
||||
|
||||
p You then just need to write the <code>ChildComponent</code> class to make it work:
|
||||
|
||||
pre.prettyprint.linenums.lang-dart
|
||||
code.
|
||||
part of making_components;
|
||||
|
||||
@Component(
|
||||
selector: 'child'
|
||||
)
|
||||
@View(
|
||||
template: '''
|
||||
<p> {{ message }} </p>
|
||||
'''
|
||||
)
|
||||
class ChildComponent {
|
||||
String message = "I'm the child";
|
||||
}
|
||||
|
||||
p.
|
||||
Notice that in addition to using the <code><child></code> element in the parent template, you also need to
|
||||
add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives
|
||||
//p.
|
||||
[TODO: Motivate communication between components with iterator example that passes index to the child]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
|
|
@ -0,0 +1,181 @@
|
|||
.l-main-section
|
||||
|
||||
p.
|
||||
As long as you already
|
||||
<a href="https://www.dartlang.org/downloads/">have the Dart SDK</a>,
|
||||
getting started with Angular 2 is simple:
|
||||
|
||||
ol
|
||||
li Depend on the <b>angular2</b> pub package.
|
||||
li Create a Dart file that defines (directly or indirectly) a
|
||||
<b>root component</b> and <b>bootstraps</b> Angular.
|
||||
li Create an HTML file that uses the root component and points to the Dart file
|
||||
|
||||
p.
|
||||
You can use whichever editor or IDE you like,
|
||||
or just use the command-line tools that the Dart SDK provides.
|
||||
See <a href="http://www.dartlang.org/tools/">Dart Tools</a>
|
||||
for more information.
|
||||
|
||||
|
||||
h2#section-install Depend on angular2
|
||||
|
||||
p.
|
||||
To use Angular2 in your app, include angular2 as a dependency in
|
||||
your app's <b>pubspec.yaml</b> file. For example:
|
||||
|
||||
pre.prettyprint.lang-yaml
|
||||
code.
|
||||
# pubspec.yaml
|
||||
name: getting_started
|
||||
description: Dart version of Angular 2 example, Getting Started
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.20
|
||||
browser: any
|
||||
p.
|
||||
Run <b>pub get</b> to download the packages your app depends on.
|
||||
(<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
|
||||
typically run <code>pub get</code> for you.)
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2#section-set-up-the-starting-component Write the Dart code
|
||||
|
||||
p.
|
||||
Next to your <code>pubspec.yaml</code> file,
|
||||
create a <code>web</code> subdirectory containing a Dart file
|
||||
(<code>main.dart</code>).
|
||||
Edit <code>main.dart</code>, adding a component class (<b>AppComponent</b>),
|
||||
configuring it to bind to the <code><my-app></code> element,
|
||||
and creating a top-level <code>main()</code> function that calls
|
||||
Angular's <code>bootstrap()</code> function.
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
// web/main.dart
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/src/reflection/reflection.dart' show reflector;
|
||||
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
|
||||
|
||||
@Component(
|
||||
selector: 'my-app'
|
||||
)
|
||||
@View(
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
)
|
||||
class AppComponent {
|
||||
}
|
||||
|
||||
main() {
|
||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-entry-point Create an HTML file
|
||||
p.
|
||||
In the <code>web/</code> directoryapp, create an HTML file (<code>index.html</code>).
|
||||
Edit <code>index.html</code> to add a <code><my-app></code> element
|
||||
and call <code>main.dart</code>.
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<!-- web/index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
.l-main-section
|
||||
h2#section-run-it Run the app!
|
||||
|
||||
p.
|
||||
Now run the app. How you do this depends on your tools.
|
||||
|
||||
ul
|
||||
li.
|
||||
If you're using <b>Dart Editor</b>,
|
||||
right-click <b>web/index.html</b>,
|
||||
and choose <b>Open in Dartium</b>.
|
||||
This starts a web server
|
||||
and opens your app in Dartium,
|
||||
an experimental version of the Chromium browser that contains the Dart VM.
|
||||
|
||||
li.
|
||||
If you're using <b>WebStorm</b> or <b>IntelliJ IDEA</b>,
|
||||
right-click <b>web/index.html</b>,
|
||||
and choose <b>Run 'index.html'</b>.
|
||||
|
||||
li.
|
||||
If you're using the command line and don't have Dartium,
|
||||
serve the app using <code>pub serve</code>,
|
||||
and then run it by visiting <b>http://localhost:8080</b> in a browser.
|
||||
Generating the JavaScript takes a few seconds when you first visit the page,
|
||||
and the generated JavaScript is currently large.
|
||||
The generated JavaScript will be smaller once
|
||||
Angular's transformer becomes available.
|
||||
|
||||
p.
|
||||
You should see something like this:
|
||||
|
||||
figure.image-display
|
||||
img(src='setup-example1.png')
|
||||
|
||||
.l-main-section
|
||||
h2#section-explanations Explanations
|
||||
|
||||
p This basic Angular app contains the structure for any app you'll build.
|
||||
|
||||
.l-sub-section
|
||||
h3 It's all a tree
|
||||
|
||||
p.
|
||||
You can think of an Angular app as a tree of components.
|
||||
The root component acts as the top-level container for the rest of your application.
|
||||
You've named this one <code>AppComponent</code>, but there's
|
||||
nothing special about the name; you can use whatever makes sense to you.
|
||||
|
||||
p.
|
||||
The root component's job is to give a location in the HTML file where
|
||||
your application can
|
||||
render through its element—in this case, <code><my-app></code>.
|
||||
There's nothing special about the HTML filename or the element name;
|
||||
you can pick whatever you like.
|
||||
|
||||
p.
|
||||
The root component loads the initial template for the application,
|
||||
which loads other components to perform
|
||||
whatever functions your application needs—menu bars, views, forms, and so on.
|
||||
We'll walk through examples of all of
|
||||
these in the following pages.
|
||||
|
||||
.l-sub-section
|
||||
h3 @Component and @View annotations
|
||||
|
||||
p.
|
||||
A component annotation describes details about the component.
|
||||
An annotation can be identified by its at-sign (<code>@</code>).
|
||||
p.
|
||||
The <code>@Component</code> annotation defines the HTML tag for
|
||||
the component by specifying the component's CSS selector.
|
||||
p.
|
||||
The <code>@View</code> annotation defines the HTML that
|
||||
represents the component.
|
||||
The component you wrote uses an inline template,
|
||||
but you can also have an external template.
|
||||
To use an external template,
|
||||
specify a <code>templateUrl</code> property and
|
||||
give it the path to the HTML file.
|
||||
|
||||
|
||||
p.
|
||||
Exciting! Not excited yet?
|
||||
Let's move on to <a href="displaying-data.html">Displaying Data</a>.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,137 @@
|
|||
.l-main-section
|
||||
p.
|
||||
You can make your application respond to user input by associating events with functions in your controller
|
||||
using the event syntax using <strong>()</strong> to surround the name of an event.
|
||||
p.
|
||||
For a particular control like an input you can have it call methods on your controller on keyup event like so:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<input (keyup)="myControllerMethod()">
|
||||
p.
|
||||
As in previous examples, you can make element references available to other parts of the template as a local
|
||||
variable using the # syntax. With this and events, we can do the old "update text as you type" example:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<input #my-name (keyup)>
|
||||
<p>{{my-name.value}}</p>
|
||||
|
||||
p.text-body(ng-non-bindable).
|
||||
The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
|
||||
<code><p></code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
|
||||
event. And the <code>{{my-name.value}}</code> binds the text node of the <code><p></code> element to the
|
||||
input's value property.
|
||||
p Let's do something a little more complex where users enter items and add them to a list like this:
|
||||
figure.image-display
|
||||
img(src='user-input-example1.png')
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-array-property Create an array property
|
||||
p.
|
||||
With the default bootstrapping in place, create a TodoController class that will manage interactions with the
|
||||
list. Inside TodoController, add an array with an initial list of items. Then add a method that pushes new items
|
||||
on the array when called.
|
||||
|
||||
pre.prettyprint.linenums.lang-dart
|
||||
code.
|
||||
class TodoList {
|
||||
List<String> todos =
|
||||
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
|
||||
|
||||
addTodo(String todo) {
|
||||
todos.add(todo);
|
||||
}
|
||||
|
||||
.callout.is-helpful
|
||||
header Production Best Practice
|
||||
p.
|
||||
As with the previous example, in a production application you will separate your model out into another class
|
||||
and inject it into <code>TodoController</code>. We've omitted it here for brevity.
|
||||
|
||||
.l-main-section
|
||||
h2#section-display-the-list-of-todos Display the list of todos
|
||||
p.
|
||||
Using the <code>*for</code> iterator, create an <code><li></code> for each item in the todos array and set
|
||||
its text to the value.
|
||||
|
||||
pre.prettyprint.linenums.lang-html
|
||||
code.
|
||||
<ul>
|
||||
<li *for="#todo of todos">
|
||||
{{ todo }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
.l-main-section
|
||||
h2#section-add-todos-to-the-list Add todos to the list via button click
|
||||
p.
|
||||
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
|
||||
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<input #todotext>
|
||||
p.
|
||||
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
|
||||
it the value. Since you created a reference called <code>todotext</code>, you can get the value with
|
||||
<code>todotext.value.</code>
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
|
||||
p And then create the doneTyping() method on TodoList and handle adding the todo text.
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
doneTyping(KeyboardEvent event) {
|
||||
if (event.which == 13) {
|
||||
InputElement e = event.target;
|
||||
addTodo(e.value);
|
||||
e.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
.l-main-section
|
||||
h2#section-final-code Final Code
|
||||
p Here's the final <code>todo_list.dart</code>
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
part of user_input;
|
||||
|
||||
@Component(
|
||||
selector: 'todo-list'
|
||||
)
|
||||
@View(
|
||||
// Without r before ''' (a raw string), $event breaks Angular!
|
||||
// An alternative is to use \$event instead.
|
||||
template: '''
|
||||
<ul>
|
||||
<li *for="#todo of todos">
|
||||
{{ todo }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<input #todotext (keyup)="doneTyping($event)">
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
''',
|
||||
directives: const[For]
|
||||
)
|
||||
class TodoList {
|
||||
List<String> todos =
|
||||
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
|
||||
|
||||
addTodo(String todo) {
|
||||
todos.add(todo);
|
||||
}
|
||||
|
||||
doneTyping(KeyboardEvent event) {
|
||||
if (event.which == 13) {
|
||||
InputElement e = event.target;
|
||||
addTodo(e.value);
|
||||
e.value = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
div.c4
|
||||
md-card
|
||||
md-card.card
|
||||
md-card-content
|
||||
h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
|
||||
p.text-body Learn in 5 minutes
|
||||
|
|
@ -10,21 +10,21 @@ div.c4
|
|||
|
||||
|
||||
div.c4
|
||||
md-card
|
||||
md-card.card
|
||||
md-card-content
|
||||
h3.text-headline.text-uppercase <span class="icon-play-circle-outline"></span> Resources
|
||||
p.text-body Preview of v2.0
|
||||
h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
|
||||
p.text-body Step by Step Guide
|
||||
|
||||
footer
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button button-primary" md-button) View Resources
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
|
||||
|
||||
|
||||
div.c4
|
||||
md-card
|
||||
md-card.card
|
||||
md-card-content
|
||||
h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
|
||||
p.text-body Proposal for v2.0 API
|
||||
h3.text-headline.text-uppercase <span class="icon-book"></span> API
|
||||
p.text-body API 2.0 Preview
|
||||
|
||||
footer
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/api.html" class="button" md-button) View API
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,12 @@
|
|||
h1 path #{current.path[0]}
|
||||
.l-main-section
|
||||
.l-sub-section
|
||||
h3 JavaScript
|
||||
|
||||
ul
|
||||
li <a href="/docs/js/latest">Angular 2 JS - Latest Version</a>
|
||||
|
||||
|
||||
h3 Dart
|
||||
|
||||
ul
|
||||
li <a href="/docs/dart/latest">Angular 2 Dart - Latest Version</a>
|
||||
|
|
@ -11,15 +11,21 @@
|
|||
"title": "5 Min Quickstart"
|
||||
},
|
||||
|
||||
"resources": {
|
||||
"icon": "play-circle-fill",
|
||||
"title": "Angular Resources",
|
||||
"guide": {
|
||||
"icon": "list",
|
||||
"title": "Step By Step Guide",
|
||||
"banner": "Angular 2 is currently in Alpha Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
|
||||
},
|
||||
|
||||
"api": {
|
||||
"icon": "book",
|
||||
"title": "API Proposal"
|
||||
"title": "API Preview"
|
||||
},
|
||||
|
||||
"resources": {
|
||||
"icon": "play-circle-fill",
|
||||
"title": "Angular Resources",
|
||||
"banner": "Angular 2 is currently in Alpha Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
|
||||
},
|
||||
|
||||
"help": {
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
.l-main-section
|
||||
h2 Developer Preview
|
||||
|
||||
p.
|
||||
The Angular 2.0 API is currently in active development and not production ready.
|
||||
This page will showcase a preview of proposed methods to help further the discussion
|
||||
in the development community.
|
||||
|
||||
.l-sub-section
|
||||
h3 Angular 1.X for Production
|
||||
p.
|
||||
If you're building a production app today, please
|
||||
<a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
|
||||
These versions of Angular are production ready and available today.
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"index" : {
|
||||
"title" : "API 2.0 Preview"
|
||||
},
|
||||
|
||||
"annotations" : {
|
||||
"title" : "Annotations"
|
||||
},
|
||||
|
||||
"change_detection" : {
|
||||
"title" : "Change Detection"
|
||||
},
|
||||
|
||||
"core" : {
|
||||
"title" : "Core"
|
||||
},
|
||||
|
||||
"di" : {
|
||||
"title" : "Di"
|
||||
},
|
||||
|
||||
"di_annotations" : {
|
||||
"title" : "Di Annotations"
|
||||
},
|
||||
|
||||
"di_errors" : {
|
||||
"title" : "Di Errors"
|
||||
},
|
||||
|
||||
"directives" : {
|
||||
"title" : "Directives"
|
||||
},
|
||||
|
||||
"forms" : {
|
||||
"title" : "Forms"
|
||||
},
|
||||
|
||||
"pipes" : {
|
||||
"title" : "Pipes"
|
||||
},
|
||||
|
||||
"test" : {
|
||||
"title" : "Test"
|
||||
},
|
||||
|
||||
"view" : {
|
||||
"title" : "View"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L105">angular2/src/core/annotations/visibility.js (line 105)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that an injector should retrieve a dependency from any ancestor element.
|
||||
|
||||
An ancestor is any element between the parent element and shadow root.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Here is a simple directive that retrieves a dependency from an ancestor element.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
selector: '[my-directive]'
|
||||
})
|
||||
class Dependency {
|
||||
constructor(@Ancestor() dependency:Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
We use this with the following HTML template:
|
||||
|
||||
```
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div>
|
||||
<div dependency="3" my-directive></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
|
||||
nearest ancestor element:
|
||||
- The current element `dependency="3"` is skipped because it is not an ancestor.
|
||||
- Next parent has no directives `<div>`
|
||||
- Next parent has the `Dependency` directive and so the dependency is satisfied.
|
||||
|
||||
Angular injects `dependency=2`.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L53">angular2/src/core/annotations/di.js (line 53)</a>
|
||||
|
||||
:markdown
|
||||
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 want to know its `type`.
|
||||
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
A decorator can inject string literal `text` like so:
|
||||
|
||||
```javascript
|
||||
@Decorator({
|
||||
selector: `input'
|
||||
})
|
||||
class InputDecorator {
|
||||
constructor(@Attribute('type') type) {
|
||||
// type would be `text` in this example
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(attributeName)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 attributeName
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L755">angular2/src/core/annotations/annotations.js (line 755)</a>
|
||||
|
||||
:markdown
|
||||
Directive that attaches behavior to DOM elements.
|
||||
|
||||
A decorator directive attaches behavior to a DOM element in a composable manner.
|
||||
(see: http://en.wikipedia.org/wiki/Composition_over_inheritance)
|
||||
|
||||
Decorators:
|
||||
- are simplest form of <a href="Directive-class.html"><code>Directive</code></a>s.
|
||||
- are best used as a composition pattern ()
|
||||
|
||||
Decorators differ from <a href="Component-class.html"><code>Component</code></a>s in that they:
|
||||
- can have multiple decorators per element
|
||||
- do not create their own evaluation context
|
||||
- do not have a template (and therefor do not create Shadow DOM)
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Here we use a decorator directive to simply define basic tool-tip behavior.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
properties: {
|
||||
'text': 'tooltip'
|
||||
},
|
||||
hostListeners: {
|
||||
'onmouseenter': 'onMouseEnter()',
|
||||
'onmouseleave': 'onMouseLeave()'
|
||||
}
|
||||
})
|
||||
class Tooltip{
|
||||
text:string;
|
||||
overlay:Overlay; // NOT YET IMPLEMENTED
|
||||
overlayManager:OverlayManager; // NOT YET IMPLEMENTED
|
||||
|
||||
constructor(overlayManager:OverlayManager) {
|
||||
this.overlay = overlay;
|
||||
}
|
||||
|
||||
onMouseEnter() {
|
||||
// exact signature to be determined
|
||||
this.overlay = this.overlayManager.open(text, ...);
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
this.overlay.close();
|
||||
this.overlay = null;
|
||||
}
|
||||
}
|
||||
```
|
||||
In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
|
||||
like so:
|
||||
|
||||
```
|
||||
<div tooltip="some text here"></div>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
lifecycle,
|
||||
compileChildren = true,
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners:any,
|
||||
lifecycle:List,
|
||||
compileChildren:boolean
|
||||
}={})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 compileChildren
|
||||
|
||||
|
||||
:markdown
|
||||
If set to true the compiler does not compile the children of this directive.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L660">angular2/src/core/annotations/annotations.js (line 660)</a>
|
||||
|
||||
:markdown
|
||||
Directive used for dynamically loading components.
|
||||
|
||||
Regular Angular components are statically resolved. DynamicComponent allows to you resolve a component at runtime
|
||||
instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
|
||||
the dynamically-loaded component becomes permanent and cannot be changed.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
|
||||
`DynamicComp` requests loading of the `HelloCmp` component.
|
||||
|
||||
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
|
||||
locations.
|
||||
|
||||
```
|
||||
@DynamicComponent({
|
||||
selector: 'dynamic-comp'
|
||||
})
|
||||
class DynamicComp {
|
||||
helloCmp:HelloCmp;
|
||||
constructor(loader:DynamicComponentLoader, location:PrivateComponentLocation) {
|
||||
loader.load(HelloCmp, location).then((helloCmp) => {
|
||||
this.helloCmp = helloCmp;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'hello-cmp'
|
||||
})
|
||||
@View({
|
||||
template: "{{greeting}}"
|
||||
})
|
||||
class HelloCmp {
|
||||
greeting:string;
|
||||
constructor() {
|
||||
this.greeting = "hello";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
injectables,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
properties:Object,
|
||||
events:List,
|
||||
hostListeners:Object,
|
||||
injectables:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 injectables
|
||||
|
||||
|
||||
:markdown
|
||||
Same as `injectables` in the <a href="Component-class.html"><code>Component</code></a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L44">angular2/src/core/annotations/visibility.js (line 44)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that an injector should retrieve a dependency from the direct parent.
|
||||
|
||||
## Example
|
||||
|
||||
Here is a simple directive that retrieves a dependency from its parent element.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
selector: '[my-directive]'
|
||||
})
|
||||
class Dependency {
|
||||
constructor(@Parent() dependency:Dependency) {
|
||||
expect(dependency.id).toEqual(1);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
We use this with the following HTML template:
|
||||
|
||||
```
|
||||
<div dependency="1">
|
||||
<div dependency="2" my-directive></div>
|
||||
</div>
|
||||
```
|
||||
The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the
|
||||
parent element (even thought the current element could resolve it): Angular injects `dependency=1`.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L12">angular2/src/core/annotations/di.js (line 12)</a>
|
||||
|
||||
:markdown
|
||||
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.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(propName)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 propName
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/di.js#L77">angular2/src/core/annotations/di.js (line 77)</a>
|
||||
|
||||
:markdown
|
||||
Specifies that a <a href="../view/QueryList-class.html"><code>QueryList</code></a> should be injected.
|
||||
|
||||
See <a href="../view/QueryList-class.html"><code>QueryList</code></a> for usage and example.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(directive)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 directive
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/view.js#L34">angular2/src/core/annotations/view.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
Declares the available HTML templates for an application.
|
||||
|
||||
Each angular component requires a single `@Component` and at least one `@View` annotation. The @View
|
||||
annotation specifies the HTML template to use, and lists the directives that are active within the template.
|
||||
|
||||
When a component is instantiated, the template is loaded into the component's shadow root, and the
|
||||
expressions and statements in the template are evaluated against the component.
|
||||
|
||||
For details on the `@Component` annotation, see <a href="Component-class.html"><code>Component</code></a>.
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Component({
|
||||
selector: 'greet'
|
||||
})
|
||||
@View({
|
||||
template: 'Hello {{name}}!',
|
||||
directives: [GreetUser, Bold]
|
||||
})
|
||||
class Greet {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'World';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({
|
||||
templateUrl,
|
||||
template,
|
||||
directives,
|
||||
renderer
|
||||
}: {
|
||||
templateUrl: string,
|
||||
template: string,
|
||||
directives: List<Type>,
|
||||
renderer: string
|
||||
})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 directives
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies a list of directives that can be used within a template.
|
||||
|
||||
Directives must be listed explicitly to provide proper component encapsulation.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
@View({
|
||||
directives: [For]
|
||||
template: '
|
||||
<ul>
|
||||
<li *for="item in items">{{item}}</li>
|
||||
</ul>'
|
||||
})
|
||||
class MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 renderer
|
||||
|
||||
|
||||
:markdown
|
||||
Specify a custom renderer for this View.
|
||||
If this is set, neither `template`, `templateURL` nor `directives` are used.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 template
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies an inline template for an angular component.
|
||||
|
||||
NOTE: either `templateURL` or `template` should be used, but not both.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 templateUrl
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies a template URL for an angular component.
|
||||
|
||||
NOTE: either `templateURL` or `template` should be used, but not both.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L884">angular2/src/core/annotations/annotations.js (line 884)</a>
|
||||
|
||||
:markdown
|
||||
Directive that controls the instantiation, destruction, and positioning of inline template elements.
|
||||
|
||||
A viewport directive uses a <a href="../view/ViewContainer-class.html"><code>ViewContainer</code></a> to instantiate, insert, move, and destroy views at runtime.
|
||||
The <a href="../view/ViewContainer-class.html"><code>ViewContainer</code></a> is created as a result of `<template>` element, and represents a location in the current view
|
||||
where these actions are performed.
|
||||
|
||||
Views are always created as children of the current <a href="View-class.html"><code>View</code></a>, and as siblings of the `<template>` element. Thus a
|
||||
directive in a child view cannot inject the viewport directive that created it.
|
||||
|
||||
Since viewport directives are common in Angular, and using the full `<template>` element syntax is wordy, Angular
|
||||
also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
|
||||
|
||||
Thus,
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li *foo="bar" title="text"></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Expands in use to:
|
||||
|
||||
```
|
||||
<ul>
|
||||
<template [foo]="bar">
|
||||
<li title="text"></li>
|
||||
</template>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the `Viewport`
|
||||
controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
|
||||
|
||||
Here is a simple viewport directive that triggers on an `unless` selector:
|
||||
|
||||
```
|
||||
@Viewport({
|
||||
selector: '[unless]',
|
||||
properties: {
|
||||
'unless': 'unless'
|
||||
}
|
||||
})
|
||||
export class Unless {
|
||||
viewContainer: ViewContainer;
|
||||
prevCondition: boolean;
|
||||
|
||||
constructor(viewContainer: ViewContainer) {
|
||||
this.viewContainer = viewContainer;
|
||||
this.prevCondition = null;
|
||||
}
|
||||
|
||||
set unless(newCondition) {
|
||||
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
|
||||
this.prevCondition = true;
|
||||
this.viewContainer.clear();
|
||||
} else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
|
||||
this.prevCondition = false;
|
||||
this.viewContainer.create();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
We can then use this `unless` selector in a template:
|
||||
```
|
||||
<ul>
|
||||
<li *unless="expr"></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Once the viewport instantiates the child view, the shorthand notation for the template expands and the result is:
|
||||
|
||||
```
|
||||
<ul>
|
||||
<template [unless]="exp">
|
||||
<li></li>
|
||||
</template>
|
||||
<li></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
|
||||
view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"Directive-class" : {
|
||||
"title" : "Directive Class"
|
||||
},
|
||||
|
||||
"Component-class" : {
|
||||
"title" : "Component Class"
|
||||
},
|
||||
|
||||
"DynamicComponent-class" : {
|
||||
"title" : "DynamicComponent Class"
|
||||
},
|
||||
|
||||
"Decorator-class" : {
|
||||
"title" : "Decorator Class"
|
||||
},
|
||||
|
||||
"Viewport-class" : {
|
||||
"title" : "Viewport Class"
|
||||
},
|
||||
|
||||
"onDestroy-var" : {
|
||||
"title" : "onDestroy Var"
|
||||
},
|
||||
|
||||
"onChange-var" : {
|
||||
"title" : "onChange Var"
|
||||
},
|
||||
|
||||
"onAllChangesDone-var" : {
|
||||
"title" : "onAllChangesDone Var"
|
||||
},
|
||||
|
||||
"PropertySetter-class" : {
|
||||
"title" : "PropertySetter Class"
|
||||
},
|
||||
|
||||
"Attribute-class" : {
|
||||
"title" : "Attribute Class"
|
||||
},
|
||||
|
||||
"Query-class" : {
|
||||
"title" : "Query Class"
|
||||
},
|
||||
|
||||
"View-class" : {
|
||||
"title" : "View Class"
|
||||
},
|
||||
|
||||
"Parent-class" : {
|
||||
"title" : "Parent Class"
|
||||
},
|
||||
|
||||
"Ancestor-class" : {
|
||||
"title" : "Ancestor Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L521">angular2/src/core/annotations/annotations.js (line 521)</a>
|
||||
|
||||
:markdown
|
||||
Declare reusable UI building blocks for an application.
|
||||
|
||||
Each Angular component requires a single `@Component` and at least one `@View` annotation. The `@Component`
|
||||
annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
|
||||
|
||||
When a component is instantiated, Angular
|
||||
- creates a shadow DOM for the component.
|
||||
- loads the selected template into the shadow DOM.
|
||||
- creates a child <a href="../di/Injector-class.html"><code>Injector</code></a> which is configured with the `injectables` for the <a href="Component-class.html"><code>Component</code></a>.
|
||||
|
||||
All template expressions and statements are then evaluated against the component instance.
|
||||
|
||||
For details on the `@View` annotation, see <a href="View-class.html"><code>View</code></a>.
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Component({
|
||||
selector: 'greet'
|
||||
})
|
||||
@View({
|
||||
template: 'Hello {{name}}!'
|
||||
})
|
||||
class Greet {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'World';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
injectables,
|
||||
lifecycle,
|
||||
changeDetection = DEFAULT
|
||||
}:{
|
||||
selector:string,
|
||||
properties:Object,
|
||||
events:List,
|
||||
hostListeners:Object,
|
||||
injectables:List,
|
||||
lifecycle:List,
|
||||
changeDetection:string
|
||||
}={})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 changeDetection
|
||||
|
||||
|
||||
:markdown
|
||||
Defines the used change detection strategy.
|
||||
|
||||
When a component is instantiated, Angular creates a change detector, which is responsible for propagating
|
||||
the component's bindings.
|
||||
|
||||
The `changeDetection` property defines, whether the change detection will be checked every time or only when the component
|
||||
tells it to do so.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 injectables
|
||||
|
||||
|
||||
:markdown
|
||||
Defines the set of injectable objects that are visible to a Component and its children.
|
||||
|
||||
The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's
|
||||
injector.
|
||||
|
||||
When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
|
||||
the Component `injectables` annotation. The injectable objects then become available for injection to the component
|
||||
itself and any of the directives in the component's template, i.e. they are not available to the directives which
|
||||
are children in the component's light DOM.
|
||||
|
||||
|
||||
The syntax for configuring the `injectables` injectable is identical to <a href="../di/Injector-class.html"><code>Injector</code></a> injectable configuration.
|
||||
See <a href="../di/Injector-class.html"><code>Injector</code></a> for additional detail.
|
||||
|
||||
|
||||
## Simple Example
|
||||
|
||||
Here is an example of a class that can be injected:
|
||||
|
||||
```
|
||||
class Greeter {
|
||||
greet(name:string) {
|
||||
return 'Hello ' + name + '!';
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'greet',
|
||||
injectables: [
|
||||
Greeter
|
||||
]
|
||||
})
|
||||
@View({
|
||||
template: `{{greeter.greet('world')}}!`,
|
||||
directives: Child
|
||||
})
|
||||
class HelloWorld {
|
||||
greeter:Greeter;
|
||||
|
||||
constructor(greeter:Greeter) {
|
||||
this.greeter = greeter;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,518 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L240">angular2/src/core/annotations/annotations.js (line 240)</a>
|
||||
|
||||
:markdown
|
||||
Directives allow you to attach behavior to elements in the DOM.
|
||||
|
||||
Directive is an abstract concept, instead use concrete directives: <a href="Component-class.html"><code>Component</code></a>, <a href="DynamicComponent-class.html"><code>DynamicComponent</code></a>, <a href="Decorator-class.html"><code>Decorator</code></a>
|
||||
or <a href="Viewport-class.html"><code>Viewport</code></a>.
|
||||
|
||||
A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
|
||||
elements in the DOM, the following steps occur:
|
||||
|
||||
1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor arguments.
|
||||
2. Angular instantiates directives for each matched element using `ElementInjector` in a depth-first order,
|
||||
as declared in the HTML.
|
||||
|
||||
## Understanding How Injection Works
|
||||
|
||||
There are three stages of injection resolution.
|
||||
- *Pre-existing Injectors*:
|
||||
- The terminal <a href="../di/Injector-class.html"><code>Injector</code></a> cannot resolve dependencies. It either throws an error or, if the dependency was
|
||||
specified as `@Optional`, returns `null`.
|
||||
- The platform injector resolves browser singleton resources, such as: cookies, title, location, and others.
|
||||
- *Component Injectors*: Each `@Component` has its own <a href="../di/Injector-class.html"><code>Injector</code></a>, and they follow the same parent-child hierarchy
|
||||
as the components in the DOM.
|
||||
- *Element Injectors*: Each component has a Shadow DOM. Within the Shadow DOM each element has an `ElementInjector`
|
||||
which follow the same parent-child hierarchy as the DOM elements themselves.
|
||||
|
||||
When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The
|
||||
current `ElementInjector` resolves the constructor dependencies for each directive.
|
||||
|
||||
Angular then resolves dependencies as follows, according to the order in which they appear in the <a href="View-class.html"><code>View</code></a>:
|
||||
|
||||
1. Dependencies on the current element
|
||||
2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
|
||||
3. Dependencies on component injectors and their parents until it encounters the root component
|
||||
4. Dependencies on pre-existing injectors
|
||||
|
||||
|
||||
The `ElementInjector` can inject other directives, element-specific special objects, or it can delegate to the parent
|
||||
injector.
|
||||
|
||||
To inject other directives, declare the constructor parameter as:
|
||||
- `directive:DirectiveType`: a directive on the current element only
|
||||
- `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current element and the
|
||||
Shadow DOM root. Current element is not included in the resolution, therefore even if it could resolve it, it will
|
||||
be ignored.
|
||||
- `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
|
||||
- `@Children query:Query<DirectiveType>`: A live collection of direct child directives (will be implemented in later release).
|
||||
- `@Descendants query:Query<DirectiveType>`: A live collection of any child directives (will be implemented in later relaese).
|
||||
|
||||
To inject element-specific special objects, declare the constructor parameter as:
|
||||
- `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
|
||||
- `viewContainer: ViewContainer` to control child template instantiation, for <a href="Viewport-class.html"><code>Viewport</code></a> directives only
|
||||
- `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
|
||||
|
||||
## Example
|
||||
|
||||
The following example demonstrates how dependency injection resolves constructor arguments in practice.
|
||||
|
||||
|
||||
Assume this HTML template:
|
||||
|
||||
```
|
||||
<div dependency="1">
|
||||
<div dependency="2">
|
||||
<div dependency="3" my-directive>
|
||||
<div dependency="4">
|
||||
<div dependency="5"></div>
|
||||
</div>
|
||||
<div dependency="6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
With the following `dependency` decorator and `SomeService` injectable class.
|
||||
|
||||
```
|
||||
@Injectable()
|
||||
class SomeService {
|
||||
}
|
||||
|
||||
@Decorator({
|
||||
selector: '[dependency]',
|
||||
properties: {
|
||||
'id':'dependency'
|
||||
}
|
||||
})
|
||||
class Dependency {
|
||||
id:string;
|
||||
}
|
||||
```
|
||||
|
||||
Let's step through the different ways in which `MyDirective` could be declared...
|
||||
|
||||
|
||||
### No injection
|
||||
|
||||
Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with no dependencies.
|
||||
|
||||
|
||||
### Component-level injection
|
||||
|
||||
Directives can inject any injectable instance from the closest component injector or any of its parents.
|
||||
|
||||
Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
|
||||
component's injector.
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(someService: SomeService) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a dependency on `SomeService`.
|
||||
|
||||
|
||||
### Injecting a directive from the current element
|
||||
|
||||
Directives can inject other directives declared on the current element.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(3);
|
||||
}
|
||||
}
|
||||
```
|
||||
This directive would be instantiated with `Dependency` declared at the same element, in this case `dependency="3"`.
|
||||
|
||||
|
||||
### Injecting a directive from a direct parent element
|
||||
|
||||
Directives can inject other directives declared on a direct parent element. By definition, a directive with a
|
||||
`@Parent` annotation does not attempt to resolve dependencies for the current element, even if this would satisfy
|
||||
the dependency.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Parent() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
```
|
||||
This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="2"`.
|
||||
|
||||
|
||||
### Injecting a directive from any ancestor elements
|
||||
|
||||
Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the
|
||||
parent element and its parents. By definition, a directive with an `@Ancestor` annotation does not attempt to
|
||||
resolve dependencies for the current element, even if this would satisfy the dependency.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Ancestor() dependency: Dependency) {
|
||||
expect(dependency.id).toEqual(2);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
|
||||
parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would have returned
|
||||
`dependency="1"`.
|
||||
|
||||
|
||||
### Injecting a live collection of direct child directives
|
||||
|
||||
|
||||
A directive can also query for other child directives. Since parent directives are instantiated before child
|
||||
directives, a directive can't simply inject the list of child directives. Instead, the directive
|
||||
injects a <a href="../view/QueryList-class.html"><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved by any
|
||||
<a href="Viewport-class.html"><code>Viewport</code></a> directive such as a `for`, an `if`, or a `switch`.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Query(Marker) dependencies:QueryList<Maker>) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a <a href="../view/QueryList-class.html"><code>QueryList</code></a> which contains `Dependency` 4 and 6. Here, `Dependency`
|
||||
5 would not be included, because it is not a direct child.
|
||||
|
||||
### Injecting a live collection of descendant directives
|
||||
|
||||
Note: This is will be implemented in later release. ()
|
||||
|
||||
Similar to `@Children` above, but also includes the children of the child elements.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@QueryDescendents(Marker) dependencies:QueryList<Maker>) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
|
||||
|
||||
### Optional injection
|
||||
|
||||
The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you
|
||||
would like to inject `null` on unresolved dependency instead, you can annotate that dependency with `@Optional()`.
|
||||
This explicitly permits the author of a template to treat some of the surrounding directives as optional.
|
||||
|
||||
```
|
||||
@Decorator({ selector: '[my-directive]' })
|
||||
class MyDirective {
|
||||
constructor(@Optional() dependency:Dependency) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
|
||||
found, the injector supplies `null` instead of throwing an error.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({
|
||||
selector,
|
||||
properties,
|
||||
events,
|
||||
hostListeners,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
properties:any,
|
||||
events:List,
|
||||
hostListeners: any,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 events
|
||||
|
||||
|
||||
:markdown
|
||||
Enumerates the set of emitted events.
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Component({
|
||||
events: ['statusChange']
|
||||
})
|
||||
class TaskComponent {
|
||||
statusChange:EventEmitter;
|
||||
|
||||
constructor() {
|
||||
this.statusChange = new EventEmitter();
|
||||
}
|
||||
|
||||
onComplete() {
|
||||
this.statusChange.next('completed');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 hasLifecycleHook
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
hasLifecycleHook(hook:string)
|
||||
|
||||
:markdown
|
||||
Returns true if a directive participates in a given `LifecycleEvent`.
|
||||
|
||||
See <a href="onChange-var.html"><code>onChange</code></a>, <a href="onDestroy-var.html"><code>onDestroy</code></a>, <a href="onAllChangesDone-var.html"><code>onAllChangesDone</code></a> for details.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 hostListeners
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies which DOM hostListeners a directive listens to.
|
||||
|
||||
The `hostListeners` property defines a set of `event` to `method` key-value pairs:
|
||||
|
||||
- `event1`: the DOM event that the directive listens to.
|
||||
- `statement`: the statement to execute when the event occurs.
|
||||
If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM event.
|
||||
|
||||
To listen to global events, a target must be added to the event name.
|
||||
The target can be `window`, `document` or `body`.
|
||||
|
||||
When writing a directive event binding, you can also refer to the following local variables:
|
||||
- `$event`: Current event object which triggered the event.
|
||||
- `$target`: The source of the event. This will be either a DOM element or an Angular directive.
|
||||
(will be implemented in later release)
|
||||
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Directive({
|
||||
hostListeners: {
|
||||
'event1': 'onMethod1(arguments)',
|
||||
'target:event2': 'onMethod2(arguments)',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Basic Event Binding:
|
||||
|
||||
Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
|
||||
You would define the event binding as follows:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: 'input',
|
||||
hostListeners: {
|
||||
'change': 'onChange($event)',
|
||||
'window:resize': 'onResize($event)'
|
||||
}
|
||||
})
|
||||
class InputDecorator {
|
||||
onChange(event:Event) {
|
||||
}
|
||||
onResize(event:Event) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 lifecycle
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies a set of lifecycle hostListeners in which the directive participates.
|
||||
|
||||
See <a href="onChange-var.html"><code>onChange</code></a>, <a href="onDestroy-var.html"><code>onDestroy</code></a>, <a href="onAllChangesDone-var.html"><code>onAllChangesDone</code></a> for details.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 properties
|
||||
|
||||
|
||||
:markdown
|
||||
Enumerates the set of properties that accept data binding for a directive.
|
||||
|
||||
The `properties` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
key-value pairs:
|
||||
|
||||
- `directiveProperty` specifies the component property where the value is written.
|
||||
- `bindingProperty` specifies the DOM property where the value is read from.
|
||||
|
||||
You can include a <a href="../pipes/Pipe-class.html"><code>Pipe</code></a> when specifying a `bindingProperty` to allow for data transformation and structural
|
||||
change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
@Directive({
|
||||
properties: {
|
||||
'directiveProperty1': 'bindingProperty1',
|
||||
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Basic Property Binding
|
||||
|
||||
We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
|
||||
with standard Angular syntax. For example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[tooltip]',
|
||||
properties: {
|
||||
'text': 'tooltip'
|
||||
}
|
||||
})
|
||||
class Tooltip {
|
||||
set text(text) {
|
||||
// This will get called every time the 'tooltip' binding changes with the new value.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
|
||||
shown in the HTML template below:
|
||||
|
||||
```html
|
||||
<div [tooltip]="someExpression">...</div>
|
||||
<div tooltip="Some Text">...</div>
|
||||
```
|
||||
|
||||
Whenever the `someExpression` expression changes, the `properties` declaration instructs
|
||||
Angular to update the `Tooltip`'s `text` property.
|
||||
|
||||
|
||||
|
||||
## Bindings With Pipes
|
||||
|
||||
You can also use pipes when writing binding definitions for a directive.
|
||||
|
||||
For example, we could write a binding that updates the directive on structural changes, rather than on reference
|
||||
changes, as normally occurs in change detection.
|
||||
|
||||
See <a href="../pipes/Pipe-class.html"><code>Pipe</code></a> and <a href="../pipes/keyValDiff-var.html"><code>keyValDiff</code></a> documentation for more details.
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
properties: {
|
||||
'classChanges': 'classSet | keyValDiff'
|
||||
}
|
||||
})
|
||||
class ClassSet {
|
||||
set classChanges(changes:KeyValueChanges) {
|
||||
// This will get called every time the `class-set` expressions changes its structure.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The template that this directive is used in may also contain its own pipes. For example:
|
||||
|
||||
```html
|
||||
<div [class-set]="someExpression | somePipe">
|
||||
```
|
||||
|
||||
In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 selector
|
||||
|
||||
|
||||
:markdown
|
||||
The CSS selector that triggers the instantiation of a directive.
|
||||
|
||||
Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.
|
||||
|
||||
`selector` may be declared as one of the following:
|
||||
|
||||
- `element-name`: select by element name.
|
||||
- `.class`: select by class name.
|
||||
- `[attribute]`: select by attribute name.
|
||||
- `[attribute=value]`: select by attribute name and value.
|
||||
- `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
|
||||
- `selector1, selector2`: select if either `selector1` or `selector2` matches.
|
||||
|
||||
|
||||
|
||||
|
||||
Suppose we have a directive with an `input[type=text]` selector.
|
||||
|
||||
And the following HTML:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="text">
|
||||
<input type="radio">
|
||||
<form>
|
||||
```
|
||||
|
||||
The directive would only be instantiated on the `<input type="text">` element.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
.l-main-section
|
||||
h2 onAllChangesDone <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive when the bindings of all its children have been changed.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
class ClassSet {
|
||||
|
||||
onAllChangesDone() {
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
.l-main-section
|
||||
h2 onChange <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive when any of its bindings have changed.
|
||||
|
||||
This method is called right after the directive's bindings have been checked,
|
||||
and before any of its children's bindings have been checked.
|
||||
|
||||
It is invoked only if at least one of the directive's bindings has changed.
|
||||
|
||||
## Example:
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[class-set]',
|
||||
properties: {
|
||||
'propA': 'propA'
|
||||
'propB': 'propB'
|
||||
},
|
||||
lifecycle: [onChange]
|
||||
})
|
||||
class ClassSet {
|
||||
propA;
|
||||
propB;
|
||||
onChange(changes:{[idx: string, PropertyUpdate]}) {
|
||||
// This will get called after any of the properties have been updated.
|
||||
if (changes['propA']) {
|
||||
// if propA was updated
|
||||
}
|
||||
if (changes['propA']) {
|
||||
// if propB was updated
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
.l-main-section
|
||||
h2 onDestroy <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
||||
|
||||
:markdown
|
||||
Notify a directive whenever a <a href="View-class.html"><code>View</code></a> that contains it is destroyed.
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
@Decorator({
|
||||
...,
|
||||
lifecycle: [onDestroy]
|
||||
})
|
||||
class ClassSet {
|
||||
onDestroy() {
|
||||
// invoked to notify directive of the containing view destruction.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/interfaces.js#L34">angular2/src/change_detection/interfaces.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
Interface used by Angular to control the change detection strategy for an application.
|
||||
|
||||
Angular implements the following change detection strategies by default:
|
||||
|
||||
- <a href="DynamicChangeDetection-class.html"><code>DynamicChangeDetection</code></a>: slower, but does not require `eval()`.
|
||||
- <a href="JitChangeDetection-class.html"><code>JitChangeDetection</code></a>: faster, but requires `eval()`.
|
||||
|
||||
In JavaScript, you should always use `JitChangeDetection`, unless you are in an environment that has
|
||||
[CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP), such as a Chrome Extension.
|
||||
|
||||
In Dart, use `DynamicChangeDetection` during development. The Angular transformer generates an analog to the
|
||||
`JitChangeDetection` strategy at compile time.
|
||||
|
||||
|
||||
See: <a href="DynamicChangeDetection-class.html"><code>DynamicChangeDetection</code></a>, <a href="JitChangeDetection-class.html"><code>JitChangeDetection</code></a>
|
||||
|
||||
# Example
|
||||
```javascript
|
||||
bootstrap(MyApp, [bind(ChangeDetection).toValue(dynamicChangeDetection)]);
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 createProtoChangeDetector
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createProtoChangeDetector(name:string, changeControlStrategy:string=DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detector_ref.js#L11">angular2/src/change_detection/change_detector_ref.js (line 11)</a>
|
||||
|
||||
:markdown
|
||||
Controls change detection.
|
||||
|
||||
<a href="ChangeDetectorRef-class.html"><code>ChangeDetectorRef</code></a> allows requesting checks for detectors that rely on observables. It also allows detaching and
|
||||
attaching change detector subtrees.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(cd:ChangeDetector)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 detach
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
detach()
|
||||
|
||||
:markdown
|
||||
Detaches the change detector from the change detector tree.
|
||||
|
||||
The detached change detector will not be checked until it is reattached.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 reattach
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
reattach()
|
||||
|
||||
:markdown
|
||||
Reattach the change detector to the change detector tree.
|
||||
|
||||
This also requests a check of this change detector. This reattached change detector will be checked during the
|
||||
next change detection run.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 requestCheck
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
requestCheck()
|
||||
|
||||
:markdown
|
||||
Request to check all ON_PUSH ancestors.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L51">angular2/src/change_detection/change_detection.js (line 51)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(registry:PipeRegistry)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 createProtoChangeDetector
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 registry
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L68">angular2/src/change_detection/change_detection.js (line 68)</a>
|
||||
|
||||
:markdown
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(registry:PipeRegistry)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 createProtoChangeDetector
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 registry
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/life_cycle/life_cycle.js#L31">angular2/src/core/life_cycle/life_cycle.js (line 31)</a>
|
||||
|
||||
:markdown
|
||||
Provides access to explicitly trigger change detection in an application.
|
||||
|
||||
By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When testing, or in some
|
||||
limited application use cases, a developer can also trigger change detection with the `lifecycle.tick()` method.
|
||||
|
||||
Each Angular application has a single `LifeCycle` instance.
|
||||
|
||||
# Example
|
||||
|
||||
This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which invokes
|
||||
`lifecycle.tick()` on your behalf.
|
||||
|
||||
```javascript
|
||||
bootstrap(MyApp).then((ref:ComponentRef) => {
|
||||
var lifeCycle = ref.injector.get(LifeCycle);
|
||||
var myApp = ref.instance;
|
||||
|
||||
ref.doSomething();
|
||||
lifecycle.tick();
|
||||
});
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(exceptionHandler:ExceptionHandler, changeDetector:ChangeDetector = null, enforceNoNewChanges:boolean = false)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 registerWith
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
registerWith(zone:VmTurnZone, changeDetector:ChangeDetector = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 tick
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
tick()
|
||||
|
||||
:markdown
|
||||
Invoke this method to explicitly process change detection and its side-effects.
|
||||
|
||||
In development mode, `tick()` also performs a second change detection cycle to ensure that no further
|
||||
changes are detected. If additional changes are picked up during this second cycle, bindings in the app have
|
||||
side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error,
|
||||
since an Angular application can only have one change detection pass during which all change detection must
|
||||
complete.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"DynamicChangeDetection-class" : {
|
||||
"title" : "DynamicChangeDetection Class"
|
||||
},
|
||||
|
||||
"JitChangeDetection-class" : {
|
||||
"title" : "JitChangeDetection Class"
|
||||
},
|
||||
|
||||
"ChangeDetectorRef-class" : {
|
||||
"title" : "ChangeDetectorRef Class"
|
||||
},
|
||||
|
||||
"ChangeDetection-class" : {
|
||||
"title" : "ChangeDetection Class"
|
||||
},
|
||||
|
||||
"LifeCycle-class" : {
|
||||
"title" : "LifeCycle Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/core.html">angular2/core</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/exception_handler.js#L34">angular2/src/core/exception_handler.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
Provides a hook for centralized exception handling.
|
||||
|
||||
The default implementation of `ExceptionHandler` prints error messages to the `Console`. To intercept error handling,
|
||||
write a custom exception handler that replaces this default as appropriate for your app.
|
||||
|
||||
# Example
|
||||
|
||||
```javascript
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
injectables: [
|
||||
bind(ExceptionHandler).toClass(MyExceptionHandler)
|
||||
]
|
||||
})
|
||||
@View(...)
|
||||
class MyApp { ... }
|
||||
|
||||
|
||||
class MyExceptionHandler implements ExceptionHandler {
|
||||
call(error, stackTrace = null, reason = null) {
|
||||
// do something with the exception
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 call
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
call(error, stackTrace = null, reason = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/core.html">angular2/core</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/ng_element.js#L13">angular2/src/core/compiler/ng_element.js (line 13)</a>
|
||||
|
||||
:markdown
|
||||
Allows direct access to the underlying DOM element.
|
||||
|
||||
Attention: NgElement will be replaced by a different concept
|
||||
for accessing an element in a way that is compatible with the render layer.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(view, boundElementIndex)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 domElement
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 getAttribute
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
getAttribute(name:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/core.html">angular2/core</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/zone/vm_turn_zone.js#L14">angular2/src/core/zone/vm_turn_zone.js (line 14)</a>
|
||||
|
||||
:markdown
|
||||
A wrapper around zones that lets you schedule tasks after it has executed a task.
|
||||
|
||||
The wrapper maintains an "inner" and "outer" `Zone`. The application code will executes
|
||||
in the "inner" zone unless `runOutsideAngular` is explicitely called.
|
||||
|
||||
A typical application will create a singleton `VmTurnZone` whose outer `Zone` is the root `Zone`
|
||||
and whose default `onTurnDone` runs the Angular digest.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor({enableLongStackTrace}, [object Object])
|
||||
|
||||
:markdown
|
||||
Associates with this
|
||||
|
||||
- an "outer" zone, which is the one that created this.
|
||||
- an "inner" zone, which is a child of the outer zone.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 initCallbacks
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
initCallbacks({onTurnStart, onTurnDone, onScheduleMicrotask, onErrorHandler} = {}, [object Object], [object Object], [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
Initializes the zone hooks.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 run
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
run(fn)
|
||||
|
||||
:markdown
|
||||
Runs `fn` in the inner zone and returns whatever it returns.
|
||||
|
||||
In a typical app where the inner zone is the Angular zone, this allows one to make use of the
|
||||
Angular's auto digest mechanism.
|
||||
|
||||
```
|
||||
var zone: VmTurnZone = <ref to the application zone>;
|
||||
|
||||
zone.run(() => {
|
||||
// auto-digest will run after this function is called from JS
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 runOutsideAngular
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
runOutsideAngular(fn)
|
||||
|
||||
:markdown
|
||||
Runs `fn` in the outer zone and returns whatever it returns.
|
||||
|
||||
In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's
|
||||
auto-digest mechanism.
|
||||
|
||||
```
|
||||
var zone: VmTurnZone = <ref to the application zone>;
|
||||
|
||||
zone.runOusideAngular(() => {
|
||||
element.onClick(() => {
|
||||
// Clicking on the element would not trigger the change detection
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"bootstrap-function" : {
|
||||
"title" : "bootstrap Function"
|
||||
},
|
||||
|
||||
"NgElement-class" : {
|
||||
"title" : "NgElement Class"
|
||||
},
|
||||
|
||||
"ExceptionHandler-class" : {
|
||||
"title" : "ExceptionHandler Class"
|
||||
},
|
||||
|
||||
"VmTurnZone-class" : {
|
||||
"title" : "VmTurnZone Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
.l-main-section
|
||||
h2(class="function export") bootstrap
|
||||
|
||||
p <code>(appComponentType: Type, componentInjectableBindings: List<Binding> = null, errorReporter: Function = null)</code>
|
||||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/core.html">angular2/core</a>
|
||||
|
||||
:markdown
|
||||
Bootstrapping for Angular applications.
|
||||
|
||||
You instantiate an Angular application by explicitly specifying a component to use as the root component for your
|
||||
application via the `bootstrap()` method.
|
||||
|
||||
## Simple Example
|
||||
|
||||
Assuming this `index.html`:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<!-- load Angular script tags here. -->
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike Angular 1, Angular 2
|
||||
does not compile/process bindings in `index.html`. This is mainly for security reasons, as well as architectural
|
||||
changes in Angular 2. This means that `index.html` can safely be processed using server-side technologies such as
|
||||
bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2 component double-curly
|
||||
`{{ syntax }}`.
|
||||
|
||||
We can use this script code:
|
||||
|
||||
```
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: 'Hello {{ name }}!'
|
||||
})
|
||||
class MyApp {
|
||||
name:string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'World';
|
||||
}
|
||||
}
|
||||
|
||||
main() {
|
||||
return bootstrap(MyApp);
|
||||
}
|
||||
```
|
||||
|
||||
When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument, Angular performs the
|
||||
following tasks:
|
||||
|
||||
1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
|
||||
the angular component.
|
||||
2. It creates a new child injector (from the platform injector) and configures the injector with the component's
|
||||
`injectables`. Optionally, you can also override the injector configuration for an app by invoking
|
||||
`bootstrap` with the `componentInjectableBindings` argument.
|
||||
3. It creates a new `Zone` and connects it to the angular application's change detection domain instance.
|
||||
4. It creates a shadow DOM on the selected component's host element and loads the template into it.
|
||||
5. It instantiates the specified component.
|
||||
6. Finally, Angular performs change detection to apply the initial data bindings for the application.
|
||||
|
||||
|
||||
## Instantiating Multiple Applications on a Single Page
|
||||
|
||||
There are two ways to do this.
|
||||
|
||||
|
||||
### Isolated Applications
|
||||
|
||||
Angular creates a new application each time that the `bootstrap()` method is invoked. When multiple applications
|
||||
are created for a page, Angular treats each application as independent within an isolated change detection and
|
||||
`Zone` domain. If you need to share data between applications, use the strategy described in the next
|
||||
section, "Applications That Share Change Detection."
|
||||
|
||||
|
||||
### Applications That Share Change Detection
|
||||
|
||||
If you need to bootstrap multiple applications that share common data, the applications must share a common
|
||||
change detection and zone. To do that, create a meta-component that lists the application components in its template.
|
||||
By only invoking the `bootstrap()` method once, with the meta-component as its argument, you ensure that only a
|
||||
single change detection zone is created and therefore data can be shared across the applications.
|
||||
|
||||
|
||||
## Platform Injector
|
||||
|
||||
When working within a browser window, there are many singleton resources: cookies, title, location, and others.
|
||||
Angular services that represent these resources must likewise be shared across all Angular applications that
|
||||
occupy the same browser window. For this reason, Angular creates exactly one global platform injector which stores
|
||||
all shared services, and each angular application injector has the platform injector as its parent.
|
||||
|
||||
Each application has its own private injector as well. When there are multiple applications on a page, Angular treats
|
||||
each application injector's services as private to that application.
|
||||
|
||||
|
||||
# API
|
||||
- `appComponentType`: The root component which should act as the application. This is a reference to a `Type`
|
||||
which is annotated with `@Component(...)`.
|
||||
- `componentInjectableBindings`: An additional set of bindings that can be added to `injectables` for the
|
||||
<a href="../annotations/Component-class.html"><code>Component</code></a> to override default injection behavior.
|
||||
- `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
|
||||
|
||||
Returns a `Promise` with the application`s private <a href="../di/Injector-class.html"><code>Injector</code></a>.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di.html">angular2/di</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L49">angular2/src/di/binding.js (line 49)</a>
|
||||
|
||||
:markdown
|
||||
Describes how the <a href="Injector-class.html"><code>Injector</code></a> should instantiate a given token.
|
||||
|
||||
See <a href="bind-function.html"><code>bind</code></a>.
|
||||
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(String, { toValue: 'Hello' })
|
||||
]);
|
||||
|
||||
expect(injector.get(String)).toEqual('Hello');
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(token, {
|
||||
toClass,
|
||||
toValue,
|
||||
toAlias,
|
||||
toFactory,
|
||||
toAsyncFactory,
|
||||
deps
|
||||
})
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 dependencies
|
||||
|
||||
|
||||
:markdown
|
||||
Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies (as `token`s) which
|
||||
should be injected into the factory function.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(Number, { toFactory: () => { return 1+2; }}),
|
||||
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
|
||||
dependencies: [String] })
|
||||
]);
|
||||
|
||||
expect(injector.get(Number)).toEqual(3);
|
||||
expect(injector.get(String)).toEqual('Value: 3');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolve
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
resolve()
|
||||
|
||||
:markdown
|
||||
Converts the <a href="Binding-class.html"><code>Binding</code></a> into <a href="ResolvedBinding-class.html"><code>ResolvedBinding</code></a>.
|
||||
|
||||
<a href="Injector-class.html"><code>Injector</code></a> internally only uses <a href="ResolvedBinding-class.html"><code>ResolvedBinding</code></a>, <a href="Binding-class.html"><code>Binding</code></a> contains convenience binding syntax.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAlias
|
||||
|
||||
|
||||
:markdown
|
||||
Binds a key to the alias for an existing key.
|
||||
|
||||
An alias means that <a href="Injector-class.html"><code>Injector</code></a> returns the same instance as if the alias token was used. This is in contrast to
|
||||
`toClass` where a separate instance of `toClass` is returned.
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toAlias: Car })
|
||||
]);
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toClass: Car })
|
||||
]);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAsyncFactory
|
||||
|
||||
|
||||
:markdown
|
||||
Binds a key to a function which computes the value asynchronously.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(Number, { toAsyncFactory: () => {
|
||||
return new Promise((resolve) => resolve(1 + 2));
|
||||
}}),
|
||||
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
|
||||
dependencies: [String]})
|
||||
]);
|
||||
|
||||
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
|
||||
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
|
||||
```
|
||||
|
||||
The interesting thing to note is that event though `Number` has an async factory, the `String` factory
|
||||
function takes the resolved value. This shows that the <a href="Injector-class.html"><code>Injector</code></a> delays executing the `String` factory
|
||||
until after the `Number` is resolved. This can only be done if the `token` is retrieved using the
|
||||
`asyncGet` API in the <a href="Injector-class.html"><code>Injector</code></a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toClass
|
||||
|
||||
|
||||
:markdown
|
||||
Binds an interface to an implementation / subclass.
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toClass: Car })
|
||||
]);
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
new Binding(Vehicle, { toAlias: Car })
|
||||
]);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toFactory
|
||||
|
||||
|
||||
:markdown
|
||||
Binds a key to a function which computes the value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(Number, { toFactory: () => { return 1+2; }}),
|
||||
new Binding(String, { toFactory: (value) => { return "Value: " + value; },
|
||||
dependencies: [String] })
|
||||
]);
|
||||
|
||||
expect(injector.get(Number)).toEqual(3);
|
||||
expect(injector.get(String)).toEqual('Value: 3');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toValue
|
||||
|
||||
|
||||
:markdown
|
||||
Binds a key to a value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
new Binding(String, { toValue: 'Hello' })
|
||||
]);
|
||||
|
||||
expect(injector.get(String)).toEqual('Hello');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
Token used when retrieving this binding. Usually the `Type`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di.html">angular2/di</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L315">angular2/src/di/binding.js (line 315)</a>
|
||||
|
||||
:markdown
|
||||
Helper class for the <a href="bind-function.html"><code>bind</code></a> function.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(token)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAlias
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toAlias(aliasToken)
|
||||
|
||||
:markdown
|
||||
Binds a key to the alias for an existing key.
|
||||
|
||||
An alias means that we will return the same instance as if the alias token was used. (This is in contrast to
|
||||
`toClass` where a separet instance of `toClass` will be returned.)
|
||||
|
||||
|
||||
|
||||
Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toAlias(Car)
|
||||
]);
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toClass(Car)
|
||||
]);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toAsyncFactory
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toAsyncFactory(factoryFunction:Function, dependencies:List = null)
|
||||
|
||||
:markdown
|
||||
Binds a key to a function which computes the value asynchronously.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(Number).toAsyncFactory(() => {
|
||||
return new Promise((resolve) => resolve(1 + 2));
|
||||
}),
|
||||
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
|
||||
]);
|
||||
|
||||
injector.asyncGet(Number).then((v) => expect(v).toBe(3));
|
||||
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
|
||||
```
|
||||
|
||||
The interesting thing to note is that event though `Number` has an async factory, the `String` factory
|
||||
function takes the resolved value. This shows that the <a href="Injector-class.html"><code>Injector</code></a> delays executing of the `String` factory
|
||||
until after the `Number` is resolved. This can only be done if the `token` is retrieved using the
|
||||
the `asyncGet` API in the <a href="Injector-class.html"><code>Injector</code></a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toClass
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toClass(type:Type)
|
||||
|
||||
:markdown
|
||||
Binds an interface to an implementation / subclass.
|
||||
|
||||
|
||||
|
||||
Because `toAlias` and `toClass` are often confused, the example contains both use cases for easy comparison.
|
||||
|
||||
```javascript
|
||||
|
||||
class Vehicle {}
|
||||
|
||||
class Car extends Vehicle {}
|
||||
|
||||
var injectorClass = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toClass(Car)
|
||||
]);
|
||||
var injectorAlias = Injector.resolveAndCreate([
|
||||
Car,
|
||||
bind(Vehicle).toAlias(Car)
|
||||
]);
|
||||
|
||||
expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
|
||||
expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
|
||||
|
||||
expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
|
||||
expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toFactory
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toFactory(factoryFunction:Function, dependencies:List = null)
|
||||
|
||||
:markdown
|
||||
Binds a key to a function which computes the value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(Number).toFactory(() => { return 1+2; }}),
|
||||
bind(String).toFactory((v) => { return "Value: " + v; }, [String] })
|
||||
]);
|
||||
|
||||
expect(injector.get(Number)).toEqual(3);
|
||||
expect(injector.get(String)).toEqual('Value: 3');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toValue(value)
|
||||
|
||||
:markdown
|
||||
Binds a key to a value.
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(String).toValue('Hello')
|
||||
]);
|
||||
|
||||
expect(injector.get(String)).toEqual('Hello');
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di.html">angular2/di</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/injector.js#L60">angular2/src/di/injector.js (line 60)</a>
|
||||
|
||||
:markdown
|
||||
A dependency injection container used for resolving dependencies.
|
||||
|
||||
An `Injector` is a replacement for a `new` operator, which can automatically resolve the constructor dependencies.
|
||||
In typical use, application code asks for the dependencies in the constructor and they are resolved by the
|
||||
`Injector`.
|
||||
|
||||
## Example:
|
||||
|
||||
Suppose that we want to inject an `Engine` into class `Car`, we would define it like this:
|
||||
|
||||
```javascript
|
||||
class Engine {
|
||||
}
|
||||
|
||||
class Car {
|
||||
constructor(@Inject(Engine) engine) {
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Next we need to write the code that creates and instantiates the `Injector`. We then ask for the `root` object,
|
||||
`Car`, so that the `Injector` can recursively build all of that object's dependencies.
|
||||
|
||||
```javascript
|
||||
main() {
|
||||
var injector = Injector.resolveAndCreate([Car, Engine]);
|
||||
|
||||
// Get a reference to the `root` object, which will recursively instantiate the tree.
|
||||
var car = injector.get(Car);
|
||||
}
|
||||
```
|
||||
Notice that we don't use the `new` operator because we explicitly want to have the `Injector` resolve all of the
|
||||
object's dependencies automatically.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(bindings:List<ResolvedBinding>, parent:Injector, defaultBindings:boolean, [object Object], [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 asyncGet
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
asyncGet(token, [object Object])
|
||||
|
||||
:markdown
|
||||
Retrieves an instance from the injector asynchronously. Used with asynchronous bindings.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 createChildFromResolved
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createChildFromResolved(bindings:List<ResolvedBinding>, [object Object])
|
||||
|
||||
:markdown
|
||||
Creates a child injector and loads a new set of <a href="ResolvedBinding-class.html"><code>ResolvedBinding</code></a>s into it.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 fromResolvedBindings
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
fromResolvedBindings(bindings:List<ResolvedBinding>, {defaultBindings=false}={}, [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
Creates an injector from previously resolved bindings. This bypasses resolution and flattening. This API is the
|
||||
recommended way to construct injectors in performance-sensitive parts.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 get
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
get(token, [object Object])
|
||||
|
||||
:markdown
|
||||
Retrieves an instance from the injector.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 getOptional
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
getOptional(token, [object Object])
|
||||
|
||||
:markdown
|
||||
Retrieves an instance from the injector.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolve
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
resolve(bindings:List, [object Object])
|
||||
|
||||
:markdown
|
||||
Turns a list of binding definitions into an internal resolved list of resolved bindings.
|
||||
|
||||
A resolution is a process of flattening multiple nested lists and converting individual bindings into a
|
||||
list of <a href="ResolvedBinding-class.html"><code>ResolvedBinding</code></a>s. The resolution can be cached by `resolve` for the <a href="Injector-class.html"><code>Injector</code></a> for
|
||||
performance-sensitive code.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolveAndCreate
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
resolveAndCreate(bindings:List, {defaultBindings=false}={}, [object Object], [object Object])
|
||||
|
||||
:markdown
|
||||
Resolves bindings and creates an injector based on those bindings. This function is slower than the
|
||||
corresponding `fromResolvedBindings` because it needs to resolve bindings first. See `resolve` for the
|
||||
<a href="Injector-class.html"><code>Injector</code></a>.
|
||||
|
||||
Prefer `fromResolvedBindings` in performance-critical code that creates lots of injectors.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 resolveAndCreateChild
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
resolveAndCreateChild(bindings:List, [object Object])
|
||||
|
||||
:markdown
|
||||
Creates a child injector and loads a new set of bindings into it.
|
||||
|
||||
A resolution is a process of flattening multiple nested lists and converting individual bindings into a
|
||||
list of <a href="ResolvedBinding-class.html"><code>ResolvedBinding</code></a>s. The resolution can be cached by `resolve` for the <a href="Injector-class.html"><code>Injector</code></a> for
|
||||
performance-sensitive code.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di.html">angular2/di</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/key.js#L17">angular2/src/di/key.js (line 17)</a>
|
||||
|
||||
:markdown
|
||||
A unique object used for retrieving items from the <a href="Injector-class.html"><code>Injector</code></a>.
|
||||
|
||||
Keys have:
|
||||
- a system-wide unique `id`.
|
||||
- a `token`, usually the `Type` of the instance.
|
||||
|
||||
Keys are used internally by the <a href="Injector-class.html"><code>Injector</code></a> because their system-wide unique `id`s allow the
|
||||
injector to index in arrays rather than looking up items in maps.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(token, id)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 get
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
get(token)
|
||||
|
||||
:markdown
|
||||
Retrieves a `Key` for a token.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 id
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 metadata
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 numberOfKeys
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di.html">angular2/di</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/binding.js#L263">angular2/src/di/binding.js (line 263)</a>
|
||||
|
||||
:markdown
|
||||
An internal resolved representation of a <a href="Binding-class.html"><code>Binding</code></a> used by the <a href="Injector-class.html"><code>Injector</code></a>.
|
||||
|
||||
A <a href="Binding-class.html"><code>Binding</code></a> is resolved when it has a factory function. Binding to a class, alias, or value, are just convenience
|
||||
methods, as <a href="Injector-class.html"><code>Injector</code></a> only operates on calling factory functions.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(key:Key, factory:Function, dependencies:List<Dependency>, providedAsPromise:boolean)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 dependencies
|
||||
|
||||
|
||||
:markdown
|
||||
Arguments (dependencies) to the `factory` function.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 factory
|
||||
|
||||
|
||||
:markdown
|
||||
Factory function which can return an instance of an object represented by a key.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 key
|
||||
|
||||
|
||||
:markdown
|
||||
A key, usually a `Type`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 providedAsPromise
|
||||
|
||||
|
||||
:markdown
|
||||
Specifies whether the `factory` function returns a `Promise`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"Binding-class" : {
|
||||
"title" : "Binding Class"
|
||||
},
|
||||
|
||||
"ResolvedBinding-class" : {
|
||||
"title" : "ResolvedBinding Class"
|
||||
},
|
||||
|
||||
"bind-function" : {
|
||||
"title" : "bind Function"
|
||||
},
|
||||
|
||||
"BindingBuilder-class" : {
|
||||
"title" : "BindingBuilder Class"
|
||||
},
|
||||
|
||||
"Injector-class" : {
|
||||
"title" : "Injector Class"
|
||||
},
|
||||
|
||||
"Key-class" : {
|
||||
"title" : "Key Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
.l-main-section
|
||||
h2(class="function export") bind
|
||||
|
||||
p <code>(token)</code>
|
||||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di.html">angular2/di</a>
|
||||
|
||||
:markdown
|
||||
Provides an API for imperatively constructing <a href="Binding-class.html"><code>Binding</code></a>s.
|
||||
|
||||
This is only relevant for JavaScript. See <a href="BindingBuilder-class.html"><code>BindingBuilder</code></a>.
|
||||
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
bind(MyInterface).toClass(MyClass)
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L110">angular2/src/di/annotations.js (line 110)</a>
|
||||
|
||||
:markdown
|
||||
`DependencyAnnotation` is used by the framework to extend DI.
|
||||
|
||||
Only annotations implementing `DependencyAnnotation` are added to the list of dependency properties.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
class Parent extends DependencyAnnotation {}
|
||||
class NotDependencyProperty {}
|
||||
|
||||
class AComponent {
|
||||
constructor(@Parent @NotDependencyProperty aService:AService) {}
|
||||
}
|
||||
```
|
||||
|
||||
will create the following dependency:
|
||||
|
||||
```
|
||||
new Dependency(Key.get(AService), [new Parent()])
|
||||
```
|
||||
|
||||
The framework can use `new Parent()` to handle the `aService` dependency
|
||||
in a specific way.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L13">angular2/src/di/annotations.js (line 13)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that specifies a dependency.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@Inject(MyService) aService:MyService) {}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(token)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L55">angular2/src/di/annotations.js (line 55)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that creates a synchronous lazy dependency.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@InjectLazy(MyService) aServiceFn:Function) {
|
||||
var aService:MyService = aServiceFn();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(token)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L34">angular2/src/di/annotations.js (line 34)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that specifies a `Promise` of a dependency.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@InjectPromise(MyService) aServicePromise:Promise<MyService>) {
|
||||
aServicePromise.then(aService:MyService => ...);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(token)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 token
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L134">angular2/src/di/annotations.js (line 134)</a>
|
||||
|
||||
:markdown
|
||||
A marker annotation that marks a class as available to `Injector` for creation. Used by tooling for
|
||||
generating constructor stubs.
|
||||
|
||||
```
|
||||
class NeedsService {
|
||||
constructor(svc:UsefulService) {}
|
||||
}
|
||||
|
||||
@Injectable
|
||||
class UsefulService {}
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L77">angular2/src/di/annotations.js (line 77)</a>
|
||||
|
||||
:markdown
|
||||
A parameter annotation that marks a dependency as optional. <a href="../di/Injector-class.html"><code>Injector</code></a> provides `null` if the dependency is not
|
||||
found.
|
||||
|
||||
```
|
||||
class AComponent {
|
||||
constructor(@Optional() aService:MyService) {
|
||||
this.aService = aService;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"Inject-class" : {
|
||||
"title" : "Inject Class"
|
||||
},
|
||||
|
||||
"InjectPromise-class" : {
|
||||
"title" : "InjectPromise Class"
|
||||
},
|
||||
|
||||
"InjectLazy-class" : {
|
||||
"title" : "InjectLazy Class"
|
||||
},
|
||||
|
||||
"Optional-class" : {
|
||||
"title" : "Optional Class"
|
||||
},
|
||||
|
||||
"DependencyAnnotation-class" : {
|
||||
"title" : "DependencyAnnotation Class"
|
||||
},
|
||||
|
||||
"Injectable-class" : {
|
||||
"title" : "Injectable Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L32">angular2/src/di/exceptions.js (line 32)</a>
|
||||
|
||||
:markdown
|
||||
Base class for all errors arising from misconfigured bindings.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(key, constructResolvingMessage:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 addKey
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
addKey(key)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 constructResolvingMessage
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 keys
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 message
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L95">angular2/src/di/exceptions.js (line 95)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when trying to retrieve an async <a href="../di/Binding-class.html"><code>Binding</code></a> using the sync API.
|
||||
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
var injector = Injector.resolveAndCreate([
|
||||
bind(Number).toAsyncFactory(() => {
|
||||
return new Promise((resolve) => resolve(1 + 2));
|
||||
}),
|
||||
bind(String).toFactory((v) => { return "Value: " + v; }, [String])
|
||||
]);
|
||||
|
||||
injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3'));
|
||||
expect(() => {
|
||||
injector.get(String);
|
||||
}).toThrowError(AsycBindingError);
|
||||
```
|
||||
|
||||
The above example throws because `String` depends on `Number` which is async. If any binding in the dependency
|
||||
graph is async then the graph can only be retrieved using the `asyncGet` API.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(key)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L124">angular2/src/di/exceptions.js (line 124)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when dependencies form a cycle.
|
||||
|
||||
## Example:
|
||||
|
||||
```javascript
|
||||
class A {
|
||||
constructor(b:B) {}
|
||||
}
|
||||
class B {
|
||||
constructor(a:A) {}
|
||||
}
|
||||
```
|
||||
|
||||
Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(key)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L141">angular2/src/di/exceptions.js (line 141)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when a constructing type returns with an Error.
|
||||
|
||||
The `InstantiationError` class contains the original error plus the dependency graph which caused this object to be
|
||||
instantiated.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(cause, key)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 cause
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 causeKey
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L161">angular2/src/di/exceptions.js (line 161)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when an object other then <a href="../di/Binding-class.html"><code>Binding</code></a> (or `Type`) is passed to <a href="../di/Injector-class.html"><code>Injector</code></a> creation.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(binding)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 message
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L181">angular2/src/di/exceptions.js (line 181)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when the class has no annotation information.
|
||||
|
||||
Lack of annotation information prevents the <a href="../di/Injector-class.html"><code>Injector</code></a> from determining which dependencies need to be injected into
|
||||
the constructor.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(typeOrFunc)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 message
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 toString
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
toString()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/di_errors.html">angular2/di_errors</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/exceptions.js#L61">angular2/src/di/exceptions.js (line 61)</a>
|
||||
|
||||
:markdown
|
||||
Thrown when trying to retrieve a dependency by `Key` from <a href="../di/Injector-class.html"><code>Injector</code></a>, but the <a href="../di/Injector-class.html"><code>Injector</code></a> does not have a
|
||||
<a href="../di/Binding-class.html"><code>Binding</code></a> for <a href="../di/Key-class.html"><code>Key</code></a>.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(key)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"AbstractBindingError-class" : {
|
||||
"title" : "AbstractBindingError Class"
|
||||
},
|
||||
|
||||
"NoBindingError-class" : {
|
||||
"title" : "NoBindingError Class"
|
||||
},
|
||||
|
||||
"AsyncBindingError-class" : {
|
||||
"title" : "AsyncBindingError Class"
|
||||
},
|
||||
|
||||
"CyclicDependencyError-class" : {
|
||||
"title" : "CyclicDependencyError Class"
|
||||
},
|
||||
|
||||
"InstantiationError-class" : {
|
||||
"title" : "InstantiationError Class"
|
||||
},
|
||||
|
||||
"InvalidBindingError-class" : {
|
||||
"title" : "InvalidBindingError Class"
|
||||
},
|
||||
|
||||
"NoAnnotationError-class" : {
|
||||
"title" : "NoAnnotationError Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/directives.html">angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/for.js#L44">angular2/src/directives/for.js (line 44)</a>
|
||||
|
||||
:markdown
|
||||
The `For` directive instantiates a template once per item from an iterable. The context for each
|
||||
instantiated template inherits from the outer context with the given loop variable set to the
|
||||
current item from the iterable.
|
||||
|
||||
It is possible to alias the `index` to a local variable that will be set to the current loop
|
||||
iteration in the template context.
|
||||
|
||||
When the contents of the iterator changes, `For` makes the corresponding changes to the DOM:
|
||||
|
||||
* When an item is added, a new instance of the template is added to the DOM.
|
||||
* When an item is removed, its template instance is removed from the DOM.
|
||||
* When items are reordered, their respective templates are reordered in the DOM.
|
||||
|
||||
# Example
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li *for="#error in errors; #i = index">
|
||||
Error {{i}} of {{errors.length}}: {{error.message}}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
# Syntax
|
||||
|
||||
- `<li *for="#item of items; #i = index">...</li>`
|
||||
- `<li template="for #item of items; #i=index">...</li>`
|
||||
- `<template [for]="#item" [of]="items" #i="index"><li>...</li></template>`
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer:ViewContainer)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 bulkInsert
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
bulkInsert(tuples, viewContainer)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 bulkRemove
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
bulkRemove(tuples, viewContainer)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 iterableChanges
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
iterableChanges(changes)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 perViewChange
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
perViewChange(view, record)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 viewContainer
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/directives.html">angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/if.js#L33">angular2/src/directives/if.js (line 33)</a>
|
||||
|
||||
:markdown
|
||||
Removes or recreates a portion of the DOM tree based on an {expression}.
|
||||
|
||||
If the expression assigned to `if` evaluates to a false value then the element is removed from the
|
||||
DOM, otherwise a clone of the element is reinserted into the DOM.
|
||||
|
||||
# Example:
|
||||
|
||||
```
|
||||
<div *if="errorCount > 0" class="error">
|
||||
<!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
|
||||
{{errorCount}} errors detected
|
||||
</div>
|
||||
```
|
||||
|
||||
# Syntax
|
||||
|
||||
- `<div *if="condition">...</div>`
|
||||
- `<div template="if condition">...</div>`
|
||||
- `<template [if]="condition"><div>...</div></template>`
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer: ViewContainer)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 condition
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
condition(newCondition)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 prevCondition
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 viewContainer
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/directives.html">angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/non_bindable.js#L21">angular2/src/directives/non_bindable.js (line 21)</a>
|
||||
|
||||
:markdown
|
||||
The `NonBindable` directive tells Angular not to compile or bind the contents of the current
|
||||
DOM element. This is useful if the element contains what appears to be Angular directives and
|
||||
bindings but which should be ignored by Angular. This could be the case if you have a site that
|
||||
displays snippets of code, for instance.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
<div>Normal: {{1 + 2}}</div> // output "Normal: 3"
|
||||
<div non-bindable>Ignored: {{1 + 2}}</div> // output "Ignored: {{1 + 2}}"
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/directives.html">angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L39">angular2/src/directives/switch.js (line 39)</a>
|
||||
|
||||
:markdown
|
||||
The `Switch` directive is used to conditionally swap DOM structure on your template based on a
|
||||
scope expression.
|
||||
Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be
|
||||
preserved at the location as specified in the template.
|
||||
|
||||
`Switch` simply chooses nested elements and makes them visible based on which element matches
|
||||
the value obtained from the evaluated expression. In other words, you define a container element
|
||||
(where you place the directive), place an expression on the **`[switch]="..."` attribute**),
|
||||
define any inner elements inside of the directive and place a `[switch-when]` attribute per
|
||||
element.
|
||||
The when attribute is used to inform Switch which element to display when the expression is
|
||||
evaluated. If a matching expression is not found via a when attribute then an element with the
|
||||
default attribute is displayed.
|
||||
|
||||
# Example:
|
||||
|
||||
```
|
||||
<ANY [switch]="expression">
|
||||
<template [switch-when]="whenExpression1">...</template>
|
||||
<template [switch-when]="whenExpression1">...</template>
|
||||
<template [switch-default]>...</template>
|
||||
</ANY>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 value
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
value(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/directives.html">angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L187">angular2/src/directives/switch.js (line 187)</a>
|
||||
|
||||
:markdown
|
||||
Defines a default case statement.
|
||||
|
||||
Default case statements are displayed when no `SwitchWhen` match the `switch` value.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
<template [switch-default]>...</template>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer: ViewContainer, sswitch: Switch)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/directives.html">angular2/directives</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/directives/switch.js#L152">angular2/src/directives/switch.js (line 152)</a>
|
||||
|
||||
:markdown
|
||||
Defines a case statement as an expression.
|
||||
|
||||
If multiple `SwitchWhen` match the `Switch` value, all of them are displayed.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
// match against a context variable
|
||||
<template [switch-when]="contextVariable">...</template>
|
||||
|
||||
// match against a constant string
|
||||
<template [switch-when]="'stringValue'">...</template>
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(viewContainer: ViewContainer, sswitch: Switch)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 when
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
when(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"For-class" : {
|
||||
"title" : "For Class"
|
||||
},
|
||||
|
||||
"If-class" : {
|
||||
"title" : "If Class"
|
||||
},
|
||||
|
||||
"NonBindable-class" : {
|
||||
"title" : "NonBindable Class"
|
||||
},
|
||||
|
||||
"Switch-class" : {
|
||||
"title" : "Switch Class"
|
||||
},
|
||||
|
||||
"SwitchWhen-class" : {
|
||||
"title" : "SwitchWhen Class"
|
||||
},
|
||||
|
||||
"SwitchDefault-class" : {
|
||||
"title" : "SwitchDefault Class"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||
if slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
|
||||
|
||||
li.c8
|
||||
!= partial("../../../../_includes/_hover-card", {name: page.title, url: url })
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L62">angular2/src/forms/directives.js (line 62)</a>
|
||||
|
||||
:markdown
|
||||
The accessor for writing a value and listening to changes on a checkbox input element.
|
||||
|
||||
|
||||
# Example
|
||||
```
|
||||
<input type="checkbox" [control]="rememberLogin">
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(cd:ControlDirective, setCheckedProperty:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onChange
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 writeValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
writeValue(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L96">angular2/src/forms/model.js (line 96)</a>
|
||||
|
||||
:markdown
|
||||
Defines a part of a form that cannot be divided into other controls.
|
||||
|
||||
`Control` is one of the three fundamental building blocks used to define forms in Angular, along with
|
||||
<a href="ControlGroup-class.html"><code>ControlGroup</code></a> and <a href="ControlArray-class.html"><code>ControlArray</code></a>.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(value:any, validator:Function = Validators.nullValidator)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 updateValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
updateValue(value:any)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L219">angular2/src/forms/model.js (line 219)</a>
|
||||
|
||||
:markdown
|
||||
Defines a part of a form, of variable length, that can contain other controls.
|
||||
|
||||
A `ControlArray` aggregates the values and errors of each <a href="Control-class.html"><code>Control</code></a> in the group. Thus, if one of the controls
|
||||
in a group is invalid, the entire group is invalid. Similarly, if a control changes its value, the entire group
|
||||
changes as well.
|
||||
|
||||
`ControlArray` is one of the three fundamental building blocks used to define forms in Angular, along with
|
||||
<a href="Control-class.html"><code>Control</code></a> and <a href="ControlGroup-class.html"><code>ControlGroup</code></a>. <a href="ControlGroup-class.html"><code>ControlGroup</code></a> can also contain other controls, but is of fixed
|
||||
length.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(controls:List<AbstractControl>, validator:Function = Validators.array)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 at
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
at(index:number)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controls
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 insert
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
insert(index:number, control:AbstractControl)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 length
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 push
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
push(control:AbstractControl)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 removeAt
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
removeAt(index:number)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L114">angular2/src/forms/directives.js (line 114)</a>
|
||||
|
||||
:markdown
|
||||
Binds a control to a DOM element.
|
||||
|
||||
# Example
|
||||
|
||||
In this example, we bind the control to an input element. When the value of the input element changes, the value of
|
||||
the control will reflect that change. Likewise, if the value of the control changes, the input element reflects that
|
||||
change.
|
||||
|
||||
Here we use <a href="FormDirectives-var.html"><code>FormDirectives</code></a>, rather than importing each form directive individually, e.g.
|
||||
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
|
||||
```
|
||||
@Component({selector: "login-comp"})
|
||||
@View({
|
||||
directives: [FormDirectives],
|
||||
inline: "<input type='text' [control]='loginControl'>"
|
||||
})
|
||||
class LoginComp {
|
||||
loginControl:Control;
|
||||
|
||||
constructor() {
|
||||
this.loginControl = new Control('');
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controlOrName
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onChange
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
onChange(_)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 validator
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 valueAccessor
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/model.js#L132">angular2/src/forms/model.js (line 132)</a>
|
||||
|
||||
:markdown
|
||||
Defines a part of a form, of fixed length, that can contain other controls.
|
||||
|
||||
A ControlGroup aggregates the values and errors of each <a href="Control-class.html"><code>Control</code></a> in the group. Thus, if one of the controls
|
||||
in a group is invalid, the entire group is invalid. Similarly, if a control changes its value, the entire group
|
||||
changes as well.
|
||||
|
||||
`ControlGroup` is one of the three fundamental building blocks used to define forms in Angular, along with
|
||||
<a href="Control-class.html"><code>Control</code></a> and <a href="ControlArray-class.html"><code>ControlArray</code></a>. <a href="ControlArray-class.html"><code>ControlArray</code></a> can also contain other controls, but is of variable
|
||||
length.
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(controls:StringMap, optionals:StringMap = null, validator:Function = Validators.group)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 contains
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
contains(controlName:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controls
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 exclude
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
exclude(controlName:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 include
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
include(controlName:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L210">angular2/src/forms/directives.js (line 210)</a>
|
||||
|
||||
:markdown
|
||||
Binds a control group to a DOM element.
|
||||
|
||||
# Example
|
||||
|
||||
In this example, we bind the control group to the form element, and we bind the login and password controls to the
|
||||
login and password elements.
|
||||
|
||||
Here we use <a href="FormDirectives-var.html"><code>FormDirectives</code></a>, rather than importing each form directive individually, e.g.
|
||||
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
|
||||
```
|
||||
@Component({selector: "login-comp"})
|
||||
@View({
|
||||
directives: [FormDirectives],
|
||||
inline: "<form [control-group]='loginForm'>" +
|
||||
"Login <input type='text' control='login'>" +
|
||||
"Password <input type='password' control='password'>" +
|
||||
"<button (click)="onLogin()">Login</button>" +
|
||||
"</form>"
|
||||
})
|
||||
class LoginComp {
|
||||
loginForm:ControlGroup;
|
||||
|
||||
constructor() {
|
||||
this.loginForm = new ControlGroup({
|
||||
login: new Control(""),
|
||||
password: new Control("")
|
||||
});
|
||||
}
|
||||
|
||||
onLogin() {
|
||||
// this.loginForm.value
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(groupDirective:ControlGroupDirective)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 addDirective
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
addDirective(c:ControlDirective)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 controlGroup
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
controlGroup(controlGroup)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 findControl
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
findControl(name:string)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L31">angular2/src/forms/directives.js (line 31)</a>
|
||||
|
||||
:markdown
|
||||
The default accessor for writing a value and listening to changes that is used by a <a href="Control-class.html"><code>Control</code></a> directive.
|
||||
|
||||
This is the default strategy that Angular uses when no other accessor is applied.
|
||||
|
||||
# Example
|
||||
```
|
||||
<input type="text" [control]="loginControl">
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(setValueProperty:Function)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 onChange
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 writeValue
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
writeValue(value)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/form_builder.js#L26">angular2/src/forms/form_builder.js (line 26)</a>
|
||||
|
||||
:markdown
|
||||
Creates a form object from a user-specified configuration.
|
||||
|
||||
# Example
|
||||
|
||||
This example creates a <a href="ControlGroup-class.html"><code>ControlGroup</code></a> that consists of a `login` <a href="Control-class.html"><code>Control</code></a>, and a nested
|
||||
<a href="ControlGroup-class.html"><code>ControlGroup</code></a> that defines a `password` and a `passwordConfirmation` <a href="Control-class.html"><code>Control</code></a>.
|
||||
|
||||
```
|
||||
var loginForm = builder.group({
|
||||
login: ["", Validators.required],
|
||||
|
||||
passwordRetry: builder.group({
|
||||
password: ["", Validators.required],
|
||||
passwordConfirmation: ["", Validators.required]
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 array
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
array(controlsConfig:List, validator:Function = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 control
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
control(value, validator:Function = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 group
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
group(controlsConfig, extra = null)
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
.l-main-section
|
||||
h2 FormDirectives <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
A list of all the form directives used as part of a `@View` annotation.
|
||||
|
||||
This is a shorthand for importing them each individually.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
.l-main-section
|
||||
h2 INVALID <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
Indicates that a Control is invalid, i.e. that an error exists in the input value.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
.l-main-section
|
||||
h2 VALID <span class="type">variable</span>
|
||||
p.location-badge.
|
||||
exported from <a href="/angular2/forms.html">angular2/forms</a>
|
||||
|
||||
:markdown
|
||||
Indicates that a Control is valid, i.e. that no errors exist in the input value.
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue