Angular Tutorial: ng serve

beginner
22 min

Angular Tutorial: ng serve

Welcome to the ng serve lesson! This tutorial is designed to guide you through the process of setting up and running an Angular project using the ng serve command. By the end of this lesson, you'll have a strong understanding of how Angular works and how to create, build, and serve your own projects. Let's dive in! šŸŽÆ

What is ng serve?

ng serve is a command provided by Angular CLI, a powerful tool that helps you create Angular applications. It's used to start an Angular development server, allowing you to see the changes in real-time as you code. šŸ’”

Prerequisites

To follow along with this tutorial, you'll need:

  1. Node.js (download and install from here)
  2. Angular CLI (install it globally using npm install -g @angular/cli)

Getting Started

Let's create a new Angular project:

bash
ng new my-first-angular-app

Navigate into your new project:

bash
cd my-first-angular-app

Now, start the development server:

bash
ng serve

You should see a message indicating the server is running:

Server running at http://localhost:4200/

Open your browser and navigate to http://localhost:4200/. You'll see the default Angular welcome page! šŸŽ‰

Exploring the Project

The my-first-angular-app directory contains your Angular project. The main components are:

  • src: the source code of the application
  • src/app: the application's main folder
  • src/app/app.module.ts: the main module of the application
  • src/app/app.component.ts: the main component of the application

Understanding the Development Server

When you run ng serve, the development server starts, and it:

  1. Compiles your TypeScript code into JavaScript
  2. Bundles your JavaScript, CSS, and assets into a single package
  3. Serves the packaged files in a way that allows real-time updates as you code
  4. Automatically rebuilds the project whenever you save a file

Real-World Example šŸ’”

Let's create a simple component that displays a greeting:

  1. Run ng generate component greeting to create a new component
  2. Open src/app/greeting/greeting.component.ts and update it like this:
typescript
import { Component } from '@angular/core'; @Component({ selector: 'app-greeting', template: ` <h1>Hello, Angular!</h1> ` }) export class GreetingComponent { }
  1. Open src/app/app.module.ts and add the new component to the declarations array:
typescript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { GreetingComponent } from './greeting/greeting.component'; @NgModule({ declarations: [ AppComponent, GreetingComponent ], imports: [ BrowserModule ], bootstrap: [AppComponent] }) export class AppModule { }
  1. Open src/app/app.component.html and add the new component to the template:
html
<h1>Welcome to {{ title }}!</h1> <app-greeting></app-greeting>
  1. Save all the files and watch your browser update automatically! šŸš€

Summary

In this lesson, you learned about ng serve, how to create an Angular project, and how to run the development server. You also got hands-on experience with creating a simple component and updating the project in real-time.

Now that you have a basic understanding of Angular, you're ready to dive deeper into more complex topics!

Quick Quiz
Question 1 of 1

Which command starts an Angular development server?

šŸ“ Note: Remember, the ng serve command is used primarily for development purposes. For production, you'd use ng build.

Stay tuned for more Angular lessons! šŸŒŸ