Getting Started with Angular: Setup and First Project Guide

Introduction to Angular

Angular, previously known as AngularJS, is a powerful JavaScript framework used for building modern single-page applications (SPAs) for web, mobile, and desktop platforms. Developed and maintained by Google, Angular is known for its efficiency, scalability, and ease of use. It is written in TypeScript and provides a robust set of tools and features for developing large-scale applications.

Prerequisites

To set up Angular on your local machine, ensure you have the following:

• Node.js: Angular requires Node.js version 8.x or 10.x. Check your version by running node -v in a terminal. Download it from nodejs.org.
• npm (Node Package Manager): The npm client is installed with Node.js by default. Verify it by running npm -v.

Install the Angular CLI

Angular CLI (Command Line Interface) is a tool for creating Angular projects, generating application and library code, and performing various development tasks. Install it globally using npm:

npm install -g @angular/cli

Create a Workspace and Initial Application

Develop your apps in the context of an Angular workspace, which contains the files for one or more projects. To create a new workspace and initial app project, run:

ng new my-app

The ng new command will prompt you for information about features to include in the initial app project. Accept defaults by pressing Enter/Return through the prompts. The CLI installs the necessary Angular npm packages and dependencies, and creates the following files:

• A new workspace with a root folder named my-app
• An initial skeleton app project in the src subfolder
• An end-to-end test project in the e2e subfolder
• Related configuration files.

Serve the Application

Angular includes a server to build and serve your app locally. To launch the server, navigate to the workspace folder (my-app) and run:

cd my-app
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as changes are made. The --open option opens your browser to http://localhost:4200, displaying a welcome message.

Edit Your First Angular Component

Components are the fundamental building blocks of Angular applications. The initial app includes a root component named app-root. To edit this component, open ./src/app/app.component.ts and change the title property:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Ogbonna Vitalis Welcome to Angular';
}

The browser reloads with the revised title. To style the component, open ./src/app/app.component.css and add:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

Common Angular CLI Commands

Here are some commonly used Angular CLI commands:

• ng generate component component-name: Generates a new component.
• ng generate service service-name: Generates a new service.
• ng build: Compiles the application into an output directory.
• ng test: Runs unit tests.
• ng e2e: Runs end-to-end tests.

Project Structure Explanation

An Angular project typically includes the following:

• src: Source files for the project.
• app: Contains the main application files.
• assets: Static assets like images and styles.
• environments: Configuration files for different environments.

Common Errors and Troubleshooting

• Node.js Version Issues: Ensure you have a compatible version of Node.js installed.
• Permission Errors: Use sudo (Linux/Mac) or run as Administrator (Windows) for permission issues.
• Network Issues: Check your internet connection if npm packages fail to install.

Congratulations on setting up your first Angular application! In the next tutorial, we will explore the Angular file structure in detail.