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:
angular.json
: This file holds the configuration for your Angular app, defining settings for building, testing, and serving the application. It includes options likeprojects
for specifying the Angular applications in the workspace,architect
for defining commands like build, serve, and test for the project, andstyles
&scripts
for listing where to find global styles and JavaScript files.package.json
: It contains metadata about the project, such as its name, version, and dependencies.tsconfig.json
: This file provides general TypeScript configuration, specifying compiler options and file inclusions. It includes settings such ascompilerOptions
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:
JSON1{ 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 version6.6.x
wherex
is the latest patch version available, but it will not update to6.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 version12.x.x
wherex
is the latest minor or patch version available, but it will not update to13.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.
Bash1node_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 applicationindex.html
: Base html file for bootstrapingstyles.css
: Global css styles applied to the whole projectapp
: 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 text1app/ 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.
TypeScript1// 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! 🚀