Table of Contents
Angular is a popular framework for building dynamic, single-page web applications. If you’re new to Angular, this guide will walk you through the process of creating your first app using TypeScript and the Angular CLI. By the end, you’ll have a basic but functional Angular application ready to expand upon.
Prerequisites
- Node.js and npm installed on your computer
- Basic understanding of JavaScript and TypeScript
- Command line interface familiarity
Ensure Node.js is installed by running node -v and npm -v in your terminal. If not, download it from the official Node.js website.
Installing Angular CLI
The Angular CLI is a command-line interface tool that simplifies project creation and management. Install it globally using npm:
npm install -g @angular/cli
Creating a New Angular Project
Navigate to the directory where you want your project and run:
ng new my-first-angular-app
Follow the prompts to choose routing options and styles. Once created, navigate into your project directory:
cd my-first-angular-app
Running the Development Server
Start the local development server with:
ng serve
Open your browser and go to http://localhost:4200. You should see the default Angular app running.
Understanding the Project Structure
The main files and folders include:
- src/app: Contains components, modules, and services
- src/assets: Static assets like images and styles
- angular.json: Configuration file for Angular CLI
- package.json: Dependencies and scripts
Creating Your First Component
Generate a new component called hello-world:
ng generate component hello-world
This creates a new folder hello-world inside src/app with the necessary files.
Editing the Component
Open src/app/hello-world/hello-world.component.ts and update the template or templateUrl to display a message:
Example:
<h2>Hello, Angular!</h2>
Using the Component
Include the <app-hello-world> selector in src/app/app.component.html:
<app-hello-world></app-hello-world>
Building and Deploying
To build your app for production, run:
ng build --prod
This generates optimized files in the dist/ folder, ready for deployment to a web server.
Next Steps
Explore Angular features such as routing, forms, and services to create more complex applications. The Angular documentation offers comprehensive tutorials and guides to deepen your understanding.