Free tools Windows power users keep installed
One-click scans. No signup required.
Angular’s official first-app tutorial walks you through a sample rental-homes listing, then helps you run it and make your first change. You can follow it in a browser-based editor or set it up on your computer. The tutorial assumes basic HTML, JavaScript, CSS, and command-line skills; TypeScript is helpful but not required to get started.
What you’ll build and learn
The tutorial creates a small app that lists rental homes and displays details for individual homes. It uses that example to introduce Angular concepts you can apply in other projects. Lessons can be completed in any order, so you can focus on a feature that interests you or work through the tutorial from the beginning. See Angular’s first-app tutorial.
Choose a browser or local workflow
| Path | Setup | Best fit |
|---|---|---|
| Embedded or browser-based tutorial | No local Node.js or CLI installation is needed to begin. | Trying Angular lessons before setting up a development environment. |
| Local tutorial starter | Requires a compatible Node.js installation, npm, and Angular CLI; then install the starter’s dependencies. | Working with local files and your preferred editor while following the tutorial. |
Angular’s documentation offers both the embedded tutorial and a browser-based StackBlitz route. The browser path avoids local setup, while local development gives you a normal filesystem and editor workflow. The documentation does not quantify how quickly either path can be completed. Angular CLI overview
Check what you need before starting
- Background: Be comfortable editing HTML, programming site content in JavaScript, reading CSS, and following command-line instructions. Familiarity with TypeScript can help, but Angular’s local setup guide says it is not required.
- Local software: Use an active LTS or maintenance LTS release of Node.js and npm. Because Angular’s compatibility requirements change, check the official Angular version compatibility table for the current requirement rather than relying on a fixed version number.
- Angular CLI: Install it globally with
npm install -g @angular/cli. The setup guide also documents pnpm, yarn, and bun as package-manager options. - Editor: Use whichever tool you prefer. Angular lists Visual Studio Code and WebStorm as editor options; Angular Language Service is an optional enhancement, not a prerequisite. As Angular puts it, “You are free to use any tool you prefer to build apps with Angular.”
Follow Angular’s local setup guide for the current installation instructions.
Recommended Free Tools
#1 Best Overall
Run the tutorial’s downloaded starter
This is the tutorial-specific workflow: download its starter project, then run that project. It is separate from creating a new, generic Angular app with ng new.
- Check your Node.js version with
node --versionand confirm it meets Angular’s current compatibility requirements. - Install Angular CLI if you have not already:
npm install -g @angular/cli. - Download the starter project linked from the first-app tutorial, open a terminal in its
first-appdirectory, and install its dependencies withnpm install. - Start the development server with
ng serve. - Open http://localhost:4200 in your browser to view the app.
Keep the terminal running while you work. The local setup guide explains that the development server watches for file changes, rebuilds the app, and reloads it as you edit.
Know what the first lesson changes
The first lesson introduces the starter’s main files and changes the page to display “Hello world!” You can check that the change worked by viewing the app in your browser.
index.htmlis the top-level HTML template.styles.csscontains global styles.main.tsis the application entry point.app.tsis the root component in the tutorial’s current concise style.
Make the change in the file shown by the lesson, save it, and check the browser result at http://localhost:4200.
Rank #3
Use a fresh project instead of the tutorial starter
If you want a new, generic Angular workspace rather than the tutorial’s preconfigured sample, use the distinct CLI workflow documented by Angular:
- Create a project:
ng new my-app. - Enter its directory:
cd my-app. - Start it and open it in a browser:
ng serve --open.
Choose this route when you want to begin your own project. To follow the rental-homes lessons as written, use the downloaded first-app starter instead. Read the Hello World lesson.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
