Angular 1 and 2 Integration Javascript Example – Directive

In this example, we will be creating an angular 1 and 2 hybrid application that demonstrates below use cases.

On a single page,

  1. use Angular 1 directive
  2. use Angular 2 component
  3. use an Auglar 1 directive that uses Angular 2 component
  4. use an Angular 2 component that uses Angular 1 directive

The page structure will be like below: –

Angular 1 and 2 Integration Javascript Example - Directive page structure

I am just trying to cover all scenarios that may happen during upgrade process, it doesn’t necessarily mean that you will encounter them all.

So, let’s get started.

Folder Structure

Below is the folder structure of this example. As always, the source code is available for download.

Angular 1 and 2 Integration Javascript Example - Directive folder

app.js

If you are familiar with Angular 1, you know that we need to declare our app module. To keep the example simple and clean, this is all for app.js.

angular-one.directive.js

Next, let’s create an Angular 1 directive. Below is a very typical directive with template in Angular 1.

angular-two.directive.js

And we create a very basic Angular 2 component as well. If you are not familiar with Angular 2 component, you may check my other posts.

adapter.js

In order to bootstrap an Angular 1 and Angular 2 hybrid application, we need to use UpgradeAdapter  provided by Angular 2 upgrade module.

In adapter.js, we create our adapter instance here so it can be used later.

boot.js

Here is the place where we bootstrap the app. Before we do so, we need to downgrade the <angular-two/>  component so it can be available for use.

 

So far, we have already covered the use case 1 and 2, which means you should be able to use <angular-one/>  and <angular-two>  component on your page, like below: –

index.html

Result

Angular 1 and 2 Integration Javascript Example - Directive result short

 

Umm…, looks good, isn’t it? Wait, what about use case 3 and 4?

For use case 3 and 4, let’s create another 2 components to demonstrate the integration.

 

angular-one-two.component.js

This is another Angular 1 directive, but it uses the Angular 2 component <angular-two/>  that we created above.

Well, actually, we don’t have to do anything special for this directive, because we have already downgraded the <angular-two/>  component as shown in boot.js .

angular-two-one.component.js

This component is for demonstrating the use case 4, and to me, use case 4 is very likely to happen when we are upgrading to Angular 2, for example, creating a new component in Angular 2 but still requires a third party Angular 1 directive. So here is our <angular-two-one/>  component that uses Angular 1 directive <angular-one/>  and the other Angular 2 component <angular-two/> .

In Angular 2, if we need to use any other components in your template, we need to inject them via directives  attribute. Since <angular-one/>  is an Angular 1 directive, we need to upgrade it first before we can inject it. This is done by calling adapter.upgradeNg1Component() .

 

To be able to use this new <angular-two-one/>  component, again, we need to downgrade it. What did I mean by again? because we have already downgraded one above. So our boot.js  is now becoming like this: –

 

The index.html  for the full example is now looking like this: –

Result of the full example

Angular 1 and 2 Integration Javascript Example - Directive full result

 

Full source code for this example is available here.

 

Related Links


facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.