Skip to content

A simple POC (proof of concept) to show how integrate Angular2 and Angular1 applications.

Notifications You must be signed in to change notification settings

mariojunior/ng1Bridge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Ng1Bridge

Ng1Bridge is a simple TypeScript class that provides access to Angular1 Injector Provider to your Angular 2 Application. This approach should be used only on specific cases where you want (for many 'dubious' reasons) load an entire Angular 2 Application inside another Angular 1.x application.

In these cases, it's common you need share Services/Scopes (becareful) between the Angular 1 and Angular 2 modules, then, Ng1Bridge does this dirty job for you.

Once every services/factories/values/constants in Angular 1 will be placed into the same Injector Provider (if you are using an unique angular1 instance and bootstraping once), Ng1Bridge will retrieve the injector via body element of the page, and will provide a clean access to retrieve any angular 1 services/factories/values/constant inside the Angular 2 scope/context.

All you need is "inject" the Ng1Bridge into your Angular 2 TypeScript Component/Class like this:

import { AngularStuffs... you know} from 'you know from where';
import { Ng1Bridge } from './ng1Bridge.ts'; //considering the files are in the same path.

export class AppComponent implements OnInit {
  label: string;

  constructor(router:Router, bridge:Ng1Bridge)
  {
    this.router=router;
    this.bridge=bridge;
  }
  
  ngOnInit() {
    var scp = this.bridge.globalScope; //--> ng1 $scope.myValue reference from the body scope
    this.label = 'Ng2 accessing a Ng1 variable: "' + scp.myValue + '"';

    //to retrieve an instance of any ng1 service, use:
    // ** var userService = this.bridge.getService('userService'); the argument should be the name of the service injected on the ng1's scope
    // ** userService.getLoggedUser() for example.
  }
}

This POC was possible after I've read the initial answer of @micronyks (https://github.com/micronyks) about 'how to embed an Angular 2 app inside an Angular 1 app' and reading the Angular 2 documentation about how to interact with outside DOM elements of the Angular 2 context.

Use by your own risk. :)

About

A simple POC (proof of concept) to show how integrate Angular2 and Angular1 applications.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published