From 04ff97cd72aa89d31a6d29404128ed0fb6767545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 15 Dec 2015 20:23:55 +0100 Subject: [PATCH] tech(systemjs): tricky mixing systemjs and requirejs, might need to migrate --- public/app/core/controllers/all.js | 12 - public/app/core/controllers/all.ts | 15 + public/app/core/controllers/grafana_ctrl.js | 140 - public/app/core/controllers/grafana_ctrl.ts | 138 + public/app/core/core.ts | 12 +- public/app/core/core_module.ts | 2 +- public/app/core/directives/array_join.ts | 2 +- public/app/headers/angular2/angular2.d.ts | 12214 ++++++++++++++++ public/app/headers/angularjs/angularjs.d.ts | 1 - public/app/headers/common.d.ts | 6 + .../app/headers/es6-promise/es6-promise.d.ts | 6 +- public/app/headers/rx/rx-lite.d.ts | 696 + public/app/headers/rx/rx.d.ts | 67 + public/app/headers/tsd.d.ts | 3 + public/app/jspm.conf.js | 2 +- tasks/options/typescript.js | 2 +- tsd.json | 11 +- 17 files changed, 13166 insertions(+), 163 deletions(-) delete mode 100644 public/app/core/controllers/all.js create mode 100644 public/app/core/controllers/all.ts delete mode 100644 public/app/core/controllers/grafana_ctrl.js create mode 100644 public/app/core/controllers/grafana_ctrl.ts create mode 100644 public/app/headers/angular2/angular2.d.ts create mode 100644 public/app/headers/rx/rx-lite.d.ts create mode 100644 public/app/headers/rx/rx.d.ts diff --git a/public/app/core/controllers/all.js b/public/app/core/controllers/all.js deleted file mode 100644 index d22010cffdc..00000000000 --- a/public/app/core/controllers/all.js +++ /dev/null @@ -1,12 +0,0 @@ -define([ - './grafana_ctrl', - './search_ctrl', - './inspect_ctrl', - './json_editor_ctrl', - './login_ctrl', - './invited_ctrl', - './signup_ctrl', - './reset_password_ctrl', - './sidemenu_ctrl', - './error_ctrl', -], function () {}); diff --git a/public/app/core/controllers/all.ts b/public/app/core/controllers/all.ts new file mode 100644 index 00000000000..72124a5aeec --- /dev/null +++ b/public/app/core/controllers/all.ts @@ -0,0 +1,15 @@ +import grafanaCtrl from './grafana_ctrl'; +export {grafanaCtrl}; + +// define([ +// './grafana_ctrl', +// './search_ctrl', +// './inspect_ctrl', +// './json_editor_ctrl', +// './login_ctrl', +// './invited_ctrl', +// './signup_ctrl', +// './reset_password_ctrl', +// './sidemenu_ctrl', +// './error_ctrl', +// ], function () {}); diff --git a/public/app/core/controllers/grafana_ctrl.js b/public/app/core/controllers/grafana_ctrl.js deleted file mode 100644 index 0d1166e71c3..00000000000 --- a/public/app/core/controllers/grafana_ctrl.js +++ /dev/null @@ -1,140 +0,0 @@ -define([ - 'angular', - 'lodash', - 'jquery', - '../core_module', - 'app/core/config', - 'app/core/store', -], -function (angular, _, $, coreModule, config, store) { - "use strict"; - - coreModule.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) { - console.log('grafana ctrl'); - - $scope.init = function() { - $scope.contextSrv = contextSrv; - - $scope._ = _; - - $rootScope.profilingEnabled = store.getBool('profilingEnabled'); - $rootScope.performance = { loadStart: new Date().getTime() }; - $rootScope.appSubUrl = config.appSubUrl; - - if ($rootScope.profilingEnabled) { $scope.initProfiling(); } - - alertSrv.init(); - utilSrv.init(); - - $scope.dashAlerts = alertSrv; - }; - - $scope.initDashboard = function(dashboardData, viewScope) { - $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData); - }; - - $rootScope.onAppEvent = function(name, callback, localScope) { - var unbind = $rootScope.$on(name, callback); - var callerScope = this; - if (callerScope.$id === 1 && !localScope) { - console.log('warning rootScope onAppEvent called without localscope'); - } - if (localScope) { - callerScope = localScope; - } - callerScope.$on('$destroy', unbind); - }; - - $rootScope.appEvent = function(name, payload) { - $rootScope.$emit(name, payload); - }; - - $rootScope.colors = [ - "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", //1 - "#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477", //2 - "#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0", //3 - "#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93", //4 - "#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7", //5 - "#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B", //6 - "#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7" //7 - ]; - - $scope.getTotalWatcherCount = function() { - var count = 0; - var scopes = 0; - var root = $(document.getElementsByTagName('body')); - - var f = function (element) { - if (element.data().hasOwnProperty('$scope')) { - scopes++; - angular.forEach(element.data().$scope.$$watchers, function () { - count++; - }); - } - - angular.forEach(element.children(), function (childElement) { - f($(childElement)); - }); - }; - - f(root); - $rootScope.performance.scopeCount = scopes; - return count; - }; - - $scope.initProfiling = function() { - var count = 0; - - $scope.$watch(function digestCounter() { - count++; - }, function() { - }); - - $rootScope.performance.panels = []; - - $scope.$on('refresh', function() { - if ($rootScope.performance.panels.length > 0) { - var totalRender = 0; - var totalQuery = 0; - - _.each($rootScope.performance.panels, function(panelTiming) { - totalRender += panelTiming.render; - totalQuery += panelTiming.query; - }); - - console.log('total query: ' + totalQuery); - console.log('total render: ' + totalRender); - console.log('avg render: ' + totalRender / $rootScope.performance.panels.length); - } - - $rootScope.performance.panels = []; - }); - - $scope.onAppEvent('dashboard-loaded', function() { - count = 0; - - setTimeout(function() { - console.log("Dashboard::Performance Total Digests: " + count); - console.log("Dashboard::Performance Total Watchers: " + $scope.getTotalWatcherCount()); - console.log("Dashboard::Performance Total ScopeCount: " + $rootScope.performance.scopeCount); - - var timeTaken = $rootScope.performance.allPanelsInitialized - $rootScope.performance.dashboardLoadStart; - console.log("Dashboard::Performance - All panels initialized in " + timeTaken + " ms"); - - // measure digest performance - var rootDigestStart = window.performance.now(); - for (var i = 0; i < 30; i++) { - $rootScope.$apply(); - } - console.log("Dashboard::Performance Root Digest " + ((window.performance.now() - rootDigestStart) / 30)); - - }, 3000); - - }); - - }; - - $scope.init(); - - }); -}); diff --git a/public/app/core/controllers/grafana_ctrl.ts b/public/app/core/controllers/grafana_ctrl.ts new file mode 100644 index 00000000000..a0e3f8e401a --- /dev/null +++ b/public/app/core/controllers/grafana_ctrl.ts @@ -0,0 +1,138 @@ +/// + +import angular = require('angular'); +import config = require('app/core/config'); +import store = require('app/core/store'); +import coreModule from '../core_module'; + +coreModule.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) { + console.log('grafana ctrl'); + + $scope.init = function() { + $scope.contextSrv = contextSrv; + + $scope._ = _; + + $rootScope.profilingEnabled = store.getBool('profilingEnabled'); + $rootScope.performance = { loadStart: new Date().getTime() }; + $rootScope.appSubUrl = config.appSubUrl; + + if ($rootScope.profilingEnabled) { $scope.initProfiling(); } + + alertSrv.init(); + utilSrv.init(); + + $scope.dashAlerts = alertSrv; + }; + + $scope.initDashboard = function(dashboardData, viewScope) { + $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData); + }; + + $rootScope.onAppEvent = function(name, callback, localScope) { + var unbind = $rootScope.$on(name, callback); + var callerScope = this; + if (callerScope.$id === 1 && !localScope) { + console.log('warning rootScope onAppEvent called without localscope'); + } + if (localScope) { + callerScope = localScope; + } + callerScope.$on('$destroy', unbind); + }; + + $rootScope.appEvent = function(name, payload) { + $rootScope.$emit(name, payload); + }; + + $rootScope.colors = [ + "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", //1 + "#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477", //2 + "#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0", //3 + "#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93", //4 + "#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7", //5 + "#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B", //6 + "#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7" //7 + ]; + + $scope.getTotalWatcherCount = function() { + var count = 0; + var scopes = 0; + var root = $(document.getElementsByTagName('body')); + + var f = function (element) { + if (element.data().hasOwnProperty('$scope')) { + scopes++; + angular.forEach(element.data().$scope.$$watchers, function () { + count++; + }); + } + + angular.forEach(element.children(), function (childElement) { + f($(childElement)); + }); + }; + + f(root); + $rootScope.performance.scopeCount = scopes; + return count; + }; + + $scope.initProfiling = function() { + var count = 0; + + $scope.$watch(function digestCounter() { + count++; + }, function() { + }); + + $rootScope.performance.panels = []; + + $scope.$on('refresh', function() { + if ($rootScope.performance.panels.length > 0) { + var totalRender = 0; + var totalQuery = 0; + + _.each($rootScope.performance.panels, function(panelTiming: any) { + totalRender += panelTiming.render; + totalQuery += panelTiming.query; + }); + + console.log('total query: ' + totalQuery); + console.log('total render: ' + totalRender); + console.log('avg render: ' + totalRender / $rootScope.performance.panels.length); + } + + $rootScope.performance.panels = []; + }); + + $scope.onAppEvent('dashboard-loaded', function() { + count = 0; + + setTimeout(function() { + console.log("Dashboard::Performance Total Digests: " + count); + console.log("Dashboard::Performance Total Watchers: " + $scope.getTotalWatcherCount()); + console.log("Dashboard::Performance Total ScopeCount: " + $rootScope.performance.scopeCount); + + var timeTaken = $rootScope.performance.allPanelsInitialized - $rootScope.performance.dashboardLoadStart; + console.log("Dashboard::Performance - All panels initialized in " + timeTaken + " ms"); + + // measure digest performance + var rootDigestStart = window.performance.now(); + for (var i = 0; i < 30; i++) { + $rootScope.$apply(); + } + console.log("Dashboard::Performance Root Digest " + ((window.performance.now() - rootDigestStart) / 30)); + + }, 3000); + + }); + + }; + + $scope.init(); + +}); + +var grafanaCtrl = {}; +export default grafanaCtrl; diff --git a/public/app/core/core.ts b/public/app/core/core.ts index c487f6d78bf..c7e0d3dd784 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -21,7 +21,13 @@ /// /// -export * from './directives/array_join' -export * from './directives/give_focus' -export * from './filters/filters' +import {arrayJoin} from './directives/array_join'; +import * as test from './controllers/all'; +// export * from './directives/give_focus' +// export * from './filters/filters' +// +// import {Component} from 'angular2/angular2'; +// console.log(Component); + +export {arrayJoin, test}; diff --git a/public/app/core/core_module.ts b/public/app/core/core_module.ts index 926036c5149..08f6fc737c9 100644 --- a/public/app/core/core_module.ts +++ b/public/app/core/core_module.ts @@ -2,4 +2,4 @@ import angular = require('angular'); -export = angular.module('grafana.core', ['ngRoute']); +export default angular.module('grafana.core', ['ngRoute']); diff --git a/public/app/core/directives/array_join.ts b/public/app/core/directives/array_join.ts index b9fb15406f0..ff27a0e9e25 100644 --- a/public/app/core/directives/array_join.ts +++ b/public/app/core/directives/array_join.ts @@ -2,7 +2,7 @@ import angular = require('angular'); import _ = require('lodash'); -import coreModule = require('../core_module'); +import coreModule from '../core_module'; export function arrayJoin() { 'use strict'; diff --git a/public/app/headers/angular2/angular2.d.ts b/public/app/headers/angular2/angular2.d.ts new file mode 100644 index 00000000000..733c9e8effb --- /dev/null +++ b/public/app/headers/angular2/angular2.d.ts @@ -0,0 +1,12214 @@ +// Type definitions for Angular v2.0.0-alpha.37 +// Project: http://angular.io/ +// Definitions by: angular team +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +// *********************************************************** +// This file is generated by the Angular build process. +// Please do not create manual edits or send pull requests +// modifying this file. +// *********************************************************** + +// angular2/angular2 depends transitively on these libraries. +// If you don't have them installed you can install them using TSD +// https://github.com/DefinitelyTyped/tsd + +/// +/// +// angular2/web_worker/worker depends transitively on these libraries. +// If you don't have them installed you can install them using TSD +// https://github.com/DefinitelyTyped/tsd + +/// +/// +// angular2/web_worker/ui depends transitively on these libraries. +// If you don't have them installed you can install them using TSD +// https://github.com/DefinitelyTyped/tsd + +/// +/// + + +interface Map {} +interface StringMap extends Map {} + + +declare module ng { + // See https://github.com/Microsoft/TypeScript/issues/1168 + class BaseException /* extends Error */ { + message: string; + stack: string; + toString(): string; + } + interface InjectableReference {} +} + +declare module ngWorker { + // See https://github.com/Microsoft/TypeScript/issues/1168 + class BaseException /* extends Error */ { + message: string; + stack: string; + toString(): string; + } + interface InjectableReference {} +} + +declare module ngUi { + // See https://github.com/Microsoft/TypeScript/issues/1168 + class BaseException /* extends Error */ { + message: string; + stack: string; + toString(): string; + } + interface InjectableReference {} +} + + + + + +/** + * The `angular2` is the single place to import all of the individual types. + */ +declare module ng { + + /** + * 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 + * + * + * + * loading... + * + * + * ``` + * + * 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). 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 the app + * injector + * to override default injection behavior. + * - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for + * unhandled exceptions. + * + * Returns a `Promise` of {@link ApplicationRef}. + */ + function bootstrap(appComponentType: /*Type*/ any, componentInjectableBindings?: Array) : Promise ; + + + /** + * 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 all the injectable objects configured with `bindings` and `viewBindings`. + * + * All template expressions and statements are then evaluated against the component instance. + * + * For details on the `@View` annotation, see {@link ViewMetadata}. + * + * ## Example + * + * ``` + * @Component({ + * selector: 'greet' + * }) + * @View({ + * template: 'Hello {{name}}!' + * }) + * class Greet { + * name: string; + * + * constructor() { + * this.name = 'World'; + * } + * } + * ``` + */ + class ComponentMetadata extends DirectiveMetadata { + + + /** + * 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. + */ + changeDetection: ChangeDetectionStrategy; + + + /** + * Defines the set of injectable objects that are visible to its view dom children. + * + * ## Simple Example + * + * Here is an example of a class that can be injected: + * + * ``` + * class Greeter { + * greet(name:string) { + * return 'Hello ' + name + '!'; + * } + * } + * + * @Directive({ + * selector: 'needs-greeter' + * }) + * class NeedsGreeter { + * greeter:Greeter; + * + * constructor(greeter:Greeter) { + * this.greeter = greeter; + * } + * } + * + * @Component({ + * selector: 'greet', + * viewBindings: [ + * Greeter + * ] + * }) + * @View({ + * template: ``, + * directives: [NeedsGreeter] + * }) + * class HelloWorld { + * } + * + * ``` + */ + viewBindings: any[]; + } + + + /** + * Directives allow you to attach behavior to elements in the DOM. + * + * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s. + * + * 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 {@link Injector} 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 instance has its own {@link Injector}, and they follow + * the same parent-child hierarchy + * as the component instances in the DOM. + * - *Element Injectors*: Each component instance 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 + * {@link ViewMetadata}: + * + * 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 + * - `@Host() directive:DirectiveType`: any directive that matches the type between the current + * element and the + * Shadow DOM root. + * - `@Query(DirectiveType) query:QueryList`: A live collection of direct child + * directives. + * - `@QueryDescendants(DirectiveType) query:QueryList`: A live collection of any + * child directives. + * + * To inject element-specific special objects, declare the constructor parameter as: + * - `element: ElementRef` to obtain a reference to logical element in the view. + * - `viewContainer: ViewContainerRef` to control child template instantiation, for + * {@link DirectiveMetadata} 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: + * + * ``` + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ``` + * + * With the following `dependency` decorator and `SomeService` injectable class. + * + * ``` + * @Injectable() + * class SomeService { + * } + * + * @Directive({ + * 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`. + * + * ``` + * @Directive({ 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. + * ``` + * @Directive({ 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. + * + * ``` + * @Directive({ 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 any ancestor elements + * + * Directives can inject other directives declared on any ancestor element (in the current Shadow + * DOM), i.e. on the current element, the + * parent element, or its parents. + * ``` + * @Directive({ selector: '[my-directive]' }) + * class MyDirective { + * constructor(@Host() dependency: Dependency) { + * expect(dependency.id).toEqual(2); + * } + * } + * ``` + * + * `@Host` checks the current element, 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 {@link QueryList}, which updates its contents as children are added, + * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an + * `ng-if`, or an `ng-switch`. + * + * ``` + * @Directive({ selector: '[my-directive]' }) + * class MyDirective { + * constructor(@Query(Dependency) dependencies:QueryList) { + * } + * } + * ``` + * + * This directive would be instantiated with a {@link QueryList} 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 + * + * By passing the descendant flag to `@Query` above, we can include the children of the child + * elements. + * + * ``` + * @Directive({ selector: '[my-directive]' }) + * class MyDirective { + * constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList) { + * } + * } + * ``` + * + * 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. + * + * ``` + * @Directive({ 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. + * + * ## Example + * + * Here we use a decorator directive to simply define basic tool-tip behavior. + * + * ``` + * @Directive({ + * selector: '[tooltip]', + * properties: [ + * 'text: tooltip' + * ], + * host: { + * '(mouseenter)': 'onMouseEnter()', + * '(mouseleave)': '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 `
` or any other element with the + * `tooltip` selector, + * like so: + * + * ``` + *
+ * ``` + * + * Directives can also control the instantiation, destruction, and positioning of inline template + * elements: + * + * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at + * runtime. + * The {@link ViewContainerRef} is created as a result of `