The UpgradeAdapter allows: 1. creation of Angular component from AngularJS component directive (See [UpgradeAdapter#upgradeNg1Component()]) 2. creation of AngularJS directive from Angular component. (See [UpgradeAdapter#downgradeNg2Component()]) 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks coexisting in a single application.
The component is instantiated by being listed in AngularJS template. This means that the host element is controlled by AngularJS, but the component's view will be controlled by Angular.
Even thought the component is instantiated in AngularJS, it will be using Angular syntax. This has to be done, this way because we must follow Angular components do not declare how the attributes should be interpreted.
ng-model is controlled by AngularJS and communicates with the downgraded Angular component by way of the ControlValueAccessor interface from @angular/forms. Only components that implement this interface are eligible.
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.
There are two independent frameworks running in a single application, each framework treats the other as a black box.
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.
AngularJS directives always execute inside AngularJS framework codebase regardless of where they are instantiated.
Angular components always execute inside Angular framework codebase regardless of where they are instantiated.
An AngularJS component can be upgraded to an Angular component. This creates an Angular directive, which bootstraps the AngularJS component directive in that location.
An Angular component can be downgraded to an AngularJS component directive. This creates an AngularJS directive, which bootstraps the Angular component in that location.
Whenever an adapter 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. This implies that component bindings will always follow the semantics of the instantiation framework. The syntax is always that of Angular syntax.
AngularJS is always bootstrapped first and owns the bottom most view.
The new application is running in Angular zone, and therefore it no longer needs calls to $apply().