@angular/upgrade
Advanced tools
Comparing version 2.2.0 to 2.2.1
| /** | ||
| * @license Angular v2.2.0 | ||
| * @license Angular v2.2.1 | ||
| * (c) 2010-2016 Google, Inc. https://angular.io/ | ||
@@ -24,2 +24,5 @@ * License: MIT | ||
| var $SCOPE = '$scope'; | ||
| var $PROVIDE = '$provide'; | ||
| var $DELEGATE = '$delegate'; | ||
| var $$TESTABILITY = '$$testability'; | ||
| var $COMPILE = '$compile'; | ||
@@ -37,2 +40,8 @@ var $TEMPLATE_CACHE = '$templateCache'; | ||
| */ | ||
| /** | ||
| * A `PropertyBinding` represents a mapping between a property name | ||
| * and an attribute name. It is parsed from a string of the form | ||
| * `"prop: attr"`; or simply `"propAndAttr" where the property | ||
| * and attribute have the same identifier. | ||
| */ | ||
| var PropertyBinding = (function () { | ||
@@ -224,2 +233,46 @@ function PropertyBinding(binding) { | ||
| /** | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows an Angular 2+ component to be used from Angular 1. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * Let's assume that you have an Angular 2+ component called `ng2Heroes` that needs | ||
| * to be made available in Angular 1 templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes"} | ||
| * | ||
| * We must create an Angular 1 [directive](https://docs.angularjs.org/guide/directive) | ||
| * that will make this Angular 2+ component available inside Angular 1 templates. | ||
| * The `downgradeComponent()` function returns a factory function that we | ||
| * can use to define the Angular 1 directive that wraps the "downgraded" component. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes-wrapper"} | ||
| * | ||
| * In this example you can see that we must provide information about the component being | ||
| * "downgraded". This is because once the AoT compiler has run, all metadata about the | ||
| * component has been removed from the code, and so cannot be inferred. | ||
| * | ||
| * We must do the following: | ||
| * * specify the Angular 2+ component class that is to be downgraded | ||
| * * specify all inputs and outputs that the Angular 1 component expects | ||
| * | ||
| * @description | ||
| * | ||
| * A helper function that returns a factory function to be used for registering an | ||
| * Angular 1 wrapper directive for "downgrading" an Angular 2+ component. | ||
| * | ||
| * The parameter contains information about the Component that is being downgraded: | ||
| * | ||
| * * `component: Type<any>`: The type of the Component that will be downgraded | ||
| * * `inputs: string[]`: A collection of strings that specify what inputs the component accepts. | ||
| * * `outputs: string[]`: A collection of strings that specify what outputs the component emits. | ||
| * | ||
| * The `inputs` and `outputs` are strings that map the names of properties to camelCased | ||
| * attribute names. They are of the form `"prop: attr"`; or simply `"propAndAttr" where the | ||
| * property and attribute have the same identifier. | ||
| * | ||
| * @experimental | ||
@@ -257,11 +310,41 @@ */ | ||
| /** | ||
| * Create an Angular 1 factory that will return an Angular 2 injectable thing | ||
| * (e.g. service, pipe, component, etc) | ||
| * @whatItDoes | ||
| * | ||
| * Usage: | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * ``` | ||
| * angular1Module.factory('someService', downgradeInjectable(SomeService)) | ||
| * ``` | ||
| * Allow an Angular 2+ service to be accessible from Angular 1. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * First ensure that the service to be downgraded is provided in an {@link NgModule} | ||
| * that will be part of the upgrade application. For example, let's assume we have | ||
| * defined `HeroesService` | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes-service"} | ||
| * | ||
| * and that we have included this in our upgrade app {@link NgModule} | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-module"} | ||
| * | ||
| * Now we can register the `downgradeInjectable` factory function for the service | ||
| * on an Angular 1 module. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="downgrade-ng2-heroes-service"} | ||
| * | ||
| * Inside an Angular 1 component's controller we can get hold of the | ||
| * downgraded service via the name we gave when downgrading. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="example-app"} | ||
| * | ||
| * @description | ||
| * | ||
| * Takes a `token` that identifies a service provided from Angular 2+. | ||
| * | ||
| * Returns a [factory function](https://docs.angularjs.org/guide/di) that can be | ||
| * used to register the service on an Angular 1 module. | ||
| * | ||
| * The factory function provides access to the Angular 2+ service that | ||
| * is identified by the `token` parameter. | ||
| * | ||
| * @experimental | ||
@@ -327,5 +410,58 @@ */ | ||
| /** | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows an Angular 1 component to be used from Angular 2+. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * Let's assume that you have an Angular 1 component called `ng1Hero` that needs | ||
| * to be made available in Angular 2+ templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero"} | ||
| * | ||
| * We must create a {@link Directive} that will make this Angular 1 component | ||
| * available inside Angular 2+ templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero-wrapper"} | ||
| * | ||
| * In this example you can see that we must derive from the {@link UpgradeComponent} | ||
| * base class but also provide an {@link Directive `@Directive`} decorator. This is | ||
| * because the AoT compiler requires that this information is statically available at | ||
| * compile time. | ||
| * | ||
| * Note that we must do the following: | ||
| * * specify the directive's selector (`ng1-hero`) | ||
| * * specify all inputs and outputs that the Angular 1 component expects | ||
| * * derive from `UpgradeComponent` | ||
| * * call the base class from the constructor, passing | ||
| * * the Angular 1 name of the component (`ng1Hero`) | ||
| * * the {@link ElementRef} and {@link Injector} for the component wrapper | ||
| * | ||
| * @description | ||
| * | ||
| * A helper class that should be used as a base class for creating Angular directives | ||
| * that wrap Angular 1 components that need to be "upgraded". | ||
| * | ||
| * @experimental | ||
| */ | ||
| var UpgradeComponent = (function () { | ||
| /** | ||
| * Create a new `UpgradeComponent` instance. You should not normally need to do this. | ||
| * Instead you should derive a new class from this one and call the super constructor | ||
| * from the base class. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero-wrapper" } | ||
| * | ||
| * * The `name` parameter should be the name of the Angular 1 directive. | ||
| * * The `elementRef` and `injector` parameters should be acquired from Angular by dependency | ||
| * injection into the base class constructor. | ||
| * | ||
| * Note that we must manually implement lifecycle hooks that call through to the super class. | ||
| * This is because, at the moment, the AoT compiler is not able to tell that the | ||
| * `UpgradeComponent` | ||
| * already implements them and so does not wire up calls to them at runtime. | ||
| */ | ||
| function UpgradeComponent(name, elementRef, injector) { | ||
@@ -347,3 +483,3 @@ this.name = name; | ||
| this.linkFn = this.compileTemplate(this.directive); | ||
| // We ask for the Angular 1 scope from the Angular 2 injector, since | ||
| // We ask for the Angular 1 scope from the Angular 2+ injector, since | ||
| // we will put the new component scope onto the new injector for each component | ||
@@ -634,8 +770,120 @@ var $parentScope = injector.get($SCOPE); | ||
| /** | ||
| * The Ng1Module contains providers for the Ng1Adapter and all the core Angular 1 services; | ||
| * and also holds the `bootstrapNg1()` method fo bootstrapping an upgraded Angular 1 app. | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows Angular 1 and Angular 2+ components to be used together inside a hybrid upgrade | ||
| * application, which supports AoT compilation. | ||
| * | ||
| * Specifically, the classes and functions in the `upgrade/static` module allow the following: | ||
| * 1. Creation of an Angular 2+ directive that wraps and exposes an Angular 1 component so | ||
| * that it can be used in an Angular 2 template. See {@link UpgradeComponent}. | ||
| * 2. Creation of an Angular 1 directive that wraps and exposes an Angular 2+ component so | ||
| * that it can be used in an Angular 1 template. See {@link downgradeComponent}. | ||
| * 3. Creation of an Angular 2+ root injector provider that wraps and exposes an Angular 1 | ||
| * service so that it can be injected into an Angular 2+ context. See | ||
| * {@link UpgradeModule#upgrading-an-angular-1-service Upgrading an Angular 1 service} below. | ||
| * 4. Creation of an Angular 1 service that wraps and exposes an Angular 2+ injectable | ||
| * so that it can be injected into an Angular 1 context. See {@link downgradeInjectable}. | ||
| * 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks | ||
| * coexisting in a single application. See the | ||
| * {@link UpgradeModule#example example} below. | ||
| * | ||
| * ## Mental Model | ||
| * | ||
| * When reasoning about how a hybrid application works it is useful to have a mental model which | ||
| * describes what is happening and explains what is happening at the lowest level. | ||
| * | ||
| * 1. There are two independent frameworks running in a single application, each framework treats | ||
| * the other as a black box. | ||
| * 2. Each DOM element on the page is owned exactly by one framework. Whichever framework | ||
| * instantiated the element is the owner. Each framework only updates/interacts with its own | ||
| * DOM elements and ignores others. | ||
| * 3. Angular 1 directives always execute inside the Angular 1 framework codebase regardless of | ||
| * where they are instantiated. | ||
| * 4. Angular 2+ components always execute inside the Angular 2+ framework codebase regardless of | ||
| * where they are instantiated. | ||
| * 5. An Angular 1 component can be "upgraded"" to an Angular 2+ component. This is achieved by | ||
| * defining an Angular 2+ directive, which bootstraps the Angular 1 component at its location | ||
| * in the DOM. See {@link UpgradeComponent}. | ||
| * 6. An Angular 2+ component can be "downgraded"" to an Angular 1 component. This is achieved by | ||
| * defining an Angular 1 directive, which bootstraps the Angular 2+ component at its location | ||
| * in the DOM. See {@link downgradeComponent}. | ||
| * 7. Whenever an "upgraded"/"downgraded" component is instantiated the host element is owned by | ||
| * the framework doing the instantiation. The other framework then instantiates and owns the | ||
| * view for that component. | ||
| * a. This implies that the component bindings will always follow the semantics of the | ||
| * instantiation framework. | ||
| * b. The DOM attributes are parsed by the framework that owns the current template. So | ||
| * attributes | ||
| * in Angular 1 templates must use kebab-case, while Angular 1 templates must use camelCase. | ||
| * c. However the template binding syntax will always use the Angular 2+ style, e.g. square | ||
| * brackets (`[...]`) for property binding. | ||
| * 8. Angular 1 is always bootstrapped first and owns the root component. | ||
| * 9. The new application is running in an Angular 2+ zone, and therefore it no longer needs calls | ||
| * to | ||
| * `$apply()`. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * `import {UpgradeModule} from '@angular/upgrade/static';` | ||
| * | ||
| * ## Example | ||
| * Import the {@link UpgradeModule} into your top level {@link NgModule Angular 2+ `NgModule`}. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region='ng2-module'} | ||
| * | ||
| * Then bootstrap the hybrid upgrade app's module, get hold of the {@link UpgradeModule} instance | ||
| * and use it to bootstrap the top level [Angular 1 | ||
| * module](https://docs.angularjs.org/api/ng/type/angular.Module). | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region='bootstrap'} | ||
| * | ||
| * | ||
| * ## Upgrading an Angular 1 service | ||
| * | ||
| * There is no specific API for upgrading an Angular 1 service. Instead you should just follow the | ||
| * following recipe: | ||
| * | ||
| * Let's say you have an Angular 1 service: | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-title-case-service"} | ||
| * | ||
| * Then you should define an Angular 2+ provider to be included in your {@link NgModule} `providers` | ||
| * property. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="upgrade-ng1-service"} | ||
| * | ||
| * Then you can use the "upgraded" Angular 1 service by injecting it into an Angular 2 component | ||
| * or service. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="use-ng1-upgraded-service"} | ||
| * | ||
| * @description | ||
| * | ||
| * This class is an `NgModule`, which you import to provide Angular 1 core services, | ||
| * and has an instance method used to bootstrap the hybrid upgrade application. | ||
| * | ||
| * ## Core Angular 1 services | ||
| * Importing this {@link NgModule} will add providers for the core | ||
| * [Angular 1 services](https://docs.angularjs.org/api/ng/service) to the root injector. | ||
| * | ||
| * ## Bootstrap | ||
| * The runtime instance of this class contains a {@link UpgradeModule#bootstrap `bootstrap()`} | ||
| * method, which you use to bootstrap the top level Angular 1 module onto an element in the | ||
| * DOM for the hybrid upgrade app. | ||
| * | ||
| * It also contains properties to access the {@link UpgradeModule#injector root injector}, the | ||
| * bootstrap {@link NgZone} and the | ||
| * [Angular 1 $injector](https://docs.angularjs.org/api/auto/service/$injector). | ||
| * | ||
| * @experimental | ||
| */ | ||
| var UpgradeModule = (function () { | ||
| function UpgradeModule(injector, ngZone) { | ||
| function UpgradeModule( | ||
| /** The root {@link Injector} for the upgrade application. */ | ||
| injector, | ||
| /** The bootstrap zone for the upgrade application */ | ||
| ngZone) { | ||
| this.injector = injector; | ||
@@ -650,3 +898,3 @@ this.ngZone = ngZone; | ||
| */ | ||
| UpgradeModule.prototype.bootstrap = function (element$$, modules, config) { | ||
| UpgradeModule.prototype.bootstrap = function (element$$, modules, config /*angular.IAngularBootstrapConfig*/) { | ||
| var _this = this; | ||
@@ -657,2 +905,31 @@ if (modules === void 0) { modules = []; } | ||
| .value(INJECTOR_KEY, this.injector) | ||
| .config([ | ||
| $PROVIDE, $INJECTOR, | ||
| function ($provide, $injector) { | ||
| if ($injector.has($$TESTABILITY)) { | ||
| $provide.decorator($$TESTABILITY, [ | ||
| $DELEGATE, | ||
| function (testabilityDelegate) { | ||
| var originalWhenStable = testabilityDelegate.whenStable; | ||
| var injector = _this.injector; | ||
| // Cannot use arrow function below because we need to grab the context | ||
| var newWhenStable = function (callback) { | ||
| var whenStableContext = this; | ||
| originalWhenStable.call(this, function () { | ||
| var ng2Testability = injector.get(_angular_core.Testability); | ||
| if (ng2Testability.isStable()) { | ||
| callback.apply(this, arguments); | ||
| } | ||
| else { | ||
| ng2Testability.whenStable(newWhenStable.bind(whenStableContext, callback)); | ||
| } | ||
| }); | ||
| }; | ||
| testabilityDelegate.whenStable = newWhenStable; | ||
| return testabilityDelegate; | ||
| } | ||
| ]); | ||
| } | ||
| } | ||
| ]) | ||
| .run([ | ||
@@ -672,4 +949,18 @@ $INJECTOR, | ||
| ]); | ||
| // Make sure resumeBootstrap() only exists if the current bootstrap is deferred | ||
| var windowAngular = window['angular']; | ||
| windowAngular.resumeBootstrap = undefined; | ||
| // Bootstrap the angular 1 application inside our zone | ||
| this.ngZone.run(function () { bootstrap(element$$, [upgradeModule.name], config); }); | ||
| // Patch resumeBootstrap() to run inside the ngZone | ||
| if (windowAngular.resumeBootstrap) { | ||
| var originalResumeBootstrap_1 = windowAngular.resumeBootstrap; | ||
| var ngZone_1 = this.ngZone; | ||
| windowAngular.resumeBootstrap = function () { | ||
| var _this = this; | ||
| var args = arguments; | ||
| windowAngular.resumeBootstrap = originalResumeBootstrap_1; | ||
| ngZone_1.run(function () { windowAngular.resumeBootstrap.apply(_this, args); }); | ||
| }; | ||
| } | ||
| }; | ||
@@ -676,0 +967,0 @@ UpgradeModule.decorators = [ |
| /** | ||
| * @license Angular v2.2.0 | ||
| * @license Angular v2.2.1 | ||
| * (c) 2010-2016 Google, Inc. https://angular.io/ | ||
@@ -13,2 +13,2 @@ * License: MIT | ||
| */ | ||
| var UPGRADE_MODULE_NAME="$$UpgradeModule",INJECTOR_KEY="$$angularInjector",$INJECTOR="$injector",$PARSE="$parse",$SCOPE="$scope",$COMPILE="$compile",$TEMPLATE_CACHE="$templateCache",$HTTP_BACKEND="$httpBackend",$CONTROLLER="$controller",PropertyBinding=function(){function PropertyBinding(binding){this.binding=binding,this.parseBinding()}return PropertyBinding.prototype.parseBinding=function(){var parts=this.binding.split(":");this.prop=parts[0].trim(),this.attr=(parts[1]||this.prop).trim(),this.bracketAttr="["+this.attr+"]",this.parenAttr="("+this.attr+")",this.bracketParenAttr="[("+this.attr+")]";var capitalAttr=this.attr.charAt(0).toUpperCase()+this.attr.substr(1);this.onAttr="on"+capitalAttr,this.bindAttr="bind"+capitalAttr,this.bindonAttr="bindon"+capitalAttr},PropertyBinding}(),INITIAL_VALUE={__UNINITIALIZED__:!0},DowngradeComponentAdapter=function(){function DowngradeComponentAdapter(id,info,element,attrs,scope,parentInjector,parse,componentFactory){this.id=id,this.info=info,this.element=element,this.attrs=attrs,this.scope=scope,this.parentInjector=parentInjector,this.parse=parse,this.componentFactory=componentFactory,this.component=null,this.inputChangeCount=0,this.inputChanges=null,this.componentRef=null,this.changeDetector=null,this.contentInsertionPoint=null,this.element[0].id=id,this.componentScope=scope.$new(),this.childNodes=element.contents()}return DowngradeComponentAdapter.prototype.createComponent=function(){var childInjector=_angular_core.ReflectiveInjector.resolveAndCreate([{provide:$SCOPE,useValue:this.componentScope}],this.parentInjector);this.contentInsertionPoint=document.createComment("ng1 insertion point"),this.componentRef=this.componentFactory.create(childInjector,[[this.contentInsertionPoint]],this.element[0]),this.changeDetector=this.componentRef.changeDetectorRef,this.component=this.componentRef.instance},DowngradeComponentAdapter.prototype.setupInputs=function(){for(var _this=this,attrs=this.attrs,inputs=this.info.inputs||[],i=0;i<inputs.length;i++){var input=new PropertyBinding(inputs[i]),expr=null;if(attrs.hasOwnProperty(input.attr)){var observeFn=function(prop){var prevValue=INITIAL_VALUE;return function(value){null!==_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(value,prevValue===INITIAL_VALUE?value:prevValue),prevValue=value),_this.component[prop]=value}}(input.prop);attrs.$observe(input.attr,observeFn)}else attrs.hasOwnProperty(input.bindAttr)?expr=attrs[input.bindAttr]:attrs.hasOwnProperty(input.bracketAttr)?expr=attrs[input.bracketAttr]:attrs.hasOwnProperty(input.bindonAttr)?expr=attrs[input.bindonAttr]:attrs.hasOwnProperty(input.bracketParenAttr)&&(expr=attrs[input.bracketParenAttr]);if(null!=expr){var watchFn=function(prop){return function(value,prevValue){null!=_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(prevValue,value)),_this.component[prop]=value}}(input.prop);this.componentScope.$watch(expr,watchFn)}}var prototype=this.info.component.prototype;prototype&&prototype.ngOnChanges&&(this.inputChanges={},this.componentScope.$watch(function(){return _this.inputChangeCount},function(){var inputChanges=_this.inputChanges;_this.inputChanges={},_this.component.ngOnChanges(inputChanges)})),this.componentScope.$watch(function(){return _this.changeDetector&&_this.changeDetector.detectChanges()})},DowngradeComponentAdapter.prototype.projectContent=function(){var childNodes=this.childNodes,parent=this.contentInsertionPoint.parentNode;if(parent)for(var i=0,ii=childNodes.length;i<ii;i++)parent.insertBefore(childNodes[i],this.contentInsertionPoint)},DowngradeComponentAdapter.prototype.setupOutputs=function(){for(var _this=this,attrs=this.attrs,outputs=this.info.outputs||[],j=0;j<outputs.length;j++){var output=new PropertyBinding(outputs[j]),expr=null,assignExpr=!1,bindonAttr=output.bindonAttr?output.bindonAttr.substring(0,output.bindonAttr.length-6):null,bracketParenAttr=output.bracketParenAttr?"[("+output.bracketParenAttr.substring(2,output.bracketParenAttr.length-8)+")]":null;if(attrs.hasOwnProperty(output.onAttr)?expr=attrs[output.onAttr]:attrs.hasOwnProperty(output.parenAttr)?expr=attrs[output.parenAttr]:attrs.hasOwnProperty(bindonAttr)?(expr=attrs[bindonAttr],assignExpr=!0):attrs.hasOwnProperty(bracketParenAttr)&&(expr=attrs[bracketParenAttr],assignExpr=!0),null!=expr&&null!=assignExpr){var getter=this.parse(expr),setter=getter.assign;if(assignExpr&&!setter)throw new Error("Expression '"+expr+"' is not assignable!");var emitter=this.component[output.prop];if(!emitter)throw new Error("Missing emitter '"+output.prop+"' on component '"+this.info.component+"'!");emitter.subscribe({next:assignExpr?function(setter){return function(v){return setter(_this.scope,v)}}(setter):function(getter){return function(v){return getter(_this.scope,{$event:v})}}(getter)})}}},DowngradeComponentAdapter.prototype.registerCleanup=function(){var _this=this;this.element.bind("$destroy",function(){_this.componentScope.$destroy(),_this.componentRef.destroy()})},DowngradeComponentAdapter}(),Ng1Change=function(){function Ng1Change(previousValue,currentValue){this.previousValue=previousValue,this.currentValue=currentValue}return Ng1Change.prototype.isFirstChange=function(){return this.previousValue===this.currentValue},Ng1Change}(),downgradeCount=0,angular={bootstrap:noNg,module:noNg,element:noNg,version:noNg,resumeBootstrap:noNg,getTestability:noNg};try{window.hasOwnProperty("angular")&&(angular=window.angular)}catch(e){}var tempInjectorRef,bootstrap=angular.bootstrap,module$1=angular.module,element=angular.element,REQUIRE_PREFIX_RE=/^(\^\^?)?(\?)?(\^\^?)?/,NOT_SUPPORTED="NOT_SUPPORTED",INITIAL_VALUE$1={__UNINITIALIZED__:!0},Bindings=function(){function Bindings(){this.twoWayBoundProperties=[],this.twoWayBoundLastValues=[],this.expressionBoundProperties=[],this.propertyToOutputMap={}}return Bindings}(),UpgradeComponent=function(){function UpgradeComponent(name,elementRef,injector){this.name=name,this.elementRef=elementRef,this.injector=injector,this.controllerInstance=null,this.bindingDestination=null,this.$injector=injector.get($INJECTOR),this.$compile=this.$injector.get($COMPILE),this.$templateCache=this.$injector.get($TEMPLATE_CACHE),this.$httpBackend=this.$injector.get($HTTP_BACKEND),this.$controller=this.$injector.get($CONTROLLER),this.element=elementRef.nativeElement,this.$element=element(this.element),this.directive=this.getDirective(name),this.bindings=this.initializeBindings(this.directive),this.linkFn=this.compileTemplate(this.directive);var $parentScope=injector.get($SCOPE);this.$componentScope=$parentScope.$new(!!this.directive.scope);var controllerType=this.directive.controller,bindToController=this.directive.bindToController;if(controllerType)this.controllerInstance=this.buildController(controllerType,this.$componentScope,this.$element,this.directive.controllerAs);else if(bindToController)throw new Error("Upgraded directive '"+name+"' specifies 'bindToController' but no controller.");this.bindingDestination=bindToController?this.controllerInstance:this.$componentScope,this.setupOutputs()}return UpgradeComponent.prototype.ngOnInit=function(){var _this=this,attrs=NOT_SUPPORTED,transcludeFn=NOT_SUPPORTED,directiveRequire=this.getDirectiveRequire(this.directive),requiredControllers=this.resolveRequire(this.directive.name,this.$element,directiveRequire);if(this.directive.bindToController&&isMap(directiveRequire)){var requiredControllersMap_1=requiredControllers;Object.keys(requiredControllersMap_1).forEach(function(key){_this.controllerInstance[key]=requiredControllersMap_1[key]})}this.callLifecycleHook("$onInit",this.controllerInstance);var link=this.directive.link,preLink="object"==typeof link&&link.pre,postLink="object"==typeof link?link.post:link;preLink&&preLink(this.$componentScope,this.$element,attrs,requiredControllers,transcludeFn);for(var childNode,childNodes=[];childNode=this.element.firstChild;)this.element.removeChild(childNode),childNodes.push(childNode);var attachElement=function(clonedElements,scope){_this.$element.append(clonedElements)},attachChildNodes=function(scope,cloneAttach){return cloneAttach(childNodes)};this.linkFn(this.$componentScope,attachElement,{parentBoundTranscludeFn:attachChildNodes}),postLink&&postLink(this.$componentScope,this.$element,attrs,requiredControllers,transcludeFn),this.callLifecycleHook("$postLink",this.controllerInstance)},UpgradeComponent.prototype.ngOnChanges=function(changes){var _this=this;Object.keys(changes).forEach(function(propName){return _this.bindingDestination[propName]=changes[propName].currentValue}),this.callLifecycleHook("$onChanges",this.bindingDestination,changes)},UpgradeComponent.prototype.ngDoCheck=function(){var _this=this,twoWayBoundProperties=this.bindings.twoWayBoundProperties,twoWayBoundLastValues=this.bindings.twoWayBoundLastValues,propertyToOutputMap=this.bindings.propertyToOutputMap;twoWayBoundProperties.forEach(function(propName,idx){var newValue=_this.bindingDestination[propName],oldValue=twoWayBoundLastValues[idx];if(!looseIdentical(newValue,oldValue)){var outputName=propertyToOutputMap[propName],eventEmitter=_this[outputName];eventEmitter.emit(newValue),twoWayBoundLastValues[idx]=newValue}})},UpgradeComponent.prototype.ngOnDestroy=function(){this.callLifecycleHook("$onDestroy",this.controllerInstance),this.$componentScope.$destroy()},UpgradeComponent.prototype.callLifecycleHook=function(method,context,arg){context&&"function"==typeof context[method]&&context[method](arg)},UpgradeComponent.prototype.getDirective=function(name){var directives=this.$injector.get(name+"Directive");if(directives.length>1)throw new Error("Only support single directive definition for: "+this.name);var directive=directives[0];directive.replace&&this.notSupported("replace"),directive.terminal&&this.notSupported("terminal"),directive.compile&&this.notSupported("compile");var link=directive.link;return"object"==typeof link&&link.post&&this.notSupported("link.post"),directive},UpgradeComponent.prototype.getDirectiveRequire=function(directive){var require=directive.require||directive.controller&&directive.name;return isMap(require)&&Object.keys(require).forEach(function(key){var value=require[key],match=value.match(REQUIRE_PREFIX_RE),name=value.substring(match[0].length);name||(require[key]=match[0]+key)}),require},UpgradeComponent.prototype.initializeBindings=function(directive){var _this=this,btcIsObject="object"==typeof directive.bindToController;if(btcIsObject&&Object.keys(directive.scope).length)throw new Error("Binding definitions on scope and controller at the same time is not supported.");var context=btcIsObject?directive.bindToController:directive.scope,bindings=new Bindings;return"object"==typeof context&&Object.keys(context).forEach(function(propName){var definition=context[propName],bindingType=definition.charAt(0);switch(bindingType){case"@":case"<":break;case"=":bindings.twoWayBoundProperties.push(propName),bindings.twoWayBoundLastValues.push(INITIAL_VALUE$1),bindings.propertyToOutputMap[propName]=propName+"Change";break;case"&":bindings.expressionBoundProperties.push(propName),bindings.propertyToOutputMap[propName]=propName;break;default:var json=JSON.stringify(context);throw new Error("Unexpected mapping '"+bindingType+"' in '"+json+"' in '"+_this.name+"' directive.")}}),bindings},UpgradeComponent.prototype.compileTemplate=function(directive){if(void 0!==this.directive.template)return this.compileHtml(getOrCall(this.directive.template));if(this.directive.templateUrl){var url=getOrCall(this.directive.templateUrl),html=this.$templateCache.get(url);if(void 0!==html)return this.compileHtml(html);throw new Error("loading directive templates asynchronously is not supported")}throw new Error("Directive '"+this.name+"' is not a component, it is missing template.")},UpgradeComponent.prototype.buildController=function(controllerType,$scope,$element,controllerAs){var locals={$scope:$scope,$element:$element},controller=this.$controller(controllerType,locals,null,controllerAs);return $element.data(controllerKey(this.directive.name),controller),controller},UpgradeComponent.prototype.resolveRequire=function(directiveName,$element,require){var _this=this;if(require){if(Array.isArray(require))return require.map(function(req){return _this.resolveRequire(directiveName,$element,req)});if("object"==typeof require){var value_1={};return Object.keys(require).forEach(function(key){return value_1[key]=_this.resolveRequire(directiveName,$element,require[key])}),value_1}if("string"==typeof require){var match=require.match(REQUIRE_PREFIX_RE),inheritType=match[1]||match[3],name_1=require.substring(match[0].length),isOptional=!!match[2],searchParents=!!inheritType,startOnParent="^^"===inheritType,ctrlKey=controllerKey(name_1);startOnParent&&($element=$element.parent());var value=searchParents?$element.inheritedData(ctrlKey):$element.data(ctrlKey);if(!value&&!isOptional)throw new Error("Unable to find required '"+require+"' in upgraded directive '"+directiveName+"'.");return value}throw new Error("Unrecognized require syntax on upgraded directive '"+directiveName+"': "+require)}return null},UpgradeComponent.prototype.setupOutputs=function(){var _this=this;this.bindings.twoWayBoundProperties.forEach(function(propName){var outputName=_this.bindings.propertyToOutputMap[propName];_this[outputName]=new _angular_core.EventEmitter}),this.bindings.expressionBoundProperties.forEach(function(propName){var outputName=_this.bindings.propertyToOutputMap[propName],emitter=_this[outputName]=new _angular_core.EventEmitter;_this.bindingDestination[propName]=function(value){return emitter.emit(value)}})},UpgradeComponent.prototype.notSupported=function(feature){throw new Error("Upgraded directive '"+this.name+"' contains unsupported feature: '"+feature+"'.")},UpgradeComponent.prototype.compileHtml=function(html){var div=document.createElement("div");return div.innerHTML=html,this.$compile(div.childNodes)},UpgradeComponent}(),angular1Providers=[{provide:"$injector",useFactory:injectorFactory},{provide:"$rootScope",useFactory:rootScopeFactory,deps:["$injector"]},{provide:"$compile",useFactory:compileFactory,deps:["$injector"]},{provide:"$parse",useFactory:parseFactory,deps:["$injector"]}],UpgradeModule=function(){function UpgradeModule(injector,ngZone){this.injector=injector,this.ngZone=ngZone}return UpgradeModule.prototype.bootstrap=function(element$$,modules,config){var _this=this;void 0===modules&&(modules=[]);var upgradeModule=module$1(UPGRADE_MODULE_NAME,modules).value(INJECTOR_KEY,this.injector).run([$INJECTOR,function($injector){_this.$injector=$injector,setTempInjectorRef($injector),_this.injector.get($INJECTOR),element(element$$).data(controllerKey(INJECTOR_KEY),_this.injector);var $rootScope=$injector.get("$rootScope");_this.ngZone.onMicrotaskEmpty.subscribe(function(){return _this.ngZone.runOutsideAngular(function(){return $rootScope.$evalAsync()})})}]);this.ngZone.run(function(){bootstrap(element$$,[upgradeModule.name],config)})},UpgradeModule.decorators=[{type:_angular_core.NgModule,args:[{providers:angular1Providers}]}],UpgradeModule.ctorParameters=[{type:_angular_core.Injector},{type:_angular_core.NgZone}],UpgradeModule}();exports.downgradeComponent=downgradeComponent,exports.downgradeInjectable=downgradeInjectable,exports.UpgradeComponent=UpgradeComponent,exports.UpgradeModule=UpgradeModule}); | ||
| var UPGRADE_MODULE_NAME="$$UpgradeModule",INJECTOR_KEY="$$angularInjector",$INJECTOR="$injector",$PARSE="$parse",$SCOPE="$scope",$PROVIDE="$provide",$DELEGATE="$delegate",$$TESTABILITY="$$testability",$COMPILE="$compile",$TEMPLATE_CACHE="$templateCache",$HTTP_BACKEND="$httpBackend",$CONTROLLER="$controller",PropertyBinding=function(){function PropertyBinding(binding){this.binding=binding,this.parseBinding()}return PropertyBinding.prototype.parseBinding=function(){var parts=this.binding.split(":");this.prop=parts[0].trim(),this.attr=(parts[1]||this.prop).trim(),this.bracketAttr="["+this.attr+"]",this.parenAttr="("+this.attr+")",this.bracketParenAttr="[("+this.attr+")]";var capitalAttr=this.attr.charAt(0).toUpperCase()+this.attr.substr(1);this.onAttr="on"+capitalAttr,this.bindAttr="bind"+capitalAttr,this.bindonAttr="bindon"+capitalAttr},PropertyBinding}(),INITIAL_VALUE={__UNINITIALIZED__:!0},DowngradeComponentAdapter=function(){function DowngradeComponentAdapter(id,info,element,attrs,scope,parentInjector,parse,componentFactory){this.id=id,this.info=info,this.element=element,this.attrs=attrs,this.scope=scope,this.parentInjector=parentInjector,this.parse=parse,this.componentFactory=componentFactory,this.component=null,this.inputChangeCount=0,this.inputChanges=null,this.componentRef=null,this.changeDetector=null,this.contentInsertionPoint=null,this.element[0].id=id,this.componentScope=scope.$new(),this.childNodes=element.contents()}return DowngradeComponentAdapter.prototype.createComponent=function(){var childInjector=_angular_core.ReflectiveInjector.resolveAndCreate([{provide:$SCOPE,useValue:this.componentScope}],this.parentInjector);this.contentInsertionPoint=document.createComment("ng1 insertion point"),this.componentRef=this.componentFactory.create(childInjector,[[this.contentInsertionPoint]],this.element[0]),this.changeDetector=this.componentRef.changeDetectorRef,this.component=this.componentRef.instance},DowngradeComponentAdapter.prototype.setupInputs=function(){for(var _this=this,attrs=this.attrs,inputs=this.info.inputs||[],i=0;i<inputs.length;i++){var input=new PropertyBinding(inputs[i]),expr=null;if(attrs.hasOwnProperty(input.attr)){var observeFn=function(prop){var prevValue=INITIAL_VALUE;return function(value){null!==_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(value,prevValue===INITIAL_VALUE?value:prevValue),prevValue=value),_this.component[prop]=value}}(input.prop);attrs.$observe(input.attr,observeFn)}else attrs.hasOwnProperty(input.bindAttr)?expr=attrs[input.bindAttr]:attrs.hasOwnProperty(input.bracketAttr)?expr=attrs[input.bracketAttr]:attrs.hasOwnProperty(input.bindonAttr)?expr=attrs[input.bindonAttr]:attrs.hasOwnProperty(input.bracketParenAttr)&&(expr=attrs[input.bracketParenAttr]);if(null!=expr){var watchFn=function(prop){return function(value,prevValue){null!=_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(prevValue,value)),_this.component[prop]=value}}(input.prop);this.componentScope.$watch(expr,watchFn)}}var prototype=this.info.component.prototype;prototype&&prototype.ngOnChanges&&(this.inputChanges={},this.componentScope.$watch(function(){return _this.inputChangeCount},function(){var inputChanges=_this.inputChanges;_this.inputChanges={},_this.component.ngOnChanges(inputChanges)})),this.componentScope.$watch(function(){return _this.changeDetector&&_this.changeDetector.detectChanges()})},DowngradeComponentAdapter.prototype.projectContent=function(){var childNodes=this.childNodes,parent=this.contentInsertionPoint.parentNode;if(parent)for(var i=0,ii=childNodes.length;i<ii;i++)parent.insertBefore(childNodes[i],this.contentInsertionPoint)},DowngradeComponentAdapter.prototype.setupOutputs=function(){for(var _this=this,attrs=this.attrs,outputs=this.info.outputs||[],j=0;j<outputs.length;j++){var output=new PropertyBinding(outputs[j]),expr=null,assignExpr=!1,bindonAttr=output.bindonAttr?output.bindonAttr.substring(0,output.bindonAttr.length-6):null,bracketParenAttr=output.bracketParenAttr?"[("+output.bracketParenAttr.substring(2,output.bracketParenAttr.length-8)+")]":null;if(attrs.hasOwnProperty(output.onAttr)?expr=attrs[output.onAttr]:attrs.hasOwnProperty(output.parenAttr)?expr=attrs[output.parenAttr]:attrs.hasOwnProperty(bindonAttr)?(expr=attrs[bindonAttr],assignExpr=!0):attrs.hasOwnProperty(bracketParenAttr)&&(expr=attrs[bracketParenAttr],assignExpr=!0),null!=expr&&null!=assignExpr){var getter=this.parse(expr),setter=getter.assign;if(assignExpr&&!setter)throw new Error("Expression '"+expr+"' is not assignable!");var emitter=this.component[output.prop];if(!emitter)throw new Error("Missing emitter '"+output.prop+"' on component '"+this.info.component+"'!");emitter.subscribe({next:assignExpr?function(setter){return function(v){return setter(_this.scope,v)}}(setter):function(getter){return function(v){return getter(_this.scope,{$event:v})}}(getter)})}}},DowngradeComponentAdapter.prototype.registerCleanup=function(){var _this=this;this.element.bind("$destroy",function(){_this.componentScope.$destroy(),_this.componentRef.destroy()})},DowngradeComponentAdapter}(),Ng1Change=function(){function Ng1Change(previousValue,currentValue){this.previousValue=previousValue,this.currentValue=currentValue}return Ng1Change.prototype.isFirstChange=function(){return this.previousValue===this.currentValue},Ng1Change}(),downgradeCount=0,angular={bootstrap:noNg,module:noNg,element:noNg,version:noNg,resumeBootstrap:noNg,getTestability:noNg};try{window.hasOwnProperty("angular")&&(angular=window.angular)}catch(e){}var tempInjectorRef,bootstrap=angular.bootstrap,module$1=angular.module,element=angular.element,REQUIRE_PREFIX_RE=/^(\^\^?)?(\?)?(\^\^?)?/,NOT_SUPPORTED="NOT_SUPPORTED",INITIAL_VALUE$1={__UNINITIALIZED__:!0},Bindings=function(){function Bindings(){this.twoWayBoundProperties=[],this.twoWayBoundLastValues=[],this.expressionBoundProperties=[],this.propertyToOutputMap={}}return Bindings}(),UpgradeComponent=function(){function UpgradeComponent(name,elementRef,injector){this.name=name,this.elementRef=elementRef,this.injector=injector,this.controllerInstance=null,this.bindingDestination=null,this.$injector=injector.get($INJECTOR),this.$compile=this.$injector.get($COMPILE),this.$templateCache=this.$injector.get($TEMPLATE_CACHE),this.$httpBackend=this.$injector.get($HTTP_BACKEND),this.$controller=this.$injector.get($CONTROLLER),this.element=elementRef.nativeElement,this.$element=element(this.element),this.directive=this.getDirective(name),this.bindings=this.initializeBindings(this.directive),this.linkFn=this.compileTemplate(this.directive);var $parentScope=injector.get($SCOPE);this.$componentScope=$parentScope.$new(!!this.directive.scope);var controllerType=this.directive.controller,bindToController=this.directive.bindToController;if(controllerType)this.controllerInstance=this.buildController(controllerType,this.$componentScope,this.$element,this.directive.controllerAs);else if(bindToController)throw new Error("Upgraded directive '"+name+"' specifies 'bindToController' but no controller.");this.bindingDestination=bindToController?this.controllerInstance:this.$componentScope,this.setupOutputs()}return UpgradeComponent.prototype.ngOnInit=function(){var _this=this,attrs=NOT_SUPPORTED,transcludeFn=NOT_SUPPORTED,directiveRequire=this.getDirectiveRequire(this.directive),requiredControllers=this.resolveRequire(this.directive.name,this.$element,directiveRequire);if(this.directive.bindToController&&isMap(directiveRequire)){var requiredControllersMap_1=requiredControllers;Object.keys(requiredControllersMap_1).forEach(function(key){_this.controllerInstance[key]=requiredControllersMap_1[key]})}this.callLifecycleHook("$onInit",this.controllerInstance);var link=this.directive.link,preLink="object"==typeof link&&link.pre,postLink="object"==typeof link?link.post:link;preLink&&preLink(this.$componentScope,this.$element,attrs,requiredControllers,transcludeFn);for(var childNode,childNodes=[];childNode=this.element.firstChild;)this.element.removeChild(childNode),childNodes.push(childNode);var attachElement=function(clonedElements,scope){_this.$element.append(clonedElements)},attachChildNodes=function(scope,cloneAttach){return cloneAttach(childNodes)};this.linkFn(this.$componentScope,attachElement,{parentBoundTranscludeFn:attachChildNodes}),postLink&&postLink(this.$componentScope,this.$element,attrs,requiredControllers,transcludeFn),this.callLifecycleHook("$postLink",this.controllerInstance)},UpgradeComponent.prototype.ngOnChanges=function(changes){var _this=this;Object.keys(changes).forEach(function(propName){return _this.bindingDestination[propName]=changes[propName].currentValue}),this.callLifecycleHook("$onChanges",this.bindingDestination,changes)},UpgradeComponent.prototype.ngDoCheck=function(){var _this=this,twoWayBoundProperties=this.bindings.twoWayBoundProperties,twoWayBoundLastValues=this.bindings.twoWayBoundLastValues,propertyToOutputMap=this.bindings.propertyToOutputMap;twoWayBoundProperties.forEach(function(propName,idx){var newValue=_this.bindingDestination[propName],oldValue=twoWayBoundLastValues[idx];if(!looseIdentical(newValue,oldValue)){var outputName=propertyToOutputMap[propName],eventEmitter=_this[outputName];eventEmitter.emit(newValue),twoWayBoundLastValues[idx]=newValue}})},UpgradeComponent.prototype.ngOnDestroy=function(){this.callLifecycleHook("$onDestroy",this.controllerInstance),this.$componentScope.$destroy()},UpgradeComponent.prototype.callLifecycleHook=function(method,context,arg){context&&"function"==typeof context[method]&&context[method](arg)},UpgradeComponent.prototype.getDirective=function(name){var directives=this.$injector.get(name+"Directive");if(directives.length>1)throw new Error("Only support single directive definition for: "+this.name);var directive=directives[0];directive.replace&&this.notSupported("replace"),directive.terminal&&this.notSupported("terminal"),directive.compile&&this.notSupported("compile");var link=directive.link;return"object"==typeof link&&link.post&&this.notSupported("link.post"),directive},UpgradeComponent.prototype.getDirectiveRequire=function(directive){var require=directive.require||directive.controller&&directive.name;return isMap(require)&&Object.keys(require).forEach(function(key){var value=require[key],match=value.match(REQUIRE_PREFIX_RE),name=value.substring(match[0].length);name||(require[key]=match[0]+key)}),require},UpgradeComponent.prototype.initializeBindings=function(directive){var _this=this,btcIsObject="object"==typeof directive.bindToController;if(btcIsObject&&Object.keys(directive.scope).length)throw new Error("Binding definitions on scope and controller at the same time is not supported.");var context=btcIsObject?directive.bindToController:directive.scope,bindings=new Bindings;return"object"==typeof context&&Object.keys(context).forEach(function(propName){var definition=context[propName],bindingType=definition.charAt(0);switch(bindingType){case"@":case"<":break;case"=":bindings.twoWayBoundProperties.push(propName),bindings.twoWayBoundLastValues.push(INITIAL_VALUE$1),bindings.propertyToOutputMap[propName]=propName+"Change";break;case"&":bindings.expressionBoundProperties.push(propName),bindings.propertyToOutputMap[propName]=propName;break;default:var json=JSON.stringify(context);throw new Error("Unexpected mapping '"+bindingType+"' in '"+json+"' in '"+_this.name+"' directive.")}}),bindings},UpgradeComponent.prototype.compileTemplate=function(directive){if(void 0!==this.directive.template)return this.compileHtml(getOrCall(this.directive.template));if(this.directive.templateUrl){var url=getOrCall(this.directive.templateUrl),html=this.$templateCache.get(url);if(void 0!==html)return this.compileHtml(html);throw new Error("loading directive templates asynchronously is not supported")}throw new Error("Directive '"+this.name+"' is not a component, it is missing template.")},UpgradeComponent.prototype.buildController=function(controllerType,$scope,$element,controllerAs){var locals={$scope:$scope,$element:$element},controller=this.$controller(controllerType,locals,null,controllerAs);return $element.data(controllerKey(this.directive.name),controller),controller},UpgradeComponent.prototype.resolveRequire=function(directiveName,$element,require){var _this=this;if(require){if(Array.isArray(require))return require.map(function(req){return _this.resolveRequire(directiveName,$element,req)});if("object"==typeof require){var value_1={};return Object.keys(require).forEach(function(key){return value_1[key]=_this.resolveRequire(directiveName,$element,require[key])}),value_1}if("string"==typeof require){var match=require.match(REQUIRE_PREFIX_RE),inheritType=match[1]||match[3],name_1=require.substring(match[0].length),isOptional=!!match[2],searchParents=!!inheritType,startOnParent="^^"===inheritType,ctrlKey=controllerKey(name_1);startOnParent&&($element=$element.parent());var value=searchParents?$element.inheritedData(ctrlKey):$element.data(ctrlKey);if(!value&&!isOptional)throw new Error("Unable to find required '"+require+"' in upgraded directive '"+directiveName+"'.");return value}throw new Error("Unrecognized require syntax on upgraded directive '"+directiveName+"': "+require)}return null},UpgradeComponent.prototype.setupOutputs=function(){var _this=this;this.bindings.twoWayBoundProperties.forEach(function(propName){var outputName=_this.bindings.propertyToOutputMap[propName];_this[outputName]=new _angular_core.EventEmitter}),this.bindings.expressionBoundProperties.forEach(function(propName){var outputName=_this.bindings.propertyToOutputMap[propName],emitter=_this[outputName]=new _angular_core.EventEmitter;_this.bindingDestination[propName]=function(value){return emitter.emit(value)}})},UpgradeComponent.prototype.notSupported=function(feature){throw new Error("Upgraded directive '"+this.name+"' contains unsupported feature: '"+feature+"'.")},UpgradeComponent.prototype.compileHtml=function(html){var div=document.createElement("div");return div.innerHTML=html,this.$compile(div.childNodes)},UpgradeComponent}(),angular1Providers=[{provide:"$injector",useFactory:injectorFactory},{provide:"$rootScope",useFactory:rootScopeFactory,deps:["$injector"]},{provide:"$compile",useFactory:compileFactory,deps:["$injector"]},{provide:"$parse",useFactory:parseFactory,deps:["$injector"]}],UpgradeModule=function(){function UpgradeModule(injector,ngZone){this.injector=injector,this.ngZone=ngZone}return UpgradeModule.prototype.bootstrap=function(element$$,modules,config){var _this=this;void 0===modules&&(modules=[]);var upgradeModule=module$1(UPGRADE_MODULE_NAME,modules).value(INJECTOR_KEY,this.injector).config([$PROVIDE,$INJECTOR,function($provide,$injector){$injector.has($$TESTABILITY)&&$provide.decorator($$TESTABILITY,[$DELEGATE,function(testabilityDelegate){var originalWhenStable=testabilityDelegate.whenStable,injector=_this.injector,newWhenStable=function(callback){var whenStableContext=this;originalWhenStable.call(this,function(){var ng2Testability=injector.get(_angular_core.Testability);ng2Testability.isStable()?callback.apply(this,arguments):ng2Testability.whenStable(newWhenStable.bind(whenStableContext,callback))})};return testabilityDelegate.whenStable=newWhenStable,testabilityDelegate}])}]).run([$INJECTOR,function($injector){_this.$injector=$injector,setTempInjectorRef($injector),_this.injector.get($INJECTOR),element(element$$).data(controllerKey(INJECTOR_KEY),_this.injector);var $rootScope=$injector.get("$rootScope");_this.ngZone.onMicrotaskEmpty.subscribe(function(){return _this.ngZone.runOutsideAngular(function(){return $rootScope.$evalAsync()})})}]),windowAngular=window.angular;if(windowAngular.resumeBootstrap=void 0,this.ngZone.run(function(){bootstrap(element$$,[upgradeModule.name],config)}),windowAngular.resumeBootstrap){var originalResumeBootstrap_1=windowAngular.resumeBootstrap,ngZone_1=this.ngZone;windowAngular.resumeBootstrap=function(){var _this=this,args=arguments;windowAngular.resumeBootstrap=originalResumeBootstrap_1,ngZone_1.run(function(){windowAngular.resumeBootstrap.apply(_this,args)})}}},UpgradeModule.decorators=[{type:_angular_core.NgModule,args:[{providers:angular1Providers}]}],UpgradeModule.ctorParameters=[{type:_angular_core.Injector},{type:_angular_core.NgZone}],UpgradeModule}();exports.downgradeComponent=downgradeComponent,exports.downgradeInjectable=downgradeInjectable,exports.UpgradeComponent=UpgradeComponent,exports.UpgradeModule=UpgradeModule}); |
| /** | ||
| * @license Angular v2.2.0 | ||
| * @license Angular v2.2.1 | ||
| * (c) 2010-2016 Google, Inc. https://angular.io/ | ||
@@ -4,0 +4,0 @@ * License: MIT |
| /** | ||
| * @license Angular v2.2.0 | ||
| * @license Angular v2.2.1 | ||
| * (c) 2010-2016 Google, Inc. https://angular.io/ | ||
@@ -4,0 +4,0 @@ * License: MIT |
| { | ||
| "name": "@angular/upgrade", | ||
| "version": "2.2.0", | ||
| "version": "2.2.1", | ||
| "description": "Angular - the library for easing update from v1 to v2", | ||
@@ -11,6 +11,6 @@ "main": "bundles/upgrade.umd.js", | ||
| "peerDependencies": { | ||
| "@angular/core": "2.2.0", | ||
| "@angular/compiler": "2.2.0", | ||
| "@angular/platform-browser": "2.2.0", | ||
| "@angular/platform-browser-dynamic": "2.2.0" | ||
| "@angular/core": "2.2.1", | ||
| "@angular/compiler": "2.2.1", | ||
| "@angular/platform-browser": "2.2.1", | ||
| "@angular/platform-browser-dynamic": "2.2.1" | ||
| }, | ||
@@ -17,0 +17,0 @@ "repository": { |
@@ -14,2 +14,8 @@ /** | ||
| } | ||
| /** | ||
| * A `PropertyBinding` represents a mapping between a property name | ||
| * and an attribute name. It is parsed from a string of the form | ||
| * `"prop: attr"`; or simply `"propAndAttr" where the property | ||
| * and attribute have the same identifier. | ||
| */ | ||
| export declare class PropertyBinding { | ||
@@ -16,0 +22,0 @@ binding: string; |
@@ -8,2 +8,8 @@ /** | ||
| */ | ||
| /** | ||
| * A `PropertyBinding` represents a mapping between a property name | ||
| * and an attribute name. It is parsed from a string of the form | ||
| * `"prop: attr"`; or simply `"propAndAttr" where the property | ||
| * and attribute have the same identifier. | ||
| */ | ||
| export var PropertyBinding = (function () { | ||
@@ -10,0 +16,0 @@ function PropertyBinding(binding) { |
@@ -14,2 +14,5 @@ /** | ||
| export declare const $SCOPE: string; | ||
| export declare const $PROVIDE: string; | ||
| export declare const $DELEGATE: string; | ||
| export declare const $$TESTABILITY: string; | ||
| export declare const $COMPILE: string; | ||
@@ -16,0 +19,0 @@ export declare const $TEMPLATE_CACHE: string; |
@@ -14,2 +14,5 @@ /** | ||
| export var $SCOPE = '$scope'; | ||
| export var $PROVIDE = '$provide'; | ||
| export var $DELEGATE = '$delegate'; | ||
| export var $$TESTABILITY = '$$testability'; | ||
| export var $COMPILE = '$compile'; | ||
@@ -16,0 +19,0 @@ export var $TEMPLATE_CACHE = '$templateCache'; |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":1,"metadata":{"UPGRADE_MODULE_NAME":"$$UpgradeModule","INJECTOR_KEY":"$$angularInjector","$INJECTOR":"$injector","$PARSE":"$parse","$ROOT_SCOPE":"$rootScope","$SCOPE":"$scope","$COMPILE":"$compile","$TEMPLATE_CACHE":"$templateCache","$HTTP_BACKEND":"$httpBackend","$CONTROLLER":"$controller"}} | ||
| {"__symbolic":"module","version":1,"metadata":{"UPGRADE_MODULE_NAME":"$$UpgradeModule","INJECTOR_KEY":"$$angularInjector","$INJECTOR":"$injector","$PARSE":"$parse","$ROOT_SCOPE":"$rootScope","$SCOPE":"$scope","$PROVIDE":"$provide","$DELEGATE":"$delegate","$$TESTABILITY":"$$testability","$COMPILE":"$compile","$TEMPLATE_CACHE":"$templateCache","$HTTP_BACKEND":"$httpBackend","$CONTROLLER":"$controller"}} |
@@ -1,6 +0,60 @@ | ||
| import * as angular from '../angular_js'; | ||
| import { ComponentInfo } from './component_info'; | ||
| /** | ||
| * @license | ||
| * Copyright Google Inc. All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
| import { Type } from '@angular/core'; | ||
| /** | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows an Angular 2+ component to be used from Angular 1. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * Let's assume that you have an Angular 2+ component called `ng2Heroes` that needs | ||
| * to be made available in Angular 1 templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes"} | ||
| * | ||
| * We must create an Angular 1 [directive](https://docs.angularjs.org/guide/directive) | ||
| * that will make this Angular 2+ component available inside Angular 1 templates. | ||
| * The `downgradeComponent()` function returns a factory function that we | ||
| * can use to define the Angular 1 directive that wraps the "downgraded" component. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes-wrapper"} | ||
| * | ||
| * In this example you can see that we must provide information about the component being | ||
| * "downgraded". This is because once the AoT compiler has run, all metadata about the | ||
| * component has been removed from the code, and so cannot be inferred. | ||
| * | ||
| * We must do the following: | ||
| * * specify the Angular 2+ component class that is to be downgraded | ||
| * * specify all inputs and outputs that the Angular 1 component expects | ||
| * | ||
| * @description | ||
| * | ||
| * A helper function that returns a factory function to be used for registering an | ||
| * Angular 1 wrapper directive for "downgrading" an Angular 2+ component. | ||
| * | ||
| * The parameter contains information about the Component that is being downgraded: | ||
| * | ||
| * * `component: Type<any>`: The type of the Component that will be downgraded | ||
| * * `inputs: string[]`: A collection of strings that specify what inputs the component accepts. | ||
| * * `outputs: string[]`: A collection of strings that specify what outputs the component emits. | ||
| * | ||
| * The `inputs` and `outputs` are strings that map the names of properties to camelCased | ||
| * attribute names. They are of the form `"prop: attr"`; or simply `"propAndAttr" where the | ||
| * property and attribute have the same identifier. | ||
| * | ||
| * @experimental | ||
| */ | ||
| export declare function downgradeComponent(info: ComponentInfo): angular.IInjectable; | ||
| export declare function downgradeComponent(info: { | ||
| component: Type<any>; | ||
| inputs?: string[]; | ||
| outputs?: string[]; | ||
| }): any; |
@@ -13,2 +13,46 @@ /** | ||
| /** | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows an Angular 2+ component to be used from Angular 1. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * Let's assume that you have an Angular 2+ component called `ng2Heroes` that needs | ||
| * to be made available in Angular 1 templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes"} | ||
| * | ||
| * We must create an Angular 1 [directive](https://docs.angularjs.org/guide/directive) | ||
| * that will make this Angular 2+ component available inside Angular 1 templates. | ||
| * The `downgradeComponent()` function returns a factory function that we | ||
| * can use to define the Angular 1 directive that wraps the "downgraded" component. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes-wrapper"} | ||
| * | ||
| * In this example you can see that we must provide information about the component being | ||
| * "downgraded". This is because once the AoT compiler has run, all metadata about the | ||
| * component has been removed from the code, and so cannot be inferred. | ||
| * | ||
| * We must do the following: | ||
| * * specify the Angular 2+ component class that is to be downgraded | ||
| * * specify all inputs and outputs that the Angular 1 component expects | ||
| * | ||
| * @description | ||
| * | ||
| * A helper function that returns a factory function to be used for registering an | ||
| * Angular 1 wrapper directive for "downgrading" an Angular 2+ component. | ||
| * | ||
| * The parameter contains information about the Component that is being downgraded: | ||
| * | ||
| * * `component: Type<any>`: The type of the Component that will be downgraded | ||
| * * `inputs: string[]`: A collection of strings that specify what inputs the component accepts. | ||
| * * `outputs: string[]`: A collection of strings that specify what outputs the component emits. | ||
| * | ||
| * The `inputs` and `outputs` are strings that map the names of properties to camelCased | ||
| * attribute names. They are of the form `"prop: attr"`; or simply `"propAndAttr" where the | ||
| * property and attribute have the same identifier. | ||
| * | ||
| * @experimental | ||
@@ -15,0 +59,0 @@ */ |
@@ -10,13 +10,43 @@ /** | ||
| /** | ||
| * Create an Angular 1 factory that will return an Angular 2 injectable thing | ||
| * (e.g. service, pipe, component, etc) | ||
| * @whatItDoes | ||
| * | ||
| * Usage: | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * ``` | ||
| * angular1Module.factory('someService', downgradeInjectable(SomeService)) | ||
| * ``` | ||
| * Allow an Angular 2+ service to be accessible from Angular 1. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * First ensure that the service to be downgraded is provided in an {@link NgModule} | ||
| * that will be part of the upgrade application. For example, let's assume we have | ||
| * defined `HeroesService` | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes-service"} | ||
| * | ||
| * and that we have included this in our upgrade app {@link NgModule} | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-module"} | ||
| * | ||
| * Now we can register the `downgradeInjectable` factory function for the service | ||
| * on an Angular 1 module. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="downgrade-ng2-heroes-service"} | ||
| * | ||
| * Inside an Angular 1 component's controller we can get hold of the | ||
| * downgraded service via the name we gave when downgrading. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="example-app"} | ||
| * | ||
| * @description | ||
| * | ||
| * Takes a `token` that identifies a service provided from Angular 2+. | ||
| * | ||
| * Returns a [factory function](https://docs.angularjs.org/guide/di) that can be | ||
| * used to register the service on an Angular 1 module. | ||
| * | ||
| * The factory function provides access to the Angular 2+ service that | ||
| * is identified by the `token` parameter. | ||
| * | ||
| * @experimental | ||
| */ | ||
| export declare function downgradeInjectable(token: any): (string | ((i: Injector) => any))[]; |
@@ -10,11 +10,41 @@ /** | ||
| /** | ||
| * Create an Angular 1 factory that will return an Angular 2 injectable thing | ||
| * (e.g. service, pipe, component, etc) | ||
| * @whatItDoes | ||
| * | ||
| * Usage: | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * ``` | ||
| * angular1Module.factory('someService', downgradeInjectable(SomeService)) | ||
| * ``` | ||
| * Allow an Angular 2+ service to be accessible from Angular 1. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * First ensure that the service to be downgraded is provided in an {@link NgModule} | ||
| * that will be part of the upgrade application. For example, let's assume we have | ||
| * defined `HeroesService` | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-heroes-service"} | ||
| * | ||
| * and that we have included this in our upgrade app {@link NgModule} | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng2-module"} | ||
| * | ||
| * Now we can register the `downgradeInjectable` factory function for the service | ||
| * on an Angular 1 module. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="downgrade-ng2-heroes-service"} | ||
| * | ||
| * Inside an Angular 1 component's controller we can get hold of the | ||
| * downgraded service via the name we gave when downgrading. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="example-app"} | ||
| * | ||
| * @description | ||
| * | ||
| * Takes a `token` that identifies a service provided from Angular 2+. | ||
| * | ||
| * Returns a [factory function](https://docs.angularjs.org/guide/di) that can be | ||
| * used to register the service on an Angular 1 module. | ||
| * | ||
| * The factory function provides access to the Angular 2+ service that | ||
| * is identified by the `token` parameter. | ||
| * | ||
| * @experimental | ||
@@ -21,0 +51,0 @@ */ |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":1,"metadata":{"downgradeInjectable":{"__symbolic":"function","parameters":["token"],"value":{"__symbolic":"error","message":"Function call not supported","line":24,"character":24}}}} | ||
| {"__symbolic":"module","version":1,"metadata":{"downgradeInjectable":{"__symbolic":"function","parameters":["token"],"value":{"__symbolic":"error","message":"Function call not supported","line":54,"character":24}}}} |
@@ -10,2 +10,39 @@ /** | ||
| /** | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows an Angular 1 component to be used from Angular 2+. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * Let's assume that you have an Angular 1 component called `ng1Hero` that needs | ||
| * to be made available in Angular 2+ templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero"} | ||
| * | ||
| * We must create a {@link Directive} that will make this Angular 1 component | ||
| * available inside Angular 2+ templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero-wrapper"} | ||
| * | ||
| * In this example you can see that we must derive from the {@link UpgradeComponent} | ||
| * base class but also provide an {@link Directive `@Directive`} decorator. This is | ||
| * because the AoT compiler requires that this information is statically available at | ||
| * compile time. | ||
| * | ||
| * Note that we must do the following: | ||
| * * specify the directive's selector (`ng1-hero`) | ||
| * * specify all inputs and outputs that the Angular 1 component expects | ||
| * * derive from `UpgradeComponent` | ||
| * * call the base class from the constructor, passing | ||
| * * the Angular 1 name of the component (`ng1Hero`) | ||
| * * the {@link ElementRef} and {@link Injector} for the component wrapper | ||
| * | ||
| * @description | ||
| * | ||
| * A helper class that should be used as a base class for creating Angular directives | ||
| * that wrap Angular 1 components that need to be "upgraded". | ||
| * | ||
| * @experimental | ||
@@ -30,2 +67,18 @@ */ | ||
| private bindingDestination; | ||
| /** | ||
| * Create a new `UpgradeComponent` instance. You should not normally need to do this. | ||
| * Instead you should derive a new class from this one and call the super constructor | ||
| * from the base class. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero-wrapper" } | ||
| * | ||
| * * The `name` parameter should be the name of the Angular 1 directive. | ||
| * * The `elementRef` and `injector` parameters should be acquired from Angular by dependency | ||
| * injection into the base class constructor. | ||
| * | ||
| * Note that we must manually implement lifecycle hooks that call through to the super class. | ||
| * This is because, at the moment, the AoT compiler is not able to tell that the | ||
| * `UpgradeComponent` | ||
| * already implements them and so does not wire up calls to them at runtime. | ||
| */ | ||
| constructor(name: string, elementRef: ElementRef, injector: Injector); | ||
@@ -32,0 +85,0 @@ ngOnInit(): void; |
@@ -28,5 +28,58 @@ /** | ||
| /** | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows an Angular 1 component to be used from Angular 2+. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * Let's assume that you have an Angular 1 component called `ng1Hero` that needs | ||
| * to be made available in Angular 2+ templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero"} | ||
| * | ||
| * We must create a {@link Directive} that will make this Angular 1 component | ||
| * available inside Angular 2+ templates. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero-wrapper"} | ||
| * | ||
| * In this example you can see that we must derive from the {@link UpgradeComponent} | ||
| * base class but also provide an {@link Directive `@Directive`} decorator. This is | ||
| * because the AoT compiler requires that this information is statically available at | ||
| * compile time. | ||
| * | ||
| * Note that we must do the following: | ||
| * * specify the directive's selector (`ng1-hero`) | ||
| * * specify all inputs and outputs that the Angular 1 component expects | ||
| * * derive from `UpgradeComponent` | ||
| * * call the base class from the constructor, passing | ||
| * * the Angular 1 name of the component (`ng1Hero`) | ||
| * * the {@link ElementRef} and {@link Injector} for the component wrapper | ||
| * | ||
| * @description | ||
| * | ||
| * A helper class that should be used as a base class for creating Angular directives | ||
| * that wrap Angular 1 components that need to be "upgraded". | ||
| * | ||
| * @experimental | ||
| */ | ||
| export var UpgradeComponent = (function () { | ||
| /** | ||
| * Create a new `UpgradeComponent` instance. You should not normally need to do this. | ||
| * Instead you should derive a new class from this one and call the super constructor | ||
| * from the base class. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-hero-wrapper" } | ||
| * | ||
| * * The `name` parameter should be the name of the Angular 1 directive. | ||
| * * The `elementRef` and `injector` parameters should be acquired from Angular by dependency | ||
| * injection into the base class constructor. | ||
| * | ||
| * Note that we must manually implement lifecycle hooks that call through to the super class. | ||
| * This is because, at the moment, the AoT compiler is not able to tell that the | ||
| * `UpgradeComponent` | ||
| * already implements them and so does not wire up calls to them at runtime. | ||
| */ | ||
| function UpgradeComponent(name, elementRef, injector) { | ||
@@ -48,3 +101,3 @@ this.name = name; | ||
| this.linkFn = this.compileTemplate(this.directive); | ||
| // We ask for the Angular 1 scope from the Angular 2 injector, since | ||
| // We ask for the Angular 1 scope from the Angular 2+ injector, since | ||
| // we will put the new component scope onto the new injector for each component | ||
@@ -51,0 +104,0 @@ var $parentScope = injector.get($SCOPE); |
@@ -9,14 +9,130 @@ /** | ||
| import { Injector, NgZone } from '@angular/core'; | ||
| import * as angular from '../angular_js'; | ||
| /** | ||
| * The Ng1Module contains providers for the Ng1Adapter and all the core Angular 1 services; | ||
| * and also holds the `bootstrapNg1()` method fo bootstrapping an upgraded Angular 1 app. | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows Angular 1 and Angular 2+ components to be used together inside a hybrid upgrade | ||
| * application, which supports AoT compilation. | ||
| * | ||
| * Specifically, the classes and functions in the `upgrade/static` module allow the following: | ||
| * 1. Creation of an Angular 2+ directive that wraps and exposes an Angular 1 component so | ||
| * that it can be used in an Angular 2 template. See {@link UpgradeComponent}. | ||
| * 2. Creation of an Angular 1 directive that wraps and exposes an Angular 2+ component so | ||
| * that it can be used in an Angular 1 template. See {@link downgradeComponent}. | ||
| * 3. Creation of an Angular 2+ root injector provider that wraps and exposes an Angular 1 | ||
| * service so that it can be injected into an Angular 2+ context. See | ||
| * {@link UpgradeModule#upgrading-an-angular-1-service Upgrading an Angular 1 service} below. | ||
| * 4. Creation of an Angular 1 service that wraps and exposes an Angular 2+ injectable | ||
| * so that it can be injected into an Angular 1 context. See {@link downgradeInjectable}. | ||
| * 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks | ||
| * coexisting in a single application. See the | ||
| * {@link UpgradeModule#example example} below. | ||
| * | ||
| * ## Mental Model | ||
| * | ||
| * When reasoning about how a hybrid application works it is useful to have a mental model which | ||
| * describes what is happening and explains what is happening at the lowest level. | ||
| * | ||
| * 1. There are two independent frameworks running in a single application, each framework treats | ||
| * the other as a black box. | ||
| * 2. Each DOM element on the page is owned exactly by one framework. Whichever framework | ||
| * instantiated the element is the owner. Each framework only updates/interacts with its own | ||
| * DOM elements and ignores others. | ||
| * 3. Angular 1 directives always execute inside the Angular 1 framework codebase regardless of | ||
| * where they are instantiated. | ||
| * 4. Angular 2+ components always execute inside the Angular 2+ framework codebase regardless of | ||
| * where they are instantiated. | ||
| * 5. An Angular 1 component can be "upgraded"" to an Angular 2+ component. This is achieved by | ||
| * defining an Angular 2+ directive, which bootstraps the Angular 1 component at its location | ||
| * in the DOM. See {@link UpgradeComponent}. | ||
| * 6. An Angular 2+ component can be "downgraded"" to an Angular 1 component. This is achieved by | ||
| * defining an Angular 1 directive, which bootstraps the Angular 2+ component at its location | ||
| * in the DOM. See {@link downgradeComponent}. | ||
| * 7. Whenever an "upgraded"/"downgraded" component is instantiated the host element is owned by | ||
| * the framework doing the instantiation. The other framework then instantiates and owns the | ||
| * view for that component. | ||
| * a. This implies that the component bindings will always follow the semantics of the | ||
| * instantiation framework. | ||
| * b. The DOM attributes are parsed by the framework that owns the current template. So | ||
| * attributes | ||
| * in Angular 1 templates must use kebab-case, while Angular 1 templates must use camelCase. | ||
| * c. However the template binding syntax will always use the Angular 2+ style, e.g. square | ||
| * brackets (`[...]`) for property binding. | ||
| * 8. Angular 1 is always bootstrapped first and owns the root component. | ||
| * 9. The new application is running in an Angular 2+ zone, and therefore it no longer needs calls | ||
| * to | ||
| * `$apply()`. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * `import {UpgradeModule} from '@angular/upgrade/static';` | ||
| * | ||
| * ## Example | ||
| * Import the {@link UpgradeModule} into your top level {@link NgModule Angular 2+ `NgModule`}. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region='ng2-module'} | ||
| * | ||
| * Then bootstrap the hybrid upgrade app's module, get hold of the {@link UpgradeModule} instance | ||
| * and use it to bootstrap the top level [Angular 1 | ||
| * module](https://docs.angularjs.org/api/ng/type/angular.Module). | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region='bootstrap'} | ||
| * | ||
| * | ||
| * ## Upgrading an Angular 1 service | ||
| * | ||
| * There is no specific API for upgrading an Angular 1 service. Instead you should just follow the | ||
| * following recipe: | ||
| * | ||
| * Let's say you have an Angular 1 service: | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-title-case-service"} | ||
| * | ||
| * Then you should define an Angular 2+ provider to be included in your {@link NgModule} `providers` | ||
| * property. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="upgrade-ng1-service"} | ||
| * | ||
| * Then you can use the "upgraded" Angular 1 service by injecting it into an Angular 2 component | ||
| * or service. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="use-ng1-upgraded-service"} | ||
| * | ||
| * @description | ||
| * | ||
| * This class is an `NgModule`, which you import to provide Angular 1 core services, | ||
| * and has an instance method used to bootstrap the hybrid upgrade application. | ||
| * | ||
| * ## Core Angular 1 services | ||
| * Importing this {@link NgModule} will add providers for the core | ||
| * [Angular 1 services](https://docs.angularjs.org/api/ng/service) to the root injector. | ||
| * | ||
| * ## Bootstrap | ||
| * The runtime instance of this class contains a {@link UpgradeModule#bootstrap `bootstrap()`} | ||
| * method, which you use to bootstrap the top level Angular 1 module onto an element in the | ||
| * DOM for the hybrid upgrade app. | ||
| * | ||
| * It also contains properties to access the {@link UpgradeModule#injector root injector}, the | ||
| * bootstrap {@link NgZone} and the | ||
| * [Angular 1 $injector](https://docs.angularjs.org/api/auto/service/$injector). | ||
| * | ||
| * @experimental | ||
| */ | ||
| export declare class UpgradeModule { | ||
| /** The root {@link Injector} for the upgrade application. */ | ||
| injector: Injector; | ||
| /** The bootstrap zone for the upgrade application */ | ||
| ngZone: NgZone; | ||
| $injector: angular.IInjectorService; | ||
| constructor(injector: Injector, ngZone: NgZone); | ||
| /** | ||
| * The Angular 1 `$injector` for the upgrade application. | ||
| */ | ||
| $injector: any; | ||
| constructor( | ||
| /** The root {@link Injector} for the upgrade application. */ | ||
| injector: Injector, | ||
| /** The bootstrap zone for the upgrade application */ | ||
| ngZone: NgZone); | ||
| /** | ||
| * Bootstrap an Angular 1 application from this NgModule | ||
@@ -27,3 +143,3 @@ * @param element the element on which to bootstrap the Angular 1 application | ||
| */ | ||
| bootstrap(element: Element, modules?: string[], config?: angular.IAngularBootstrapConfig): void; | ||
| bootstrap(element: Element, modules?: string[], config?: any): void; | ||
| } |
@@ -8,14 +8,126 @@ /** | ||
| */ | ||
| import { Injector, NgModule, NgZone } from '@angular/core'; | ||
| import { Injector, NgModule, NgZone, Testability } from '@angular/core'; | ||
| import * as angular from '../angular_js'; | ||
| import { controllerKey } from '../util'; | ||
| import { angular1Providers, setTempInjectorRef } from './angular1_providers'; | ||
| import { $INJECTOR, INJECTOR_KEY, UPGRADE_MODULE_NAME } from './constants'; | ||
| import { $$TESTABILITY, $DELEGATE, $INJECTOR, $PROVIDE, INJECTOR_KEY, UPGRADE_MODULE_NAME } from './constants'; | ||
| /** | ||
| * The Ng1Module contains providers for the Ng1Adapter and all the core Angular 1 services; | ||
| * and also holds the `bootstrapNg1()` method fo bootstrapping an upgraded Angular 1 app. | ||
| * @whatItDoes | ||
| * | ||
| * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic) | ||
| * library for hybrid upgrade apps that support AoT compilation* | ||
| * | ||
| * Allows Angular 1 and Angular 2+ components to be used together inside a hybrid upgrade | ||
| * application, which supports AoT compilation. | ||
| * | ||
| * Specifically, the classes and functions in the `upgrade/static` module allow the following: | ||
| * 1. Creation of an Angular 2+ directive that wraps and exposes an Angular 1 component so | ||
| * that it can be used in an Angular 2 template. See {@link UpgradeComponent}. | ||
| * 2. Creation of an Angular 1 directive that wraps and exposes an Angular 2+ component so | ||
| * that it can be used in an Angular 1 template. See {@link downgradeComponent}. | ||
| * 3. Creation of an Angular 2+ root injector provider that wraps and exposes an Angular 1 | ||
| * service so that it can be injected into an Angular 2+ context. See | ||
| * {@link UpgradeModule#upgrading-an-angular-1-service Upgrading an Angular 1 service} below. | ||
| * 4. Creation of an Angular 1 service that wraps and exposes an Angular 2+ injectable | ||
| * so that it can be injected into an Angular 1 context. See {@link downgradeInjectable}. | ||
| * 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks | ||
| * coexisting in a single application. See the | ||
| * {@link UpgradeModule#example example} below. | ||
| * | ||
| * ## Mental Model | ||
| * | ||
| * When reasoning about how a hybrid application works it is useful to have a mental model which | ||
| * describes what is happening and explains what is happening at the lowest level. | ||
| * | ||
| * 1. There are two independent frameworks running in a single application, each framework treats | ||
| * the other as a black box. | ||
| * 2. Each DOM element on the page is owned exactly by one framework. Whichever framework | ||
| * instantiated the element is the owner. Each framework only updates/interacts with its own | ||
| * DOM elements and ignores others. | ||
| * 3. Angular 1 directives always execute inside the Angular 1 framework codebase regardless of | ||
| * where they are instantiated. | ||
| * 4. Angular 2+ components always execute inside the Angular 2+ framework codebase regardless of | ||
| * where they are instantiated. | ||
| * 5. An Angular 1 component can be "upgraded"" to an Angular 2+ component. This is achieved by | ||
| * defining an Angular 2+ directive, which bootstraps the Angular 1 component at its location | ||
| * in the DOM. See {@link UpgradeComponent}. | ||
| * 6. An Angular 2+ component can be "downgraded"" to an Angular 1 component. This is achieved by | ||
| * defining an Angular 1 directive, which bootstraps the Angular 2+ component at its location | ||
| * in the DOM. See {@link downgradeComponent}. | ||
| * 7. Whenever an "upgraded"/"downgraded" component is instantiated the host element is owned by | ||
| * the framework doing the instantiation. The other framework then instantiates and owns the | ||
| * view for that component. | ||
| * a. This implies that the component bindings will always follow the semantics of the | ||
| * instantiation framework. | ||
| * b. The DOM attributes are parsed by the framework that owns the current template. So | ||
| * attributes | ||
| * in Angular 1 templates must use kebab-case, while Angular 1 templates must use camelCase. | ||
| * c. However the template binding syntax will always use the Angular 2+ style, e.g. square | ||
| * brackets (`[...]`) for property binding. | ||
| * 8. Angular 1 is always bootstrapped first and owns the root component. | ||
| * 9. The new application is running in an Angular 2+ zone, and therefore it no longer needs calls | ||
| * to | ||
| * `$apply()`. | ||
| * | ||
| * @howToUse | ||
| * | ||
| * `import {UpgradeModule} from '@angular/upgrade/static';` | ||
| * | ||
| * ## Example | ||
| * Import the {@link UpgradeModule} into your top level {@link NgModule Angular 2+ `NgModule`}. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region='ng2-module'} | ||
| * | ||
| * Then bootstrap the hybrid upgrade app's module, get hold of the {@link UpgradeModule} instance | ||
| * and use it to bootstrap the top level [Angular 1 | ||
| * module](https://docs.angularjs.org/api/ng/type/angular.Module). | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region='bootstrap'} | ||
| * | ||
| * | ||
| * ## Upgrading an Angular 1 service | ||
| * | ||
| * There is no specific API for upgrading an Angular 1 service. Instead you should just follow the | ||
| * following recipe: | ||
| * | ||
| * Let's say you have an Angular 1 service: | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="ng1-title-case-service"} | ||
| * | ||
| * Then you should define an Angular 2+ provider to be included in your {@link NgModule} `providers` | ||
| * property. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="upgrade-ng1-service"} | ||
| * | ||
| * Then you can use the "upgraded" Angular 1 service by injecting it into an Angular 2 component | ||
| * or service. | ||
| * | ||
| * {@example upgrade/static/ts/module.ts region="use-ng1-upgraded-service"} | ||
| * | ||
| * @description | ||
| * | ||
| * This class is an `NgModule`, which you import to provide Angular 1 core services, | ||
| * and has an instance method used to bootstrap the hybrid upgrade application. | ||
| * | ||
| * ## Core Angular 1 services | ||
| * Importing this {@link NgModule} will add providers for the core | ||
| * [Angular 1 services](https://docs.angularjs.org/api/ng/service) to the root injector. | ||
| * | ||
| * ## Bootstrap | ||
| * The runtime instance of this class contains a {@link UpgradeModule#bootstrap `bootstrap()`} | ||
| * method, which you use to bootstrap the top level Angular 1 module onto an element in the | ||
| * DOM for the hybrid upgrade app. | ||
| * | ||
| * It also contains properties to access the {@link UpgradeModule#injector root injector}, the | ||
| * bootstrap {@link NgZone} and the | ||
| * [Angular 1 $injector](https://docs.angularjs.org/api/auto/service/$injector). | ||
| * | ||
| * @experimental | ||
| */ | ||
| export var UpgradeModule = (function () { | ||
| function UpgradeModule(injector, ngZone) { | ||
| function UpgradeModule( | ||
| /** The root {@link Injector} for the upgrade application. */ | ||
| injector, | ||
| /** The bootstrap zone for the upgrade application */ | ||
| ngZone) { | ||
| this.injector = injector; | ||
@@ -30,3 +142,3 @@ this.ngZone = ngZone; | ||
| */ | ||
| UpgradeModule.prototype.bootstrap = function (element, modules, config) { | ||
| UpgradeModule.prototype.bootstrap = function (element, modules, config /*angular.IAngularBootstrapConfig*/) { | ||
| var _this = this; | ||
@@ -38,2 +150,31 @@ if (modules === void 0) { modules = []; } | ||
| .value(INJECTOR_KEY, this.injector) | ||
| .config([ | ||
| $PROVIDE, $INJECTOR, | ||
| function ($provide, $injector) { | ||
| if ($injector.has($$TESTABILITY)) { | ||
| $provide.decorator($$TESTABILITY, [ | ||
| $DELEGATE, | ||
| function (testabilityDelegate) { | ||
| var originalWhenStable = testabilityDelegate.whenStable; | ||
| var injector = _this.injector; | ||
| // Cannot use arrow function below because we need to grab the context | ||
| var newWhenStable = function (callback) { | ||
| var whenStableContext = this; | ||
| originalWhenStable.call(this, function () { | ||
| var ng2Testability = injector.get(Testability); | ||
| if (ng2Testability.isStable()) { | ||
| callback.apply(this, arguments); | ||
| } | ||
| else { | ||
| ng2Testability.whenStable(newWhenStable.bind(whenStableContext, callback)); | ||
| } | ||
| }); | ||
| }; | ||
| testabilityDelegate.whenStable = newWhenStable; | ||
| return testabilityDelegate; | ||
| } | ||
| ]); | ||
| } | ||
| } | ||
| ]) | ||
| .run([ | ||
@@ -53,4 +194,18 @@ $INJECTOR, | ||
| ]); | ||
| // Make sure resumeBootstrap() only exists if the current bootstrap is deferred | ||
| var windowAngular = window['angular']; | ||
| windowAngular.resumeBootstrap = undefined; | ||
| // Bootstrap the angular 1 application inside our zone | ||
| this.ngZone.run(function () { angular.bootstrap(element, [upgradeModule.name], config); }); | ||
| // Patch resumeBootstrap() to run inside the ngZone | ||
| if (windowAngular.resumeBootstrap) { | ||
| var originalResumeBootstrap_1 = windowAngular.resumeBootstrap; | ||
| var ngZone_1 = this.ngZone; | ||
| windowAngular.resumeBootstrap = function () { | ||
| var _this = this; | ||
| var args = arguments; | ||
| windowAngular.resumeBootstrap = originalResumeBootstrap_1; | ||
| ngZone_1.run(function () { windowAngular.resumeBootstrap.apply(_this, args); }); | ||
| }; | ||
| } | ||
| }; | ||
@@ -57,0 +212,0 @@ UpgradeModule.decorators = [ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by14.05%
468093
- Lines of code
- increased by17.57%
5647
No dependency changes