Creating a hybrid environment in Angular using UpgradeModule

    Just to clarify, I will be referring to the following terms as below:

     

    • Angular 1 as AngularJS
    • Angular 2 as Angular

     

    Google released the first stable version of Angular by the end of 2016 and since Angular has been completely rewritten and is not an upgrade of AngularJS, it is a big break change for companies that already have quite robust system built in AngularJS in their frontend.

    Having said that, I decided to write and explain step by step how to utilize UpgradeModule library from Angular and have an AngularJS application that allows Angular components within in its application, and not only that but also by utilizing it, it is also possible achieve communication between AngularJS controllers and Angular services and vice versa.

    Setting the environment in Plunker

    For demonstration purposes, I will be using Plunker. I will also explain step by step how to set the correct hybrid environment in Plunker as well.

    From here click on the new dropdown button and select “Angular 1.5”, exclude the “Angular 1.5 + Typescript” option because in future articles I want to show how AngularJS controllers, directives, services completely written in Javascript communicate with Angular components.

    Mapping core Angular libraries

    Then, from the menu on the left, create a new file named "config.js". That file will utilize a module loader, which will be mapping and telling Angular where to look when a library is being invoked.

    This file will be utilizing SystemJS, but there are some other options such as Webpack  and Browserify.
    After creating the file, we just can copy and paste the following code that includes the libraries we will be utilizing this time.

    config.js

    Adding core libraries to index.html

    Then we have to prepare the index.html so that it loads the config.js we just created and some core libraries needed (zonejs, reflectjs, systemjs) by Angular.  Also we need to delete the AngularJS code created by plunker so that it does not bootstrap.

    Later on after editing the AngularJS controller created by Plunker(app.js) and creating a new Angular component, we will return to this file to call both components (AngularJS and Angular) from here.

    After editing index.html, it should look something similar as below.

    index.html

    Creating an Angular component

    Next we create the sample Angular component that we want to display later display it in our app. This time I am calling it src/my-uniservity.ts (note the file's path), this file is also mapped in the previously created "config.js" file.

    Inside we will assign a moduleID, selector and template. The component, my-university, will be called by using its selector as html tag in the template. Lastly, we will export its class so that other classes can access it.

    src/my-university.ts

    Creating and organizing NgModule

    Next we create "src/app.module.ts", which includes NgModule. This last one, will help us to organize the entire application into blocks. It receives a metadata object then Angular interprets it and compiles our components.

    This file also will be importing UpgradeModule that will help us to prevent Angular from bootstrapping utilizing the ngDoBootstrap method.

    Note that this file will be also importing the previously created "src/my-university.ts" file
     
    src/app.module.ts

    Implementing UpgradeModule

    Then we create another file called "src/main.ts" which it is the one that will invoke the UpgradeModule class and bootstrap our application. It should look as below.
     
    src/main.ts

    Creating an AngularJS controller

    Now we delete all the source code created by plunker in the file "app.js", rename it to "university-controller.js" and create a new Controller inside of it. This controller be called from index.html

    university-controller.js

    Invoking both, an Angular component and an AngularJS controller

    Finally we return to the "index.html" file and make it call our AngularJS controller and Angular component by using their selectors inside the body tags.
     
    index.html

    The screen in Plunker should look as below.

    Here is a direct link to the plunker sample.

    In future articles I will demonstrate how to achieve communication between AngularJS services with Angular components and vice versa.

    References

    Upgrading from AngularJS
    Creating Custom Directives

Comments are closed, but you can leave a trackback: Trackback URL.