• 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