AngularJS and Angular in one running app
This page is an AngularJS app. Angular boots first, hands the page to AngularJS with
UpgradeModule, and the Angular pieces live inside the legacy template as
downgraded directives. Nothing here is a screenshot. It's running.
A downgraded component
AccountSummary is Angular. AngularJS knows it as the
accountSummary directive, and its accountId input comes from the
legacy controller.
Bound as an expression: [account-id]="vm.accountId"
A plain attribute: account-id="vm.accountId"
ngUpgrade reads a plain attribute as a literal string, so the component is asked for an
account literally named vm.accountId:
One cart, or two
'cart' is downgradeInjectable(CartService). Both buttons write
to one object, so both counts always agree.
The old .service('cart', LegacyCart) registration is still live. Each side
has a perfect singleton, of its own cart. Add from either side and watch the counts
disagree.