Getting Started with Angular CLI
Now that all the necessary tools including Node.js, VS Code, and Angular CLI are installed, it's time to create your first project and see how Angular CLI simplifies the development process.
What is Angular CLI?
It allows you to:
-
Quickly create new projects with a predefined structure;
-
Generate components, services, and other project elements;
-
Start a development server for testing and debugging;
-
Build the application for production deployment.
With Angular CLI, you don't need to manually configure files and dependenciesβeverything is set up automatically.
Setting Up Your Workspace
Before creating a new project, choose a convenient location on your computer where you want to store your Angular projects.
If you don't have a dedicated folder for projects, create one using the following command:
This command creates a new folder named projects
in the specified location.
Next, navigate to the newly created folder by running:
This command opens the projects
folder, allowing you to work inside it.
Creating an Angular Project with CLI
To create a new Angular project, run the following command inside your project folder:
-
ng new
- the command for creating a new Angular project; -
angular-app
- the project name (you can use any name you prefer).
After running the command, Angular CLI will prompt you with a few setup questions:
-
Would you like to add Angular routing? - you'll cover this later, so for now, select
Yes
; -
Which stylesheet format would you like to use? - this determines the type of stylesheets for your project. I recommend choosing CSS, but you can select the option that suits you best.
Once you confirm these options, Angular CLI will begin installing dependencies. This process may take a few minutes as it downloads and installs all the necessary packages.
When the setup is complete, a success message will appear, indicating that the project has been created successfully.
Now, you can open the project in VS Code, which we installed earlier.
In the next chapter, you'll take a detailed look at the folder and file structure generated by Angular CLI to understand how an Angular project is organized and where the key parts of your application are located.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 3.13
Getting Started with Angular CLI
Swipe to show menu
Now that all the necessary tools including Node.js, VS Code, and Angular CLI are installed, it's time to create your first project and see how Angular CLI simplifies the development process.
What is Angular CLI?
It allows you to:
-
Quickly create new projects with a predefined structure;
-
Generate components, services, and other project elements;
-
Start a development server for testing and debugging;
-
Build the application for production deployment.
With Angular CLI, you don't need to manually configure files and dependenciesβeverything is set up automatically.
Setting Up Your Workspace
Before creating a new project, choose a convenient location on your computer where you want to store your Angular projects.
If you don't have a dedicated folder for projects, create one using the following command:
This command creates a new folder named projects
in the specified location.
Next, navigate to the newly created folder by running:
This command opens the projects
folder, allowing you to work inside it.
Creating an Angular Project with CLI
To create a new Angular project, run the following command inside your project folder:
-
ng new
- the command for creating a new Angular project; -
angular-app
- the project name (you can use any name you prefer).
After running the command, Angular CLI will prompt you with a few setup questions:
-
Would you like to add Angular routing? - you'll cover this later, so for now, select
Yes
; -
Which stylesheet format would you like to use? - this determines the type of stylesheets for your project. I recommend choosing CSS, but you can select the option that suits you best.
Once you confirm these options, Angular CLI will begin installing dependencies. This process may take a few minutes as it downloads and installs all the necessary packages.
When the setup is complete, a success message will appear, indicating that the project has been created successfully.
Now, you can open the project in VS Code, which we installed earlier.
In the next chapter, you'll take a detailed look at the folder and file structure generated by Angular CLI to understand how an Angular project is organized and where the key parts of your application are located.
Thanks for your feedback!