Lesson 1
Setting Up an Angular Project
Introduction to Angular and Its Importance

Welcome to the very first lesson of the "Front-end Engineering in Angular" course! 🎉 In this lesson, we'll explore Angular, a powerful framework for building dynamic web applications. Angular is widely used in the industry due to its ability to create robust, scalable, and maintainable applications. Understanding how to set up an Angular project is the first step in harnessing its full potential. By the end of this lesson, you'll have a foundational understanding of how to get started with Angular, setting the stage for more advanced topics in future lessons.

Prerequisites: Installing Node.js and npm

Before diving into Angular, it's essential to have Node.js and npm (Node Package Manager) installed on your system. Node.js allows you to run JavaScript on the server side, while npm is a package manager that helps you install and manage libraries and tools.

While Angular is a front-end framework that runs in the browser, Node.js is required primarily for handling dependencies, running Angular CLI commands, and serving the project during development.

To install Node.js and npm, follow these steps:

  1. Visit the Node.js website and download the LTS (Long Term Support) version for your operating system.

  2. Run the installer and follow the on-screen instructions.

  3. Verify the installation by opening a terminal or command prompt and typing the following commands:

    Bash
    1node -v
2npm -v

These commands will display the installed versions of Node.js and npm, confirming that the installation was successful. With Node.js and npm ready, you're all set to proceed with Angular development.

Installing Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool that simplifies the process of creating and managing Angular projects. It provides commands to generate components, services, and more, streamlining development.

To install Angular CLI, use npm with the following command:

Bash
1npm install -g @angular/cli

This command installs the Angular CLI. The -g flag stands for "global," meaning Angular CLI is installed system-wide and can be accessed from any directory. Without -g, the CLI would only be available in the specific folder where it was installed. Once installed, you can verify the installation by running:

Bash
1ng version

This will display the version of Angular CLI, confirming that it's ready for use. With Angular CLI installed, you're equipped to create and manage Angular projects efficiently.

Creating a New Angular Project

Now that Angular CLI is installed, let's create a new Angular project. This process is straightforward and involves a single command:

Bash
1ng new todo-app

This command creates a new Angular project named todo-app. During the process, you'll be prompted to choose options like adding Angular routing and selecting a stylesheet format. Once the project is created, you'll notice a structured directory with files and folders that form the backbone of your Angular application. This structure ensures consistency and organization, making it easier to manage and scale your project.

Serving the Angular Application

With your Angular project set up, it's time to see it in action by serving it locally. This allows you to view and interact with your application in a web browser.

First, navigate to your project directory:

Bash
1cd todo-app

Then, start the development server with the following command:

Bash
1ng serve

This command compiles your application and starts a local development server. By default, the application is accessible at http://localhost:4200. Open this URL in your web browser, and you'll see your Angular application running. The development server supports live reloading, meaning any changes you make to the code will automatically reflect in the browser.

Understanding Angular Scaffolding with ng generate

Angular CLI offers a powerful feature called scaffolding, which automates the creation of various Angular entities like components, services, and modules. This feature reduces boilerplate code and ensures a consistent structure across your project.

To generate a new component, use the ng generate command:

Bash
1ng generate component folder/my-component

This command creates a new component named my-component inside the folder directory, with the necessary files and updates the module to include it. Scaffolding streamlines development by handling repetitive tasks, allowing you to focus on building features. As you continue to explore Angular, you'll find ng generate invaluable for maintaining a clean and organized codebase.

Conclusion and Next Steps

In this lesson, we've covered the essential steps to set up an Angular project, from installing prerequisites like Node.js and npm to creating and serving a new Angular application. We've also explored the benefits of Angular CLI and its scaffolding capabilities. With this foundation, you're ready to dive deeper into Angular development.

As you move forward, practice these steps to reinforce your understanding. The upcoming lessons will build on this knowledge, introducing you to more advanced Angular concepts and features. Keep experimenting and exploring, and you'll soon be creating dynamic and powerful web applications with Angular! 🚀

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.