If you have worked with network capable embedded devices, you will have worked with web interfaces to control them as it is a convenient UI interface.

If you have an interface written in AngularJS, then you may be considering updating to Angular as a natural progression.

There are numerous examples on line of controlled and gradual ways to do this, and they seem very valid, but most of them require a consistent architecture on the AngularJS side.

If your main aim is to brute replace routes/pages one by one. i.e. Create a new Angular page to replace the AngularJS one, then caressing AngularJS into Angular ‘style’ is probably not good value for money.

Instead, here is a summary of some sites found which together will allow you to

1. upgrade your entire AngularJS site into a parent Angular site.
2. route/re-direct to the base page of your AngularJS site (and effectively hand over the router)
3. Install a event dispatcher form AngularJS to Angular for information that the new pages need from the old ones.

The first two steps are detailed very nicely and with good detail in this reference: https://medium.com/lapis/running-angularjs-1-6-in-angular-5-side-by-side-d2ed771e2a8f

Doing that will get you an Angular project with your original AngularJS running entirely inside it.

Step 3 is the ‘tunnel’ between the two, and involves a rudimentary dispatcher from AngularJS to Angular.

Remembering that we are deprecating AngularJS, so something simple means we can get to the end result faster.

On the Angular side, in a component.ts of your choosing add.

import { Component, HostListener } from '@angular/core';
---snip---

@Component({
  selector: 'your-component',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent {

  constructor( ) { }

  @HostListener('window:message', ['$event']) sncListener(data: any) {
    console.log("Your message has arrived, decode the data and act on it");
    if (data.detail.your_msg_code === 'user_deleted') {
       // etc
    }
  }

---snip---
}

The HostListener reference is https://angular.io/api/core/HostListener

The relevant piece here is the ‘window:message’ where window is a system string, as shown in the reference above, and the message is what the AngularJS dispatcher (see further down) has in its CustomEvent.

On the AngularJS side, you need to dispatch the event, as follows.

angular.module('Main', ['ngTouch'])

        .controller('MainController', ['$window', '$scope', '$q', '$http', '$location', '$interval') {
        
---snip---

        $scope.someFunction = function () {
        
          // data here is some variable/object
          yourDispatcher({'your_msg_code': data});

---snip---
        }

        function yourDispatcher(data) {
          // message and detail are part of the custom event so need to be just that.
          var event = new CustomEvent('message', {
	          'detail' : data
	        });
          window.dispatchEvent(event);
        }

---snip---

        
        }

The use of CustomEvent and dispatchEvent was gleaned from here https://stackoverflow.com/questions/41050573/when-angularjs-controller-meets-postmessage-events

and a reference is https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent and https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

Finally now you have the means to create new pages in Angular and replace the old ones one by one.