add test in gulpfile which will compile a basic TS file with generated
angular2.d.ts to ensure generated d.ts is valid syntactic TS
Adds support for enums in .d.ts generation pipeline.
Removes renaming reexports in http module.
BREAKING CHANGES:
- rename `ElementRef.domElement` to `ElementRef.nativeElement`
- add `Renderer.getNativeElementSync` to make the app side
less dependent on the dom renderer.
- don’t use `ElementRef.nativeElement` in directives but
use the methods on `Renderer` directly.
- Removed `ElementRef.setAttribute`. Use `Renderer.setElementAttribute` instead.
Closes#2712
Last part of #2476Closes#2476
BREAKING CHANGES:
- Almost all methods in `Renderer` now take a `RenderElementRef` instead
of a `ViewRef` + `boundElementIndex`.
- These methods can be called with the `ElementRef` from the app side
directly.
Closes#2706
Related to #2476
In order to speedup the startup time of test.unit.js task, we are moving the circular dependency check into
a pre-test check that executes only on travis. Similarly we are moving the style check to a post-test check
that executes on travis.
This way if a circular dependency issue occurs, we find it before running tests on CI and if the code
is not formatted we fail the build only if all the tests pass.
Related to #2536
Related to #2094
BREAKING CHANGES:
- host actions don't take an expression as value any more but only a method name,
and assumes to get an array via the EventEmitter with the method arguments.
- Renderer.setElementProperty does not take `style.`/... prefixes any more.
Use the new methods `Renderer.setElementAttribute`, ... instead
Part of #2476Closes#2637
BREAKING CHANGE: compiler will throw on binding to non-existing properties.
Till now it was possible to have a binding to a non-existing property,
ex.: `<div [foo]="exp">`. From now on this is compilation error - any
property binding needs to have at least one associated property:
eaither on an HTML element or on any directive associated with a
given element (directives' properites need to be declared using the
`properties` field in the `@Directive` / `@Component` annotation).
Closes#2598
You can now run `gulp serve.e2e.prod` to instantiate a task that watches
and compiles example and module files into the prod directory in dist
and then allows the code to be run via protractor.
Closes#2369
At the moment we are not parsing param tags. This commit ignores them
completely.
TODO: hook up param descriptions with the actual param data in the doc.
Closes#2633
While creating the ng_deps.dart file for a view inline the styleUrls attribute.
This copies the pattern used for templateUrl, aleviating the need to make an
XHR request for those resources.
closes#2566
Allows to add or remove previous siblings of text
interpolations (e.g. by added `<script>` tags for
content reproduction, or by removed `<style>` tags).
Also calculates correctly whether an element is
empty.
Fixes#2591
As the constructed objects have an any type, the
resulting containers are assignable to any type:
var x: Map<string, number> = new Map();
That is useful to avoid having to specify types
twice when declaration and assignment are in
different places.
These wrappers are not natively understood by
ts2dart. Removing them will improve Dart2JS
compilation due to fewer megamorphic calls to List
functions.
It also makes Angular code more succinct and
improves type safety in Angular due to better type
inference of the Array component type.
This change exposed several bugs in Angular.
StringMap really ought to always enforce a string
key, and also ought to have an index property.
This currently breaks too much code in Angular, so
should be fixed in a follow up Pull Request
separate from this.
Closes#2472Closes#2339
BREAKING CHANGE
- `Compiler.compile` has been removed, the only way to compile
components dynamically is via `Compiler.compileInHost`
- `DynamicComponentLoader.loadIntoExistingLocation` has changed:
* renamed into `loadIntoLocation`
* will always create the host element as well
* requires an element with a variable inside of the host component view
next to which it will load new component.
- `DynamicComponentLoader.loadNextToExistingLocation` was renamed into
`DynamicComponentLoader.loadNextToLocation`
- `DynamicComponentLoader.loadIntoNewLocation` is removed
* use `DynamicComponentLoader.loadNextToLocation` instead
and then move the view nodes
manually around via `DomRenderer.getRootNodes()`
- `AppViewManager.{create,destroy}Free{Host,Embedded}View` was removed
* use `AppViewManager.createViewInContainer` and then move the view nodes
manually around via `DomRenderer.getRootNodes()`
- `Renderer.detachFreeView` was removed. Use `DomRenderer.getRootNodes()`
to get the root nodes of a view and detach them manually.
Previously, class members were ordered alphabetically.
This change leaves it up to the class author to
determine the order in which they would like
properties and methods to appear in class
documentation, without having to create methods like
`zUnimportantMethod`.
Fixes#2569
Benchpress now prints out the best and worst frame time in addition to the percentage of frames that hit the target of 60fps.
It also renames 'meanFrameTime' to 'frameTime.mean'. That way, all frameTime metrics start with a common suffix and will be grouped together in the console reporter.
part of #821
There are upcoming changes to the way we generate
and verify setters so more test are needed to cover
all the corner cases that are being handled today.
Closes#2559
Enable pregenerated (for Dart) and JIT (for Js) change detectors when
possible. Previously we would always use `DynamicChangeDetector`s, but
these cause megamorphic calls and are therefore much slower.
Closes#502
The `build.http.example` task was removed from gulp and replaced by another task, but a reference to the task was not removed from `test_e2e_dart.sh`.
Fixes#2509
Uglify files related to angular2.min.js bundle in one task.
Include reflect.js in the bundle, which was previously missing. Minify reflect.js, zone.js, and angular2.min.js using uglify.
Move all remaining unit tests for change detectors to exercise Dart
pre-generated change detectors as well as `dynamic` and `JIT` change
detectors.
See #502
More the change detect tests that exercise various detection modes to
use the Dart pre-generated change detectors in addition to the `dynamic`
and `JIT` change detectors.
See #502
This implementation only works in JavaScript, while the Observable transpilation
story gets worked out. Right now, the service just makes a simple request,
and returns an Observable of Response.
Additional functionality will be captured in separate issues.
Fixes#2028
Once we add support for addedPaths then this implementation will be significantly faster than the original.
In the meantime we benefit from having stable output directory which solves issues with certain files disappearing
during rebuild of a tree that contains flatten and mergeTree plugins.
Closes#2418
System.js seems detect an empty file as global and choke on exporting
symbols from angular2/angular2 (possibly a bug in system.js).
As temporary measure we make sure that the file has some (fake) runtime
code left.
Closes: #2343
- Modify change detectors to `throw` when attempting to detect changes
on a dehydrated detector.
- Modify `DynamicChagneDetector` to use `null` for the `context` of a
dehydrated detector.
Note that this also removes the `components` option from `RouteConfig`.
This functionality will be reintroduced with the more general `//` routing.
See #2329 for more details.
Update the transformer's `TemplateCompiler` phase to avoid setting
`reflector.reflectionCapabilities`, allowing asynchronous
operations, and restoring the original value, which allows
`reflector.reflectionCapabilities` to get into a bad state.
This requires some hacks, documented in
https://docs.google.com/document/d/1nNebWTiLzz5ePcit_bjZPtaiSIFU4EsQKUlX7LX0c0A/edit
Changes:
- include subtyping info in angular2.d.ts by adding 'extends supertype'
- export missing symbols needed transitively by angular2/angular2
- because of decorator/annotation mismatch, we can't export these to applications.
So I've added a separate angular2.api.ts file to re-export specifically to .d.ts
generation.
- Hack to remove aliases introduced by 'import * as alias' syntax
- Hack to deal with Error still an interface
note that we require users to install the transitive dependencies - this is how TSD works.
It is very noisy, especially when multiple trees are used. Since the
tree differ is fairly quick, it's not measuring the real costs of a
plugin anyhow.
Closes#2378
Add a type for the `context` field in Dart's pre-generated change
detectors. This requires slight changes to set the dehydrated value of
`context` to `null` rather than `ChangeDetectionUtil.uninitialized()`,
which was its former dehydrated state.
Mirror these chagnes as closely as possible in the
`ChangeDetectionJITGenerator` to allow easier maintenance.
Closes#2070
To support interface-based lifecycle methods (#2220), we need to be able
to query for the `interface`s a class supports. Record implemented
interfaces to allow mirror-less querying at runtime.
Closes#2204
Replaces the multiple arrays of `DomView`
by a single array with `DomElement`s.
Note: this commit does not show a performance regression
(tested against the tree benchmark locally).
clang-format 1.0.17 substantially improves formatting for fat arrow functions
and array literal detection. It also fixes a number of minor formatting issues.
Free embedded views are view instances that are created
logically in the same was as views of a ViewContainer,
but their dom nodes are not attached.
BREAKING CHANGE:
- `Renderer.detachFreeHostView` was renamed to
`Renderer.detachFreeView`
- `DomRenderer.getHostElement()` was generalized into
`DomRenderer.getRootNodes()`
Largetable benchmark with `interpolationAttr` and 200 rows / 20 columns:
Time for destroy/create pair dropped from about 1260ms to about 150ms.
Related to #2298, but does not really fix it as we are still slow
if people are using `<content>`.
Closes#2297
It was confusing because the test.unit.dart task does ignore the initial, and
the logger was hardcoded to always ignore the first task, leading to the appearance
that a run was happening twice for no reason.
Also, fixed the "fake ignoreInitial" handling to not rely on a fake event, which
is not necessary.
Closes#2101
The semantics between ES6 `Promise#all` and Dart's `Future#wait` are
different for values that are not `Promise`/`Future`s. In ES6,
non-`Promise` values are immediately completed to their current value.
In Dart, non-`Future` values cause an error.
Updated Dart's `PromiseWrapper#all` implementation to conform to the ES6
spec.
Use the `ProtoViewDto` created by the render `Compiler` to create a
`ChangeDetectorDefinition`.
From there, generate a subclass of `AbstractChangeDetector` for each
`ChangeDetectorDefinition`.
Run some basic unit tests for the dynamic and JIT change detectors on
pre-generated change detectors.
Usage: bootstrap the app with the special binding
`ELEMENT_PROBE_CONFIG` from `angular2/debug`.
This will provide a global method `ngProbe(element)` that
will expose a `DebugElement` with directive instances, ... on it.
During tests that use Angular's test injector, the probe is
enabled by default. The `DebugElement ` can be retrieved via the
function `inspectDomElement` of `angular2/debug`. Note
that the `TestComponentBuilder` already returns `DebugElement `s.
Closes#1992
When a template contains bound text nodes as root nodes,
we used to store the document fragment that we got from
cloning `template.content`. However, this fragment will be
empty as soon as the view gets attached. Now we store
`null` instead of the document fragment in this case.
Also groups the 3 cases in `_createView` so they are easier to
understand.
Previously we assumed that all input and ouput paths for broccoli trees are immutable, that turned out to be
incorrect.
By adding a tree stabilizer plugin in front of each diffing plugin, we ensure that the input trees
are stable. The stabilization is done via symlinks which is super cheap on platforms that support
symlinks. On Windows we currently copy the whole input directory, which is far from ideal. We should
investagate if using move operation on Windows is ok in the future to improve performance.
Closes#2051
Removes `.ng_deps.dart` files which
1. Do not register any `@Injectable` classes
2. Do not call `initReflector` on any other `.ng_deps.dart` files.
Closes#1929
Note: We can’t write a unit test for this as our unit tests
are running in Dartium, where the error does not occur.
However, we previously had a failure in our e2e tests
in `hello_world/index_dynamic.html`
when removing the TODOs in `application.ts`.
Closes#2185
- wait for the cleanup to finish (it's async) before exiting on ctrl+c
- wait for the cleanup to finish (it's async) onBeforeExit
- remove tmp directory during onBeforeExit to cleanup past leaks
Closes#1919
But do it during the build process for cjs.
Right now we only need this when we transpile from ts
directly to es5. This is only the case in our
cis build, as for our browser build we only transpile
from ts to es6 via ts and then use traceur to do
the rest.
Previously this was a bit cryptic as we just had a `hideSpecialExports` flag.
Now it ignores exports that match an array of regexes, with the default case
being those exports called `___esModule`.
ts2dart's node-source-map-support dependency was updated to match the main
line patch, but this changed the SHA in the existing repo, breaking Angular's
shrink wrapped dependency.
This update changes the dependency back to an existing SHA.
Previously, tree-differ would not correctly handle symlinks to deleted files, resulting in
an ENOENT errno being tossed by libuv.
This change fixes this to ensure that symlinks are safely handled, performantly.
Closes#1961
Update the compile benchmark to allow the Dart transformer to properly
generate the getters, setters, & methods needed.
This also improves the method of duplicating the source templates,
further decreasing runtime from ~5s to ~2s.
It is possible for a class defined first to be referencing a class defined later,
and as a result at the time of the definition it is not possible to access the later's
class reference. This allows to refer to the later defined class through
a closure.Closes #1891
BREAKING CHANGE:
`AppViewManager.createInPlaceHostView` is replaced by
`AppViewManager.createRootHostView` (for bootstrap) and
`AppViewManager.createFreeHostView` (for imperative components).
The later creates new host elements that are not attached anywhere.
To attach them, use `DomRenderer.getHostElement(hostviewRef)`
to get the host element.
Closes#1920
if any tasks executed by gulp results in an error, gulp will try hard to show errors. these are usually irelevant in the
watch mode. this is why it's ok to supress them except when running in the ci test mode, in which case failing tasks and logging
exceptions is helpful.
Closes#1881
Also consolidates metadata handling in `ElementInjector`
BREAKING CHANGE:
- renames `DirectiveMetadataReader` into `DirectiveResolver`
and removes `src/core/compiler/directive_metadata`.
Fixes#1712Fixes#1713
We ran across fatal issues with npm shrinkwrap on node 0.10.x which don't go away even with npm 2.9.x.
Upgrading node to 0.12 fixed the shrinkwrap issues. Since now we run node 0.12 on ci as well, there
is no reason for anyone to use node 0.10 during development.
BREAKING CHANGE:
VmTurnZone has been renamed to NgZone.
- The public API has not chnanged,
- The "outer" zone is now named "mount" zone (private to NgZone).
Before this PR there were only 2 zones: root zone = outer zone > inner
zone.
This PR creates the outer zone as a fork of the root zone: root > outer
> inner.
By doing this it is possible to detected microtasks scheduling in the
outer zone and run the change detection less often (no more than one
time per VM turn).
The PR also introduce a Promise monkey patch for the JS implementation.
It makes Promises aware of microtasks and again allow running the change
detection only once per turn.
BREAKING CHANGE:
A collection of all the form directives is exported
under `formDirectives`
while those were previously available
under `FormDirectives`.
Closes#1804
The async pipe in templates will now delegate to both Observable pipe or Promise pipe,
whichever first says it can support the input. Therefore, it's beneficial to disambiguate
the name of the AsyncPipe/AsyncPipeFactory constructors to reflect that these actually
support only Observables.
Update the `TemplateCompile` step to use the full render `Compiler`.
Provide `DirectiveMetadata` for `ViewDefinition` objects and use it to
run the `DirectiveParser` step of the render compile pipeline.
The goal is to make implementing a renderer straight forward.
BREAKING_CHANGE:
- Renderer interface was redone / simplified.
- `DirectDomRenderer` was replaced by `DomRenderer`.
- `DirectDomRenderer.setImperativeComponentRootNodes` is replaced
by the following 2 steps:
1. `ViewManager.getComponentView(elementRef) -> ViewRef`
2. `DomRenderer.setComponentViewRootNodes(viewRef, rootNodes)`
- all `@View` annotations need to have a template, but the template
may be empty. Previously views that had a `renderer` property did
not have to have a `template`.
- `dynamicComponentLoader.loadIntoNewLocation` does no more allow
to pass an element, but requires a css selector.
Special syntax: `:document` can be used as prefix to search globally
on the document instead of in the provided parent view.
Part of #1675
gulp-watch uses chokidar which uses fsevents which is much better than fs polling or relying on fs.watch.
fsevents use only one FD per watch invocation as opposed to one FD per watched directory and any subdirectory.
this should improve the situation with EMFILE errors (caused by lack of available file descriptors)
----
I also tried the following:
gulp-sane: requires watchman installation via brew so I didn't want to request that everyone goes throught that yet
gulp-chokidar: didn't work, seems to be obsolete
Special regexp tokens were allowed unchanged previously, which incorrectly broke
the include/exclude behaviour. Now, they're escaped first.
Closes#1721Closes#1752
By default, gulp-typescript currently depends on typescript 1.4, which doesn't work for us.
For example, it doesn't allow `let` when emitting ES5, along with lots of other errors.
It so happens that npm sometimes makes this work, as seen by the warning
```npm WARN unmet dependency /Users/alexeagle/Projects/angular/node_modules/gulp-typescript requires typescript@'1.4.1' but will load
npm WARN unmet dependency /Users/alexeagle/Projects/angular/node_modules/typescript,
npm WARN unmet dependency which is version 1.5.0```
but when we update our node_modules in a certain way, we lose this setup and it breaks.
We should be explicit about using a different version of typescript than gulp-typescript depends on.
Update `TemplateCompiler` transform step to use abstractions used by the
render `Compiler`. For example, template code is now loaded via an
instance of `TemplateLoader` and external resources are fetched via an
instance of `XHR`.
previously there was a chance of race conditions that could sporadically fail the build.
additionally runing a task via gulp.start or runSequence always reruns its dependencies, which meant that we were blowing away
the build.tools build and rebuilding everything from scratch even during the interactive/watch mode. This meant that the build
pipeline cache was destroyed on every change and we never got the benefit of incremental compilation
tree-differ:
- export both TreeDiffer and DiffResult interface
diffing-broccoli-plugin:
- factory class for wrapping DiffingBroccoliPlugins and turning them into BroccoliTrees
broccoli-dest-copy:
- refactor into DiffingBroccoliPlugin
broccoli-traceur:
- refactor into DiffingBroccoliPlugin
Previously, karma used a custom preprocessor. Instead, have karma
run built dart from the `dist` folder and use gulp and broccoli
to watch for changes.
Using string1 === string2 translates to identical(string1, string2) in
dart, which is incorrect as it is possilbe for dart strings to have
different reference.
Add a step that reads `DirectiveMetadata` object off annotated classes
into `.ng_meta.dart` files. These will be used by the `TemplateCompiler`
step as inputs to the Angular 2 render compiler.
Update one test to avoid unsupported functionality, format others.
Due to limitation of system build, the router cannot have its own sfx
bundle.
Fixes an issue with RouteConfig decorator by moving it into its own
file.
In 'angular2/di' the symbol:
- Inject is a decorator
- InjectAnnotation is an annotation
Internally one an get a hold of annotations without *Annotations appened
(to make ts2dart work without workarounds) by importing from
'angular2/src/di/annotations_impl' instead of 'angular2/di'. This is
needed only for users that transpile through TS and through ts2dart.
This removes .es6 files which are pure duplicates of a
.ts file in the same folder.
Next we need to remove .js files as well, and remove karma preprocessors for dart.
BREAKING CHANGE:
Previously, `Directive` was the abstract base class of several directives.
Now, `Directive` is the former `Decorator`, and `Component` inherits from it.
BREAKING_CHANGE:
- The special type of `Viewport` directives is removed
in favor of a more general `Decorator` directive
- `ViewContainerRef` now no more has a default `ProtoViewRef`
but requires an explicit one when creating views.
Closes#1536
Add utility methods to convert `render.dom.DirectiveMetadata` to and
from maps. This will allow saving and restoring `DirectiveMetadata` in
the Angular 2 Transformer.
We discussed adding this as a member on `DirectiveMetadata`. Since this
is not necessary for anything except the Transformer, we decided to put
it into a separate file to avoid shipping it with the Angular 2 core
code.
This is a prerequisite for switching to TypeScript. We need to remove the Traceur preprocessor
from Karma, so we have the build specified in a single place (broccoli tree def'n).
BREAKING CHANGES:
- `NgElement` merged into `ElementRef`
- `Compiler.compile…` returns `ProtoViewRef`
- `ViewContainer` uses `ProtoViewRef`s and `ViewRef`s.
- `ViewRef`/`ProtoViewRef` in renderer were renamed to
`RenderViewRef`/`RenderProtoViewRef`.
Related to #1477Closes#1592
You can generate docs for comsumption by the angular.io website by running:
```bash
gulp docs/angular.io
```
The generated docs can be found in `dist/angular.io`
on our CI server we currently split each build into the building phase and testing phase, this change aligns test.unit.tools/ci
with the rest of ci test taskswq
components:
- gulp test.unit.broccoli task
- mock-fs for mocking our FS in unit tests
- jasmine d.ts file for type checking
jasmine lib is provided by minijasmine2 so we don't need to include it explicitly
This change solves several problems:
- the broccoli pipeline is used to compile the node/cjs tree upon any change to the modules/ directory
- jasmine tests run in a new process removing the need to clean up environment after each test
- since we transpile only those test files that are actually needed for node/cjs build, we transpile less and don't need to filter out tests
AppViewManager is the single entry point to changing the view hierarchy.
It is split between the manager itself which does coordination and
helper methods, so both are easily testable in isolation.
Also, ViewContainer is now only a pure reference to a bound element
with the previous functionality but does not contain the list of views
any more.
Part of #1477
We have Dart code in `angular2` module that ought to be in its own
package. Examples include Dart analysis plugins, and potentially the
transformers (although transformers cannot be moved out just yet).
However, this code is Dart-only and it doesn’t make sense to use JS
directory layout for it. This commit introduces a sub-directory called
`modules_dart`. All modules in this directory are pure Dart packages
using standard pub directory layout. The code in these packages never
gets transpiled. It is directly copied to `dist` unmodified, except an
adjustment in relative paths in `pubspec.yaml` files.
When the mean is 0, the coefficient of variation is calculated to be
NaN, which is not meaningful, so instead of printing "+-NaN%", just
don't print the CV at all.
Closes#908Closes#1444
I didn't get a full trace back for my evidence I got from making this example work. EventEmitter was instantiated and assigned to wrong property. Also the mapping should be done using the component property name as it will be obtained via accessor and exposed on the directive (as far as I understood).
Previously, getting testability was `window.angular2.getTestability`
This was because the plan was to export the API to the window as
angular2. However, the decision was changed to make this just `angular`
in 3177576ad6
To decouple testability from the rest of the Angular API, just make it
one function, `window.getAngularTestability`.
Add two transform parameters to aid in debugging the transformer
- `mirror_mode`, with values {`debug`, `none`, and `verbose`}
- `init_reflector`, with values {`true`, `false`}
`mirror_mode`:
- `debug`: Allow reflective access, but log a message if it is used
- `none`: Remove reflective access, `throw` if it is used. Default value
- `verbose`: Allow reflective access, log a stack trace if it is used
`init_reflector`: Whether to generate calls to our generated
`initReflector` code.
These will be useful to reveal areas where the transformer is not generating
appropriate code and to quickly see where reflective accesses occur.
When the pub mode is `transform_dynamic`, we run in MirrorMode.debug
with `init_reflector = false`. This is used for testing purposes.
Previously, light dom nodes that were not used by any content tag
were not removed from a view on redistribute. This lead
to a bug when reusing a view from the view pool, as it
still contained stale reprojected nodes.
Fixes#1416
You can now write a link to a member of a class by appending the member name
to the class name joined by a hash sign:
```
{@link ControlGroupDirective#addDirective `addDirective`}
```
By default the link will contain the text of the class rather than the member
so you must add it as an inline code text snippet in the link tag.
Closes#1432
index_static.js & index_static.html are unnecessary in Js and are now
essentially generated via the Dart transformer. The angular
transformer is specified in examples/pubspec.yaml; use pub build to
create a transformed application that does not use dart:mirrors.
Create index_dynamic.js & index_dynamic.html, which are used to test
that the app runs equally well with mirrors and without.
Closes#495
This commit enables links to other docs, such as classes and modules,
via the `{@link CodeIdentifier}` style inline tag.
Dgeni identifies what you are linking to by comparing the identifier to the
aliases for each doc. If no alias matches the identifier then the dgeni
run exits with a missing doc in link error. If more than one alias matches
the identifier then dgeni exits with an ambiguous link error.
In the future we could build in some heuristics for choosing a preferred
doc when the link is ambiguous, such as choosing a public doc over a
non-public doc; and choosing a code component that is in the same module as
the doc where the link is found.
Currently there are two aliases for each API component: its name and its
identier. For example, if the `Directive` class is exported from
`angular2/annotations`, so its aliases are 'Directive' and
`angular2/annotations.Directive`.
There is an issue in the non-public doc generation, which means that it
does not yet have `{@link}` tags implemented. This is that when we re-export
a code component, it gets cloned into another module. This means that a
simple reference to the code component's name will always produce an
ambiguous link. This can be fixed with a heuristic as described above.
Meanwhile you can avoid this by always using the full id of the code
component if it is being re-exported.
Closes#1371Closes#1421
Since we are currently stuck on node 0.10 (see #1396), this will at least help us avoid
some of the npm bugs present in older version that comes with 0.10.
Major changes:
- `compiler.compileRoot(el, type)`
-> `compiler.compileInHost(type) + viewHydrator.hydrateHostViewInPlace(el, view)`
- move all `hydrate`/`dehydrate` methods out of `View` and `ViewContainer` into
a standalone class `view_hydrator` as private methods and provide new public
methods dedicated to the individual use cases.
Note: This PR does not change the current functionality, only moves it
into different places.
See design discussion in #1351, in preparation for imperative views.
Create a method that recursively walks imports from an entry point and
determines where classes are registered.
Use this information to determine if a particular annotation implements or
extends Injectable or Template.
Since `DynamicChangeDetection` and `JitChangeDetection` classes are alreadt in the
public module, they do not need to be annotated with a `@exportAs` tag
Closes#1353
Add two factory static functions to Injector: resolveAndCreate and
fromResolvedBindings.
We want to avoid resolution and flattening every time we create a new
injector. This commit allows the user to cache resolved bindings and
reuse them.
If an "empty" file (like angular2/template.js) is imported
it is auto-detected as the one using "global" format by the
system builder. This is incorrect as the entire angular2 build
output is in the ES6 format.
Removing empty import till it has some content.
Closes#1329
Our style guide includes formatting conventions. Instead of wasting time in reviewing PRs discussing things like indenting, and to avoid later deltas to fix bad formatting in earlier commits, we want to enforce these in the build.
The intent in this change is to fail the build as quickly as possible in travis, so those sending a PR immediately know they should run clang-format and update their commit. When running locally, we want users to know about formatting, but they may not want to act on it immediately, until they are done working. For this reason, it is only a warning outside of the continuous build.
This is done by having a check-format task which should run on most local builds, and an enforce-format task only run by travis.
chore(doc-gen): capture docs for modules from comments
Closes#1258
docs(*): add module description jsdoc tags
docs(*): add @public tag to public modules
chore(doc-gen): fix overview-dump template
The template was referencing an invalid property
chore(doc-gen): use `@exportedAs` and `@public` rather than `@publicModule`
This commit refactors how we describe components that are re-exported in another
module. For example the "public" modules like `angular/angular` and `angular/annotations`
are public but they only re-export components from "private" modules.
Previously, you must apply the `@publicModule` tag to a component that was to be
re-exported. Applying this tag caused the destination module to become public.
Now, you specify that a module is public by applying the `@public` tag and then
you can "re-export" components to other modules by applying the `@exportedAs`
giving the name of the module from which the component will be re-exported.
tag. This tag can be used multiple times on a single component, allowing the
component to be exported on multiple modules.
docs(*): rename `@publicModule` to `@exportedAs`
The `@publicModule` dgeni tag has been replaced by the `@exportedAs`
dgeni tag on components that are to be re-exported on another module.
Closes#1290
- Allow the user to specify multiple entry points to an app.
- Allow the Angular 2 transformer to run without explicit entry points to
generate necessary setters & getters on built-in directives like `For`
and `If`.
Closes#1246
This commit adds a plugin for the event manager, to allow a key name to
be appended to the event name (for keyup and keydown events), so that
the callback is only called for that key.
Here are some examples:
(keydown.shift.enter)
(keyup.space)
(keydown.control.shift.a)
(keyup.f1)
Key names mostly follow the DOM Level 3 event key values:
http://www.w3.org/TR/DOM-Level-3-Events-key/#key-value-tables
There are some limitations to be worked on (cf details
in https://github.com/angular/angular/pull/1136) but for now, this
implementation is reliable for the following keys (by "reliable" I mean
compatible with Chrome and Firefox and not depending on the keyboard
layout):
- alt, control, shift, meta (those keys can be combined with other keys)
- tab, enter, backspace, pause, scrolllock, capslock, numlock
- insert, delete, home, end, pageup, pagedown
- arrowup, arrowdown, arrowleft, arrowright
- latin letters (a-z), function keys (f1-f12)
- numbers on the numeric keypad (but those keys are not correctly simulated
by Chromedriver)
There is a sample to play with in examples/src/key_events/.
close#523close#1136
Queries allow a directive to inject a live list of directives of a given
type from its LightDom. The injected list is Iterable (in JS and Dart).
It will be Observable when Observables are support in JS, for now it
maintains a simple list of onChange callbacks API.
To support queries, element injectors now maintain a list of
child injectors in the correct DOM order (dynamically updated by
viewports).
For performance reasons we allow only 3 active queries in an injector
subtree. The feature adds no overhead to the application when not
used. Queries walk the injector tree only during dynamic view
addition/removal as triggered by viewport directives.
Syncs changes between viewContainer on the render and logic sides.
Closes#792
This switches all transpilation over from using Traceur to using ts2dart, based
on the TypeScript tool chain. Transpilation is a bit slow due to issues with
the gulp integration, but that should be easily fixable once we move to
broccoli.
Introduces angular2/src/core/compiler/ViewFactory which
extracts ProtoView.instantiate and replaces ViewPool.
Note: This is a work in progress commit to unblock other commits.
There will be follow ups to add unit tests, remove TODOs, …
Needed to change Renderer.mergeChildComponentProtoViews to not create
new ProtoViews to be able to deal with cyclic references.
This commit is part of using the new render layer in Angular.
- Allow pub (build|serve) to specify mode
- Update pubbuild.js & pubserve.js to allow the caller to provide a `mode` value.
- Update settings to allow the di benchmark to be transformed to run statically.
Adds a gulp task which builds the .ts files (in the cjs build only).
The new files have extension .ts since they are now valid typescript.
Unfortunately until Typescript can emit System.require, we have to keep the old .es6 version
so traceur works inside the Karma preprocessor. This should be fixed soon.
Add a transformer for `di` which generates `.ng_deps.dart` files for all
`.dart` files it is run on. These `.ng_deps.dart` files register
metadata for any `@Injectable` classes.
Fix unit tests for changes introduced by the di transformer.
When using `pub (build|serve) --mode=ngstatic`, we will also generate
getters and setters, parse templates, and remove import of `dart:mirrors`
in the Angular transform. Because this is still relatively immature, we
use the mode to keep it opt-in for now.
Closes#700
We do this as we are seeing flakes in Chrome with ECONNREFUSED.
Also reuses the same browser window.
Also reenables the infinite scroll benchmark
Closes#1137
This uses tsd to fetch the typings from another git repo. I've forked the DefinitelyTyped repo because some typings we use are not available upstream.
We should probably fork it in the Angular org, so everyone on the team has commit access to our DefinitelyTyped fork.
When a `Template` annotation declares a `url` value, parse it to
generate `getter`s, `setter`s, and `method`s which will it needs to
access reflectively.
Now, running protractor configs by default only runs e2e tests. If
the --benchmark flag is added, it runs only the perf tests, and always
restarts the browser in between tests. If the --dryrun test is added,
the perf tests are run only once.
This should make it easier to run perf tests versus example e2e tests,
and help stabilize the travis build because perf tests always
run with a clean browser.
This only transpiles one package to start with: di/
It ensures that package transpiles without errors, so no one can
introduce non-TypeScript syntax.
Next step is to widen the task inputs to cover additional packages.
See design doc for the migration:
https://docs.google.com/document/d/14RJLhu6uuv7NchFkAb6PKzOOO0L7l3Z507eKWzkEUhQ/edit
A convenience task 'ts2dart' is added for developing ts2dart, and
it runs all of the angular code through the transpiler to collect errors.
Now the visitor will find the last jsdoc style comment (e.g. `/** jsdoc comment */`)
before the current code item, ignoring any inline style comments (e.g. `// inline comment`)
in between.
Closes#1072
Based on the discussion in #776 we can't reliably check if a given
element has a particular property at the compilation time. As such
the existing algorithm detecting "missing" directives can't be used.
We need to see if there is a different / better algorithm or maybe
those checks need to be moved later in the process (runtime). Leaving
integration tests in place (disabled) so we can come back to the
topic after unblocking the situation.
This commit effectivelly reverts 94e203b9df
* `npm install` now does a full install; auxiliary installation steps
have been integrated into the `postinstall` script.
* Updated developer docs `DEVELOPER.md` accordingly; also added
instructions to dev docs for performing full tests (via `npm test`) --
same as those run on Travis.
* Reorg in tests so that JS tests can run without a Dart env.
Partly fixes#945 **under the assumption that when running JS tests
locally, `ChromeCanary` is the desired browser to use**. Note that CI
tests (Travis) still uses `DartiumWithWebPlatform` across the board
(Maybe because ChromeCanary isn't being installed?)
Fixes#1012.
Closes#1010
In view_container.js, templateElement.parentNode can be null
when two template tags are nested in one another.
Accessing the parent node through view.nodes[0].parentNode fixes
the problem.
closes#997Closes#999
Docs for the "Injecting a directive from the current element" indicate that having a dependency of `dependency: Dependency` should cause the current element's dependency to be injected, but then uses the ID value from the parent element in the example.
Closes#1032
* **benchmarks:** add waits for naive scrolling benchmark to ensure loading ([d8929c1d](https://github.com/angular/angular/commit/d8929c1d), closes [#1706](https://github.com/angular/angular/issues/1706))
* **benchpress:** do not throw on unkown frame timestamp event ([ed3af5f7](https://github.com/angular/angular/commit/ed3af5f7), closes [#2622](https://github.com/angular/angular/issues/2622))
* **change detection:** preserve memoized results from pure functions ([5beaf6d7](https://github.com/angular/angular/commit/5beaf6d7))
* **compiler:** make text interpolation more robust ([9d4111d6](https://github.com/angular/angular/commit/9d4111d6), closes [#2591](https://github.com/angular/angular/issues/2591))
* **docs:** Fix docs for Directive.compileChildren ([9700e806](https://github.com/angular/angular/commit/9700e806))
* **injectors:** sync injector tree with dom element tree. ([d800d2f5](https://github.com/angular/angular/commit/d800d2f5))
* **parse5:** do not try to insert empty text node ([0a2f6ddc](https://github.com/angular/angular/commit/0a2f6ddc))
* **render:** fix failing tests in dynamic_component_loader.ts ([6149ce28](https://github.com/angular/angular/commit/6149ce28))
* **router:** return promise with error handler ([bc798b18](https://github.com/angular/angular/commit/bc798b18))
* add constructors without type arguments. ([35e882e7](https://github.com/angular/angular/commit/35e882e7))
* upgrade ts2dart to 0.6.4. ([58b38c92](https://github.com/angular/angular/commit/58b38c92))
* **CSSClass:** add support for string and array expresions ([8c993dca](https://github.com/angular/angular/commit/8c993dca), closes [#2025](https://github.com/angular/angular/issues/2025))
* **element_injector:** support multiple injectables with the same token ([c899b0a7](https://github.com/angular/angular/commit/c899b0a7))
* **host:** limits host properties to renames ([92ffc465](https://github.com/angular/angular/commit/92ffc465))
* **mock:** add mock module and bundle ([29323777](https://github.com/angular/angular/commit/29323777), closes [#2325](https://github.com/angular/angular/issues/2325))
* **query:** added support for querying by var bindings ([b0e2ebda](https://github.com/angular/angular/commit/b0e2ebda))
* **render:** don’t use the reflector for setting properties ([0a51ccbd](https://github.com/angular/angular/commit/0a51ccbd), closes [#2637](https://github.com/angular/angular/issues/2637))
* **router:**
* add support for hash-based location ([a67f2314](https://github.com/angular/angular/commit/a67f2314), closes [#2555](https://github.com/angular/angular/issues/2555))
* enforce usage of ... syntax for parent to child component routes ([2d2ae9b8](https://github.com/angular/angular/commit/2d2ae9b8))
* **transformers:** inline styleUrls to view directive ([f2ef90b2](https://github.com/angular/angular/commit/f2ef90b2), closes [#2566](https://github.com/angular/angular/issues/2566))
* makes NgModel work in strict mode ([eb3586d7](https://github.com/angular/angular/commit/eb3586d7))
* Class factory now adds annotations ([bc9e482b](https://github.com/angular/angular/commit/bc9e482b))
* improve type safety by typing `refs`. ([4ae7df27](https://github.com/angular/angular/commit/4ae7df27))
* improve type of TreeNode.children. ([c3c2ad14](https://github.com/angular/angular/commit/c3c2ad14))
* add types for ts2dart's façade handling. ([f3d74185](https://github.com/angular/angular/commit/f3d74185))
* rename FORWARD_REF to forwardRef in the Angular code base. ([c4ecbf0a](https://github.com/angular/angular/commit/c4ecbf0a))
* declare var global. ([13466604](https://github.com/angular/angular/commit/13466604))
* Improve error message on missing dependency ([2ccc65d7](https://github.com/angular/angular/commit/2ccc65d7))
* compare strings with StringWrapper.equals ([633cf636](https://github.com/angular/angular/commit/633cf636))
* corrected var/# parsing in template ([a4183971](https://github.com/angular/angular/commit/a4183971), closes [#2084](https://github.com/angular/angular/issues/2084))
* increase the stack frame size for tests ([ab8eb4f6](https://github.com/angular/angular/commit/ab8eb4f6))
* include error message in the stack trace ([8d081ea7](https://github.com/angular/angular/commit/8d081ea7))
* **Compiler:** fix text nodes after content tags ([d599fd34](https://github.com/angular/angular/commit/d599fd34), closes [#2095](https://github.com/angular/angular/issues/2095))
* **DirectiveMetadata:** add support for events, changeDetection ([b4e82b8b](https://github.com/angular/angular/commit/b4e82b8b))
* **JsonPipe:** always transform to json ([e77710a3](https://github.com/angular/angular/commit/e77710a3))
* **Parser:** Parse pipes in arguments ([f9745327](https://github.com/angular/angular/commit/f9745327), closes [#1680](https://github.com/angular/angular/issues/1680))
* **ShadowDom:** fix emulation integration spec to test all 3 strategies ([6e385154](https://github.com/angular/angular/commit/6e385154), closes [#2546](https://github.com/angular/angular/issues/2546))
* **benchmarks:** Do not apply the angular transformer to e2e tests ([cee26826](https://github.com/angular/angular/commit/cee26826))
* **bootstrap:** temporary disable jit change detection because of a bug in handling pure functio ([9908def8](https://github.com/angular/angular/commit/9908def8))
* **broccoli:** ensure that inputTrees are stable ([928ec1c5](https://github.com/angular/angular/commit/928ec1c5))
* **build:**
* ensure that asset files are copied over to example directories ([60b97b27](https://github.com/angular/angular/commit/60b97b27))
* Minify files for angular2.min.js bundle ([76797dfb](https://github.com/angular/angular/commit/76797dfb))
* only pass ts files to ts2dart transpilation. ([b5431e4c](https://github.com/angular/angular/commit/b5431e4c))
* **bundle:** makes interfaces.ts non-empty when transpiled. ([83e99fc7](https://github.com/angular/angular/commit/83e99fc7))
* **change detect:** Fix bug in JIT change detectors ([e0fbd4b6](https://github.com/angular/angular/commit/e0fbd4b6))
* **diffing-broccoli-plugin:** wrapped trees are always stable ([7611f92f](https://github.com/angular/angular/commit/7611f92f))
* **docs:**
* order class members in order of declaration ([ea27704e](https://github.com/angular/angular/commit/ea27704e), closes [#2569](https://github.com/angular/angular/issues/2569))
* update link paths in annotations ([dd23bab3](https://github.com/angular/angular/commit/dd23bab3), closes [#2475](https://github.com/angular/angular/issues/2475))
* ensure no duplicates in alias names of docs ([05d02fa9](https://github.com/angular/angular/commit/05d02fa9))
* Working generated angular2.d.ts ([7141c15e](https://github.com/angular/angular/commit/7141c15e))
* **dynamic_component_loader:**
* Fix for ts2dart issue ([bbfb4e1d](https://github.com/angular/angular/commit/bbfb4e1d))
* implemented dispose for dynamically-loaded components ([21dcfc89](https://github.com/angular/angular/commit/21dcfc89))
* **element_injector:** changed visibility rules to expose hostInjector of the component to its shadow d ([c51aef9f](https://github.com/angular/angular/commit/c51aef9f))
* **forms:**
* updated form examples to contain select elements ([c34cb014](https://github.com/angular/angular/commit/c34cb014))
* fixed the handling of the select element ([f1541e65](https://github.com/angular/angular/commit/f1541e65))
* fixed the selector of NgRequiredValidator ([35197acc](https://github.com/angular/angular/commit/35197acc))
* getError does not work without path ([a858f6ac](https://github.com/angular/angular/commit/a858f6ac))
* **life_cycle:** throw when recursively reentering LifeCycle.tick ([af35ab56](https://github.com/angular/angular/commit/af35ab56))
* **locals:** improved an error message ([4eb8c9b2](https://github.com/angular/angular/commit/4eb8c9b2))
* **ng_zone:** updated zone not to run onTurnDown when invoking run synchronously from onTurnDo ([15dab7c5](https://github.com/angular/angular/commit/15dab7c5))
* **npm:** update scripts and readme for npm packages. ([8923103c](https://github.com/angular/angular/commit/8923103c), closes [#2377](https://github.com/angular/angular/issues/2377))
* avoid two slash values between the baseHref and the path ([cdc7b03e](https://github.com/angular/angular/commit/cdc7b03e))
* do not prepend the root URL with a starting slash ([e372cc77](https://github.com/angular/angular/commit/e372cc77))
* **selector:** select by attribute independent of value and order ([9bad70be](https://github.com/angular/angular/commit/9bad70be), closes [#2513](https://github.com/angular/angular/issues/2513))
* **shadow_dom:** moves the imported nodes into the correct location. ([92d56584](https://github.com/angular/angular/commit/92d56584))
* support decorator chaining and class creation in ES5 ([c3ae34f0](https://github.com/angular/angular/commit/c3ae34f0), closes [#2534](https://github.com/angular/angular/issues/2534))
* update ts2dart to 0.6.1. ([96137724](https://github.com/angular/angular/commit/96137724))
* adjust formatting for clang-format v1.0.19. ([a6e71239](https://github.com/angular/angular/commit/a6e71239))
* upgrade to clang-format v1.0.19. ([1c2abbc6](https://github.com/angular/angular/commit/1c2abbc6))
* **AstTranformer:** add support for missing nodes ([da60381c](https://github.com/angular/angular/commit/da60381c))
* **BaseRequestOptions:** add merge method to make copies of options ([93596dff](https://github.com/angular/angular/commit/93596dff))
* **Directive:** Have a single Directive.host which mimics HTML ([f3b49378](https://github.com/angular/angular/commit/f3b49378), closes [#2268](https://github.com/angular/angular/issues/2268))
* **ElementInjector:** throw if multiple directives define the same host injectable ([6a6b43de](https://github.com/angular/angular/commit/6a6b43de))
* **Events:** allow a different event vs field name ([29c72abc](https://github.com/angular/angular/commit/29c72abc), closes [#2272](https://github.com/angular/angular/issues/2272), [#2344](https://github.com/angular/angular/issues/2344))
* **FakeAsync:** check pending timers at the end of fakeAsync in Dart ([53694eb6](https://github.com/angular/angular/commit/53694eb6))
* **Http:** add Http class ([b68e561c](https://github.com/angular/angular/commit/b68e561c), closes [#2530](https://github.com/angular/angular/issues/2530))
* **Parser:**
* support if statements in actions ([7d328799](https://github.com/angular/angular/commit/7d328799), closes [#2022](https://github.com/angular/angular/issues/2022))
* **View:** add support for styleUrls and styles ([ac3e624d](https://github.com/angular/angular/commit/ac3e624d), closes [#2382](https://github.com/angular/angular/issues/2382))
* **benchpress:**
* more smoothness metrics ([35589a6b](https://github.com/angular/angular/commit/35589a6b))
* add mean frame time metric ([6834c499](https://github.com/angular/angular/commit/6834c499), closes [#2474](https://github.com/angular/angular/issues/2474))
* **broccoli:**
* improve merge-trees plugin and add "overwrite" option ([dc8dac7c](https://github.com/angular/angular/commit/dc8dac7c))
* **view:** added support for exportAs, so any directive can be assigned to a variable ([69b75b7f](https://github.com/angular/angular/commit/69b75b7f))
* element.getBoundingClientRect fails when element not in DOM (IE11) ([f35dbb99](https://github.com/angular/angular/commit/f35dbb99))
* element.matches only available with prefix (IE11) ([a393f84f](https://github.com/angular/angular/commit/a393f84f))
* assigning null to document.title sets the title to "null" (IE11, Firefox) ([92c2c33a](https://github.com/angular/angular/commit/92c2c33a))
* **build:**
* remove nonexistant dart format task from gulpfile ([f74d7727](https://github.com/angular/angular/commit/f74d7727))
* make dart formatter errors more readable ([31b66878](https://github.com/angular/angular/commit/31b66878))
* also run ts tests in node. ([05774f6c](https://github.com/angular/angular/commit/05774f6c))
* **collection:**
* iterator on Map keys is not supported (Safari) ([4b98ed11](https://github.com/angular/angular/commit/4b98ed11), closes [#2096](https://github.com/angular/angular/issues/2096))
* new Map(iterable) is not supported (Safari) ([d308e55e](https://github.com/angular/angular/commit/d308e55e))
* new Set(iterable) is not supported (IE11, Safari) ([57b88ec2](https://github.com/angular/angular/commit/57b88ec2), closes [#2063](https://github.com/angular/angular/issues/2063))
* **dartdocs:** Hide duplicate exports from guinness. ([17e1d7f1](https://github.com/angular/angular/commit/17e1d7f1))
* **deps:** Update clang-format to 1.0.14. ([15f1eb28](https://github.com/angular/angular/commit/15f1eb28))
* **di:** allow `@Inject(…)` to work in dart2js and dynamic reflection ([4a3fd5e8](https://github.com/angular/angular/commit/4a3fd5e8), closes [#2185](https://github.com/angular/angular/issues/2185))
* **docs:** generate d.ts file only for angular2/angular2. ([0a0b84a0](https://github.com/angular/angular/commit/0a0b84a0))
* **dom:**
* allow to correctly clone document fragments ([2351896c](https://github.com/angular/angular/commit/2351896c))
*`querySelectorAll` should only query child nodes ([307011a9](https://github.com/angular/angular/commit/307011a9))
* **package.json:** add `reflect-metadata` to package.json ([60801777](https://github.com/angular/angular/commit/60801777), closes [#2170](https://github.com/angular/angular/issues/2170))
* **render:**
* only look for content tags in views that might have them. ([ba7956f5](https://github.com/angular/angular/commit/ba7956f5), closes [#2297](https://github.com/angular/angular/issues/2297))
* don’t store a document fragment as bound element ([24bc4b66](https://github.com/angular/angular/commit/24bc4b66))
* **router:** event.defaultPrevented is not reliable (IE11) ([2287938f](https://github.com/angular/angular/commit/2287938f))
* **selector:** support multiple `:not` clauses ([62a95823](https://github.com/angular/angular/commit/62a95823), closes [#2243](https://github.com/angular/angular/issues/2243))
* solve CSS discrepancies across browsers ([fb42d590](https://github.com/angular/angular/commit/fb42d590), closes [#2177](https://github.com/angular/angular/issues/2177))
* use a not expandable CSS rule in ShadowCSS spec (Firefox) ([588fbfd8](https://github.com/angular/angular/commit/588fbfd8), closes [#2061](https://github.com/angular/angular/issues/2061))
* adds longer timers for NgZone and PromisePipe tests (IE11) ([661a0479](https://github.com/angular/angular/commit/661a0479), closes [#2055](https://github.com/angular/angular/issues/2055))
* native shadow DOM is required (IE11, Firefox) ([9802debf](https://github.com/angular/angular/commit/9802debf))
* function.name is not available (IE11) ([5103f080](https://github.com/angular/angular/commit/5103f080))
* **tests:** disable mobile emulation so benchmarks run on current chrome ([b071b66b](https://github.com/angular/angular/commit/b071b66b))
* add support for the safe navigation (aka Elvis) operator ([a9be2ebf](https://github.com/angular/angular/commit/a9be2ebf), closes [#791](https://github.com/angular/angular/issues/791))
* **Directive:** convert properties to an array ([d7df853b](https://github.com/angular/angular/commit/d7df853b), closes [#2013](https://github.com/angular/angular/issues/2013))
* **ElementInjector:** support an arbitrary number of bindings ([b1c9bf14](https://github.com/angular/angular/commit/b1c9bf14), closes [#1853](https://github.com/angular/angular/issues/1853))
* **OpaqueToken:** now a const constructor ([c571b269](https://github.com/angular/angular/commit/c571b269))
* **RegExpWrapper:** implement a test method ([551586ce](https://github.com/angular/angular/commit/551586ce))
* **binding:** throw on binding to a blank alias ([ec2d8cc2](https://github.com/angular/angular/commit/ec2d8cc2), closes [#2068](https://github.com/angular/angular/issues/2068))
* **facade:** add read/write access to global variables ([cdf791f0](https://github.com/angular/angular/commit/cdf791f0))
* **fakeAsync:** flush the microtasks before returning ([c7572ac1](https://github.com/angular/angular/commit/c7572ac1), closes [#2269](https://github.com/angular/angular/issues/2269))
* **form:** implemented an imperative way of updating the view by updating the value of a co ([652ed0cf](https://github.com/angular/angular/commit/652ed0cf))
* **forms:**
* added support for status classes ([3baf815d](https://github.com/angular/angular/commit/3baf815d))
* added touched and untouched to Control ([ec3a7828](https://github.com/angular/angular/commit/ec3a7828))
* renamed control, control-group into ng-control and ng-control-group ([f543834b](https://github.com/angular/angular/commit/f543834b))
* changed the selector of TemplatdrivenFormDirective to match <form> ([6bef1c41](https://github.com/angular/angular/commit/6bef1c41))
* implemented template-driven forms ([a9d6fd9a](https://github.com/angular/angular/commit/a9d6fd9a))
* **key_event:** alias esc to escape ([10bc7e94](https://github.com/angular/angular/commit/10bc7e94), closes [#2010](https://github.com/angular/angular/issues/2010))
* **reflector:** added a method to get type's interfaces ([34d75e89](https://github.com/angular/angular/commit/34d75e89))
* **render:** re-export render and export `DirectiveResolver` ([662da0d7](https://github.com/angular/angular/commit/662da0d7), closes [#2026](https://github.com/angular/angular/issues/2026))
* **router:** add the router bundle to the bundle task. ([05fa9bc9](https://github.com/angular/angular/commit/05fa9bc9))
* add element probe ([f9908cd4](https://github.com/angular/angular/commit/f9908cd4), closes [#1992](https://github.com/angular/angular/issues/1992))
* **test_lib:**
* add method to compare stringified DOM element ([c6335c12](https://github.com/angular/angular/commit/c6335c12), closes [#2106](https://github.com/angular/angular/issues/2106))
* don't call onAllChangesDone on checkNoChanges ([a664f5a6](https://github.com/angular/angular/commit/a664f5a6))
* **XHRImpl:** fix errors, add a spec ([91ccc9af](https://github.com/angular/angular/commit/91ccc9af), closes [#1715](https://github.com/angular/angular/issues/1715))
* **browser:** template elements should have content imported instead of the element itself. ([c9ab8e4b](https://github.com/angular/angular/commit/c9ab8e4b))
* **di:** changed host and view injector to respect visibility ([705ee46f](https://github.com/angular/angular/commit/705ee46f))
* **element_injector:**
* fixed element injector to inject view dependencies into its components ([b6b52e62](https://github.com/angular/angular/commit/b6b52e62))
* fixed element injector to resolve dependencies of regular services ([28c2b8f4](https://github.com/angular/angular/commit/28c2b8f4))
* **forms:** changed forms to create only one value accessor instead of always creating Defau ([30c3e5a8](https://github.com/angular/angular/commit/30c3e5a8))
* **gulp:** continue watching when tasks throw ([ac28ac32](https://github.com/angular/angular/commit/ac28ac32), closes [#1915](https://github.com/angular/angular/issues/1915))
* **router:** router link should navigate to non-base Url. ([c4528321](https://github.com/angular/angular/commit/c4528321))
* **di:** changed toFactory to support dependency annotations ([f210c41c](https://github.com/angular/angular/commit/f210c41c))
* **forms:** migrated forms to typescript ([00c3693d](https://github.com/angular/angular/commit/00c3693d))
* **injector:** support forwardRef in toAlias ([fed86fc8](https://github.com/angular/angular/commit/fed86fc8))
<aname"2.0.0-alpha.24"></a>
### 2.0.0-alpha.24 (2015-05-19)
#### Bug Fixes
* **Compiler:** add an error when a directive is null or undefined ([25cd6e43](https://github.com/angular/angular/commit/25cd6e43), closes [#1908](https://github.com/angular/angular/issues/1908))
* **benchmark:**
* change If for NgIf ([cdbb2473](https://github.com/angular/angular/commit/cdbb2473))
* fixes ng-if ng-for renaming for templates. ([38926f71](https://github.com/angular/angular/commit/38926f71))
* **build:** npm shrinkwrap to pick up changed SHA1. ([04a9eb88](https://github.com/angular/angular/commit/04a9eb88))
* **ng1 benchmarks:** revert *ng-if to ng-if ([909233f7](https://github.com/angular/angular/commit/909233f7))
* **router:**
* use appRootComponentToken to get root route configs ([791caf00](https://github.com/angular/angular/commit/791caf00), closes [#1947](https://github.com/angular/angular/issues/1947))
* generate links for router-link with baseHref ([390cfb79](https://github.com/angular/angular/commit/390cfb79))
* sort possible routes by cost ([17392f66](https://github.com/angular/angular/commit/17392f66))
* **tree-differ:** treat symlinks to deleted paths as removals ([aad57954](https://github.com/angular/angular/commit/aad57954), closes [#1961](https://github.com/angular/angular/issues/1961))
#### Features
* allow for forward references in injection ([1eea2b25](https://github.com/angular/angular/commit/1eea2b25), closes [#1891](https://github.com/angular/angular/issues/1891))
* uppercase and lowercase pipes ([7a4a6353](https://github.com/angular/angular/commit/7a4a6353))
* implemented change detection that can be configured with pregenerated change det ([08f21dbf](https://github.com/angular/angular/commit/08f21dbf))
* **compiler:**
* special-case class attribute in hostAttributes ([3011cd86](https://github.com/angular/angular/commit/3011cd86), closes [#1774](https://github.com/angular/angular/issues/1774), [#1841](https://github.com/angular/angular/issues/1841))
* added support for [()] syntax ([685a6507](https://github.com/angular/angular/commit/685a6507))
* **di:**
* added hostInjector and viewInjector to the Directive annotation ([b066b8d1](https://github.com/angular/angular/commit/b066b8d1))
* **change_detection:** updated dynamic change detector not to mutate when throwing ([d717529e](https://github.com/angular/angular/commit/d717529e), closes [#1762](https://github.com/angular/angular/issues/1762))
* **forms:** export directives as const in Dart ([5036086f](https://github.com/angular/angular/commit/5036086f), closes [#1283](https://github.com/angular/angular/issues/1283))
* **gulpfile:** fixed test.unit.dart to format dart code before running test ([92d6aa1f](https://github.com/angular/angular/commit/92d6aa1f))
* **location:** dartium does not like pushState with null. ([c2a42d5d](https://github.com/angular/angular/commit/c2a42d5d))
* **router:**
* add baseUrl to relative paths, but not absolute. ([a5741541](https://github.com/angular/angular/commit/a5741541), closes [#1783](https://github.com/angular/angular/issues/1783))
* reuse common parent components ([ac80df09](https://github.com/angular/angular/commit/ac80df09))
* router-link works without params ([77d1fc14](https://github.com/angular/angular/commit/77d1fc14))
* strip base href from URLs when navigating ([853d1de6](https://github.com/angular/angular/commit/853d1de6))
* **test_lib:** spy funcs should match null arguments ([84dc6ae7](https://github.com/angular/angular/commit/84dc6ae7))
* **transformer:** remove classDefParser in favor of hardcoded strings to speed up build ([01d5c295](https://github.com/angular/angular/commit/01d5c295))
* **view:** fixed ProtoViewFactory to get all property bindings ([7f976381](https://github.com/angular/angular/commit/7f976381))
#### Features
* **PromisePipe:** add pipe for promises ([74987585](https://github.com/angular/angular/commit/74987585))
* **VmTurnZone:** Rework the implementation to minimize change detection runs ([e8a6c95e](https://github.com/angular/angular/commit/e8a6c95e))
* added support for host actions ([f9c1de46](https://github.com/angular/angular/commit/f9c1de46))
* allow setting attributes on a host element ([51839ca6](https://github.com/angular/angular/commit/51839ca6), closes [#1402](https://github.com/angular/angular/issues/1402))
* **di:**
* support type literals in DI ([358a6750](https://github.com/angular/angular/commit/358a6750))
* **lang:** support const expressions in TS/JS and Dart ([4665726f](https://github.com/angular/angular/commit/4665726f), closes [#1796](https://github.com/angular/angular/issues/1796))
* **material:**
* add early version of md-grid-list. ([8ef183b5](https://github.com/angular/angular/commit/8ef183b5), closes [#1683](https://github.com/angular/angular/issues/1683))
* early version of md-input ([ad239218](https://github.com/angular/angular/commit/ad239218), closes [#1753](https://github.com/angular/angular/issues/1753))
* **view:** allow to transplant a view into a ViewContainer at another place. ([4f3433b5](https://github.com/angular/angular/commit/4f3433b5), closes [#1492](https://github.com/angular/angular/issues/1492))
#### Breaking Changes
*
VmTurnZone has been renamed to NgZone.
- The public API has not chnanged,
- The "outer" zone is now named "mount" zone (private to NgZone).
* **brocolli:** escape special regexp characters when building regexps ([a58c9f83](https://github.com/angular/angular/commit/a58c9f83), closes [#1721](https://github.com/angular/angular/issues/1721), [#1752](https://github.com/angular/angular/issues/1752))
* **build:**
* build the broccoli tools with correct typescript version. ([6bba289a](https://github.com/angular/angular/commit/6bba289a))
* use correct tsd command to get typings at requested versions ([1205f54d](https://github.com/angular/angular/commit/1205f54d))
* revert typescript upgrade which broke the build. ([b5032fd3](https://github.com/angular/angular/commit/b5032fd3))
* refer to newest version of hammerjs typings ([a7a94636](https://github.com/angular/angular/commit/a7a94636))
* **bundle:** update the bundle config to point to rx.js ([cf322130](https://github.com/angular/angular/commit/cf322130))
* **change_detector:** ensure that locals are only used when implicit receiver ([d4925b61](https://github.com/angular/angular/commit/d4925b61), closes [#1542](https://github.com/angular/angular/issues/1542))
* **compiler:**
* clone templates before compiling them ([9e8d31d5](https://github.com/angular/angular/commit/9e8d31d5), closes [#1058](https://github.com/angular/angular/issues/1058))
* changed the compiler to set up event listeners and host properties on host view ([e3c11045](https://github.com/angular/angular/commit/e3c11045), closes [#1584](https://github.com/angular/angular/issues/1584))
* only sets viewDefinition absUrl if the view has either a template or templateUrl ([3d625463](https://github.com/angular/angular/commit/3d625463), closes [#1326](https://github.com/angular/angular/issues/1326), [#1327](https://github.com/angular/angular/issues/1327))
* **decorators:**
* incorrect annotation to decorator adapter ([b0c735f7](https://github.com/angular/angular/commit/b0c735f7))
@ -18,7 +18,7 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
## <a name="question"></a> Got a Question or Problem?
If you have questions about how to *use* Angular, please direct them to the [Google Group][angular-group]
discussion list or [StackOverflow][stackoverflow]. We are also available on [Gitter][gitter].
discussion list or [StackOverflow][stackoverflow]. Please note that Angular 2 is still in early developer preview, and the core team's capacity to answer usage questions is limited. We are also available on [Gitter][gitter].
## <a name="issue"></a> Found an Issue?
If you find a bug in the source code or a mistake in the documentation, you can help us by
@ -27,27 +27,16 @@ If you find a bug in the source code or a mistake in the documentation, you can
## <a name="feature"></a> Want a Feature?
You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
Repository][github]. If you would like to *implement* a new feature then consider what kind of
change it is:
Repository][github]. If you would like to *implement* a new feature, please submit an issue with
a proposal for your work first, to be sure that we can use it. Angular 2 is in developer preview
and we are not ready to accept major contributions ahead of the full release.
Please consider what kind of change it is:
* For a **Major Feature**, first open an issue and outline your proposal so that it can be
discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
and help you to craft the change so that it is successfully accepted into the project.
* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
## <a name="docs"></a> Want a Doc Fix?
If you want to help improve the docs, then consider what kind of improvement it is:
* For **Major Changes**, it's a good idea to let others know what you're working on to
minimize duplication of effort. Before starting, check out the issue queue for
**Optional**: In this document, we make use of project local `npm` package scripts and binaries
(stored under `./node_modules/.bin`) by prefixing these command invocations with `$(npm bin)`; in
particular `gulp` and `protractor` commands. If you prefer, you can drop this path prefix by
globally installing these two packages as follows:
particular `gulp` and `protractor` commands. If you prefer, you can drop this path prefix by either:
*Option 1*: globally installing these two packages as follows:
*`npm install -g gulp` (you might need to prefix this command with `sudo`)
*`npm install -g protractor` (you might need to prefix this command with `sudo`)
Since global installs can become stale, we avoid their use in these instructions.
Since global installs can become stale, and required versions can vary by project, we avoid their
use in these instructions.
*Option 2*: defining a bash alias like `alias nbin='PATH=$(npm bin):$PATH'` as detailed in this
[Stackoverflow answer](http://stackoverflow.com/questions/9679932/how-to-use-package-installed-locally-in-node-modules/15157360#15157360) and used like this: e.g., `nbin gulp build`.
## Build commands
To build Angular and prepare tests run
To build Angular and prepare tests, run:
```shell
$(npm bin)/gulp build
@ -124,42 +127,60 @@ $(npm bin)/gulp build
Notes:
* Results are put in the `dist` folder.
* This will also run `pub get` for the subfolders in `modules` and run `dartanalyzer` for
every file that matches `<module>/src/<module>.dart`, e.g. `di/src/di.dart`
every file that matches `<module>/src/<module>.dart`, e.g. `di/src/di.dart`.
You can selectively build either the JS or Dart versions as follows:
*`$(npm bin)/gulp build.js`
*`$(npm bin)/gulp build.dart`
To clean out the `dist` folder, run:
To clean out the `dist` folder use:
```shell
$(npm bin)/gulp clean
```
## Running Tests Locally
### Basic tests
### Full test suite
1.`$(npm bin)/gulp test.unit.js`: JS tests in a browser; runs in **watch mode** (i.e. karma
watches the test files for changes and re-runs tests when files are updated).
2.`$(npm bin)/gulp test.unit.cjs`: JS tests in NodeJS; runs in **watch mode**
3.`$(npm bin)/gulp test.unit.dart`: Dart tests in Dartium; runs in **watch mode**.
*`npm test`: full test suite for both JS and Dart versions of Angular. These are the same tests
that run on Travis.
If you prefer running tests in "single-run" mode rather than watch mode use
You can selectively run either the JS or Dart versions as follows:
*`$(npm bin)/gulp test.all.js`
*`$(npm bin)/gulp test.all.dart`
### Unit tests
You can run just the unit tests as follows:
*`$(npm bin)/gulp test.unit.js`: JS tests in a browser; runs in **watch mode** (i.e.
watches the test files for changes and re-runs tests when files are updated).
* `$(npm bin)/gulp test.unit.cjs`: JS tests in NodeJS; runs in **watch mode**.
* `$(npm bin)/gulp test.unit.dart`: Dart tests in Dartium; runs in **watch mode**.
If you prefer running tests in "single-run" mode rather than watch mode use:
*`$(npm bin)/gulp test.unit.js/ci`
*`$(npm bin)/gulp test.unit.cjs/ci`
*`$(npm bin)/gulp test.unit.dart/ci`
**Note**: If you want to only run a single test you can alter the test you wish
to run by changing `it` to `iit` or `describe` to `ddescribe`. This will only
run that individual test and make it much easier to debug. `xit` and `xdescribe`
can also be useful to exclude a test and a group of tests respectively.
The task updates the dist folder with transpiled code whenever a source or test file changes, and
Karma is run against the new output.
**Note** for transpiler tests: The karma preprocessor is setup in a way so that after every test
run the transpiler is reloaded. With that it is possible to make changes to the preprocessor and
run the tests without exiting karma (just touch a test file that you would like to run).
**Note**: If you want to only run a single test you can alter the test you wish to run by changing
`it` to `iit` or `describe` to `ddescribe`. This will only run that individual test and make it
much easier to debug. `xit` and `xdescribe` can also be useful to exclude a test and a group of
tests respectively.
### E2e tests
1.`$(npm bin)/gulp build.js.cjs` (builds benchpress and tests into `dist/js/cjs` folder).
2.`$(npm bin)/gulp serve.js.prod serve.js.dart2js` (runs local webserver).
2.`$(npm bin)/gulp serve.js.prod serve.js.dart2js` (runs a local webserver).
Angular [](https://travis-ci.org/angular/angular) [](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@ -18,35 +28,15 @@ Follow the instructions given on the [Angular download page][download].
## Want to help?
Want to file a bug, or contribute some code or improve documentation? Excellent! Read up on our
guidelines for [contributing][contributing].
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
## Examples
To see the examples, first build the project as described
@ -6,17 +6,12 @@ Directives are the cornerstone of an Angular application. We use Directives to b
Angular applications do not have a main method. Instead they have a root Component. Dependency Injection then assembles the directives into a working Angular application.
There are three different kinds of directives (described in more detail in later sections).
1.*Decorators*: can be placed on any DOM element and can be combined with other directives.
2.*Components*: Components have an encapsulated view and can configure injectors.
3.*Viewport*: is responsible for adding or removing child views in a parent view. (i.e. foreach, if)
Directives with an encapsulated view and an optional injector are called *Components*.
## CSS Selectors
Decorators are instantiated whenever the decorator CSS selector matches the DOM structure.
Directives are instantiated whenever the CSS selector matches the DOM structure.
Angular supports these CSS selector constructs:
* Element name: `name`
@ -26,15 +21,16 @@ Angular supports these CSS selector constructs:
* Class: `.class`
* AND operation: `name[attribute]`
* OR operation: `name,.class`
* NOT operation: `:not(.class)`
Angular does not support these (and any CSS selector which crosses element boundaries):
* Descendant: `body div`
* Direct descendant: `body > div`
* Direct descendant: `body > div`
* Adjacent: `div + table`
* Sibling: `div ~ table`
* Wildcard: `*`
* ID: `#id`
* Pseudo selectors: `:pseudo`
* Pseudo selectors: `:pseudo` other than `:not`
@ -50,36 +46,36 @@ These CSS selectors will match:
CSS Selectors can be combined:
* `input[type=text]`: Triggers on element name `input` which is of `type` `text`.
* `input[type=text], textarea`: triggers on element name `input` which is of `type` `text` or element name `textarea`
* `input[type=text], textarea`: triggers on element name `input` which is of `type` `text` or element name `textarea`.
## Decorators
## Directives
The simplest kind of directive is a decorator. Directives are usefull for encapsulating behavior.
* Multiple decorators can be placed on a single element.
* Decorators do not introduce new evaluation context.
* Decorators are registered through the `@Decorator` meta-data annotation.
* Directives do not introduce new evaluation context.
* Directives are registered through the `@Directive` meta-data annotation.
Here is a trivial example of a tooltip decorator. The directive will log a tooltip into the console on every time mouse enters a region:
```
@Decorator({
selector: '[tooltip]', // CSS Selector which triggers the decorator
bind: { // List which properties need to be bound
text: 'tooltip' // - DOM element tooltip property should be
}, // mapped to the directive text property.
event: { // List which events need to be mapped.
mouseover: 'show' // - Invoke the show() method every time
} // the mouseover event is fired.
})
class Form { // Directive controller class, instantiated
// when CSS matches.
text:string; // text property on the Decorator Controller.
show(event) { // Show method which implements the show action.
console.log(this.text);
@Directive({
selector: '[tooltip]', | CSS Selector which triggers the decorator
properties: [| List which properties need to be bound
'text: tooltip' | - DOM element tooltip property should be
], | mapped to the directive text property.
host: { | List which events need to be mapped.
(mouseover): 'show()' | - Invoke the show() method every time
} | the mouseover event is fired.
}) |
class Form { | Directive controller class, instantiated
| when CSS matches.
text:string; | text property on the Directive Controller.
|
show(event) { | Show method which implements the show action.
console.log(this.text); |
}
}
```
@ -112,23 +108,23 @@ Example of a component:
```
@Component({ | Component annotation
selector: 'pane', | CSS selector on <pane> element
bind: { | List which property need to be bound
'title': 'title', | - title mapped to component title
'open': 'open' | - open attribute mapped to component's open property
}, |
properties: [ | List which property need to be bound
'title', | - title mapped to component title
'open' | - open attribute mapped to component's open property
], |
}) |
@Template({ | Template annotation
url: 'pane.html' | - URL of template HTML
@View({ | View annotation
templateUrl: 'pane.html' | - URL of template HTML
}) |
class Pane { | Component controller class
title:string; | - title property
title:string; | - title property
open:boolean;
constructor() {
this.title = '';
this.open = true;
}
// Public API
toggle() => this.open = !this.open;
open() => this.open = true;
@ -140,7 +136,7 @@ class Pane { | Component controller class
```
<div class="outer">
<h1>{{title}}</h1>
<div class="inner" [hidden]="!visible">
<div class="inner" [hidden]="!open">
<content></content>
</div>
</div>
@ -163,39 +159,39 @@ Example of usage:
## Viewport
## Directives that use a ViewContainer
Viewport is a directive which can control instantiation of child views which are then inserted into the DOM. (Examples are `if` and `foreach`.)
Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.)
* Viewports can only be placed on `<template>` elements (or the short hand version which uses `<elementtemplate>` attribute.)
* Only one viewport can be present per DOM template element.
* The viewport is created over the `template` element. This is known as the `ViewContainer`.
* Viewport can insert child views into the `ViewContainer`. The child views show up as siblings of the `Viewport` in the DOM.
* Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
* The child views show up as siblings of the directive in the DOM.
>> TODO(misko): Relationship with Injection
>> TODO(misko): Instantiator can not be injected into child Views
@ -213,37 +209,37 @@ Dependency Injection (DI) is a key aspect of directives. DI allows directives to
When Angular directives are instantiated, the directive can ask for other related directives to be injected into it. By assembling the directives in different order and subtypes the application behavior can be controlled. A good mental model is that the DOM structure controls the directive instantiation graph.
Directive instantiation is triggered by the directive CSS selector matching the DOM structure. The directive in its constructor can ask for other directives or application services. When asking for directives the dependency is locating by following the DOM hierarchy and if not found using the application level injector.
Directive instantiation is triggered by the directive CSS selector matching the DOM structure. In a directive's constructor, it can ask for other directives or application services. When asking for directives, the dependency is attempted to be located by its DOM hierarchy first, then if not found, by using the application level injector.
To better understand the kinds of injections which are supported in Angular we have broken them down into use case examples.
### Injecting Services
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `services` and then letting the directive ask for the configured service.
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `appInjector` and then letting the directive ask for the configured service.
This example illustrates how to inject `MyService` into `House` directive.
```
class MyService {} | Assume a service which needs to be injected
class MyService {} | Assume a service which needs to be injected
| into a directive.
|
@Component({ | Assume a top level application component which
@Component({ | Assume a top level application component which
selector: 'my-app', | configures the services to be injected.
services: [MyService] |
appInjector: [MyService] |
}) |
@Template({ | Assume we have a template that needs to be
url: 'my_app.html', | configured with directives to be injected.
directives: [House] |
@View({ | Assume we have a template that needs to be
templateUrl: 'my_app.html', | configured with directives to be injected.
directives: [House] |
}) |
class MyApp {} |
|
@Decorator({ | This is the directive into which we would like
@Directive({ | This is the directive into which we would like
selector: '[house]' | to inject the MyService.
}) |
class House { |
constructor(myService:MyService) { | Notice that in the constructor we can simply
constructor(myService:MyService) { | Notice that in the constructor we can simply
} | ask for MyService.
} |
@ -252,7 +248,7 @@ class House { |
Assume the following DOM structure for `my_app.html`:
```
<div house> | The house attribute triggers the creation of the House directive.
<div house> | The house attribute triggers the creation of the House directive.
</div> | This is equivalent to:
| new House(injector.get(MyService));
```
@ -260,58 +256,58 @@ Assume the following DOM structure for `my_app.html`:
### Injecting other Directives
Injecting other directives into directives follows a similar mechanism as injecting services, but with added constraint of visibility governed by DOM structure.
Injecting other directives into directives follows a similar mechanism as injecting services into directives, but with added constraint of visibility governed by DOM structure.
There are five kinds of visibilities:
* (no annotation): Inject dependant directives only if they are on the current element.
* (no annotation): Inject dependant directives only if they are on the current element.
* `@ancestor`: Inject a directive if it is at any element above the current element.
* `@parent`: Inject a directive which is direct parent of the current element.
* `@parent`: Inject a directive which is a direct parent of the current element.
* `@child`: Inject a list of direct children which match a given type. (Used with `Query`)
* `@descendant`: Inject a list of any children which match a given type. (Used with `Query`)
NOTE: if the injection constraint can not be satisfied by the current visibility constraint, then it is forward to the normal injector which may provide a default value for the directive or it may throw an error.
NOTE: if the injection constraint can not be satisfied by the current visibility constraint, then it is forwarded to the normal injector which either provides a default value for the directive or throws an error.
Here is an example of the kinds of injections which can be achieved:
```
@Component({ |
selector: 'my-app', |
template: new TemplateConfig({ |
url: 'my_app.html', |
directives: [Form, FieldSet, |
Field, Primary] |
}) |
selector: 'my-app' |
}) |
@View({ |
templateUrl: 'my_app.html', |
directives: [Form, FieldSet, |
Field, Primary] |
}) |
class MyApp {} |
|
@Decorator({ selector: 'form' }) |
@Directive({ selector: 'form' }) |
class Form { |
constructor( |
@descendant sets:Query<FieldSet> |
) { |
} |
) { |
} |
} |
|
@Decorator({ selector: 'fieldset' }) |
@Directive({ selector: 'fieldset' }) |
class FieldSet { |
constructor( |
@child sets:Query<Field> |
) { ... } |
) { ... } |
} |
|
@Decorator({ selector: 'field' }) |
@Directive({ selector: 'field' }) |
class Field { |
constructor( |
@ancestor field:Form, |
@parent field:FieldSet, |
) { ... } |
) { ... } |
} |
|
@Decorator({ selector: '[primary]'}) |
@Directive({ selector: '[primary]'}) |
class Primary { |
constructor(field:Field ) { ... } |
constructor(field:Field ) { ... } |
} |
```
@ -322,17 +318,74 @@ Assume the following DOM structure for `my_app.html`:
<fieldset> |
<field primary></field> |
<field></field> |
</div> |
</fieldset> |
</form> |
</fieldset> |
</div> |
</form> |
```
#### Shadow DOM effects on Directive DI
### Shadow DOM effects on Dependency Injection
Shadow DOM provides an encapsulation for components, so as a general rule it does not allow directive injections to cross the shadow DOM boundaries. To remedy this, declaritively specify the required component as an injectable.
Shadow DOM provides an encapsulation for components, so as a general rule it does not allow directive injections to cross the shadow DOM boundaries.
```
@Component({
selector: '[kid]',
appInjector: []
})
@View({
templateUrl: 'kid.html',
directives: []
})
class Kid {
constructor(
@Parent() dad:Dad,
@Optional() grandpa:Grandpa
) {
this.name = 'Billy';
this.dad = dad.name;
this.grandpa = grandpa.name;
}
}
@Component({
selector: '[dad]',
appInjector: [Grandpa]
})
@View({
templateUrl: 'dad.html',
directives: [Kid]
})
class Dad {
constructor(@Parent() dad:Grandpa) {
this.name = 'Joe Jr';
this.dad = dad.name;
}
}
@Component({
selector: '[grandpa]',
appInjector: []
})
@View({
templateUrl: 'grandpa.html',
directives: [Dad]
})
class Grandpa {
constructor() {
this.name = 'Joe';
}
}
```
Assume the following DOM structure for `grandpa.html`: The Dad has access to the Grandpa.
```
Name: {{name}}: <br> Children: <div dad></div>
```
Assume the following DOM structure for `dad.html`: Here the rendered Kid will also have access to Grandpa.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
