Upgrading Your Approach to Angular from AngularJS

When upgrading an AngularJS app to Angular, there are a couple of routes you can take. There’s ngUpgrade, which is the official migration path set out in the Angular docs. There is also ngMigration, a fantastic tool that reviews your existing AngularJS codebase and lists the actions you need to take in order to migrate to Angular. Both ways show you what to do with your codebase in order to get from AngularJS to Angular, but the trickiest part is for developers new to Angular, who may have been working on one large AngularJS application for the last few years and have had no exposure to Angular. Is for them to understand the new approach Angular is taking.

In AngularJS you had scope, controllers, directives and services/factories. In v1.6 components were brought in (though they are really just directives with controllers built on). Now in Angular, you have components, modules, providers, pipes, classes, interfaces (though both features of TypeScript). You have type safety on top of all this.

So for the legacy AngularJS developer, there is a whole mindset shift that needs to happen besides just upgrading the codebase.

They need to know what effect having everything as a component has on the structure of an application. What is the relationship between parent/child components, how is data transferred between parent/child components? How does the module system need to be used? A legacy developer may just add all their components to the single module, creating one large monolithic module. Instead of taking advantage of the module system to break down the application by having feature modules. They need to know about the by feature approach to the folder structure of an application. They need to know about where the common features will go, is there a core folder that contains all the components/providers that aren’t part of a feature?

Another area that legacy AngularJS developers can slip up on is using TypeScript and embracing the type system. It could be far to easy to just set everything with a type of any and not using the benefits that the type system gives you. Like better tooling, picking up spelling errors before running the app, more efficient code that the TypeScript compiler can optimise to make the application run faster.

The advice I’d give if upgrading to Angular

• Read the ngUpgrade guide
• Read the Angular style guide in order to understand the approach to writing an Angular app
• Understand the module system, how to use it to divide up your app
• Understand the relationship between parent/child components
• Learn at least the basics of TypeScript and creating Types

You can’t go from AngularJS to Angular and expect to use the same approach you had. Angular is so different from AngularJS, that it is not just a case of changing a few JavaScript files to TypeScript. It’s a complete shift in approach to not only writing Angular but developing front-end applications altogether.