Skip to content

Wrapper around ngUpgrade to extend the support to attribute directives

Notifications You must be signed in to change notification settings

DanielSchuech/ngAdapter

Repository files navigation

npm version Build Status Test Coverage

AngularJS and Angular2 Adapter

This adapter extends the angular2 UpgradeAdapter by support for attribute directives. The usage is similar to the standard UpgradeAdapter.

Setup

import {ngAdapter} from 'ngAdapter/build/ngAdapter';

//create your AngularJS module
let module = angular.module('MyApp', []);

//create adapter
let adapter = new ngAdapter(module);

/**
 * modify your module
 */

adapter.bootstrap(document.body, ['MyApp']);

Downgrade Functions

// downgrade Component & Directive
module.directive('myNg2Component', adapter.downgradeNg2Component(MyNg2Component));
module.directive('myNg2Directive', adapter.downgradeNg2Directive(MyNg2Directive));

//downgrade NgModule
@NgModule({})
class MyNg2Module {}
adapter.addNg2Module(MyNg2Module);
let moduleName = adapter.downgradeNg2Module(MyNg2Module); //'MyNg2Module'
angular.module('App').requires.push(moduleName);

//downgrade Service
module.factory('myNg2Service', adapter.downgradeNg2Provider(MyNg2Service));

Upgrade Functions

upgradeAdapter.upgradeNg1Provider('myNg1Service');

@Component({
    selector: 'my-ng2-component',
    template: `
      <span my-ng1-attribute-directive>Hello World</span>
      <my-ng1-directive></my-ng1-directive>
    `
})
export class AppComponent {
  constructor(@Inject('myNg1Service') service: MyNg1Service) {}
}

@NgModule({
  directives: [
    adapter.upgradeNg1Directive('myNg1AttributeDirective'),
    adapter.upgradeNg1Component('myNg1Directive'),
    AppComponent
  ]
})
class MyNg1Module {}

Angular 2 usage

//add an Angular 2 Module to the hybrid app via addNg2Module
@NgModule({
  providers: [MyNg2Service]
})
class MyNg2Module {}
adapter.addNg2Module(MyNg2Module);

//add an Angular 2 service to the Angular 2 root injector
@Injectable()
class MyService {}
adapter.addProvider(MyService);

About

Wrapper around ngUpgrade to extend the support to attribute directives

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published