Teach you how to let the flowers of Angular 5 blossom on the old tree of Angular 1

Time:2019-8-28

Write in front

Readable crowd

  1. You have an old Angular 1.x-based project under maintenance.
  2. This old project is bloated.
  3. This old project is still profitable for the company, and there are new demands to be added from time to time.
  4. You are a person who pursues technology and is eager to practice new technology.
  5. You want to use new technology (ng2 +, vue, react, etc.) to push this old project back, but risk and workload are very high, and the project plan does not allow you to do so.

If you satisfy the above five conditions, then I will shake hands with you. You and I are facing the same dilemma, but you are luckier than I am to be able to read this article.

ultimate objective

Close your eyes and imagine a moving train with dozens of carriages hanging behind its nose. The skins of these carriages were made by the manufacturing process five years ago. Eh! At this moment, the train arrives at the station, and the conductor finally hangs it up with a brand new carriage. This carriage is awesome. The manufacturing process uses the latest technology in the world! Alas! After another stop, we unloaded an old coal truck and replaced it with a new one.

Teach you how to let the flowers of Angular 5 blossom on the old tree of Angular 1

Beginning of text

Preparation

First of all, you need to know something about NG2 +, at least the DEMO-HERO that runs through the official website.

Several scenarios

In the general direction, NG2 + provides two mixed upgrade modes, which you can understand as follows:

  1. The first is the technology of NG1 for locomotive and the technology of NG1 and NG2 + for carriage. (This is how this article focuses on)
  2. The second is the technology of NG2 + for locomotive and the technology of NG1 and NG2 + for carriage. (Not covered in this article)

For the first scenario, remember that it’s centered on ng1, and you face the following three sub-scenarios:

  1. Write ng2+componentDowngradeAvailable for NG1directiveSo NG1 can use the directive version of NG2 + at will.
    Teach you how to let the flowers of Angular 5 blossom on the old tree of Angular 1
    Teach you how to let the flowers of Angular 5 blossom on the old tree of Angular 1
  2. When you write component in NG2 +, you need to use some directives, services, factories, providers, filters that already exist in ng1. Of course, take them.upgradeLa We enlarged the black, red and green squares above.
    Teach you how to let the flowers of Angular 5 blossom on the old tree of Angular 1
  3. NG1 controller wants to use NG2 + written service? Of course, it’s the service of NG2 +.DowngradeIt’s a provider!
    This scene is actually the same as the first point. I won’t draw any pictures.

So the nature of hybrid applications is upgraded and downgraded so that they can work together happily.

This is the end of the train of thought. Welcome all of you to have three consecutive qualities, praise, comment and collect. I’ll release the second article as soon as possible–Code Paper