Welcome to the world of Angular development! Now that you understand what Angular is, let’s create your first project and get your hands dirty with some code.
The Angular CLI: Your Project Creation Tool
To build Angular applications, we’ll use the official Angular CLI (Command Line Interface). This tool streamlines project creation and manages various development tasks. However, the code you write won’t run directly in the browser.
Why a Separate Build Step?
Angular code utilizes features that aren’t native JavaScript. To ensure compatibility across different browsers, the code needs conversion and optimization before deployment. This is where the build step comes in, taking your development code and transforming it into browser-friendly code. We’ll explore deployment in more detail later in the course.
Prerequisites: Node.js
The Angular CLI relies on Node.js to function. While we won’t be writing Node.js code in this course, it’s a crucial component behind the scenes. Head over to Node.js and download the LTS (Long-Term Support) or current version suitable for your operating system. Install it using the downloaded installer.
Installing the Angular CLI
With Node.js installed, you can install the CLI globally on your system. Visit Angular CLI to find the specific command for your terminal (Command Prompt on Windows, Terminal on macOS/Linux).
Installing the CLI (macOS/Linux)
On macOS or Linux, you might need to prefix the command with sudo
to grant necessary permissions:
sudo npm install -g @angular/cli
Installing the CLI (Windows)
On Windows, simply run the command you find on the Angular CLI website without needing sudo
.
Creating a New Angular Project
Once the CLI is installed, navigate to your desired project directory in your terminal and run the following command to create a new project
ng new my-first-app
Replace my-first-app
with your preferred project name, using dashes or underscores for multi-word names (avoid spaces).
Optional Flags for Beginners
Here are some helpful flags (configuration options) to add to the ng new
command, which will be useful throughout the course:
--no-strict
: Disables strict mode, making things a bit easier initially. We’ll explore stricter Angular practices later.--standalone false
: Disables standalone mode (covered later).--routing false
: Disables routing for now (covered later).
Running the Development Server
With the project created, navigate into the project folder using cd
and start the development server using:
ng serve
This opens a development server, usually running at http://localhost:4200
, allowing you to preview your Angular app in the browser. The server automatically reloads when you make code changes (you can stop it with CTRL + C
).
Course Code (Optional)
For this lecture, I’ve provided a downloadable file (app.component.html
) that you can copy into your project’s src/app
folder to replace the default file created by ng new
. This will give us a consistent starting point for the next lecture.
Let’s Begin!
With your development environment set up and the course code (optional) in place, we’re ready to delve into the project structure and start exploring Angular code!
0 Comments