Refactoring Angular Applications

Chapter 5. Refactoring Through Reorganization

Chances are you learned Angular through online tutorials or through the Angular online documentation. Although these sources are good for explaining specific features of Angular, they don’t provide very much guidance on application architecture.

Perhaps you used a seed project or a code generator (e.g., Yeoman) to create the scaffolding for your project. In this case you’re a little better off because these tools provide some opinions on effective layouts for your application, but even these approaches have drawbacks. For example, the official angular/angular-seed GitHub project guides users in a counterproductive direction, and the project itself has fallen into neglect.

In a well-organized project it should be easy to find components within your code base. Your project should establish guidelines for standard file-naming practices, and there should be no more than one component per file.

Angular is built with powerful module support. Third-party libraries (often installed via npm) are added to applications via this module system. This same pattern can be used within a project to separate an application’s code into reusable, modular features.

When using third-party JavaScript libraries without specific Angular support, it’s helpful to write an adaptor module for use with Angular’s dependency injection pattern. Many third-party JavaScript libraries already have open source adaptors, but not all. You may also have internal JavaScript ...