Guided: Clean Code in Angular

Welcome to this Angular lab where you’ll refactor a legacy internal task management tool to follow clean code principles! You’ll identify and eliminate code smells in outdated components, apply clean code conventions in templates and TypeScript files, refactor complex logic into services and pipes, and use linting and formatting tools to ensure consistent code quality. The goal is to transform a messy legacy codebase into a maintainable, modern Angular application.

Legacy code often contains bloated components, unclear naming, and tangled logic, making maintenance difficult. In this lab, you’ll modernize a task management tool used internally to track tasks, ensuring it’s easier to update and scale. Clean code practices reduce technical debt, improve collaboration, and prevent bugs—critical for maintaining internal tools.

Tools like ESLint and Prettier, combined with Angular’s modular architecture, help enforce clean code standards. By refactoring logic into services and pipes, you’ll simplify components and improve reusability. Let’s dive in and breathe new life into this legacy tool!

info> Should you get stuck, a solutions folder located in src/solution contains the full code solution for this lab!

You can launch the app at anytime during the lab by doing the following;

1. Click the Run button at the bottom right of the Terminal.
2. Then view the web page by clicking this link to the Angular website: {{localhost:4200}}
   • You can also view the webpage by clicking the Web Browser tab's Refresh button, once the app is running. It may take a moment for the page to load.

You’ll begin by analyzing the legacy Angular project to identify and eliminate code smells in components. This step focuses on detecting issues like overly complex methods and duplicated logic then refactoring them for clarity and maintainability. These skills are essential for modernizing legacy codebases. Legacy components often handle too many responsibilities. Often, we can refactor this by moving a lot of the business logic into services. The first step however, is to cleanly create simple, pure methods. The current code has a bloated process method. Let's split this up into multiple, smaller methods. Unclear naming confuses maintainers. And so do any types! The getTasks method isn't as clear as it could be when it comes to describing what the method does. And the any types do not clearly define the data in your application. Duplicated code increases maintenance effort. Currently there is some duplication between the LegacyTaskDetailComponent and the LegacyTaskListComponent. When you have code duplication, it can be a great to create a reusable function within a utility file.

Also, you can share that Task interface between your components as well - this would be a good idea to cut down on code duplication.

Now you’ll apply clean code conventions to improve readability and consistency in the task management tool’s templates and TypeScript files. This step focuses on formatting HTML templates and structuring TypeScript code to follow Angular best practices, making legacy code easier to understand and maintain. Legacy templates are often cluttered with complex logic that should be moved to the component. Legacy Angular code often lacks proper documentation. Using JSDoc comments give a lot more context for readers of your code. They also allow for seamless integration with code documentation generators.

JSDocs are of the form:

/**
* Describe your method, class, etc. here.
*/
``` JSDoc comments can also work with TypeScript and code generators to help inform, from a documentation perspective, what parameters a method receives and what a method returns via the `@param` and `@returns` designators.

These comments are of the form:
```typescript
/**
* This method adds two numbers 
 * @param {number} a - The first number to add.
 * @param {number} b - The second number to add.
 * @returns {number} The sum of a and b.
 */

Next, you’ll refactor complex logic from legacy components into reusable services and pipes. This step focuses on moving business logic to services and formatting logic to custom pipes, reducing component complexity and improving modularity. Legacy components often contain too much logic in the TypeScript component file. The best place to put business logic is in a service that your components can use. This will keep your component "dumb" so to speak so that they are simple and focus on the view of your application. Pipes simplify template logic in legacy templates and promote code reuse while keeping component files uncluttered. Services reduce redundancy across components and keep your components nice and lean.

Finally, you’ll configure linting and formatting tools to enforce consistent code quality in the refactored task management tool. This step focuses on setting up ESLint and Prettier to catch issues and standardize formatting, ensuring the legacy codebase remains clean and professional. Linting catches potential errors in legacy code. It's an important part of having a healthy, maintainable codebase. In TypeScript, Angular codebases, it is important to stop the use of the any type in order to maintain stricter type checking. This will ensure that you have a safer codebase. Formatting ensures consistent style across the codebase. The tool, Prettier, is the primary choice of tooling when it comes to coding style. Styling conventions ensure that your codebase is easy to ready and maintain. It's important to make linting the codebase easy. You can do this by utilizing the scripts portion of the package.json.

Great job—you’ve refactored a legacy internal task management tool into a clean, maintainable Angular application! You’ve completed a practical project that demonstrates your ability to identify code smells, apply clean code conventions, refactor logic, and enforce quality with linting tools. This lab has equipped you with essential skills for modernizing legacy Angular applications.

You’ve learned how to eliminate code smells by refactoring bloated components and improving naming. Clean code conventions made your templates and TypeScript files readable and consistent. Refactoring into services and pipes reduced complexity, while linting and formatting tools ensured high code quality. These practices are critical for maintaining internal tools.

Now, consider enhancing the task management tool further. You could explore advanced refactoring techniques, like creating a shared module for utilities. For a challenge, try implementing a custom schematic to automate clean code checks. Keep exploring Angular courses and labs to continue your clean code journey!