Welcome to the second lesson of the Front-end Engineering in Angular course! 🎉 In the previous lesson, we set the stage by learning how to set up an Angular project. We explored the importance of Angular in web development and got hands-on with creating a new project using Angular CLI. Now, it's time to dive deeper into the structure of an Angular project. By the end of this lesson, you'll have a clear understanding of the key files and directories that make up an Angular project, which will be essential as you continue to build more complex applications.

In an Angular project, several configuration files play a crucial role in defining the project's setup and behavior. Let's explore three of the most important ones:

1. angular.json: This file holds the configuration for your Angular app, defining settings for building, testing, and serving the application. It includes options like projects for specifying the Angular applications in the workspace, architect for defining commands like build, serve, and test for the project, and styles & scripts for listing where to find global styles and JavaScript files.
2. package.json: It contains metadata about the project, such as its name, version, and dependencies.
3. tsconfig.json: This file provides general TypeScript configuration, specifying compiler options and file inclusions. It includes settings such as compilerOptions for specifying how TypeScript transpiles code (e.g., ES6 output, module resolution), include for defining which files should be compiled and exclude for preventing unnecessary files from being compiled (e.g., node_modules/).

Here's a simple example of what you might find in a package.json file:

JSON
Copy to clipboard
1{
2  "name": "my-angular-app",
3  "version": "1.0.0",
4  "dependencies": {
5    "@angular/core": "^12.0.0",
6    "rxjs": "~6.6.0"
7  }
8}

In this snippet, name and version describe the project, while dependencies list the packages required for the project to run. Understanding these files helps you manage your project's configuration and dependencies effectively.

In the package.json file, the characters ~ and ^ are used to specify version ranges for dependencies:

• ~ (Tilde): This character allows updates to the most recent patch version within the specified minor version. For example, "rxjs": "~6.6.0" means that npm can update to any version 6.6.x where x is the latest patch version available, but it will not update to 6.7.0 or beyond.
• ^ (Caret): This character allows updates to the most recent minor version within the specified major version. For example, "@angular/core": "^12.0.0" means that npm can update to any version 12.x.x where x is the latest minor or patch version available, but it will not update to 13.0.0 or beyond.

The node_modules directory is a vital part of any Angular project. It contains all the npm packages that your project depends on. When you install a package using npm, it gets stored in this directory.

Imagine you have a project that relies on Angular and RxJS. When you run npm install, these packages, along with their dependencies, are downloaded and placed in node_modules. This directory ensures that all necessary code libraries are available for your project to function correctly.

Bash
Copy to clipboard
1node_modules/
2  ├── @angular/
3  ├── rxjs/
4  └── ...

This structure shows how packages are organized within node_modules. It's crucial for managing dependencies and ensuring your project has access to the libraries it needs.

Since the node_modules/ directory contains all installed dependencies, it is typically not included in version control (e.g., Git) because it can be reinstalled at any time using npm install, based on package.json and it is platform-dependent, meaning different operating systems may install different versions of some dependencies.

There are different directories that conform an Angular application.

The public directory stores static data like images and icons.

The src directory is where most of your development work happens. You are free to structure it the way you want, here is a recommendation of subdirectories that will help organize your code:

• main.ts: Entry point of Angular, used to bootstrap your application
• index.html: Base html file for bootstraping
• styles.css: Global css styles applied to the whole project
• app: The main directory for your application's code, further divided into:
  • core: Contains core functions and services shared across the application.
  • features: Organizes application requirements into feature-based architectures.
  • shared: Holds components, directives, and pipes shared across modules.

Here's a glimpse of how the app directory might be structured:

Plain text
Copy to clipboard
1app/
2  ├── core/
3  ├── features/
4  ├── shared/
5  ├── app.config.ts
6  ├── app.routes.ts
7  ├── app.component.ts
8  ├── app.component.html
9  └── app.component.css

This organization helps keep your codebase clean and manageable, making it easier to locate and work with different parts of your application.

To maintain a clean and efficient codebase, it's important to follow best practices like the LIFT principle:

• Locate: Code should be easy to find.
• Identify: Code should be identifiable at a glance.
• Flat: Keep the structure as flat as possible.
• DRY: Don't Repeat Yourself; avoid code duplication.

For example, if you have a utility function used across multiple components, place it in the shared directory to promote reusability and avoid duplication.

TypeScript
Copy to clipboard
1// shared/utils.ts
2export function formatDate(date: Date): string {
3  return date.toISOString().split('T')[0];
4}

By placing the formatDate function in the shared directory, you ensure that it can be easily accessed and reused across your application, adhering to the DRY principle.

In this lesson, we explored the structure of an Angular project, focusing on key configuration files, the node_modules directory, and the src directory. We also discussed best practices for maintaining a clean and efficient codebase. With this knowledge, you're now better equipped to navigate and manage an Angular project.

As you move on to the practice exercises, you'll have the opportunity to apply what you've learned and solidify your understanding. In the next lessons, we'll continue to build on this foundation, diving into more complex Angular topics. Keep up the great work, and happy coding! 🚀