When you are running AngularJS and Angular side by side, then you may need to inject AngularJS default services such as $rootScope, $timeout, $state (UI-Router) etc.
In order to use the AngularJS default services, you need to
define a provider. The upgrade module already defined a provider for
$rootScope, hence you can use it directly as outlined in my
other blog.
Let’s see how to inject the UI-Router $state into Angular.
Upgrade Module internally stores the Angular JS injector. In our Angular 2
module, we can define a provider which utilizes the Angular JS injector to
return the reference.
So first define a provider in Angular 2 as shown below
@NgModule({
imports: [ ... ],
declarations: [ ... ],
providers: [
{ provide: '$state', useFactory: (i) => i.get('$state'), deps: ['$injector'] }
]
})
After defining the provider in the module, you can now inject
the dependencies in your angular 2 components and services as shown below:
constructor(@Inject("$rootScope") private $rootScope: ng.IRootScopeService, @Inject("$state") private $state: ng.ui.IStateService) {
//
UI-Router change events
}
